<template>
  <div>
    <el-form
      ref="form"
      :rules="rule"
      :model="attributeForm"
      label-width="120px"
    >
      <el-form-item :label="$lang.name" prop="name">
        <el-input
          v-model="attributeForm.name"
          :placeholder="$lang.namePlaceHolder"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$lang.type">
        <el-select v-model="attributeForm.type" :placeholder="$lang.typePlaceHolder">
          <el-option
            :label="type.name"
            :value="type.id"
            :key="type.id"
            v-for="type in types"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div v-show="attributeForm.type === elementAttributeType.time">
      <timeProp
        ref="time"
        :prop="attributeForm.prop"
        :attributeValue="attributeForm"
      ></timeProp>
    </div>
    <div v-show="attributeForm.type === elementAttributeType.attribute">
      <el-form label-width="120px" :model="attributeForm" :rules="rule">
        <el-form-item :label="$lang.ref" prop="ref">
          <el-cascader
            v-model="attributeForm.ref.id"
            :options="attributeList"
            :show-all-levels="false"
            :props="{
              value: 'id',
              label: 'name',
              children: 'children',
              checkStrictly: true,
            }"
            ref="attributeChecked"
          ></el-cascader>
        </el-form-item>
      </el-form>
    </div>
    <div
      v-show="
        attributeForm.type === elementAttributeType.checkbox ||
        attributeForm.type === elementAttributeType.radio ||
        attributeForm.type === elementAttributeType.dropdown
      "
    >
      <optionProp
        ref="option"
        :elementId="elementId"
        :options="attributeForm.options"
      ></optionProp>
    </div>
    <span class="dialog-footer">
      <el-button @click="closeDialog()">{{$lang.cancel}}</el-button>
      <el-button type="primary" @click="saveAttribute">{{$lang.save}}</el-button>
    </span>
  </div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { Prop } from "vue-property-decorator";
import SwtionElement from "@/plugins/element";
import { AttributeValue } from "@/model/Attribute";
import { attributeType, elementAttributeType } from "@/enums/attribute";
import SwtionAttribute from "@/plugins/attribute";
import { CollectElement, NormalElement } from "@/model/Element";
import optionProp from "./uilibrary/props/option/list.vue";
import timeProp from "./uilibrary/props/time.vue";
import SwtionProcess from "@/plugins/process";
import attributeOptions from "@/components/process/editor/components/condition/control/plugins/attribute";
import NodeHelper from "@/common/nodeHelper";
@Options({ components: { timeProp, optionProp } })
export default class list extends Vue {
  @Prop({
    default: "0",
    type: String,
  })
  public elementId!: string;
  @Prop({
    default: "",
    type: String,
  })
  public id!: string;
  public initName = "";
  public types = new Array<any>();
  public elementAttributeType = elementAttributeType;
  public attributeForm = new AttributeValue();

  public swtionAttr = new SwtionAttribute();
  public attributeList = new Array();
  public attributeValueList = new Array();
  public swtionEle = new SwtionElement();
  private node = new NormalElement();
  public rule = AttributeValue.rules();

  created() {
    this.node = this.swtionEle.findTreeNode(this.elementId);
    this.attributeValueList = this.node.attribute.self;
    if (this.id !== "") {
      const attributeItem = this.swtionAttr.findAttributeValueById(
        this.id,
        this.attributeValueList
      );
      this.attributeForm = new AttributeValue(attributeItem);
      this.initName = this.attributeForm.name;
    }
    for (var v in elementAttributeType) {
      if (typeof elementAttributeType[v] === "number") {
        this.types.push({
          id: <any>elementAttributeType[v],
          name: v,
        });
      }
    }
    this.loadAttributeOption();
  }
  public loadAttributeOption() {
    const attrOptions = new attributeOptions();
    this.attributeList = attrOptions.loadAttributeOption();
  }
  public saveAttribute() {
    const _this = this as any;
    _this.$refs["form"].validate(async (valid: Boolean) => {
      if (valid) {
        _this.attributeForm.options = _this.$refs["option"].getOptions();
        const timeProp = _this.$refs["time"].getProp();
        if (timeProp) {
          _this.attributeForm.prop = timeProp;
        }
        if (this.attributeForm.type === elementAttributeType.attribute) {
          // let data = (
          //   this.$refs["attributeChecked"] as any
          // ).getCheckedNodes()[0].data;
          // for (let i = 0; i < data.attribute.self.length; i++) {
          //   let self = data.attribute.self[i] as IAttributeValue;
          //   let id = self.id;
          //   self = SwtionAttribute.clone(self);
          //   self.id =
          //     elementAttributeType.attribute.toString() +
          //     id.substring(1);
          //     data.attribute.self[i]=self;
          // }
          let ele = (
            this.$refs["attributeChecked"] as any
          ).getCheckedNodes()[0];
          if (!ele) {
            (this as any).$message({
              showClose: true,
              message: "请选择控件类型",
              type: "error",
            });
            return false;
          }
          let temp = ele.data as IBaseElement;
          let data = new CollectElement();
          data.name = temp.name;
          data.id = temp.id;
          data.type = temp.type;
          data.attribute.self = new Array<IAttributeValue>().concat(
            temp.attribute.self
          );
          data.attribute.parent = new Array<IAttributeValue>().concat(
            temp.attribute.parent
          );
          for (let i = 0; i < data.attribute.self.length; i++) {
            let self = data.attribute.self[i] as IAttributeValue;
            let id = self.id;
            self = SwtionAttribute.clone(self);
            self.id =
              elementAttributeType.attribute.toString() + id.substring(1);
            data.attribute.self[i] = self;
          }

          // let data = (
          //   this.$refs["attributeChecked"] as any
          // ).getCheckedNodes()[0].data;
          // let selfs = [].concat(data.attribute.self) as Array<IAttributeValue>;
          // for (let i = 0; i < selfs.length; i++) {
          //   let self = selfs[i] as IAttributeValue;
          //   let id = self.id;
          //   self = SwtionAttribute.clone(self);
          //   self.id =
          //     elementAttributeType.attribute.toString() + id.substring(1);
          //   selfs[i] = self;
          // }
          // data.attribute.self = selfs;
          // this.attributeForm.ref = data;
          // let data = (
          //   this.$refs["attributeChecked"] as any
          // ).getCheckedNodes()[0].data as IBaseElement;
          this.attributeForm.ref = data;
        }
        if (_this.attributeForm.id === "") {
          _this.swtionAttr.appendAttributeValue(
            attributeType.attribute,
            _this.attributeForm,
            _this.node.id,
            _this.attributeValueList
          );
        } else {
          _this.swtionAttr.editAttributeValue(
            _this.attributeForm.id,
            _this.attributeForm,
            this.attributeValueList
          );
          const swtionProc = new SwtionProcess();
          swtionProc.changeName(this.attributeForm.id, this.attributeForm.name);
        }
        _this.closeDialog();
      }
    });
  }

  public closeDialog() {
    const isChangeName = this.initName !== this.attributeForm.name;
    this.$emit("close", isChangeName);
  }
}
</script>
