<template>
    <div class="kf-air-container w-100 h-100 flex-column-between-start" v-show="props.show" :class="'vivify '+ buttonClass"
         :style="cardStyle" ref="airBox">
        <div class="kf-light-title" v-if="props.isShowTitle">{{title}}</div>
        <div class="kf-light-cons flex-row-between-center w-100">
            <div class="kf-light-cons1 pr" v-if="computeData?.status?.enumItems?.length">
                <div class="kf-light-cons1-i"></div>
                <template v-for="(state,index) in computeData?.status?.enumItems">
                    <div :key="'state' + index" :class="['kf-light-cons2',index != 0 ? 'kf-light-cons3' : '' ]"
                         v-if="computeData?.status.defaultValue === state.value" @click="switchOpen(index)">
                        {{state?.label?.zhCN}}</div>
                </template>
            </div>
            <div class="kf-light-cons3 pr">
                <div class="kf-light-cons4 kf-number-input1">
                    <div class="kf-light-cons4-i kf-light-cons4-i-left" @click="changeValue(-1)">
                        <i class="iconfont icon-yichu"></i>
                    </div>
                    <div class="kf-light-cons4-txt">{{computeData.temperature.defaultValue }} {{computeData.temperature.unit}}</div>
                    <div class="kf-light-cons4-i kf-light-cons4-i-right" @click="changeValue(1)">
                        <i class="iconfont icon-add-fill"></i>
                    </div>
                </div>

                <div class="kf-light-cons4 flex-row-between-center">
                    <div class="kf-light-cons4-i kf-light-cons4-i-left" @click="changeSpeed(-1)">
                        <i class="iconfont icon-arrow-up-bold"></i>
                    </div>
                    <div class="kf-light-cons4-txt">{{computeData.windSpeed.enumItems[currSpeedIndex].label.zhCN}}</div>
                    <div class="kf-light-cons4-i kf-light-cons4-i-right" @click="changeSpeed(1)">
                        <i class="iconfont icon-arrow-down-bold"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="kf-air-btns w-100" v-if="computeData.mode.enumItems">
            <div class="flex-column-center-center kf-air-btns-item"
                 :class="[computeData.mode.defaultValue==item.value?'kf-air-btns-item-active':'']"
                 v-for="(item,index) in computeData.mode.enumItems" :key="item.value+index" @click="handleClick(item,computeData.mode)">
                <i class="iconfont mb5" :class="getIcon(item.value)"></i>
                {{item.label.zhCN}}
            </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 serviceModel from "../model/service";
