<!--属性栏-->
<template>
  <div class="propertys">
    <baseTextPro
      :strokeColor="strokeColor"
      :fontSize="fontSize"
      :textMsg="textMsg"
      :backgroundColor="backgroundColor"
      v-show="itemType == 'BaseText' || itemType == 'BaseExplain'"
    ></baseTextPro>
    <BaseBtn
      :strokeColor="strokeColor"
      :fontSize="fontSize"
      :lineWidth="lineWidth"
      :Width="Width"
      :Height="Height"
      :color ="color"
      :textMsg="textMsg"
      :backgroundColor="backgroundColor"
      :items="items"
      v-show="itemType == 'baseBtn'"
    ></BaseBtn>
    <baseLinePro
      v-show="itemType == 'BaseArrow'"
      :strokeColor="strokeColor"
      :lineStyle="lineStyle"
      :lineWidth="lineWidth"
      :Begin="begin"
      :End="end"
    ></baseLinePro>
    <BasePipe
      v-show="itemType == 'BasePipe'"
      :strokeColor="strokeColor"
      :lineStyle="lineStyle"
      :lineWidth="lineWidth"
      :Radius="Radius"
    ></BasePipe>

    <BaseGraphy
      :lineStyle="lineStyle"
      :lineWidth="lineWidth"
      :strokeColor="strokeColor"
      :fillColor="fillColor"
      :Url="Url"
      :Width="Width"
      :Height="Height"
      v-show="
        itemType == 'BaseRect' ||
        itemType == 'BaseTriangle' ||
        itemType == 'BaseCircle' ||
        itemType == 'BasePolygon' ||
        itemType == 'BaseArrowPolygon'
      "
    ></BaseGraphy>
    <BaseImagePro
      :lineStyle="lineStyle"
      :lineWidth="lineWidth"
      :strokeColor="strokeColor"
      :Url="Url"
      :Width="Width"
      :Height="Height"
      :isSvg="isSvg"
      :Rotate="Rotate"
      v-show="itemType == 'BaseImage' || itemType == 'BasePipeUninTool'"
    ></BaseImagePro>
    <BaseEquipment
      :Width="Width"
      :Height="Height"
      :AnotherMsg="AnotherMsg"
      :InfoPointList="infoPointList"
      :EquipData="EquipData"
      v-show="itemType == 'BaseEquipment'"
      :equipHeight="equipHeight"
    ></BaseEquipment>
    <BaseEquipmentMsg
      v-show="itemType == 'BaseEquipmentMsg'"
      :EquipMsgData="EquipMsgData"
      :strokeColor="strokeColor"
      :fontSize="fontSize"
      :curTextItem="EquipMsgItem"
      :backgroundColor="backgroundColor"
      @changeEquipMsgData="changeEquipMsg"
    ></BaseEquipmentMsg>
    <Equation v-show="itemType == 'Equation'" :textMsg="textMsg"></Equation>
    <InfoPoint v-show="itemType == 'InfoPoint'"></InfoPoint>
    <graphPaper v-show="!itemType"> </graphPaper>
  </div>
