<template>
    <a-row type="flex" align="top">
        <a-col :span="23">
          <a-spin :spinning="spinning">
            <a-button class="openAddRelationSty" @click="openModel()">新增关系类属性</a-button>
              <a-table :pagination="false" size="middle" rowKey="attrClsID" :columns="columns" :dataSource="data"
                     bordered>
                <template v-for="col in ['attrClsName','attrUnit','attrClsMemo']" :slot="col"
                          slot-scope="text, record">
                    <div :key="col">
                        <a-input
                                v-if="record.editable"
                                style="margin: -5px 0"
                                :value="text"
                                @change="e => handleChange(e.target.value, record.attrClsID, col)"
                        />
                        <template v-else>
                            <div :title="text">{{text | ellipsis(10)}}</div>
                        </template>
                    </div>
                </template>
                <template slot="attrValueType" slot-scope="text, record">
                    <a-select v-if="record.editable" style="width:100%"
                              v-model="text"
                              @change="e => handleChange(text, record.attrClsID, 'attrValueType')">
                        <a-select-option :value="key" v-for="(value,key) in attrClsType" :key="key">{{value}}
                        </a-select-option>
                    </a-select>
                    <template v-else>
                        <div>{{attrClsType[text]}}</div>
                    </template>
                </template>
                <template slot="operation" slot-scope="text, record">
                  <div class='editable-row-operations' style="width:120px;">
                    <span v-if="record.editable">
                      <a @click="() => save(record,record.attrClsID)">保存</a>
                      <!-- <a-popconfirm title='确定取消?' @confirm="() => cancel(record.attrClsID)"> -->
                      <a @click="() => cancel(record.attrClsID)" class="cancel-sty">取消</a>
                      <!-- </a-popconfirm> -->
                    </span>
                    <span v-else>
                      <a-button size="small"><a @click="() => edit(record.attrClsID)">编辑</a></a-button>
                        <a-popconfirm title="删除关系属性？" @confirm="deleteAttr(record.attrClsID)" @cancel="deleteCancel" okText="确定"
                                      cancelText="取消">
                                <a-button size="small" class="cancel-sty"><a>删除</a></a-button>
                        </a-popconfirm>
                    </span>
                  </div>
                </template>
              </a-table>
            </a-spin>
        </a-col>
    </a-row>
</template>

<script>
  import { getRelationAttr, delRelationAttr, updateRelationClassAttr } from "@/api/graph/relationEditor"
  const data = []
  const columns = [
    {
      title: '属性名称',
      dataIndex: 'attrClsName',
      width: '20%',
      align: 'center',
      scopedSlots: {customRender: 'attrClsName'}

    }, {
      title: '属性单位',
      dataIndex: 'attrUnit',
      width: '20%',
      align: 'center',
      scopedSlots: {customRender: 'attrUnit'}
    }, {
      title: '数据类型',
      dataIndex: 'attrValueType',
      width: '20%',
      align: 'center',
      scopedSlots: {customRender: 'attrValueType'}
    }, {
      title: '属性描述',
      dataIndex: 'attrClsMemo',
      width: '30%',
      align: 'center',
      scopedSlots: {customRender: 'attrClsMemo'}
    }, {
      title: '操作',
      dataIndex: 'operation',
      // width: '30%',
      // width: '130px',
      align: 'center',
      scopedSlots: {customRender: 'operation'}
    }
  ]
  export default {
    name: 'relationAttrEditor',
    data () {
      this.cacheData = data.map(item => ({...item}))
      return {
        attrClsType: this.$const.attrClsType,
        id: null,
        data,
        columns,
        spinning:false
      }
    },
    created () {
      this.id = this.$route.params.relationId
      this.getRelationAttr()
    },
    methods: {
      getRelationAttr () {
        var _vm = this
        _vm.spinning=true
        getRelationAttr(_vm.id).then((resp) => {
          _vm.spinning=false;
          this.data = resp.data || []
        })
      },
      //操作打开实体类的模态框
      openModel () {
        this.$open('addRelationAttrModal', {
          //模态框的传参
          param: this.id,
          type: this.type
        }, function (data) {
          if (data) {
            if (data !== false) {
              this.getRelationAttr()
            }
          }
        })
      },
      //点击编辑调用编辑函数
      edit (key) {
        const newData = [...this.data]
        this.cacheData = newData.map(item => ({...item}))
        var target = newData.filter(item => key === item.attrClsID)[0]
        //表格关闭编辑的显示区
        if (target) {
          target.editable = true
          this.data = newData
        }
      },
      //表格操作调用（修改后的值，修改row的id，修改内容的对应col）
      handleChange (value, id, column) {
        //获取修改后的整个数组对象
        const newData = [...this.data]
        //通过返回的id获取修改后的这一列的对象
        var target = newData.filter(item => id === item.attrClsID)[0]
        //如果修改成功，更新data的数组对象
        if (target) {
          target[column] = value
          this.data = newData
        }
      },
      deleteCancel (e) {
      },
      //调用编辑之后产生的保存响应，处理保存函数
      save (key, id) {
        const newData = [...this.data]
        //通过type来接受获取的参数
        var data = {
          attrClsID: key.attrClsID,
          attrClsName: key.attrClsName,
          attrUnit: key.attrUnit,
          attrClsMemo: key.attrClsMemo,
          desc: key.desc,
          id: this.id,
          valueType: key.attrValueType
        }
        if (data.attrClsMemo === '') {
          data.attrClsMemo = ''
        }
        data.attrClsName = (data.attrClsName || '').trim()
        data.attrUnit = (data.attrUnit || '').trim()
        data.attrClsMemo = (data.attrClsMemo || '').trim()
        if (data.attrClsName == '') {
          this.$message.error('属性名不能为空')
        } else {
          var target = newData.filter(item => id === item.attrClsID)[0]
          updateRelationClassAttr(data).then((result) => {
            if (result !== false) {
              this.getRelationAttr()
              if (result && target) {
                delete target.editable
                this.data = newData
                this.cacheData = newData.map(item => ({...item}))
              }
            }
          })
        }
      },
      //删除选中的属性类
      deleteAttr (id) {
        delRelationAttr(id).then((result) => {
          this.getRelationAttr()
        })
      },
      //调用编辑之后产生的取消响应，处理取消函数
      cancel (key) {
        //获取修改后的整个数组对象
        const newData = [...this.data]
        //通过返回的id获取修改后的这一列的对象
        var target = newData.filter(item => key === item.attrClsID)[0]
        if (target) {
          //如果有输入框存在修改内容，对修改内容销毁，关闭修改页面
          Object.assign(target, this.cacheData.filter(item => key === item.attrClsID)[0])
          delete target.editable
          this.data = newData
        }
      }
    }
  }
</script>

<style scoped>

</style>
