<!-- 新增/修改 分类 -->
<template>
  <el-dialog
    :title="title"
    v-model:visible="dialogVisible"
    width="568px"
    :close-on-click-modal="false"
    append-to-body
    @close="handleClose"
  >
    <el-input v-model="tableName" clearable placeholder="请输入内容" style="margin-bottom: 20px" />
    <!-- <ex-table
      :table-config="tableConfig"
    /> -->
    <template v-slot:footer>
      <div>
        <el-button type="primary" @click="submit"> 保存</el-button>
        <el-button @click="handleClose"> 取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      title: '选择数据表',
      tableName: '',
      dialogVisible: false,
      tableConfig: {
        data: [],
        index: false,
        maxHeight: '400px',
        btns: [
          {
            text: '关联该数据表',
            methods: (row) => {
              this.toDeal(row)
            }
          }
        ],
        columns: [
          {
            label: '数据表英文名称',
            prop: 'tableName'
          },
          {
            label: '数据表中文名称',
            prop: 'tableDesc'
          }
          // {
          //   label: '关联状态',
          //   prop: 'status',
          //   render () {
          //     return {
          //       default: ({ row }) => {
          //         return row.status ? '已关联' : '未关联'
          //       }
          //     }
          //   }
          // }
        ]
      }
    }
  },
  watch: {
    visible(visible) {
      this.dialogVisible = visible
      visible && this.loadData()
    },
    dialogVisible(visible) {
      this.$emit('update:visible', visible)
    },
    value: {
      handler(val) {
        this.tableName = val
      },
      immediate: true
    }
  },
  methods: {
    async loadData() {
      const { data, success } = await getDataTableListAll()
      if (success) this.tableConfig.data = data
    },
    toDeal(row) {
      this.tableName = row.tableName
    },
    handleClose() {
      this.dialogVisible = false
      // 这里可以写重置的操作
      // this.tableName = ''
    },
    submit() {
      this.$emit('save', this.tableName)
      this.handleClose()
    }
  }
}
</script>
