<template>
    <div class="kf-lift-container w-100 h-100 flex-column-between-start" v-show="props.show" :style="cardStyle" ref="liftBox"
         :class="'vivify '+ buttonClass">
        <div class="kf-light-title" v-if="props.isShowTitle">{{title}}</div>
        <div class="kf-light-cons flex-row-between-center">
            <div class="kf-light-cons1 pr">
                <div class="kf-light-cons1-i"></div>
                <div class="kf-light-cons2">{{getStatusValue(computeData.status)}}</div>
            </div>
            <div class="kf-light-cons3 flex-column-between-start">
                <div class="kf-light-cons3-txt1">文字</div>
                <div class="kf-light-cons3-txt2">{{ computeData.floor.value }}
                    <i class="iconfont " :class='computeData.direction.icon'></i>
                </div>
                <div class="kf-light-cons3-txt1">kM/h</div>
            </div>
        </div>

    </div>
</template>

<script>
import { ref, watch, onMounted, getCurrentInstance, computed } from "vue";
import styleManager from "../utils/style.vue";
import eventManager from "../utils/event";
import pageModel from "../model/page";
import dataModel from "@/components/ui/model/data";
import stateManager from "@/components/ui/utils/state";

export default {
    name: "kfLift",
    props: {
        props: {
            type: Object,
            default: () => {},
        },
        eventList: {
            type: Array,
            default: () => [],
        },
        eventScript: {
            type: String,
        },
    },
    widgetConfig: {
        parent: "base",
        rank: 9,
        label: {
            zh: "电梯",
        },
        category: "业务",
        component: "kfLift",
        display: true,
        version: 1,
        icon: "icon-anniu",
        defaultSize: {
            x: 296,
            y: 180,
        },
        minSize:{
            width: 296,
            height: 180,
        },
        imgName: "kfLift",
        state: {
            isAdd: false,
            isCondition: false,
        },
    },
    setup(props) {
        let bindDevice = null,
            bindModel = null;
        let liftBox = ref(null);
        let cardStyle = ref({});
        const { proxy, type } = getCurrentInstance();
        let defaultHandler = ref({});
        let defaultSize = type.widgetConfig.defaultSize;
        let buttonClass = ref("");
        let currBindingData = null;
        onMounted(() => {
            refreshEvents();
            cardStyle.value = styleManager.updateStyle(proxy);
            loadTitle();
            buttonClass.value = styleManager.updateClass(proxy);
            liftBox.value.style.setProperty("--textColor", props.props["textColor"] != undefined && props.props["textColor"] ? props.props["textColor"] : "#166CE4");
        });

        let dataVersion = ref(0);

        const updateData = function () {
            dataVersion.value = new Date().getTime();
        };

        let title = ref("办公室-A01-电梯");

        let model = ref({
            status: {
                enumItems: [
                    {
                        value: "running",
                        label: { en: "Running", zhCN: "运行中", zhTW: "" },
                    },
                    {
                        value: "stop",
                        label: { en: "Stop", zhCN: "停止", zhTW: "" },
                    },
                ],
                format: "buttonGroup",
                defaultValue: "stop",
                value: "stop",
                controllable: true,
                label: { en: "Status", zhCN: "状态", zhTW: null },
            },
            floor: {
                enumItems: null,
                format: "dataLabel",
                defaultValue: 0,
                controllable: true,
                maximum: 100,
                minimum: 0,
                label: { en: "Floor", zhCN: "楼层", zhTW: null },
                value: 0,
            },
            direction: {
                enumItems: [
                    { value: "up", label: { en: "Up", zhCN: "上", zhTW: "" } },
                    {
                        value: "dowm",
                        label: { en: "Down", zhCN: "下", zhTW: "" },
                    },
                    {
                        value: "stop",
                        label: { en: "Stop", zhCN: "停止", zhTW: "" },
                    },
                ],
                format: "buttonGroup",
                defaultValue: "up",
                value: "up",
                controllable: true,
                icon: "icon-direction-up",
                label: { en: "Direction", zhCN: "方向", zhTW: null },
            },
        });
        const Title = computed(() => {
            let title = "办公室-A01-电梯";
            if (props?.props?.title) {
                title = props.props.title;
            }
            return title;
        });
        const refreshEvents = function () {
            eventManager.registerEvent(proxy);
        };

        pageModel.watchProps(props, watch, proxy, (changes) => {

            if (styleManager.styleChanged("kfLift", changes)) {
                cardStyle.value = styleManager.updateStyle(proxy);
            }
            if (styleManager.classChanged("kfLift", changes)) {
                buttonClass.value = styleManager.updateClass(proxy);
            }

            if (changes && changes["isShowTitle"] != undefined) {
                if (props.props.isShowTitle) {
                    pageModel.updatePropValue("height", defaultSize.y);
                } else {
                    pageModel.updatePropValue("height", defaultSize.y - 40);
                }
            }
            if (changes && changes["deviceId"]) {
                bindDevice = dataModel.getDataSourceByDeviceId(
                    props.props.deviceId
                );
                if (bindDevice) {
                    bindModel = dataModel.getDeviceModelByDevice(bindDevice);
                    if (bindModel) {
                        // 业务组件绑定数据的时，没有选择绑定相关属性,这里将根据物模型属性绑定到deviceData属性
                        let deviceData = bindModel.properties.map(
                            (p) => p.name
                        );
                        props.props.deviceData = deviceData;
                        updateModel();
                    }
                    loadTitle();
                }
            }
            if (changes && changes["title"] != undefined) {
                loadTitle();
            }
            if (changes && changes["isShowTitle"] != undefined) {
                if (props.props.isShowTitle) {
                    pageModel.updatePropValue("height", defaultSize.y);
                } else {
                    pageModel.updatePropValue("height", defaultSize.y - 40);
                }
            }
            liftBox.value.style.setProperty(
                "--textColor",
                props.props["textColor"] != undefined &&
                    props.props["textColor"]
                    ? props.props["textColor"]
                    : "#166CE4"
            );
        });
        /*watch(props,(newValue,oldValue)=>{
            refreshEvents();
            cardStyle.value = styleManager.updateStyle(proxy)
        });*/
        const eventHandler = computed(() => {
            return eventManager.loadEventHandler(
                defaultHandler,
                undefined,
                props.props.pageName
            );
        });

        const loadTitle = function () {
            if (bindDevice) {
                title.value = bindDevice.deviceName;
            } else {
                if (props.props?.title != "") {
                    title.value = props.props.title;
                }
            }
        };

        const computeData = computed(() => {
            if (!bindDevice && props.props.deviceId) {
                bindDevice = dataModel.getDataSourceByDeviceId(
                    props.props.deviceId
                );
                if (bindDevice) {
                    bindModel = dataModel.getDeviceModelByDevice(bindDevice);
                    loadTitle();
                    updateModel();
                }
            }
            if (dataVersion.value > 0) {
                let newData = dataModel.getData(props.props, false, true);
                // console.log(newData, "===aaaaa", model.value);
                if (newData && newData.length > 0) {
                    const deviceData = props.props?.deviceData;
                    if (deviceData && Array.isArray(deviceData)) {
                        for (let i = 0; i < deviceData.length; i++) {
                            const key = deviceData[i];
                            if (
                                newData[i] != undefined &&
                                model.value[key] &&
                                model.value[key].hasOwnProperty("defaultValue")
                            ) {
                                model.value[key].defaultValue = newData[i];
                            }
                        }
                    }
                }
            }
            return model.value;
        });

        const updateModel = () => {
            if (bindDevice && bindModel) {
                const properties = bindModel?.properties;
                if (properties) {
                    for (let i = 0; i < properties.length; i++) {
                        let property = properties[i];
                        if (model.value.hasOwnProperty(property.name)) {
                            // if (property?.type === "boolean") {
                            //     // 物模型填写的问题，导致boolean 是string
                            //     property.defaultValue = Boolean(
                            //         property.defaultValue
                            //     );
                            // }
                            Object.assign(model.value[property.name], property);
                        }
                    }
                }
            }
        };

        const getStatusValue = function (data) {
            let value = "停止";
            if (data?.enumItems?.length > 0) {
                let enums = data.enumItems.find((i) => {
                    return i.value == data.defaultValue;
                });
                if (enums?.label) {
                    value = enums.label.zhCN;
                }
            }
            return value;
        };
        return {
            cardStyle,
            eventHandler,
            value: 30,
            Title,
            title,
            model,
            getStatusValue,
            liftBox,
            buttonClass,
            updateData,
            computeData,
        };
    },
};
</script>

