<template>
    <div class="kf-curtain-container w-100 h-100 flex-column-between-start" v-show="props.show" :style="cardStyle" ref="curtainBox"
         :class="'vivify '+ buttonClass">
        <div class="kf-light-title" v-if="props.isShowTitle">{{title}}</div>
        <div class="kf-light-cons flex-row-between-center" :class="[!props.isShowTitle?'pt8':'pt0']">
<!--            <div class="kf-light-cons1 pr" v-for="(item,index) in computeData.direction.enumItems" :key="index + 'dir'">
                <div class="kf-light-cons1-i"></div>
                <div class="" :class="[computeData.direction.defaultValue == item.value?'kf-light-cons2':'kf-light-cons3']"
                     @click="switchOpen(item)">
                    {{item.label.zhCN}}</div>
            </div>-->
            <div class="kf-light-cons1 pr" v-for="(item,index) in computeData.state.enumItems" :key="index + 'dir'">
                <div class="kf-light-cons1-i"></div>
                <div class="" :class="[computeData.state.defaultValue == item.value?'kf-light-cons2':'kf-light-cons3']"
                     @click="switchOpen(item)">
                    {{item.label.zhCN}}</div>
            </div>
        </div>

        <div class="kf-light-cons w-100 pr">
            <div class="kf-light-cons1 w-100" style="width: 100%">
                <el-slider v-model="computeData.motor_position.defaultValue" :show-tooltip="false" @change="changeValue"
                           :min="computeData.motor_position.minimum" :max="computeData.motor_position.maximum" />
            </div>
            <i class="iconfont icon-shuxianyou kf-light-cons3-i"></i>
        </div>
