<template>
  <div>
    <el-cascader
      v-model="node.id"
      :options="valueOptions"
      :show-all-levels="false"
      :props="{
        value: 'id',
        label: 'name',
        children: 'children',
      }"
      ref="checked"
      @focus="loadValueOption"
      @change="changeValue"
    ></el-cascader>
    <el-input
      v-show="node.id == valueType.text"
      v-model="node.label"
      placeholder="Please input"
    />
  </div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { Prop, Watch } from "vue-property-decorator";
import { valueValue, process } from "@/model/Process";
import { valueType } from "@/enums/process";
import attributeOptions from "./plugins/attribute";
import processOptions from "./plugins/process";
import calcOptions from "./plugins/calc";
@Options({})
export default class valueOption extends Vue {
  @Prop({
    default: new valueValue(),
    type: valueValue,
  })
  public node!: IValue;
  // @Prop({
  //   default: new process(),
  //   type: process,
  // })
  // public root!: IProcess;
  // @Watch("root", { immediate: true, deep: true })
  // onRootChange() {
  //   // debugger;
  //   this.loadValueOption();
  // }
  public valueType = valueType;
  public valueOptions = new Array<any>();
  private attrOptions = new attributeOptions();
  private calcOption = new calcOptions();
  private procOptions = new processOptions();
  created() {
    // this.getValueValue();
    this.loadValueOption();
  }
  // public getValueValue() {
  //   // let judge = this.swtionProcess.findProcessNode(this.node.id) as IJudge;
  //   this.valueValue = this.node.label + this.node.id;
  // }
  public changeValue(value: Array<any>) {
    this.node.id = value[value.length - 1];
    this.node.type = value[0];
    switch (this.node.type) {
      case valueType.text:
        break;
      default:
        this.node.label = (
          this.$refs["checked"] as any
        ).getCheckedNodes()[0].label;
        break;
    }
  }
  public loadValueOption() {
    this.valueOptions = [
      {
        id: valueType.attributeValue,
        name: valueType[valueType.attributeValue],
        children: this.attrOptions.loadAttributeValueOption(),
      },
      {
        id: valueType.attribute,
        name: valueType[valueType.attribute],
        children: this.attrOptions.loadAttributeOption(),
      },
      {
        id: valueType.calc,
        name: valueType[valueType.calc],
        children: this.calcOption.loadCalcOption(),
      },
      {
        id: valueType.process,
        name: valueType[valueType.process],
        children: this.procOptions.loadProcessOption(),
      },
      {
        id: valueType.text,
        name: valueType[valueType.text],
      },
    ];
  }
}
</script>