<template>
  <div class="pane-wrap right-detail-toolbar">
    <el-toolbar>
      <el-button :disabled="!modelId" @click="addColumnClickHandler" priv="Platform.Metadata.Save">
        <i class="fa fa-plus"></i>添加字段</el-button>
      <!-- <el-button v-if="false" :disabled="selectedRows.length === 0" @click="deleteColumnClickHandler">
        <i class="fa fa-remove"></i>删除字段</el-button> -->
    </el-toolbar>
    <div>
      <el-table :data="columns" tooltip-effect="dark" style="width: 100%" v-loading="dataLoading" @selection-change="onSelectionChange">
        <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
        <el-table-column prop="code" label="代码"></el-table-column>
        <el-table-column prop="name" label="名称">
          <template slot-scope="scope">
            <el-button type="text" class="table-title-button" :title="scope.row.name" priv="Platform.Metadata.Save" @click.stop="editColumnClickHandler(scope.row)">{{scope.row.name}}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="dataType" label="数据类型"  ></el-table-column>
        <el-table-column prop="controlType" label="控件类型"  ></el-table-column>
        <el-table-column label="必填" align="center" width="100">
          <template slot-scope="scope">
            <i class="fa fa-check icon-success f18" v-if="scope.row.mandatoryFlag === 'Y'"></i>
            <i class="fa fa-times icon-danger f18" v-else></i>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" align="right">
          <template slot-scope="scope">
            <el-button @click.stop="editColumnClickHandler(scope.row)" priv="Platform.Metadata.Save" type="text" title="修改字段">
              <i class="fa fa-edit f16"></i></el-button>
            <el-button @click.stop="deleteColumnClickHandler(scope.row)" priv="Platform.Metadata.Save" type="text" title="删除字段">
              <i class="fa fa-times f16"></i></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>
<script>
import util from '@src/common/util.js'
export default {
  props: { modelId: [String, Number], tabName: String, show: Boolean },
  data() {
    return {
      dataLoading: false,
      selectedRows: [], //  分组选中行
      columns: [] //  表格填充数据
    }
  },
  mounted() {
    this.loadColumnList()
  },
  methods: {
    // 添加字段
    addColumnClickHandler() {
      let path = `${this.$route.path}/new`.replace(/\/\//g, '/')
      this.$router.push(path)
    },
    // 修改字段
    editColumnClickHandler(row) {
      if (!row.code) {
        util.showErrorMessageBox('数据异常，请重新尝试！')
        return
      }
      let path = `${this.$route.path}/${row.code}`.replace(/\/\//g, '/')
      this.$router.push(path)
    },
    // 删除字段
    async deleteColumnClickHandler(row) {
      let ids = row && row.code ? [row.code] : util.getSelectedIDs(this.selectedRows)
      if (!ids || !ids.length) {
        return
      }
      try {
        await this.$confirm('确定删除吗，删除后无法恢复。是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        let res = await axios.delete(`/ui/metamodels/${this.modelId}/columns/${ids.join()}`)
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          this.columns = this.columns.filter(val => !ids.includes(val.code))
          this.selectedRows = []
        }
      } catch (e) {

      }
    },
    onSelectionChange(selection) {
      this.selectedRows = selection
    },
    async loadColumnList() {
      this.dataLoading = true
      let res
      try {
        res = await axios.get(`/ui/metamodels/${this.modelId}/columns`)
      } catch (e) {
        this.dataLoading = false
        return
      }
      this.dataLoading = false
      this.columns = res.data.data && res.data.data.length ? res.data.data : []
    }
  }
}
</script>
