<template>
    <div class="flex-col">
        <div style="margin-bottom: 20px;" v-if="type === 'NONE' ">
            <a-button @click="addEntityAttrNone">新增属性</a-button>
        </div>
        <div ref="tableWrapper" class="flex1 flex-col">
            <a-table size="small"
                     rowKey="attrClsID"
                     bordered
                     :dataSource="dataSource"
                     :columns="columns"
                     :pagination="ispagination">
                <template slot="attrClsName" slot-scope="text, record">
                    <!--<span>{{text | ellipsis(10)}}</span>-->
                    <a-tooltip placement="right" v-if="record.attrClsMemo && type === 'CIDX'"
                               style="float:right;margin-top:5px">
                        <template slot="title">
                            <span>{{record.attrClsMemo}}</span>
                        </template>
                        <a-icon type="info-circle"/>
                    </a-tooltip>
                    <editable-name-cell :record="record" :text="record.attrClsName" :editable="record.edit"
                                        @change="onCellChangeName(record,'attrValue', $event)" v-if="type === 'NONE' "
                                        @close="closeCellName(record)"></editable-name-cell>
                    <span v-else>{{text | ellipsis(10)}}</span>
                </template>
                <template slot="attrValueType" slot-scope="text">
                    {{attrClsType[text]}}
                </template>
                <!--值范围-->
                <template slot="domain" slot-scope="text, record">
                    <!--{{text}}-->
                    <!--{{record}}-->
                    <div v-if="record.attrValueType === 'TEXT'">{{text | filterTest}}</div>
                    <div v-if="record.attrValueType === 'LONG' || record.attrValueType === 'DOUBLE'">
                        <span>{{text | filterMinValue}}</span>
                        <span>{{text | filterMaxValue}}</span>
                    </div>
                </template>
                <!--设置必填-->
                <template slot="isBT" slot-scope="text, record">
                    <a-checkbox disabled :defaultChecked="record.notNull"></a-checkbox>
                </template>
                <template slot="runScope" slot-scope="text, record">
                    <a-button @click="handlerRunFlow(record)">运行</a-button>
                </template>
                <template slot="delScope" slot-scope="text, record">
                    <a-button @click="handledelAttrClass(record)">删除</a-button>
                </template>
                <template class="flex1" slot="attrValue" slot-scope="text, record">
                    <!--{{record.entAttrValueVO.attrValue}}-->
                    <editable-cell :record="record" :text="record.entAttrValueVO?record.entAttrValueVO.attrValue:''"
                                   @change="onCellChange(record,'attrValue', $event)" :editable="record.edit"
                                   @close="closeCell(record)"></editable-cell>
                </template>
            </a-table>
        </div>
        <!--</div>-->
    </div>
</template>

