<template>
  <div>
    <span>
      <el-cascader
        v-model="attributeValue.value"
        :options="attributeList"
        :show-all-levels="false"
        :props="{
          value: 'id',
          label: 'name',
          children: 'children',
        }"
        ref="checked"
        @focus="loadAttributeOption"
      ></el-cascader>
    </span>
  </div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { Prop } from "vue-property-decorator";
import { Attribute } from "@/model/Element";
import { AttributeValue } from "@/model/Attribute";
import SwtionElement from "@/plugins/element";
import SwtionAttribute from "@/plugins/attribute";
import attributeOptions from "@/components/process/editor/components/condition/control/plugins/attribute";
@Options({})
export default class scCheckbox extends Vue {
  @Prop({
    default: new AttributeValue(),
  })
  public attributeValue?: any;
  @Prop({
    default: "0",
    type: String,
  })
  public elementId!: string;
  @Prop({
    default: "self",
    type: String,
  })
  public type!: keyof Attribute;
  public attributeList = new Array();
  public swtionEle = new SwtionElement();
  public swtionAttr = new SwtionAttribute();
  created() {
    this.loadAttributeOption();
  }
  public loadAttributeOption() {
    // let swtionEle = new SwtionElement();
    const attrOptions = new attributeOptions();
    let node = this.swtionEle.findTreeNode(this.elementId);
    let attributeList = node.attribute[this.type];
    const ref = this.swtionAttr.findAttributeValueById(
      this.attributeValue ? this.attributeValue.id : "0",
      attributeList
    ).ref;
    let item = attrOptions.loadAttributeOption(ref.id)[0] as any;
    if (item.children) {
      this.attributeList = item.children;
    }
  }
}
</script>
