<template>
  <div class="container relative">
    <el-row>
      <el-col :span="4">
        <el-cascader
          v-model="assign.id"
          :options="attributeList"
          :show-all-levels="false"
          :props="{
            value: 'id',
            label: 'name',
            children: 'children',
          }"
          ref="checked"
          @focus="loadAttributeOption"
          @change="changeValue"
        ></el-cascader>
      </el-col>
      <el-col :span="4">
        <!-- {{ assign }} -->
        <el-select placeholder="Select" v-model="assign.method">
          <el-option
            v-for="item in assignMethodType"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <component
          :is="'sc-' + elementAttributeType[attributeType]"
          :attributeValue="assign"
        ></component>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { Prop } from "vue-property-decorator";
import { elementAttributeType } from "@/enums/attribute";
import attributeOptions from "@/components/process/editor/components/condition/control/plugins/attribute";
import { assignMethodType } from "@/enums/process";
import { assign } from "@/model/Process";
@Options({})
export default class list extends Vue {
  @Prop({
    default: new assign(),
    type: assign,
  })
  public assign!: IAssign;
  public elementAttributeType = elementAttributeType;
  public attributeType = "";
  public elementId = "";
  public checkData = new Array<any>();
  public attributeList = new Array();
  public assignMethodType = new Array<any>();
  created() {
    let _this = this as any;
    for (var v in assignMethodType) {
      if (typeof assignMethodType[v] === "number") {
        this.assignMethodType.push({
          id: <any>assignMethodType[v],
          name: _this.$lang[v],
        });
      }
    }
    this.loadAttributeOption();
  }
  public loadAttributeOption() {
    const attrOptions = new attributeOptions();
    this.attributeList = attrOptions.loadAttributeValueOption(false);
  }
  public changeValue(v: any) {
    let checked = (this.$refs["checked"] as any).getCheckedNodes()[0].data;
    this.attributeType = checked.type;
    this.assign.id = checked.id;
    this.assign.label = checked.name;
    this.assign.value = "";
    this.checkData = v;
  }
}
</script>