<script>
  import EditableCell from '@/components/knowledge/editableCell'
  import EditableNameCell from '@/components/knowledge//editableNameCell'

  import { deleteAttrClassNone, updateAttrNoneName } from "@/api/graph/entity"
  import { runFlow, getEntNoneList, getEntityAttrById, updateEntityAttr } from "@/api/graph/entityAttrEditor"

  const columnDefine = {
    attrClsName: {
      rowClassName: 'name',
      title: '名称',
      dataIndex: 'attrClsName',
      width: '20%',
      align: 'center',
      scopedSlots: {customRender: 'attrClsName'}
    },
    attrValue: {
      title: '属性值',
      dataIndex: 'attrValue',
      width: '15%',
      scopedSlots: {customRender: 'attrValue'}
    },
    attrValueType: {
      title: '数据类型',
      dataIndex: 'attrValueType',
      width: '10%',
      align: 'center',
      scopedSlots: {customRender: 'attrValueType'}
    },
    attrUnit: {
      title: '单位',
      dataIndex: 'attrUnit',
      width: '20%',
      align: 'center',
      scopedSlots: {customRender: 'attrUnit'}
    },
    domain: {
      title: '值范围',
      dataIndex: 'domain',
      width: '20%',
      align: 'center',
      scopedSlots: {customRender: 'domain'}
    },
    isBT: {
      title: '是否必填',
      dataIndex: 'isBT',
      width: '10%',
      align: 'center',
      scopedSlots: {customRender: 'isBT'}
    },
    attrClsMemo: {
      title: '描述',
      dataIndex: 'attrClsMemo',
      width: '20%',
      align: 'center',
      scopedSlots: {customRender: 'attrClsMemo'}
    },
    delScope: {
      title: '操作',
      dataIndex: 'delScope',
      width: '20%',
      align: 'center',
      scopedSlots: {customRender: 'delScope'}
    },
    // 只给北方用 ， 先这么加，之后在全局配置
    runScope: {
      title: '操作',
      dataIndex: 'runScope',
      width: '20%',
      align: 'center',
      scopedSlots: {customRender: 'runScope'}
    }
  }
  const columnMap = {
    // 基本
    'ELEM': [
      columnDefine.attrClsName,
      columnDefine.attrValueType,
      columnDefine.domain,
      columnDefine.isBT,
      columnDefine.attrValue,
      columnDefine.attrUnit],
    // 无类型
    'NONE': [
      columnDefine.attrClsName,
      columnDefine.attrValueType,
      columnDefine.attrValue,
      columnDefine.attrUnit,
      columnDefine.attrClsMemo,
      columnDefine.delScope],
    // 能力
    'CIDX': [
      columnDefine.attrClsName,
      columnDefine.attrValueType,
      columnDefine.attrValue,
      columnDefine.attrUnit
    ],
    'MIME': [
      columnDefine.attrClsName,
      columnDefine.domain,
      columnDefine.isBT,
      columnDefine.attrValue,
      columnDefine.attrUnit
    ]
  }
  // // 判断是否是北方用，北方用显示测试按钮，否则不显示。
  // if (window.global.const.version === 'bf') {
  //   columnMap['CIDX'].push(columnDefine.runScope)
  // }
  export default {
    name: 'attrEditor',
    props: ['entId', 'clsId', 'tType', 'isModel'],
    components: {
      EditableCell,
      EditableNameCell,
    },
    filters: {
      filterTest(text) {
        if (!text) {
          return ''
        } else {
          return JSON.parse(text).domainKey
        }
      },
      filterMinValue(text) {
        if (!text) {
          return ''
        } else {
          return JSON.parse(text).minValue ? '最小值:' + JSON.parse(text).minValue : ''
        }
      },
      filterMaxValue(text) {
        if (!text) {
          return ''
        } else {
          return JSON.parse(text).maxValue ? '最大值:' + JSON.parse(text).maxValue : ''
        }
      }
    },
    data() {
      return {
        ispagination: false,  // 默认是不分页
        attrClsType: this.$const.attrClsType,
        tableHeight: {},
        entityId: null,
        type: null,
        dataSource: []
      }
    },
    destroyed() {
      window.onresize = undefined
    },
    mounted() {
      if (this.type === 'NONE') {
        this.ispagination = true
      }
      this.tableHeight = {y: (this.$refs.tableWrapper ? this.$refs.tableWrapper.offsetHeight : 30) - 30}
      var vm = this
      window.onresize = function () {
        vm.tableHeight = {y: (vm.$refs.tableWrapper ? vm.$refs.tableWrapper.offsetHeight : 30) - 30}
      }
    },
    created() {
      this.entityId = this.$route.params.entityId
      this.type = this.$route.meta.type
      this.entClsID = this.$route.params.classId
      if (typeof this.isModel !== 'undefined') { // 如果是模板的实体，把当前组件作为一个组件引用，而不是一个路由指向地址
        this.entityId = this.entId
        this.type = this.tType
        this.entClsID = this.clsId
      }
      this.getEntityAttr()
    },
    computed: {
      columns() {
        return columnMap[this.type]
      }
    },
    methods: {
      handledelAttrClass(record) {
        const attrClsID = record.attrClsID
        deleteAttrClassNone(attrClsID, this.isModel).then(res => {
          this.$message.success('属性类删除成功')
          // 刷新树节点
          var param = {}
          param.entClsID = this.entClsID
          this.$trigger('entityClassZtree:refreshTreeNode', param)
          this.getEntityAttr()
        })
      },
      // 新增待审属性
      addEntityAttrNone() {
        this.$open('addEntityNoneAttrModal', {
          entID: this.entityId,
          isModel: this.isModel
        }, function (res) {
          if (res) {
            // 刷新树节点
            var param = {}
            param.entClsID = this.entClsID
            this.$trigger('entityClassZtree:refreshTreeNode', param)
            this.getEntityAttr()
          }
        })
      },
      // 运行测试按钮
      handlerRunFlow(data) {
        const vm = this
        let attrClsId = data.attrClsID
        runFlow(this.entityId, attrClsId, this.isModel).then((data) => {
          vm.$message.success('计算流程启动成功')
          this.getEntityAttr()
        })
      },
      closeCellName(record) {
        record.edit.isEdit = false
      },
      closeCell(record) {
        record.edit.abled = false
        // this.getEntityAttr()
      },
      getEntityAttr() {
        const data = {
          attrType: this.type
        }
        const pagenum = 1
        const pagesize = 10
        if (this.type === 'NONE') {
          getEntNoneList(this.entityId, pagenum, pagesize, this.isModel).then(result => {
            const {entAttrVOList} = result
            entAttrVOList.forEach(function (item) {
              item.edit = {
                abled: false,
                isEdit: false
              }
            })
            this.dataSource = entAttrVOList
          })
        } else {
          getEntityAttrById(this.entityId, data, this.isModel).then((result) => {
            result.forEach(function (item) {
              item.edit = {
                abled: false,
                isEdit: false
              }
            })
            this.dataSource = result
          })
        }
      },

      /**
       * 列表更新
       * @param value
       */

      updateEntityAttr(value) {

      },
      onCellChangeName(target, data, value) {
        value = value.toString()
        var params = {
          attrClsName: value ? value.trim() : '',
          attrClsID: target.attrClsID,
          isModel: this.isModel
        }
        updateAttrNoneName(params).then(res => {
          if (res) {
            target.edit = {
              abled: false,
              isEdit: false
            }
            this.$message.success('属性名称修改成功')
            this.getEntityAttr()
          }
        })
      },
      onCellChange(target, data, value) {
        // const dataSource = [...this.dataSource]
        // var target = dataSource.find(item => item.attrID === key)
        // if (target) {
        //   target[data] = value
        //   // this.dataSource = dataSource
        // }
        value = value.toString()
        var params = {
          attrID: !target.entAttrValueVO ? '' : target.entAttrValueVO.attrID,
          attrMemo: !target.attrMemo ? '' : target.attrMemo,
          attrType: this.type,
          attrValue: value ? value.trim() : '',
          entID: this.entityId,
          attrClsID: target.attrClsID,
          isModel: this.isModel
        }
        // if (params.attrValue === '') {
        //   this.getEntityAttr()
        // } else {
        updateEntityAttr(params).then((result) => {
          if (result !== false) {
            target.edit = {
              abled: false,
              isEdit: false
            }
            this.getEntityAttr()
          }
        })
        // }
      }
    }
  }
</script>

<style>

    .editable-cell-icon {
        line-height: 18px;
        display: none;
    }

    .editable-cell-icon-check {
        line-height: 28px;
    }

    .editable-cell:hover .editable-cell-icon {
        display: inline-block;
    }

    .editable-cell-icon:hover,
    .editable-cell-icon-check:hover {
        color: #108ee9;
    }

    .editable-add-btn {
        margin-bottom: 8px;
    }

    .anticon {
        /*margin-top: -7px;*/
    }

    /*.anticon svg{*/
    /**/
    /*}*/
</style>
