<template>
  <div class="change-relation-ship">
    <el-dialog
      :title="values.addShip"
      :before-close="closeDialog"
      :visible.sync="addShipDialog"
    >
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <p class="mb-20 color-AAA">{{ values.codeTip }}</p>
        <el-form-item :label="values.codeTitle" class="mb-20">
          <el-select v-model="codeValue" placeholder="请选择">
            <el-option
              v-for="item in optionsCode"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-row class="mb-20">
          <el-col :span="12">
            <p class="mb-20">
              {{ values.mainObject }}
              <span class="fw-bold color-AAA">{{ MainObject }}</span>
            </p>
            <el-form-item prop="main" :error="mainError">
              <el-input
                style="width: 220px"
                v-model="ruleForm.main"
                autocomplete="off"
                :placeholder="values.pleaseEnterCode"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <p class="mb-20">
              {{ values.affiliatedObject }}
              <span class="fw-bold color-AAA">{{ FromObject }}</span>
            </p>
            <el-form-item
              v-for="(item, index) in ruleForm.codeList"
              :key="index"
              :prop="`codeList.${index}.value`"
              :rules="rules.codeList"
              :error="fromError"
            >
              <el-input
                style="width: 220px"
                v-model="item.value"
                :placeholder="values.pleaseEnterCode"
                :disabled="disabled"
              />
              <el-button
                @click.prevent="removeCode(item)"
                icon="el-icon-circle-close"
                type="text"
                :disabled="disabled"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                @click="addCode"
                icon="el-icon-circle-plus-outline"
                style="width: 220px"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button
            type="primary"
            class="fr ml-20"
            @click="submitForm('ruleForm')"
            >{{ values.add }}
          </el-button>
          <el-button class="fr" @click="closeDialog"
            >{{ values.cancel }}
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { relAdd } from "@/api/datacenter";
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";
let checkCode = (rule: any, value: any, callback: any) => {
  //TODO
  callback();
};
let checkMain = (rule: any, value: any, callback: any) => {
  //TODO
  callback();
};
let codeList = (rule: any, value: any, callback: any) => {
  //TODO
  callback();
};
@Component({
  name: "addRelationShip",
  // props:['addRelationValue','values']
})
export default class extends Vue {
  @Prop({ default: false }) addRelationValue?: boolean;
  @Prop({ default: {} }) values?: any;

  mainError = "";
  fromError = "";
  addShipDialog = false; //是否显示tooltip
  optionsCode = [
    // {
    //   value: "cadId",
    //   label: "CADID图纸编码",
    // },
    // {
    //   value: "name",
    //   label: "设备名称",
    // },
    {
      value: "id",
      label: "设备ID",
    },
    {
      value: "localId",
      label: "本地编码",
    },
    {
      value: "localName",
      label: "本地名称",
    },
  ];
  codeValue: string = "";
  MainObject: string = `（限制条件：${
    localStorage.getItem("MainObject") || "无"
  } )`;
  FromObject: string = `（限制条件：${
    localStorage.getItem("FromObject") || "无"
  } )`;
  ruleForm: any = {
    main: "",
    codeList: [
      {
        value: "",
      },
    ],
  };
  rules: object = {
    code: [
      { required: true, message: "请输入对应识别编码", trigger: "blur" },
      { validator: checkCode, trigger: "blur" },
    ],
    main: [
      { required: true, message: "请输入对应识别编码", trigger: "blur" },
      { validator: checkMain, trigger: "blur" },
    ],
    codeList: [
      { required: true, message: "请输入对应识别编码", trigger: "blur" },
      { validator: codeList, trigger: "blur" },
    ],
  };

  public get disabled() {
    return this.codeValue === "" ? "disabled" : false;
  }
  @Watch("addRelationValue")
  getRelationValue(val: any, oldVal: any) {
    if (val) {
      this.addShipDialog = val;
    }
  }
  // methods
  addCode() {
    this.ruleForm.codeList.push({
      value: "",
      key: Date.now(),
    });
  }
  closeDialog() {
    this.addShipDialog = false;
    this.$emit("closeAddRelation");
  }
  removeCode(item: any) {
    var index = this.ruleForm.codeList.indexOf(item);
    if (index !== -1) {
      this.ruleForm.codeList.splice(index, 1);
    }
  }
  submitForm(formName: string) {
    this.$refs[formName].validate((valid: any) => {
      if (valid) {
        let arr: any[] = [];
        for (let item of this.ruleForm.codeList) {
          if (item.value) {
            arr = arr.concat(item.value);
          }
        }
        let param = {
          fromContent: arr,
          mainContent: this.ruleForm.main,
          relType: this.$route.query.relationType,
          type: this.codeValue,
          graphicType: this.$route.query.graphicType,
          zoneType: this.$route.query.zoneType
            ? this.$route.query.zoneType
            : "",
        };
        //清空添加value
        let that = this;
        relAdd(param).then((res) => {
          console.log("resres", res);
          if (res.result === "failure") {
            if (res.ErrorType == 1) {
              // this.mainError = res.data.Message
              this.$nextTick(() => {
                this.mainError = res.message;
              });
            } else if (res.ErrorType == 2) {
              this.$nextTick(() => {
                this.fromError = res.message;
              });
            } else {
              this.$message.error(res.message);
            }
          } else if (res.result === "success") {
            this.$message.success(res.message);
            this.$emit("update");
            this.closeDialog();
            that.codeValue = "";
            that.ruleForm.codeList = [{ value: "" }];
            that.ruleForm.main = "";
          }
        });
      } else {
        console.log("error");
        return false;
      }
    });
  }
}
</script>

<style scoped lang="scss">
$color-text: #aaa;
.change-relation-ship {
  ::v-deep .el-form-item__label {
    width: auto !important;
  }

  .fr {
    float: right;
  }

  .mb-20 {
    margin-bottom: 20px;
  }

  .ml-20 {
    margin-left: 20px;
  }

  .color-AAA {
    color: $color-text;
  }

  .fw-bold {
    font-weight: bold;
  }
}
</style>