<style lang="scss">
.kf-lift-container {
    padding: 0px 8px 16px 8px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #1c1c1c;
    //box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    .kf-light-title {
        display: flex;
        height: 40px;
        padding: 4px 4px 4px 8px;
        align-items: center;
        gap: 4px;
        align-self: stretch;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        color: rgba(255, 255, 255, 0.9);
        font-family: Open Sans;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
    }

    .kf-light-cons {
        display: flex;
        align-items: flex-start;
        padding: 8px 0;
        align-self: stretch;

        .kf-light-cons1 {
            width: 40%;
            min-width: 120px;
            display: flex;
            min-height: 78px;
            padding: 4px;
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
            align-items: center;
            justify-content: center;
            align-self: stretch;
            border-radius: 8px;
            cursor: pointer;
            border: 1px solid rgba(255, 255, 255, 0.12);

            .kf-light-cons2 {
                display: flex;
                width: 100%;
                height: 100%;
                gap: 4px;
                color: rgba(255, 255, 255, 0.55);
                background: #0c0c0c;
                color: #fff;
                leading-trim: both;
                text-edge: cap;
                font-family: Alibaba PuHuiTi;
                font-size: 16px;
                font-style: normal;
                font-weight: 700;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .kf-light-cons1-i {
                position: absolute;
                width: 24px;
                top: 4px;
                left: calc((100% - 24px) / 2);
                margin-left: auto;
                margin-right: auto;
                height: 4px;
                border-radius: 4px;
                border: 1px solid rgba(255, 255, 255, 0.05);
                background: #166ce4;
                box-shadow: 0px 2px 4px 0px rgba(0, 151, 255, 0.2);
            }
        }

        .kf-light-cons3 {
            display: flex;
            padding: 4px;
            align-items: flex-start;
            gap: 4px;
            flex: 1 0 0;
            align-self: stretch;
            background: transparent;
            .kf-light-cons3-txt1 {
                color: rgba(255, 255, 255, 0.55);
                text-align: right;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                display: flex;
                width: 100%;
                justify-content: center;
                align-items: center;
            }
            .kf-light-cons3-txt2 {
                display: flex;
                width: 100%;
                height: 50px;
                justify-content: center;
                align-items: center;
                color: var(--textColor);
                text-align: right;
                font-size: 48px;
                font-style: normal;
                font-weight: 500;
            }
        }
    }
}
</style>