<template>
  <div>
    <el-dialog title="选择字段（可以单选或多选，顺序由选择的先后顺序定）" @open="dialogOpen" @close="dialogClose" :visible.sync="isShow" append-to-body class="select-code-dialog">
      <el-table ref="dataTable" :data="codeData" :data-read-url="getData" :page-size="10" pagination-layout="->,prev, pager, next" tooltip-effect="dark" @selection-change="codeSelectionChange" strict>
        <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
        <el-table-column type="selection" width="50" align="center"></el-table-column>
        <el-table-column prop="code" label="字段名"></el-table-column>
      </el-table>
      <!-- 底部确认按钮 -->
      <div slot="footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="confirmCodeClick">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      codeData: [],
      selectedCodeRows: []
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    dialogOpen() {
      this.selectedCodeRows = []
      this.$nextTick(() => {
        this.getCodeData()
      })
    },
    getData() {
      return [
        '/ui/fromdb/columndatabind', {
          params: this.propsObject
        }
      ]
    },
    async getCodeData() {
      this.$refs.dataTable.getData()
    },
    codeSelectionChange(selection) {
      this.selectedCodeRows = selection
    },
    // 关闭选择字段弹框回调事件
    dialogClose() {
      this.$refs.dataTable.clearSelection()
    },
    // 选择字段弹框底部确认按钮
    confirmCodeClick() {
      if (this.selectedCodeRows.length < 1) {
        this.$alert('请至少先选择一条记录！！', '提示', {
          type: 'info'
        })
        return
      }
      let codes = []
      this.selectedCodeRows.forEach(row => {
        codes.push(row.code)
      })
      this.$emit('callback', codes)
      this.isShow = false
    }
  },
  props: ['show', 'propsObject']// propsObject 可包含'ID','copyID','databaseID','tableName','catalogID'属性
}
</script>

<style>
/* 在一般情况下dialog宽为400像素，在逻辑分辨率480像素以下dialog宽为96% */
.select-code-dialog .el-dialog {
  width: 400px;
}
@media (max-width: 480px) {
  .select-code-dialog .el-dialog {
    width: 90%;
  }
}
</style>
