<template>
    <div id="equip_pro">
        <div class="title">设备实例本地名称</div>
        <el-tabs v-model="activeName">
            <el-tab-pane label="基本信息" name="first">
                <div class="equip-info-box box-padding box-border-bottom">
                    <div class="equip-info-item">
                        <p class="equip-info-title">本地名称：</p>
                        <h3 class="equip-info-value" :title="EquipItem.legendData.localName || '--'">
                            {{ EquipItem.legendData.localName || "--" }}
                        </h3>
                    </div>
                    <div class="equip-info-item">
                        <p class="equip-info-title">本地编码：</p>
                        <h3 class="equip-info-value" :title="EquipItem.legendData.localId || '--'">
                            {{ EquipItem.legendData.localId || "--" }}
                        </h3>
                    </div>
                    <div class="equip-info-item">
                        <p class="equip-info-title">BIM坐标(XYZ)：</p>
                        <h3 class="equip-info-value" :title="EquipItem.legendData.bimLocation || '--'">
                            {{ EquipItem.legendData.bimLocation || "--" }}
                        </h3>
                    </div>
                    <el-button size="small" style="width: 100%" @click="$message.info('功能待开发！')">查看详情</el-button>
                </div>
                <div class="map-pos-box box-padding property">
                    <p class="box-title">页面位置</p>
                    <div class="base-property">
                        <div class="base-property-item">
                            <span>X</span>
                            <el-input style="width: 78px; margin-left: 8px" size="mini" v-model="EquipItem.x" placeholder="请输入内容"></el-input>
                        </div>
                        <div class="base-property-item">
                            <span>Y</span>
                            <el-input style="width: 78px; margin-left: 8px" size="mini" v-model="EquipItem.y" placeholder="请输入内容"></el-input>
                        </div>
                    </div>
                    <el-checkbox v-model="showBimRelation">显示与BIM坐标关系</el-checkbox>
                </div>
            </el-tab-pane>
            <el-tab-pane label="属性" name="second">
                <div class="box-padding box-border-bottom">
                    <p class="box-title" style="padding-top: 0">公式</p>
                    <div class="textarea">
                        <el-input type="textarea" disabled v-model="EquipItem.formula" @change="setStyle" :rows="2" placeholder="请输入内容">
                        </el-input>
                    </div>
                </div>
                <div class="box-padding box-border-bottom property">
                    <p class="box-title">字符</p>
                    <div class="base-property">
                        <div class="base-property-item">
                            <div class="cololorSelect">
                                <el-color-picker show-alpha class="fix-box-1" @change="setStyle" v-model="color"></el-color-picker>
                            </div>
                        </div>
                        <div class="base-property-item" style="flex: 1; padding: 0">
                            <el-input-number
                                style="width: 100%"
                                v-model="size"
                                @change="setStyle"
                                controls-position="right"
                                size="mini"
                                :min="1"
                                :max="20"
                                :maxlength="100"
                            ></el-input-number>
                        </div>
                    </div>
                </div>
                <div class="box-padding box-border-bottom">
                    <p class="box-title">显示图标</p>
                    <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        :before-upload="beforeAvatarUpload"
                        :on-success="setStyle"
                    >
                        <el-button type="small">替换图标</el-button>
                    </el-upload>
                </div>
                <div class="box-padding">
                    <p class="box-title">附加数据</p>
                    <el-input type="textarea" v-model="EquipItem.anotherMsg" @change="setStyle" :rows="3" placeholder="请填写附加数据"> </el-input>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import { mapMutations } from "vuex";
