<style scoped>

</style>
<template>
  <div class="pane-wrap right-detail-toolbar">
    <el-toolbar>
      <el-button :disabled="!modelId" @click="addPkDataClickHandler" priv="Platform.Metadata.AddData">
        <i class="fa fa-plus"></i>添加数据</el-button>
    </el-toolbar>
    <div>
      <el-table
        :data-read-url="getData"
        :page-size="10"
        ref="table"
        :auto-get-data="false"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="onSelectionChange">
        <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
        <el-table-column label="PK值">
          <template slot-scope="scope">
            <el-button type="text" class="table-title-button" :title="scope.row.PKValue" priv="Platform.Metadata.EditData" @click.stop="editPkDataClickHandler(scope.row)">{{scope.row.PKValue}}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          v-for="field in fields"
          :key="field.code"
          :prop="field.code"
          :label="field.name">
          <template slot-scope="scope">
            {{scope.row.content[field.code]}}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="100" align="right">
          <template slot-scope="scope">
            <el-button @click.stop="editPkDataClickHandler(scope.row)" type="text" title="修改" priv="Platform.Metadata.EditData">
              <i class="fa fa-edit f16"></i></el-button>
            <el-button @click.stop="deletePkDataClickHandler(scope.row)" priv="Platform.Metadata.DeleteData" 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 {
      fields: [], //  字段数据
      selectedRows: [], //  选中行数据
      addOrEdit: {
        isShowModal: false,
        title: '',
        tmpPkData: {}
      }
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  mounted() {
  // console.log(this.$route)
  },
  methods: {
    // 添加或编辑弹框回调
    afterAddOrEdit() {
      this.loadPKData()
    },
    getData() {
      return [`/ui/metamodels/${this.$route.params.ID || this.modelId}/datas`, { params: {} }]
    },
    // 添加PKData
    addPkDataClickHandler() {
      let path = `${this.$route.path}/new`.replace(/\/\//g, '/')
      this.$router.push(path)
    },
    // 编辑PKData
    editPkDataClickHandler(row) {
      let path = `${this.$route.path}/${row.PKValue}`.replace(/\/\//g, '/')
      this.$router.push(path)
    },
    // 删除PKData
    async deletePkDataClickHandler(row) {
      let PKValues = row.PKValue ? [row.PKValue] : util.getSelectedIDs(this.selectedRows, 'PKValue')
      if (!PKValues || !PKValues.length) {
        return
      }
      try {
        await this.$confirm('确定删除吗，删除后无法恢复。是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        let res = await axios.delete(`/ui/metamodels/${this.$route.params.ID || this.modelId}/datas/${PKValues.join()}`)
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          this.loadPKData()
          this.selectedRows = []
        }
      } catch (e) {

      }
    },
    onSelectionChange(selection) {
      this.selectedRows = selection
    },
    // 加载PKData
    loadPKData() {
      this.$refs.table.getData()
    },
    async loadFieldList() {
      let res = await axios.get(`/ui/metamodels/${this.$route.params.ID || this.modelId}/columns`)
      this.fields = res.data.data && res.data.data.length ? res.data.data : []
    }
  },

  watch: {
    tabName(val) {
    // console.log(val)
      if (val === 'data') {
        this.loadPKData()
        this.loadFieldList()
      }
    }
  }
}
</script>
<style scoped>
.el-pagination__rightwrapper {
  float: right;
}
</style>
