<!-- 通用信息点 -->

<template>
  <div class="InfoPoint">
    <div class="title">通用信息点</div>
    <el-form
      label-position="top"
      label-width="120px"
      :model="formLabelAlign"
      :rules="rules"
      :validate-on-rule-change="true"
      ref="infopointform"
    >
      <el-form-item label="全局编码" prop="EqId">
        <el-input
          @keyup.enter.native="submitForm"
          @blur="submitForm"
          placeholder="回车或失焦会促发请求"
          v-model="formLabelAlign.EqId"
        ></el-input>
      </el-form-item>
      <el-form-item label="设备类型（classCode）" prop="classCode">
        <el-input
          @keyup.enter.native="submitForm"
          @blur="submitForm"
          v-model="formLabelAlign.classCode"
          placeholder="回车或失焦会促发请求"
        ></el-input>
      </el-form-item>
      <el-form-item label="信息点编码（code）" prop="code">
        <el-input
          @keyup.enter.native="submitForm"
          @blur="submitForm"
           placeholder="回车或失焦会促发请求"
          v-model="formLabelAlign.code"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="信息点名称"
        v-show="InfoItem && InfoItem.data.properties.infoData"
      >
        <el-input
          @change="changeText"
          v-model="formLabelAlign.subName"
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import bus from "@/bus/bus";
import { queryDict } from "@/api/editer";
export default {
  data() {
    return {
      text: "", //文本
      formLabelAlign: {
        EqId: "", //全局code(设备id)
        classCode: "", //设备类型
        code: "", //信息点编码
        subName: "",
      },
      rules: {
        // 校验规则
        EqId: [{ required: true, message: "请输入全局编码", trigger: "blur" }],
        classCode: [
          { required: true, message: "请输入设备类型", trigger: "blur" },
        ],
        code: [
          { required: true, message: "请输入信息点编码", trigger: "blur" },
        ],
      },
      InfoItem: null, //信息点实例
    };
  },
  methods: {
    // 改变文字
    changeText(val) {
      bus.$emit("updateStyle", "text", val);
    },
    // 提交表单
    submitForm() {
      this.$refs["infopointform"].validate((valid) => {
        // 做校验判断
        if (valid) {
          // 请求信息
          this.queryMsg();
        } else {
          // this.$message.error("信息点参数请求失败！");
          return false;
        }
      });
    },
    // 请求公共信息点
    queryMsg() {
      const data = {
        filters: `classCode = '${this.formLabelAlign.classCode}';code = '${this.formLabelAlign.code}'`,
      };
      queryDict(data).then((res) => {
        if (res && res.content && res.content.length) {
          this.formLabelAlign.subName = res.content[0].aliasName;
          this.changeText(this.formLabelAlign.subName);
          // 获取到信息点信息存入实例中的infoData字段
          if (this.InfoItem) {
            this.InfoItem.data.properties.infoData = Object.assign(
              res.content[0],
              {
                equipId: this.formLabelAlign.EqId,
              }
            );
          }
        } else {
          this.changeText("信息点");
          if (this.InfoItem) {
            if (this.InfoItem.data.properties.infoData) {
              this.$delete(this.InfoItem.data.properties, "infoData");
            }
          }
        }
      }).catch(()=>{
         this.$message.error("信息点参数请求失败！");
      })
    },
    // 获取到信息点
    emitChoice(itemList) {
      let itemType = null;
      this.formLabelAlign.EqId = "";
      this.formLabelAlign.classCode = "";
      this.formLabelAlign.code = "";

      this.InfoItem = null;
      if (itemList.length == 1) {
        const data = itemList[0].data
          ? itemList[0].data
          : itemList[0].legendData
          ? itemList[0].legendData
          : itemList[0].relationData
          ? itemList[0].relationData
          : null;
        itemType = data.properties.type ? data.properties.type : "";
      } else {
        itemType = "";
      }
      if (itemType == "InfoPoint") {
        this.InfoItem = itemList[0];
        //赋值名称
        this.formLabelAlign.subName = itemList[0].text;
        if (itemList[0].data.properties.infoData) {
          const data = itemList[0].data.properties.infoData;
          this.formLabelAlign.EqId = data.equipId;
          this.formLabelAlign.classCode = data.classCode;
          this.formLabelAlign.code = data.code;
        }
      }
    },
  },
  mounted() {
    bus.$on("emitChoice", this.emitChoice);
  },
};
</script>
<style lang="less" scoped>
ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.InfoPoint {
  padding: 0 12px 0 12px;
  box-sizing: border-box;
  .title {
    height: 47px;
    border-bottom: 1px solid #979797;
    color: #646c73;
    font-size: 16px;
    padding-left: 12px;
    box-sizing: border-box;
  }
  ul {
    width: calc(~"100% - 24px");
    margin: -1px 12px 0 12px;
    li {
      border-top: 1px solid #979797;
      .small-title {
        font-size: 12px;
        color: #8d9399;
        margin: 12px 0;
      }
      .property {
        display: flex;
        align-items: center;
        justify-content: space-around;
        .color-box {
          display: flex;
          align-items: center;
          flex-direction: column;
          .cololorSelect {
            width: 32px;
            height: 20px;
            overflow: hidden;
            position: relative;
            margin: 4px 0;
            .fix-box-1 {
              margin-top: -8px;
              margin-left: -8px;
              /deep/ .el-color-picker__trigger {
                width: 200px;
                height: 200px;
              }
            }
          }
        }
        .line-width {
          display: flex;
          align-items: center;
          flex-direction: column;
          margin-left: 8px;
          position: relative;
        }
        span {
          font-size: 12px;
          color: #1f2429;
          margin-top: 4px;
        }
      }
    }
  }
}
</style>