<template>
  <div class="panel-tab__content">
    <a-table
      bordered
      style="width:100%;"
      size="small"
      :pagination="false"
      :columns="columns"
      :data-source="elementPropertyList"
    >
      <template slot="action" slot-scope="text, record,index">
        <a @click="openAttributesForm(record, index)">编辑</a>
        <a-divider type="vertical" />
        <a style="color: #ff4d4f" @click="removeAttributes(row, index)">移除</a>
      </template>
    </a-table>
    <!-- <el-table :data="elementPropertyList" size="small" max-height="240" border fit>
      <el-table-column label="序号" width="50px" type="index" />
      <el-table-column label="属性名" prop="name" min-width="100px" show-overflow-tooltip />
      <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />
      <el-table-column label="操作" width="90px">
        <template slot-scope="{ row, $index }">
          <a-button size="small" type="text" @click="openAttributesForm(row, $index)">编辑</a-button>
          <el-divider direction="vertical" />
          <a-button size="small" type="text" style="color: #ff4d4f" @click="removeAttributes(row, $index)">移除</a-button>
        </template>
      </el-table-column>
    </el-table> -->
    <div class="element-drawer__button">
      <a-button size="small" type="primary" block icon="plus" @click="openAttributesForm(null, -1)">添加属性</a-button>
    </div>

    <a-modal class="bpmn-design-modal" :visible.sync="propertyFormModelVisible" title="属性配置" width="600px" @cancel="() => this.propertyFormModelVisible = false" destroy-on-close>
      <a-form-model :model="listenerForm" :label-col="labelCol" :wrapper-col="wrapperCol" ref="attributeFormRef" @submit.native.prevent>
        <a-form-model-item label="属性名：" prop="name">
          <a-input v-model="propertyForm.name" clearable />
        </a-form-model-item>
        <a-form-model-item label="属性值：" prop="value">
          <a-input v-model="propertyForm.value" clearable />
        </a-form-model-item>
      </a-form-model>
      <template slot="footer">
        <a-button size="small" @click="propertyFormModelVisible = false">取 消</a-button>
        <a-button size="small" type="primary" @click="saveAttribute">确 定</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: 'ElementProperties',
  props: {
    id: String,
    type: String
  },
  inject: {
    prefix: 'prefix',
    width: 'width'
  },
  data() {
    return {
      elementPropertyList: [],
      propertyForm: {},
      editingPropertyIndex: -1,
      propertyFormModelVisible: false,
      columns: [
        { title: '#', dataIndex: 'rowIndex', width: 60, align: 'center', fixed: 'left',
          customRender: function(text, r, index) {
            return parseInt(index) + 1
          }
        },
        { title: '属性名', dataIndex: 'name', key: 'name' },
        { title: '属性值', dataIndex: 'value', key: 'value' },
        { title: '操作', dataIndex: 'action', width: 120, align: 'center', scopedSlots: { customRender: 'action' }}
      ],
      labelCol: { span: 6 },
      wrapperCol: { span: 17 }
    }
  },
  watch: {
    id: {
      immediate: true,
      handler(val) {
        val && val.length && this.resetAttributesList()
      }
    }
  },
  methods: {
    resetAttributesList() {
      this.bpmnElement = window.bpmnInstances.bpmnElement
      this.otherExtensionList = [] // 其他扩展配置
      this.bpmnElementProperties =
        this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => {
          if (ex.$type !== `${this.prefix}:Properties`) {
            this.otherExtensionList.push(ex)
          }
          return ex.$type === `${this.prefix}:Properties`
        }) ?? []

      // 保存所有的 扩展属性字段
      this.bpmnElementPropertyList = this.bpmnElementProperties.reduce((pre, current) => pre.concat(current.values), [])
      // 复制 显示
      this.elementPropertyList = JSON.parse(JSON.stringify(this.bpmnElementPropertyList ?? []))
    },
    openAttributesForm(attr, index) {
      this.editingPropertyIndex = index
      this.propertyForm = index === -1 ? {} : JSON.parse(JSON.stringify(attr))
      this.propertyFormModelVisible = true
      this.$nextTick(() => {
        if (this.$refs['attributeFormRef']) this.$refs['attributeFormRef'].clearValidate()
      })
    },
    removeAttributes(attr, index) {
      this.$confirm('确认移除该属性吗？', '提示', {
        confirmButtonText: '确 认',
        cancelButtonText: '取 消'
      })
        .then(() => {
          this.elementPropertyList.splice(index, 1)
          this.bpmnElementPropertyList.splice(index, 1)
          // 新建一个属性字段的保存列表
          const propertiesObject = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, {
            values: this.bpmnElementPropertyList
          })
          this.updateElementExtensions(propertiesObject)
          this.resetAttributesList()
        })
        .catch(() => console.info('操作取消'))
    },
    saveAttribute() {
      // 新建属性字段
      const newPropertyObject = window.bpmnInstances.moddle.create(`${this.prefix}:Property`, this.propertyForm)
      // 新建一个属性字段的保存列表
      const propertiesObject = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, {
        values: this.bpmnElementPropertyList.concat([newPropertyObject])
      })

      this.updateElementExtensions(propertiesObject)
      this.propertyFormModelVisible = false
      this.resetAttributesList()
    },
    updateElementExtensions(properties) {
      const extensions = window.bpmnInstances.moddle.create('bpmn:ExtensionElements', {
        values: this.otherExtensionList.concat([properties])
      })
      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
        extensionElements: extensions
      })
    }
  }
}
</script>