import dataModel from "@/components/ui/model/data";
import stateManager from "@/components/ui/utils/state";
export default {
    name: "kfAirConditioning",
    props: {
        props: {
            type: Object,
            default: () => {},
        },
        eventList: {
            type: Array,
            default: () => [],
        },
        eventScript: {
            type: String,
        },
    },
    widgetConfig: {
        parent: "base",
        rank: 7,
        label: {
            zh: "空调",
        },
        category: "业务",
        component: "kfAirConditioning",
        display: true,
        version: 1,
        icon: "icon-anniu",
        defaultSize: {
            x: 296,
            y: 248,
        },
        minSize:{
            width: 296,
            height: 248
        },
        imgName: "kfAirConditioning",
        state: {
            isAdd: false,
            isCondition: false,
        },
    },
    setup(props) {
        let bindDevice = null,
            bindModel = null;
        let airBox = ref(null);
        let buttonClass = ref("");
        let cardStyle = ref({});
        const { proxy, type } = getCurrentInstance();
        let defaultHandler = ref({});
        let defaultSize = type.widgetConfig.defaultSize;

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

        onMounted(() => {
            refreshEvents();
            cardStyle.value = styleManager.updateStyle(proxy);
            loadTitle();
            airBox.value.style.setProperty(
                "--onColor",
                props.props["onColor"] != undefined && props.props["onColor"]
                    ? props.props["onColor"]
                    : "#305792"
            );
            buttonClass.value = styleManager.updateClass(proxy);
        });
        const refreshEvents = function () {
            eventManager.registerEvent(proxy);
        };
        const Title = computed(() => {
            let title = "办公室-A01-空调001";
            if (props?.props?.title) {
                title = props.props.title;
            }
            return title;
        });

        pageModel.watchProps(props, watch, proxy, (changes) => {
            refreshEvents();
            if (styleManager.styleChanged("kfAirConditioning", changes)) {
                cardStyle.value = styleManager.updateStyle(proxy);

            }
            if (styleManager.classChanged("kfAirConditioning", changes)) {
                buttonClass.value = styleManager.updateClass(proxy);
            }
            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);
                }
            }
            airBox.value.style.setProperty(
                "--onColor",
                props.props["onColor"] != undefined && props.props["onColor"]
                    ? props.props["onColor"]
                    : "#305792"
            );
        });


        const eventHandler = computed(() => {
            return eventManager.loadEventHandler(
                defaultHandler,
                undefined,
                props.props.pageName
            );
        });

        let speedList = ref([
            { name: "高速", value: "high" },
            { name: "中速", value: "medium" },
            { name: "低速", value: "slow" },
        ]);

        let currSpeed = ref(speedList.value[0]);

        let currSpeedIndex = ref(0);

        const changeSpeed = function (index) {
            if (index == "-1") {
                if (currSpeedIndex.value == 0) {
                    currSpeedIndex.value = 0;
                } else {
                    currSpeedIndex.value = currSpeedIndex.value - 1;
                }
            } else {
                if (
                    currSpeedIndex.value ==
                    model.value.windSpeed.enumItems.length - 1
                ) {
                    currSpeedIndex.value =
                        model.value.windSpeed.enumItems.length - 1;
                } else {
                    currSpeedIndex.value = currSpeedIndex.value + 1;
                }
            }
            if (props.props.deviceId) {
                dataModel.doControl(
                    props,
                    bindDevice,
                    bindModel,
                    model.value["windSpeed"].defaultValue,
                    "windSpeed"
                );
            }
        };
        let btnList = ref([
            { name: "制冷", type: "cold", icon: "icon-yewan" },
            { name: "制热", type: "hot", icon: "icon-qingtian" },
            { name: "送风", type: "wind", icon: "icon-baitian" },
            { name: "除湿", type: "wet", icon: "icon-yintian" },
        ]);
        let currBtn = ref("");
        let openValue = ref(false);

        const switchOpen = function (index) {
            const enums = model.value["status"].enumItems;
            const sIndex = index < enums?.length - 1 ? index + 1 : 0;
            model.value["status"].defaultValue =
                model.value["status"].enumItems[sIndex].value;
            if (props.props.deviceId) {
                dataModel.doControl(
                    props,
                    bindDevice,
                    bindModel,
                    model.value["status"].defaultValue,
                    "status"
                );
            }
        };

        let model = ref({
            windSpeed: {
                controllable: false,
                defaultValue: "auto",
                label: { zhCN: "风速", en: "WindSpeed" },
                value: "auto",
                enumItems: [
                    { value: "auto", label: { zhCN: "自动", en: "Auto" } },
                    { value: "low", label: { zhCN: "低风", en: "Low" } },
                    { value: "medium", label: { zhCN: "中风", en: "Medium" } },
                    { value: "high", label: { zhCN: "高风", en: "High" } },
                ],
            },
            temperature: {
                controllable: false,
                defaultValue: 0,
                value: 0,
                lebel: {
                    en: "Temperature",
                    zhCN: "温度",
                },
                enumItems: null,
                unit: "℃",
                maximum: 100,
                minimum: 0,
            },
            status: {
                controllable: false,
                defaultValue: "online",
                label: { zhCN: "状态", en: "Status" },
                value: "online",
                enumItems: [
                    { value: "online", label: { zhCN: "在线", en: "Online" } },
                    {
                        value: "offline",
                        label: { zhCN: "离线", en: "Offline" },
                    },
                    {
                        value: "disabled",
                        label: { zhCN: "禁用", en: "Disabled" },
                    },
                ],
            },
            mode: {
                controllable: false,
                defaultValue: "auto",
                label: { zhCN: "模式", en: "Mode" },
                value: "auto",
                enumItems: [
                    { value: "cool", label: { zhCN: "制冷", en: "Cool" } },
                    { value: "heat", label: { zhCN: "制热", en: "Heat" } },
                    { value: "fan", label: { zhCN: "送风", en: "Fan" } },
                    { value: "dry", label: { zhCN: "除湿", en: "Dry" } },
                    { value: "auto", label: { zhCN: "自动", en: "Auto" } },
                ],
            },
        });

        currBtn.value = model.value.mode.defaultValue;

        let title = ref("");

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

        const getIcon = function (value) {
            if (value == "cool") {
                return "icon-yewan";
            } else if (value == "heat") {
                return "icon-qingtian";
            } else if (value == "fan") {
                return "icon-baitian";
            } else if (value == "dry") {
                return "icon-yintian";
            } else {
                return "icon-xingzhuang-tuoyuanxing";
            }
        };

        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]?.defaultValue
                            ) {
                                model.value[key].defaultValue = newData[i];
                            }
                            currSpeedIndex.value =
                                model.value.windSpeed.enumItems.findIndex(
                                    (item) =>
                                        item.value ==
                                        model.value.windSpeed.defaultValue
                                );
                        }
                    }
                }
            }
            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 handleClick = function (item, datas) {
            model.value["mode"].defaultValue = item.value;
        };

        const changeValue = function (val) {
            let value = model.value.temperature.defaultValue + val;
            if (value <= model.value.temperature.minimum) {
                model.value.temperature.defaultValue =
                    model.value.temperature.minimum;
            } else if (value >= model.value.temperature.maximum) {
                model.value.temperature.defaultValue =
                    model.value.temperature.maximum;
            } else {
                model.value.temperature.defaultValue = value;
            }
            if (props.props.deviceId) {
                dataModel.doControl(
                    props,
                    bindDevice,
                    bindModel,
                    model.value["temperature"].defaultValue,
                    "temperature"
                );
            }
        };
        return {
            cardStyle,
            eventHandler,
            value: 30,
            num: 26,
            changeSpeed,
            currSpeed,
            currSpeedIndex,
            speedList,
            btnList,
            currBtn,
            openValue,
            switchOpen,
            Title,
            title,
            model,
            getIcon,
            handleClick,
            changeValue,
            airBox,
            buttonClass,
            updateData,
            computeData,
        };
    },
};
</script>

