<template>
  <div>
    <!-- <el-input
      v-model="nodeKey"
      placeholder="Filter keyword"
      default-expand-all
    /> -->
    <el-tree
      :data="treelist"
      node-key="id"
      :ref="treeName"
      :filter-node-method="filterNode"
    >
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <span>{{ data.name }}</span>
          <span>
            <el-button
              type="primary"
              size="mini"
              @click="showAttribute(data.id, node)"
              >{{ $lang.attribute }}</el-button
            >
          </span>
        </span>
      </template>
    </el-tree>
    <el-dialog v-model="attributeDialog" :destroy-on-close="true" width="80%">
      <template #title>
        <el-row>
          <el-col :span="12">{{ $lang.attribute }}</el-col>
          <el-col :span="12" class="align-r" v-if="currentNodeId !== '0'"
            ><el-popconfirm
              :title="$lang.deleteTips"
              @confirm="removeAttribute()"
              :confirm-button-text="$lang.confirm"
              :cancel-button-text="$lang.cancel"
              icon="el-icon-info"
              icon-color="red"
            >
              <template #reference>
                <el-button size="mini">{{ $lang.delete }}</el-button>
              </template>
            </el-popconfirm>
            <el-button size="mini" @click="closeDialog">{{
              $lang.close
            }}</el-button></el-col
          >
        </el-row>
      </template>
      <attribute :elementId="currentNodeId" @changeName="changeName"></attribute
    ></el-dialog>
  </div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { Watch, Prop } from "vue-property-decorator";
import { nodeType } from "@/enums/element";
import SwtionElement from "@/plugins/element";
import attribute from "@/components/attribute/attribute.vue";
import { CollectElement } from "@/model/Element";
@Options({
  components: { attribute },
})
export default class widget extends Vue {
  @Prop({
    default: new CollectElement(),
    type: CollectElement,
  })
  public element!: IBaseElement;
  public attributeDialog = false;
  public currentNodeId = "";
  public treelist = new Array<IBaseElement>();
  created() {
    if (this.element) {
      this.swtionEle.setTree(this.element);
    }
    this.treelist.push(this.swtionEle.initTree());
  }
  private swtionEle = new SwtionElement();
  public nodeType = nodeType;

  public treeName = "widgetTree";
  public nodeKey = "";
  @Watch("nodeKey")
  private(val: string) {
    let _this = this as any;
    _this.$refs[_this.treeName].filter(val);
  }
  private showAttribute(id: string) {
    // console.log(id);
    this.currentNodeId = id;
    this.attributeDialog = true;
  }
  private removeAttribute() {
    let _this = this as any;
    if (!this.swtionEle.removeTreeNode(this.currentNodeId, this.treelist[0])) {
      (<any>this).$notify({
        title: (this as any).$lang.error,
        message: (this as any).$lang.deleteUsedElement,
        type: "error",
      });
    } else {
      _this.$refs[_this.treeName].setCurrentKey("0");
      // let parentNode = _this.$refs[_this.treeName].getCurrentNode();
      // console.log(parentNode);
      // _this.$refs[_this.treeName].remove(data);
      _this.closeDialog();
    }
  }
  private closeDialog() {
    this.attributeDialog = false;
  }
  private addAttribute(type: nodeType) {
    let _this = this as any;
    let parentNode = _this.$refs[_this.treeName].getCurrentNode();
    if (parentNode === null || !this.swtionEle.findTreeNode(parentNode.id)) {
      _this.$refs[_this.treeName].setCurrentKey("0");
      parentNode = _this.$refs[_this.treeName].getCurrentNode();
    }
    this.swtionEle.addTreeNode(type, parentNode);
    // _this.$refs[_this.treeName].append(currentNode, parentNode);

    // this.treelist = [this.swtionEle.findTree()];
    // console.log(this.treelist);
  }
  private filterNode(value: any, data: any) {
    if (!value) return true;
    return data.name.indexOf(value) !== -1;
  }
  public changeName() {
    this.$emit("changeName");
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 100px;
  width: 200px;
  background-color: red;
}
</style>
