<!--属性栏-->
<template>
  <div class="propertys">
    <baseTextProVue v-show="itemType == 'BaseText'"></baseTextProVue>
    <baseLinePro
      v-show="itemType == 'BaseLine'"
      :strokeColor="strokeColor"
      :lineStyle="lineStyle"
      :lineWidth="lineWidth"
    ></baseLinePro>
    <BaseExplainPro v-show="itemType == 'BaseExplain'"></BaseExplainPro>
    <BaseImagePro v-show="itemType == 'BaseImage'"></BaseImagePro>
  </div>
</template>
<script>
import baseTextProVue from "./baseTextPro.vue";
import baseLinePro from "./baseLinePro.vue";
import BaseExplainPro from "./BaseExplainPro";
import BaseImagePro from "./BaseImagePro";
import bus from "@/bus/bus";
const lineStyle = {
  0: "Solid",
  1: "Dashed",
  /** 点线    */
  2: "Dotted",
  /** 无    */
  3: "None",
};
export default {
  components: { baseTextProVue, baseLinePro, BaseExplainPro, BaseImagePro },
  data() {
    return {
      itemType: "",
      strokeColor: "", //填充色
      lineStyle: "solid", //线条样式
      lineWidth: 1, //线宽
    };
  },
  mounted() {
    bus.$on("emitChoice", this.emitChoice);
  },
  methods: {
    emitChoice(itemList) {
      if (itemList.length == 1) {
        this.itemType = itemList[0].data.Properties.Type
          ? itemList[0].data.Properties.Type
          : "";
      } else {
        this.itemType = "";
      }
      // 同步联动样式
      this.linkStyle(itemList);
    },
    // 同步样式
    linkStyle(itemList) {
      const item = itemList[0];
      if (this.itemType == "BaseLine") {
        this.strokeColor = item.strokeColor.toRgba();
        this.lineStyle = lineStyle[item.lineStyle];
        this.lineWidth = item.lineWidth;
        console.log("  this.lineStyle", this.lineStyle);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.propertys {
}
</style>