<template>
  <el-cascader
    v-model="node.id"
    :options="ifOptions"
    :show-all-levels="false"
    :props="{
      value: 'id',
      label: 'name',
      children: 'children',
    }"
    ref="checked"
    @focus="loadIfOption"
    @change="changeValue"
  ></el-cascader>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { Prop, Watch } from "vue-property-decorator";
import { ifValue, process } from "@/model/Process";
import attributeOptions from "./plugins/attribute";
import processOptions from "./plugins/process";
import calcOptions from "./plugins/calc";
import { ifType } from "@/enums/process";
@Options({})
export default class ifOption extends Vue {
  @Prop({
    default: new ifValue(),
    type: ifValue,
  })
  public node!: IIf;
  // @Prop({
  //   default: new process(),
  //   type: process,
  // })
  // public root!: IProcess;
  // @Watch("root", { immediate: true, deep: true })
  // onRootChange() {
  //   // debugger;
  //   this.loadIfOption();
  // }
  public ifValue = "";
  public ifOptions = new Array<any>();
  private attrOption = new attributeOptions();
  private calcOption = new calcOptions();
  private procOption = new processOptions();
  created() {
    // this.getIfValue();
    this.loadIfOption();
  }
  // public getIfValue() {
  //   // let container = this.swtionProcess.findProcessNode(this.node.id) as conditionContainer;
  //   // debugger;
  //   this.ifValue = this.node.id;
  // }
  public changeValue(value: Array<any>) {
    this.node.id = value[value.length - 1];
    this.node.type = value[0];
    this.node.label = (this.$refs["checked"] as any).getCheckedNodes()[0].label;
  }
  public loadIfOption() {
    // console.log(this.attrOption.loadAttributeValueOption())
    this.ifOptions = [
      {
        id: ifType.attributeValue,
        name: ifType[ifType.attributeValue],
        children: this.attrOption.loadAttributeValueOption(),
      },
      {
        id: ifType.calc,
        name: ifType[ifType.calc],
        children: this.calcOption.loadCalcOption(),
      },
      {
        id: ifType.process,
        name: ifType[ifType.process],
        children: this.procOption.loadProcessOption(),
      },
    ];
  }
}
</script>