<template>
  <container-wrapper :designer="designer" :widget="widget" :parent-widget="parentWidget" :parent-list="parentList"
                     :index-of-parent-list="indexOfParentList">
    <div class="tree-container" :key="widget.id"
         :class="{'selected': selected}" @click.stop="selectWidget(widget)">
      <div class="tree-form">
        <el-input
          v-if="widget.options.filter"
          :key="0"
          :size="widget.options.size"
          :placeholder="i18nt('designer.setting.enterForQuery')"
          v-model="filterText"
          class="txt"
        >
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
      <div class="tree-btns" v-show="widget.options.selectClearAllNode && widget.options.showCheckBox || widget.options.expandRetractAllNode">
          <el-button
            v-if="widget.options.expandRetractAllNode"
            type="primary"
            plain
            :size="widget.options.size"
            @click="expandAllNodes()"
            class="btn"
          >
            {{ i18nt("designer.setting.expandRetractAllNode") }}
          </el-button>
          <el-button
            v-if="widget.options.selectClearAllNode && widget.options.showCheckBox"
            type="primary"
            plain
            :size="widget.options.size"
            @click="checkAllNodes()"
            class="btn"
          >
            {{ i18nt("designer.setting.selectClearAllNode") }}
          </el-button>
      </div>
      <el-tree
        :data="widget.options.treeData"
        :props="defaultProps"
        ref="tree"
        border
        :lazy="widget.options.lazy"
        node-key="id"
        highlight-current
        :current-node-key="currentKey"
        :show-checkbox="widget.options.showCheckBox"
        :expand-on-click-node="widget.options.expandOnClickNode"
        :default-expand-all="widget.options.defaultExpandAllNode"
        :draggable="widget.options.draggable"
        :check-strictly="widget.options.checkStrictly"
        :filter-node-method="filterNode"
        class="tree-list"
        icon-class="el-icon-arrow-down"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span>
            <el-button
              v-if="widget.options.nodeEdit"
              type="primary"
              link
              plain
              :size="widget.options.size"
              class="button-sty"
              icon="el-icon-plus"
            >
            {{ i18nt("designer.setting.add") }}
          </el-button>
          <el-button
            v-if="widget.options.nodeEdit"
            type="primary"
            link
            plain
            :size="widget.options.size"
            class="button-sty"
            icon="el-icon-delete"
          >
            {{ i18nt("designer.setting.delete") }}
          </el-button>
          </span>
        </span>
      </el-tree>
    </div>
  </container-wrapper>
</template>
<script>
import i18n from '../../../../../components/xform/utils/i18n';
import containerMixin from '../../../../../components/xform/form-designer/form-widget/container-widget/containerMixin';
import refMixinDesign from '../../../../../components/xform/form-designer/refMixinDesign';
import ContainerWrapper from "../../../../../components/xform/form-designer/form-widget/container-widget/container-wrapper"

export default {
  name: "TreeWidget",
  componentName: "ContainerWidget",
  mixins: [i18n, containerMixin, refMixinDesign],
  inject: ["refList"],
  components: {ContainerWrapper},
  props: {
    widget: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
  },
  computed: {
    selected() {
      return this.widget.id === this.designer.selectedId;
    },
    customClass() {
      return this.widget.options.customClass || "";
    },
  },
  data() {
    return {
      isExpanded: !0,
      isChecked: !1,
      currentKey: "",
      filterText: "",
      defaultProps: {children: "children", label: "label"},
    };
  },
  watch: {
    filterText(o) {
      this.$refs.tree.filter(o);
    },
  },
  created() {
    this.initRefList();
  },
  methods: {
    append(o) {
      this.$prompt(
        this.i18nt("designer.setting.inputNodeName"),
        this.i18nt("designer.setting.tips"),
        {
          confirmButtonText: this.i18nt(
            "designer.hint.confirm"
          ),
          cancelButtonText: this.i18nt(
            "designer.hint.cancel"
          ),
        }
      )
        .then(({value: e}) => {
          const n = {id: id++, label: e, children: []};
          o.children || (o.children = []), o.children.push(n);
        })
        .catch((e) => {
          console.error(e);
        });
    },
    remove(o, e) {
      this.$confirm(
        this.i18nt("designer.setting.deleteNode"),
        this.i18nt("designer.setting.tips"),
        {
          confirmButtonText: this.i18nt(
            "designer.hint.confirm"
          ),
          cancelButtonText: this.i18nt(
            "designer.hint.cancel"
          ),
          type: "warning",
        }
      )
        .then(() => {
          const n = o.parent,
            l = n.data.children || n.data,
            s = l.findIndex((c) => c.id === e.id);
          l.splice(s, 1),
            this.$message({
              type: "success",
              message: "\u5220\u9664\u6210\u529F!",
            });
        })
        .catch((n) => {
          console.error(n);
        });
    },
    filterNode(o, e) {
      return o ? e.label.indexOf(o) !== -1 : !0;
    },
    setNodeExpanded(o, e) {
      o.expanded = e;
      for (let n = 0; n < o.childNodes.length; n++)
        (o.childNodes[n].expanded = e),
        o.childNodes[n].childNodes.length > 0 &&
        this.setNodeExpanded(o.childNodes[n], e);
    },
    setNodeChecked(o, e) {
      o.checked = e;
      for (let n = 0; n < o.childNodes.length; n++)
        (o.childNodes[n].checked = e),
        o.childNodes[n].childNodes.length > 0 &&
        this.setNodeChecked(o.childNodes[n], e);
    },
    getNativeTree() {
      return this.$refs.tree;
    },
    setTreeData(o) {
      (this.widget.options.treeData = o),
        (this.currentKey = o[0].id);
    },
    getTreeData() {
      return this.widget.options.treeData;
    },
    expandAllNodes(o) {
      (this.isExpanded = o || !this.isExpanded),
        this.setNodeExpanded(
          this.$refs.tree.store.root,
          this.isExpanded
        );
    },
    checkAllNodes(o) {
      (this.isChecked = o || !this.isChecked),
        this.setNodeChecked(
          this.$refs.tree.store.root,
          this.isChecked
        );
    },
  },
}
</script>
<style scoped>
.tree-container {
  margin: 2px
}

.tree-container .form-widget-list {
  min-height: 28px
}

.tree-container.selected {
  outline: 2px solid #409eff !important
}
.custom-tree-node{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
