<template>
  <div class="uni-flex">
    <mg-table row-key="title" ref="tableRef" :column="options.col" :searchConfig="options.searchConfig" :api="options.api" :params="options.params" :prop="options.prop">
      <el-button slot="searchBtns" @click="handleAdd()">新增</el-button>
      <div slot-scope="scope">
        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
        <el-popconfirm title="确定删除这个自定义组件吗？  注意：删除操作不可撤销！" @confirm="handleDelete(scope.row)">
          <el-button class="c999 ml10" size="mini" type="text" icon="el-icon-delete" slot="reference">删除</el-button>
        </el-popconfirm>
      </div>
    </mg-table>
    <edit :form-data="formdata" :visible.sync="editVisible" />
  </div>
</template>

<script>
import { getList, deleteSuiteComp } from '../../api/suite.js'
import edit from './edit.vue'

export default {
  props: {},
  components: { edit },
  data() {
    return {
      editVisible: false,
      formdata: {},
      options: {
        col: [
          {
            label: '组件名称',
            prop: 'name'
          }
        ],
        searchConfig: [
          {
            type: 'input',
            label: '组件名称',
            prop: 'name'
          }
        ],
        api: getList,
        params: {
          status: 1
        },
        prop: ''
      }
    }
  },
  computed: {},
  watch: {
    editVisible(bool) {
      if (!bool) {
        this.handleGetList()
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleAdd() {
      this.formdata = {}
      this.editVisible = true
    },
    handleUpdate(column) {
      this.formdata = { ...column }
      this.editVisible = true
    },
    handleDelete(column) {
      deleteSuiteComp({ ids: column.id }).then(() => {
        this.handleGetList()
      })
    },
    handleGetList() {
      this.$refs.tableRef.fetch()
    }
  }
}
</script>

<style lang='less'>
</style>