<!--        <div class="kf-air-btns w-100" v-if="computeData.speed.enumItems">
            <div class="flex-column-center-center kf-air-btns-item"
                 :class="[computeData.speed.value==item.value?'kf-air-btns-item-active':'']"
                 v-for="(item,index) in computeData.speed.enumItems" :key="item.value+index" @click="handleClick(item,computeData.speed)">
                <i class="iconfont mb5" :class="[item.value=='fast'?'icon-sudu3':(item.value=='slow'?'icon-sudu1':'icon-sudu2')]"></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: "kfCurtain",
    props: {
        props: {
            type: Object,
            default: () => {},
        },
        eventList: {
            type: Array,
            default: () => [],
        },
        eventScript: {
            type: String,
        },
    },
    widgetConfig: {
        parent: "base",
        rank: 8,
        label: {
            zh: "窗帘",
        },
        category: "业务",
        component: "kfCurtain",
        display: true,
        version: 1,
        icon: "icon-anniu",
        defaultSize: {
            x: 296,
            y: 200,
        },
        minSize:{
            width: 296,
            height: 200,
        },
        imgName: "kfCurtain",
        state: {
            isAdd: false,
            isCondition: false,
        },
    },
    setup(props) {
        let bindDevice = null,
            bindModel = null;
        let curtainBox = ref(null);
        let cardStyle = ref({});
        const { proxy, type } = getCurrentInstance();
        let defaultHandler = ref({});
        let defaultSize = type.widgetConfig.defaultSize;
        let buttonClass = ref("");

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

        onMounted(() => {
            refreshEvents();
            cardStyle.value = styleManager.updateStyle(proxy);
            curtainBox.value.style.setProperty("--onColor", props.props["onColor"] != undefined && props.props["onColor"] ? props.props["onColor"] : "#305792");
            buttonClass.value = styleManager.updateClass(proxy);
            loadTitle();
        });
        const Title = computed(() => {
            let title = "办公室-A01-窗帘001";
            if (props?.props?.title) {
                title = props.props.title;
            }
            return title;
        });
        const refreshEvents = function () {
            eventManager.registerEvent(proxy);
        };
        /*watch(props,(newValue,oldValue)=>{
            refreshEvents();
            cardStyle.value = styleManager.updateStyle(proxy)
        });*/
        pageModel.watchProps(props, watch, proxy, (changes) => {
            refreshEvents();
            if (styleManager.styleChanged("kfCurtain", changes)) {
                cardStyle.value = styleManager.updateStyle(proxy);
            }
            if (styleManager.classChanged("kfCurtain", changes)) {
                buttonClass.value = styleManager.updateClass(proxy);
            }
            if (changes && changes["deviceId"] && changes["deviceId"] != undefined) {
                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;
                    }
                    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);
                }
            }
            if(curtainBox.value){
                curtainBox.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 currBtn = ref("");
        let value = ref(100);

        let openValue = ref(false);

        let title = ref("办公室-A01-窗帘001");

        let model = ref({
            direction: {
                name: "direction",
                sno: 12,
                type: "string",
                format: "buttonGroup",
                minimum: null,
                maximum: null,
                unit: null,
                parent: null,
                label: {
                    en: "Direction",
                    zhCN: "窗帘方向",
                    zhTW: null,
                },
                required: true,
                controllable: null,
                defaultValue: "1",
                enumItems: [
                    {
                        value: "1",
                        label: {
                            en: "Up",
                            zhCN: "上",
                            zhTW: null,
                        },
                    },
                    {
                        value: "2",
                        label: {
                            en: "Stop",
                            zhCN: "停止",
                            zhTW: null,
                        },
                    },
                    {
                        value: "3",
                        label: {
                            en: "Down",
                            zhCN: "下",
                            zhTW: null,
                        },
                    },
                ],
                validators: null,
            },
            speed: {
                controllable: false,
                defaultValue: "normal",
                value: "normal",
                lebel: {
                    en: "Speed",
                    zhCN: "窗帘速度",
                },
                enumItems: [
                    { value: "fase", label: { zhCN: "快速", en: "Fast" } },
                    { value: "normal", label: { zhCN: "正常", en: "Normal" } },
                    { value: "slow", label: { zhCN: "慢速", en: "Slow" } },
                ],
            },
            position: {
                controllable: false,
                defaultValue: 0,
                value: 0,
                lebel: {
                    en: "Position",
                    zhCN: "窗帘位置",
                },
                enumItems: null,
                unit: "%",
                maximum: 100,
                minimum: 0,
            }, motor_position: {
                controllable: true,
                defaultValue: 0,
                value: 0,
                lebel: {
                    en:"Motor Position",
                    zhCN: "设置允许到具体位置",
                },
                enumItems: null,
                unit: "%",
                maximum: 100,
                minimum: 0,
            },
            state:{
                controllable: false,
                defaultValue:1,
                value: 1,
                lebel: {
                    en: "Curtain State",
                    zhCN: "控制开关",
                },
                enumItems: [
                     { value: 1, label: { zhCN: "开", en: "On" } },
                    { value: 2, label: { zhCN: "关", en: "Off" } },
                ],
            }
        });
        currBtn.value = model.value.speed.defaultValue;

        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
                );
                loadTitle();
            }
            if (dataVersion.value > 0) {
                let newData = dataModel.getData(props.props, false, true);
                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 switchOpen = function (enumItem) {
            model.value.state.defaultValue = enumItem.value;
            dataModel.doControl(props, bindDevice, bindModel, enumItem.value, "state");
        };

        const handleClick = function (item, datas) {
            currBtn.value = item.value;
            model.value.speed.value = item.value;
        };
        const changeValue = function (val) {
            dataModel.doControl(props, bindDevice, bindModel, val, "motor_position");
        };

        return {
            model,
            title,
            cardStyle,
            eventHandler,
            value,
            currBtn,
            openValue,
            switchOpen,
            Title,
            handleClick,
            changeValue,
            curtainBox,
            buttonClass,
            updateData,
            computeData,
        };
    },
};
</script>

<style lang="scss">
.kf-curtain-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: 0;
        align-self: stretch;
        gap: 5px;
        .el-slider {
            width: 100%;
            height: 60px;
            .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-cons1 {
            width: 48%;
            // min-width: 120px;
            display: flex;
            height: 60px;
            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;
                color: rgba(255, 255, 255, 0.55);
                background: #0c0c0c;
                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;
        }
    }
    .pt8 {
        padding-top: 8px;
    }

    .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>