<template>
  <div class="pane-wrap right-detail-toolbar">
    <el-toolbar>
      <el-button :disabled="!modelId" priv="ContentCore.ExtendModelMenu.Save" @click="addFieldClickHandler">
        <i class="fa fa-plus"></i>添加字段</el-button>
    </el-toolbar>
    <div>
      <el-table
        :data="fields"
        :data-read-url="getData"
        :auto-get-data="false"
        draggable
        ref="dataTable"
        >
        <el-table-column label="代码">
          <template slot-scope="scope">
            <el-button priv="ContentCore.ExtendModelMenu.Save" type="text" class="table-title-button" :title="scope.row.code" @click.stop="editFieldClickHandler(scope.row)">{{scope.row.code}}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="dataType" label="数据类型" width="120"></el-table-column>
        <el-table-column prop="controlType" label="控件类型" width="120"></el-table-column>
        <el-table-column label="必填" align="center" width="60">
          <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="200" align="right">
            <template slot-scope="scope">
              <el-button  type="text" @click.stop="sortColumn(scope.row.code,true)" v-show="scope.row.code!=orderInfo.max"
                priv="ContentCore.ExtendModelMenu.Save">
                <i class="fa fa-arrow-up"></i>上移</el-button>
              <el-button  type="text" @click.stop="sortColumn(scope.row.code,false)" v-show="scope.row.code!=orderInfo.min"
                priv="ContentCore.ExtendModelMenu.Save">
                <i class="fa fa-arrow-down"></i>下移</el-button>
              <el-button @click.stop="editFieldClickHandler(scope.row)" type="text" title="修改字段" priv="ContentCore.ExtendModelMenu.Save">
                <i class="fa fa-edit f16" aria-hidden="true"></i></el-button>
              <el-button @click.stop="deleteFieldClickHandler(scope.row)" type="text" title="删除字段" priv="ContentCore.ExtendModelMenu.Save">
                <i class="fa fa-times f16" aria-hidden="true"></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
  },
  data() {
    return {
      orderInfo: {},
      fields: []// 表格填充数据
    }
  },
  mounted() {
    this.loadFieldList()
  },
  methods: {
    async afterSort(data) {
      if (data.oldIndex === data.newIndex) {
        return
      }
      let ID = data.oldData[data.oldIndex].code
      let targetOrderFlag = data.oldData[data.newIndex].orderFlag
      let res = await axios.put(`/ui/contentextends/${this.modelId}/columns/${ID}/sort`, {targetOrderFlag})
      util.showResponseMessage(res.data)
    },
    // 添加字段
    addFieldClickHandler() {
      this.$router.push({path: `/settings/extendModel/${this.modelId}/field/new`})
    },

    // 修改字段
    editFieldClickHandler(row) {
      if (!row || !row.code) {
        util.showErrorMessageBox('数据异常，请重新尝试！')
        return
      }
      this.$router.push({path: `/settings/extendModel/${this.modelId}/field/${row.code}`})
    },

    // 删除字段
    async deleteFieldClickHandler(row) {
      let id = row.code
      if (!id) {
        return
      }
      try {
        await this.$confirm('确定删除吗，删除后无法恢复。是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        let res = await axios.delete(`/ui/contentextends/${this.modelId}/columns/${id}`)
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          this.loadFieldList()
        }
      } catch (e) {

      }
    },
    async sortColumn(code, isUp){
      try {
        let res
        if (isUp) {
          res = await axios.put(`/ui/contentextends/${this.modelId}/columns/${code}/sortup`)
        } else {
          res = await axios.put(`/ui/contentextends/${this.modelId}/columns/${code}/sortdown`)
        }
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          this.loadFieldList()
        }
      } catch (e) {

      }
    },
    getData() {
      return [
        `/ui/contentextends/${this.modelId}/columns`,
        {params: {}}
      ]
    },
    async loadOrderInfo(){
      let res = await axios.get(`/ui/contentextends/${this.modelId}/columns/orderinfo`)
      if (res.data.status === 1) {
        this.orderInfo = res.data.data
        console.log(this.orderInfo)
      }
    },
    loadFieldList() {
      this.$refs.dataTable.getData()
      this.loadOrderInfo()
    }
  }
}
</script>
