<!--属性栏-->
<template>
    <div class="propertys" :class="{ width: itemType }">
        <baseTextPro v-if="itemObj && ['BaseText', 'BaseExplain'].includes(itemType)" :TextItem="itemObj"></baseTextPro>
        <baseLinePro v-if="itemObj && itemType == 'BaseArrow'" :LineItem="itemObj"></baseLinePro>
        <BaseGraphy
            :lineStyle="lineStyle"
            :lineWidth="lineWidth"
            :strokeColor="strokeColor"
            :fillColor="fillColor"
            :Url="Url"
            :Width="Width"
            :Height="Height"
            v-if="itemObj && ['BaseRect', 'BaseTriangle', 'BaseCircle', 'BasePolygon', 'BaseArrowPolygon'].includes(itemType)"
            :GraphyItem="itemObj"
        ></BaseGraphy>
        <BaseImagePro v-if="itemObj && itemType == 'BaseImage'" :ImageItem="itemObj"></BaseImagePro>
        <BaseEquipment :EquipItem="itemObj" v-if="itemObj && itemType == 'BaseEquipment'"></BaseEquipment>
    </div>
</template>
<script>
import baseTextPro from "./baseTextPro.vue";
import baseLinePro from "./baseLinePro.vue";
import BaseGraphy from "./BaseGraphy";
import BaseImagePro from "./BaseImagePro";
import BaseEquipment from "./BaseEquipment";
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,
    },
    data() {
        return {
            itemType: "", // item 类型
            strokeColor: "", //线条颜色
            lineStyle: "solid", //线条样式
            lineWidth: 1, //线宽
            color: "", ///文本颜色
            fontSize: 0, //字体大小
            textMsg: "", // 文本
            backgroundColor: "", // 背景色
            Width: 0, //item 宽
            Height: 0, //item 高
            posX: 0, // item X坐标
            posY: 0, // item Y坐标
            Url: "", // 路径
            fillColor: "", //填充色
            begin: "", //开头样式
            end: "", //结尾样式
            AnotherMsg: "", // 附加信息 （只用与设备图例）
            itemObj: null,
        };
    },
    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 : "";
                this.itemObj = itemList[0];
            } else {
                this.itemType = "";
                this.itemObj = null;
            }
            // 对设备做出判断 看是否点入的是设备相关信息点
            // if (this.itemType == "BaseEquipment") {
            //     this.EquipData = itemList[0].legendData;
            //     this.EquipItem = itemList[0];
            //     if (itemList[0].curTextItem) {
            //         this.itemType = "BaseEquipmentMsg";
            //     }
            // }
            console.log(`this.itemType: ,${this.itemType}`);
            // 同步联动样式
            this.linkStyle(itemList);
        },
        // 同步样式
        linkStyle(itemList) {
            const item = itemList[0];
            this.EquipMsgItem = null;
            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.strokeColor.toRgba();
                this.color = 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();
            } 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.posX = item.pos.x; //item 宽
                this.posY = item.pos.y; //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;
            // }
        },
        // 修改设备信息点数据
        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 {
    height: 100%;
}
.width {
    width: 240px;
    position: absolute;
    right: 0;
    top: 0;
    background: #ffffff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}
</style>