<template>
  <div class="menu_btns">
    <div class="filter-container">
      <el-button type="primary" class="filter-item" icon="el-icon-plus" @click="btn_add">添加</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;">
      <el-table-column prop="F_Sort" label="排序" align="center" width="80"/>
      <el-table-column prop="F_ButtonName" label="按钮名称" align="center"/>
      <el-table-column prop="F_ButtonCode" label="按钮编号" align="center"/>
      <el-table-column prop="F_UrlAddress" label="链接" align="center"/>
      <el-table-column label="是否启用" align="center" width="100">
        <template slot-scope="scope">
          <i v-if="scope.row.F_State === 1" class="el-icon-success target_color1"/>
          <i v-else-if="scope.row.F_State === 0" class="el-icon-warning target_color2"/>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" class-name="oparate_btn" align="center" width="200">
        <template slot-scope="scope">
          <el-button size="mini" plain type="primary" @click="btn_edit(scope.row.F_Id)">编辑</el-button>
          <el-button size="mini" plain type="danger" @click="btn_delete(scope.row.F_Id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getBtnList, deleteBtn } from '@/api/systemSetup/roleSetting/menuSetup'
import addOrEditBtn from './components/addOrEditBtn'

export default {
  name: 'MenuBtn',
  props: {
    rowid: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      listLoading: false,
      list: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      getBtnList(this.rowid).then(response => {
        this.listLoading = false
        this.list = response.rows
      })
    },

    btn_add() {
      this.$layer.iframe({
        content: {
          content: addOrEditBtn, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { 'rowid': '', 'moduleid': this.rowid }// props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
        },
        area: ['750px', '360px'], // 宽高
        shadeClose: true,
        title: '添加按钮'
      })
    },
    btn_edit(editId) {
      this.$layer.iframe({
        content: {
          content: addOrEditBtn, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { 'rowid': editId, 'moduleid': this.rowid }// props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
        },
        area: ['750px', '360px'], // 宽高
        shadeClose: true,
        title: '编辑按钮'
      })
    },
    btn_delete(editId) {
      this.$confirm('此操作将永久删除当前按钮, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteBtn(editId).then(response => {
          if (response.state.toLowerCase() === 'success') {
            this.getList()
            this.$message.success('删除成功!')
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.menu_btns{
		margin: 0;
		.target_color1 {
			color: #13ce66;
			font-size: 16px;
		}

		.target_color2 {
			color: #ff4949;
			font-size: 16px;
		}
	}
</style>