<style lang="scss">
.kf-air-container {
    padding: 0px 8px 16px 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    justify-content: flex-start;
    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 0 0;
        gap: 8px;

        .kf-light-cons1 {
            width: 40%;
            min-width: 120px;
            display: flex;
            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.9);
                background: var(--onColor);
                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-cons3 {
                display: flex;
                width: 100%;
                height: 100%;
                gap: 4px;
                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;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            border-radius: 8px;
            background: transparent;
            .kf-light-cons3-i {
                position: absolute;
                left: 18px;
                height: 100%;
                display: flex;
                align-items: center;
                font-size: 18px;
            }
            .kf-light-cons3-slider {
                display: flex;
                width: 100%;
                height: 100%;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                .el-slider {
                    width: 100%;
                    height: 100%;
                    .el-slider__runway {
                        background: transparent;
                        height: 100%;
                        .el-slider__bar {
                            height: 100%;
                            background: rgba(255, 255, 255, 0.3);
                        }
                        .el-slider__button-wrapper {
                            width: 4px;
                            height: 28px;
                            transform: translateX(-150%);

                            top: calc((100% - 28px) / 2);
                            .el-slider__button {
                                width: 100%;
                                height: 100%;
                                background: rgba(255, 255, 255, 0.16);
                                display: none;
                                border-radius: 4px;
                                border: none;
                                &:hover {
                                    transform: scale(1);
                                }
                            }
                        }
                        &:hover {
                            .el-slider__button {
                                display: flex;
                            }
                        }
                    }
                }
            }
            .kf-light-cons4 {
                width: 100%;
                height: 48px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                align-self: stretch;
                position: relative;
                .kf-light-cons4-i {
                    display: flex;
                    width: 32px;
                    height: 32px;
                    padding: 4px;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    gap: 4px;
                    background: #121212;
                    cursor: pointer;
                    border: 1px solid rgba(255, 255, 255, 0.12);
                    i {
                        font-size: 14px;
                        font-weight: 400;
                        color: #e4e4e4;
                        &:hover {
                            color: #166ce4;
                        }
                    }
                }
                .kf-light-cons4-i-left {
                    border-radius: 4px 0 0 4px;
                }
                .kf-light-cons4-i-right {
                    border-radius: 0 4px 4px 0;
                }
                .kf-light-cons4-txt {
                    display: flex;
                    width: calc(100% - 32px - 32px);
                    height: 100%;
                    color: #166ce4;
                    font-size: 24px;
                    font-style: normal;
                    font-weight: 500;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
            .kf-number-input1 {
                .el-input-number {
                    display: flex;
                    height: 100%;
                    line-height: 100%;
                    width: 100%;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;
                    position: relative;
                    .el-input-number__decrease,
                    .el-input-number__increase {
                        display: flex;
                        top: calc((100% - 32px) / 2);
                        width: 32px;
                        height: 32px;
                        padding: 4px;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        gap: 4px;
                        background: #121212;
                        cursor: pointer;
                        z-index: 0;
                        border: 1px solid rgba(255, 255, 255, 0.12);
                    }
                    .el-input {
                        line-height: 100%;
                        height: 100%;
                        .el-input__wrapper {
                            border: none;
                            padding-left: 32px;
                            padding-right: 32px;
                            background: transparent;
                            height: 100%;
                            line-height: 100%;
                            box-shadow: none;
                            .el-input__inner {
                                padding: 0;
                                border: none;
                                background: transparent;
                                height: 100%;
                                line-height: 100%;
                                color: #166ce4;
                                font-size: 24px;
                                font-style: normal;
                                font-weight: 500;
                                padding-right: 32px;
                                text-align: center;
                            }
                        }
                    }
                    .el-icon {
                        position: static;
                    }
                }
                .kf-number-input1-unit {
                    position: absolute;
                    left: 50%;
                    color: #166ce4;
                    margin-top: -3px;
                    font-size: 24px;
                    font-style: normal;
                    font-weight: 500;
                }
            }
        }
    }

    .kf-air-btns {
        display: flex;
        align-items: flex-start;
        border-radius: 6px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.05);
        .kf-air-btns-item {
            height: 64px;
            width: 100%;
            background: transparent;
            cursor: pointer;
            color: rgba(255, 255, 255, 0.55);
            text-align: center;
            font-feature-settings: "clig" off, "liga" off;
            font-family: Open Sans;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            i {
                color: rgba(255, 255, 255, 0.8);
            }
            &:hover {
                background: #303030;
            }
        }
        .kf-air-btns-item-active {
            border-radius: 6px;
            background: #121212;
            color: #eee;
            text-align: center;
            font-feature-settings: "clig" off, "liga" off;
            font-family: Open Sans;
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
            &:hover {
                background: #121212;
            }
            i {
                color: #305792;
            }
        }
    }
}
</style>