<template>
  <div>
    <Card title="可编辑字段" :padding="0" shadow style="margin: 4px">
      <a slot="extra" @click="addAttr"> 修改 </a>
      <div style="padding: 8px">
        <Tag v-for="(item, i) in checkedList" :key="i" color="primary">
          {{ item.name }}
        </Tag>
        <Row type="flex" justify="center" v-if="checkedList.length === 0">
          <span style="color: #ccc">暂无数据</span>
        </Row>
      </div>
    </Card>
    <Modal
      v-model="showSelect"
      title="编辑可编辑字段"
      @on-ok="onOk"
      @on-cancel="onCancel"
      :z-index="1101"
      :width="800"
      :hight="600"
    >
      <Row>
        <Col span="12">
          <Input
            v-model="searchKey"
            search
            placeholder="字段"
            @on-search="onSearch"
          />
          <div style="max-height: 500px; overflow: scroll; height: 500px">
            <Tree :data="treeData" @on-select-change="onSelect"> </Tree>
          </div>
        </Col>
        <Col span="12">
          <div style="max-height: 500px; overflow: scroll; height: 500px">
            <Card>
              <Table :columns="columns" :data="selectedAttrs">
                <template slot-scope="{ index }" slot="required">
                  <Checkbox v-model="selectedAttrs[index].required"> </Checkbox>
                </template>
                <template slot-scope="{ index }" slot="action">
                  <Button type="error" size="small" @click="remove(index)">
                    删除
                  </Button>
                </template>
              </Table>
            </Card>
          </div>
        </Col>
      </Row>
    </Modal>
  </div>
</template>
<script>
import { Modal } from "view-design";
export default {
  data() {
    return {
      showSelect: false,
      checkedList: [],
      treeData: [],
      selectedAttrs: [],
      searchKey: "",
      columns: [
        {
          title: "字段",
          key: "name",
        },
        {
          title: "必填",
          slot: "required",
          align: "center",
        },
        {
          title: "操作",
          slot: "action",
          align: "center",
        },
      ],
    };
  },
  components: {
    Modal,
  },
  props: {
    currentNode: {
      type: Object,
      required: true,
    },
    workflow: {
      type: Object,
      required: true,
    },
  },
  mounted() {
    console.log("edit editable feilds");
    if (!this.currentNode.hasOwnProperty("properties")) {
      this.currentNode.properties = new Object();
    }
    if (!this.currentNode.properties.hasOwnProperty("editableAttr")) {
      this.currentNode.properties["editableAttr"] = new Array();
    }
    this.checkedList = this.currentNode.properties.editableAttr;
    this.treeData.push(this.trimSubtable(this.workflow.attr));
  },
  methods: {
    trimSubtable(datamodel) {
      var dataName = datamodel.name.replace("datamodel.", "");
      var node = {
        name: dataName,
        title: `${datamodel.title} [${dataName}]`,
        expand: true,
        children: [],
      };
      datamodel.attributes.forEach((e) => {
        if (e.category == "SUB") {
          var subNode = this.trimSubtable(e.type);
          node.children.push(subNode);
        } else {
          var childNode = {
            name: e.name,
            title: `${e.title} [${e.name}]`,
            value: `${dataName}.${e.name}`,
          };
          var keyword = this.searchKey.trim();
          if (keyword.length > 0) {
            if (childNode.value.search(keyword) != -1) {
              node.children.push(childNode);
            }
          } else node.children.push(childNode);
        }
      });
      return node;
    },
    filterMethod(data, query) {
      var flag1 = data.label.indexOf(query) > -1;
      var flag2 = data.description.indexOf(query) > -1;
      return flag1 || flag2;
    },
    onOk() {
      this.currentNode.properties.editableAttr = JSON.parse(
        JSON.stringify(this.selectedAttrs)
      );
      this.$emit("property-change", this.currentNode);
      this.checkedList = this.currentNode.properties.editableAttr;
      this.onCancel();
    },
    onCancel() {
      this.showSelect = false;
    },
    addAttr() {
      this.selectedAttrs = JSON.parse(JSON.stringify(this.checkedList));
      this.showSelect = true;
    },
    onSelect(selected, item) {
      if (
        item.hasOwnProperty("value") &&
        this.selectedAttrs.findIndex((e) => e.name == item.value) == -1
      ) {
        this.selectedAttrs.push({
          name: item.value,
          required: false,
        });
      } else {
        this.$Message.warning("该字段已被选择");
      }
    },
    remove(index) {
      this.selectedAttrs.splice(index, index + 1);
    },
    onSearch(value) {
      var keyword = value.trim();
      if (keyword.length > 0) {
        this.treeData = [this.trimSubtable(this.workflow.attr)];
      } else {
        this.$Message.warning("请输入有效的关键词");
      }
    },
  },
  watch: {
    currentNode: {
      deep: true,
      handler(newValue, oldValue) {
        if (!newValue.hasOwnProperty("properties")) {
          newValue.properties = new Object();
        }
        if (!newValue.properties.hasOwnProperty("editableAttr")) {
          newValue.properties["editableAttr"] = new Array();
        }
        this.checkedList = newValue.properties.editableAttr;
      },
    },
  },
};
</script>
<style>
.tablecell {
  height: 30px;
  display: table-cell;
  border: #e8e8e8 1px solid;
  vertical-align: middle;
  text-align: center;
}
</style>