</template>
<script>
import baseTextPro from "./baseTextPro.vue";
import baseLinePro from "./baseLinePro.vue";
import BaseBtn from "./BaseBtn.vue";
import BaseGraphy from "./BaseGraphy";
import BaseImagePro from "./BaseImagePro";
import BaseEquipment from "./BaseEquipment";
import BaseEquipmentMsg from "./BaseEquipmentMsg";
import BasePipe from "./BasePipe";
import Equation from "./Equation";
import InfoPoint from "./InfoPoint";
import graphPaper from "./graphPaper";
import bus from "@/bus/bus";
const lineStyle = {
  0: "Solid",
  1: "Dashed",
  /** 点线    */
  2: "Dotted",
  /** 无    */
  3: "None",
};
const arrowType = {
  0: "None",
  1: "Basic",
  /** 点线    */
  2: "Triangle",
  /** 无    */
  3: "Diamond",
  4: "Square",
  5: "Circle",
};
export default {
  components: {
    baseTextPro,
    baseLinePro,
    BaseGraphy,
    BaseImagePro,
    BaseEquipment,
    BaseEquipmentMsg,
    graphPaper,
    BasePipe,
    Equation,
    InfoPoint,
    BaseBtn,
  },
  data() {
    return {
      itemType: "", // item 类型
      strokeColor: "", //线条颜色
      lineStyle: "solid", //线条样式
      lineWidth: 1, //线宽
      fontSize: 0, //字体大小
      textMsg: "", // 文本
      backgroundColor: "", // 背景色
      Width: 0, //item 宽
      Height: 0, //item 高
      Url: "", // 路径
      Rotate: 0, // 旋转角度
      fillColor: "", //填充色
      begin: "", //开头样式
      end: "", //结尾样式
      infoPointList: [], //设备--信息点数组
      EquipData: {}, //设备 信息
      equipHeight: "", // 设备属性栏得高度
      EquipMsgData: {}, //设备信息点详情数据
      EquipMsgItem: null, //设备信息点实例
      AnotherMsg: "", // 附加信息 （只用与设备图例）
      isSvg: false, // 是否为svg图
      color:'',
      items:null,
      Radius: 0, // 管线的圆角半径
    };
  },
  mounted() {
    const box = document.getElementsByClassName("propertys")[0];
    this.equipHeight = box.offsetHeight - 150 + "px";
    bus.$on("emitChoice", this.emitChoice);
  },
  methods: {
    emitChoice(itemList) {
      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;
        this.itemType = data.properties.type ? data.properties.type : "";
      } else {
        this.itemType = "";
      }
      // 对设备做出判断 看是否点入的是设备相关信息点
      if (this.itemType == "BaseEquipment") {
        this.EquipData = itemList[0].legendData;
        if (itemList[0].curTextItem) {
          this.itemType = "BaseEquipmentMsg";
        }
      }
      // 同步联动样式
      this.linkStyle(itemList);
    },
    // 同步样式
    linkStyle(itemList) {
      const item = itemList[0];
      console.log('item',item)
      this.EquipMsgItem = null;
      this.items = null;
      this.isSvg = false;
      if (this.itemType == "BaseArrow") {
        this.strokeColor = item.strokeColor.toRgba();
        this.lineStyle = lineStyle[item.lineStyle];
        this.lineWidth = item.lineWidth;
        this.begin = arrowType[item.begin];
        this.end = arrowType[item.end];
      } else if (
        this.itemType == "BaseText" ||
        this.itemType == "BaseExplain"
      ) {
        this.strokeColor = item.color.toRgba();
        this.backgroundColor = item.backgroundColor.toRgba();
        this.textMsg = item.text;
        this.fontSize = item.font.size;
      } else if (
        this.itemType == "BaseImage" ||
        this.itemType == "BasePipeUninTool"
      ) {
        this.Width = item.width; //item 宽
        this.Height = item.height; //item 高
        this.Url = item.url; // 路径
        this.lineStyle = lineStyle[item.lineStyle];
        this.lineWidth = item.lineWidth;
        this.strokeColor = item.strokeColor.toRgba();
        this.Rotate = item.rotate;
        if (
          item.data.style.default.url &&
          item.data.style.default.url.includes(".svg")
        ) {
          this.isSvg = true;
        }
      } else if (
        this.itemType == "BaseRect" ||
        this.itemType == "BaseTriangle" ||
        this.itemType == "BaseCircle" ||
        this.itemType == "BasePolygon"
      ) {
        this.Width = item.width; //item 宽
        this.Height = item.height; //item 高
        this.lineStyle = lineStyle[item.lineStyle];
        this.lineWidth = item.lineWidth;
        this.strokeColor = item.strokeColor.toRgba();
        this.fillColor = item.fillColor.toRgba();
        // 填充色
      } else if (this.itemType == "BaseEquipment") {
        this.Width = item.sWidth; //item 宽
        this.Height = item.sHeight; //item 高
        this.AnotherMsg = item.anotherMsg;
        if (item.infoPointList && item.infoPointList.length) {
          this.infoPointList = item.infoPointList;
        } else {
          this.infoPointList = [];
        }
      } else if (this.itemType == "BaseEquipmentMsg") {
        // 获取信息点详情信息
        this.EquipMsgData = item.curTextItem.propertyData;
        this.EquipMsgItem = item.curTextItem;
        this.strokeColor = "";
        this.backgroundColor = "";
        this.fontSize = 1;
        setTimeout(() => {
          this.strokeColor = this.EquipMsgItem.color.toRgba();
          this.backgroundColor = this.EquipMsgItem.backgroundColor.toRgba();
          this.fontSize = this.EquipMsgItem.font.size;
        });
      } else if (this.itemType == "BasePipe") {
        // 管道
        this.strokeColor = item.strokeColor.toRgba();
        this.lineStyle = lineStyle[item.lineStyle];
        this.lineWidth = item.lineWidth;
        this.Radius = item.radius;
      } else if (this.itemType == "baseBtn") {
        this.Width = item.width; //item 宽
        this.Height = item.height; //item 高
        this.strokeColor = item.strokeColor.toRgba();
        this.backgroundColor = item.backgroundColor.toRgba();
        this.textMsg = item.text;
        this.items = item
        this.color = item.color.toRgba();
        this.lineWidth = item.lineWidth;
        this.fontSize = item.font.size;
      }
    },
    // 修改设备信息点数据
    changeEquipMsg(val) {
      const obj = this.EquipMsgItem.propertyData;
      let obj2 = Object.assign(obj, val);
      this.EquipMsgItem.propertyData = obj2;
      this.EquipMsgItem.text = val.name;
    },
  },
};
</script>
<style lang="less" scoped>
.propertys {
  width: 100%;
  height: 100%;
}
</style>