import { SColor, SFont } from "@persagy-web/draw";
import { rgbaNum } from "@persagy-web/big-edit/lib/until";
import { imgBaseUrl, imgServeUpload } from "@/api/imageservice";
import bus from "@/bus/bus";
export default {
    props: ["EquipItem"],
    data() {
        return {
            x: 0,
            y: 0,
            activeName: "first",
            msgData: [], //存储二级树
            pressMsgData: [], // 搜索后得信息点数组
            getPressMsg: "", //输入信息
            local: "", //局部加载
            anotherMsg: "", // 附加信息
            showBimRelation: true, // 显示与BIM坐标关系
        };
    },
    computed: {
        color: {
            get: function () {
                return this.EquipItem.color.toRgba();
            },
            set: function (newColor) {
                const colorList = rgbaNum(newColor);
                this.EquipItem.color = new SColor(Number(colorList[0]), Number(colorList[1]), Number(colorList[2]), colorList[3] * 255);
            },
        },
        size: {
            get: function () {
                return this.EquipItem.font.size;
            },
            set: function (newSize) {
                this.EquipItem.font = new SFont("sans-serif", newSize);
            },
        },
    },
    mounted() {
        window.yu = this;
    },
    methods: {
        ...mapMutations(["ADDSTYLE"]),
        // 修改样式信息
        setStyle() {
            const style = {
                id: this.EquipItem.id,
                style: {
                    color: this.EquipItem.color.value,
                    size: this.EquipItem.font.size,
                    url: this.EquipItem.defaultUrl,
                    formula: this.EquipItem.formula,
                },
            };
            this.ADDSTYLE(style);
        },
        beforeAvatarUpload(file) {
            // eslint-disable-next-line @typescript-eslint/no-this-alias
            const fileReader = new FileReader();
            fileReader.readAsDataURL(file); //读取图片
            console.log(file);
            const ftype = file.type;
            const fname = file.name;
            const uploadKey = file.uid;
            // const imgType = ftype.split(".")[ftype.length - 1];
            fileReader.addEventListener("load", () => {
                // 读取完成
                const res = fileReader.result;
                //将canvas的base64位图片转换成图片png的file
                const blob = this.dataURLtoBlob(res, ftype);
                //将其转换成file对象
                const file = new File([blob], fname, {
                    type: ftype,
                    lastModified: Date.now(),
                }); //blob转file

                // try sending
                const reader = new FileReader();
                const fileType = file.name.split(".");
                const imgType = fileType[fileType.length - 1];
                reader.onloadend = () => {
                    // 这个事件在读取结束后，无论成功或者失败都会触发
                    // eslint-disable-next-line no-empty
                    if (reader.error) {
                    } else {
                        // 构造 XMLHttpRequest 对象，发送文件 Binary 数据
                        const xhr = new XMLHttpRequest();
                        xhr.open("POST", `${imgServeUpload}${uploadKey}.${imgType}`);
                        xhr.send(reader.result);
                        xhr.onreadystatechange = () => {
                            if (xhr.readyState == 4) {
                                if (xhr.status == 200) {
                                    this.EquipItem.defaultUrl = `${uploadKey}.${imgType}`;
                                    this.EquipItem.url = `${imgBaseUrl}${uploadKey}.${imgType}`;
                                    console.log(uploadKey + "." + imgType);
                                    // bus.$emit("updateStyle", "url", baseUrl + uploadKey + "." + imgType);
                                }
                            }
                        };
                    }
                };
                reader.readAsArrayBuffer(file);
            });
        },
        dataURLtoBlob(dataURI, type) {
            const binary = atob(dataURI.split(",")[1]);
            const array = [];
            for (let i = 0; i < binary.length; i++) {
                array.push(binary.charCodeAt(i));
            }
            return new Blob([new Uint8Array(array)], { type: type });
        },
        formatDate(now) {
            const year = now.getFullYear();
            const month = now.getMonth() + 1;
            const date = now.getDate();
            const hour = now.getHours();
            const minute = now.getMinutes();
            const second = now.getSeconds();
            return (
                year +
                "-" +
                month +
                "-" +
                (date > 10 ? date : "0" + date) +
                " " +
                hour +
                ":" +
                (minute > 10 ? minute : "0" + minute) +
                ":" +
                (second > 10 ? second : "0" + second)
            );
        },
    },
    watch: {},
};
</script>
<style lang="less" scoped>
#equip_pro {
    .title {
        height: 40px;
        line-height: 40px;
        color: #000000;
        background: #f8f9fa;
        font-size: 14px;
        padding-left: 12px;
        box-sizing: border-box;
    }
    .box-title {
        font-size: 12px;
        color: #646a73;
        padding: 12px 0 8px 0;
        font-weight: 600;
    }
    .box-padding {
        padding: 0 12px 12px;
    }
    .box-border-bottom {
        border-bottom: 1px solid #e4e5e7;
    }
    .flex {
        flex: 1;
    }
    /deep/ .el-tabs__item {
        padding: 0 20px !important;
    }
    /deep/ .el-input__inner {
        padding: 0 6px;
    }
    .equip-info-box {
        .equip-info-item {
            margin-bottom: 8px;
            .equip-info-title {
                color: #8d9399;
                margin-bottom: 5px;
            }
            .equip-info-value {
                cursor: pointer;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                font-size: 14px;
                font-weight: 600;
                font-family: MicrosoftYaHei;
                color: #1f2429;
            }
        }
    }
    .property {
        font-size: 12px;
        .base-property {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 14px;
            .base-property-item {
                padding-right: 12px;
            }
        }
        .cololorSelect {
            width: 36px;
            height: 24px;
            border-radius: 2px;
            overflow: hidden;
            position: relative;

            .fix-box-1 {
                margin-top: -8px;
                margin-left: -8px;
                /deep/ .el-color-picker__trigger {
                    width: 200px;
                    height: 200px;
                }
            }
        }
    }
}
</style>