<template>
  <el-drawer
    :title="title"
    :visible.sync="_propertiesDrawer"
    direction="rtl"
    @open="init"
  >
    <div style="padding: 10px">
      <el-table
        ref="propertiesRef"
        :data="properties"
        border
        fit
        highlight-current-row
        @row-click="editProperty"
      >
        <el-table-column prop="name" label="名称" align="center" />
        <el-table-column prop="value" label="值" align="center" />
        <el-table-column label="操作" align="center">
          <template slot-scope="{ row }">
            <el-button
              icon="el-icon-delete"
              @click.native.stop="deleteProperty(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="showForm">
        <el-divider></el-divider>
        <el-form :model="property" label-width="80px">
          <el-form-item label="名称">
            <el-input v-model="property.name" />
          </el-form-item>
          <el-form-item label="值" prop="value">
            <el-input v-model="property.value" />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div style="text-align: right; padding: 10px">
      <el-button icon="el-icon-plus" type="primary" @click="addProperty"
        >添加</el-button
      >
      <el-button icon="el-icon-close" @click="_propertiesDrawer = false"
        >取消</el-button
      >
      <el-button icon="el-icon-check" type="primary" @click="save"
        >确定</el-button
      >
    </div>
  </el-drawer>
</template>

<script>
  import mixinPanel from '../mixins/mixinPanel';
  import { randomString } from '@/utils/util';

  export default {
    props: {
      propertiesDrawer: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: ''
      }
    },
    mixins: [mixinPanel],
    computed: {
      _propertiesDrawer: {
        get() {
          return this.propertiesDrawer;
        },
        set(v) {
          // this.init()
          this.$emit('changePropertiesDrawer', v);
        }
      }
    },
    data() {
      return {
        properties: [],
        property: {
          id: '',
          name: '',
          value: ''
        },
        showForm: false
      };
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        this.showForm = false;
        this.property = {
          id: '',
          name: '',
          value: ''
        };
        this.properties =
          this.element.businessObject.extensionElements?.values
            .filter(
              (item) => item.$type === this.descriptorPrefix + 'Properties'
            )
            .shift()
            ?.values?.map((property) => {
              return {
                name: property.name,
                value: property.value
              };
            }) ?? [];
      },
      addProperty() {
        this.showForm = true;
        let val = {
          id: randomString(),
          name: '',
          value: ''
        };
        this.properties.push(val);
        this.property = val;
        this.$refs['propertiesRef'].setCurrentRow(val, true);
      },
      deleteProperty(row) {
        let index = this.properties.indexOf(row);
        this.properties.splice(index, 1);
        this.showForm = false;
      },
      editProperty(row) {
        this.showForm = true;
        this.property = row;
      },
      save() {
        let extensionElements =
          this.element.businessObject.get('extensionElements');
        if (!extensionElements) {
          extensionElements = this.modeler
            .get('moddle')
            .create('bpmn:ExtensionElements');
        }
        extensionElements.values =
          extensionElements.values?.filter(
            (item) => item.$type !== this.descriptorPrefix + 'Properties'
          ) ?? [];
        if (this.properties?.length > 0) {
          const propertiesElement = this.modeler
            .get('moddle')
            .create(this.descriptorPrefix + 'Properties');
          this.properties.forEach((item) => {
            const propertyElement = this.modeler
              .get('moddle')
              .create(this.descriptorPrefix + 'Property');
            propertyElement['name'] = item.name;
            propertyElement['value'] = item.value;
            propertiesElement.get('values').push(propertyElement);
          });
          extensionElements.get('values').push(propertiesElement);
        }

        this.updateProperties({
          extensionElements:
            extensionElements.get('values')?.length == 0
              ? undefined
              : extensionElements
        });
        this._propertiesDrawer = false;
        this.$emit('saveProperties', this.properties?.length);
      }
    }
  };
</script>

<style>
  .el-badge__content.is-fixed {
    top: 12px;
  }
</style>
