<template>
    <div class="kf-3dc-atom w-100 h-100" :style="buttonStyle"
         ref="buttonBox" v-show="props.show"
         :class="'vivify '+ buttonClass"
         @click="doClick">
        <img :src="getImageUrl(props.image)" :alt="props.name" :style="'object-fit :'+props.objectFit" draggable="false" >
    </div>
</template>

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

export default {
    name: "kfImage",
    props: {
        props: {
            type: Object,
            default: () => {},
        },
        eventList: {
            type: Array,
            default: () => [],
        },
        eventScript: {
            type: String,
        },
    },
    widgetConfig: {
        parent: "base",
        rank: 6,
        label: {
            zh: "图片",
        },
        category: "基础",
        component: "kfImage",
        display: true,
        version: 1,
        icon: "icon-anniu",
        defaultSize: {
            x: 400,
            y: 400,
        },
        imgName: "kfImage",
    },
    setup(props) {
        let bindDevice = null,
            bindModel = null;
        let buttonBox = ref(null);
        const { proxy } = getCurrentInstance();
        let defaultHandler = ref({});
        let buttonStyle = computed(() => {
            return styleManager.computedStyle(proxy);
        });

        let originValue = ref(false);
        let enumValue = ref("");

        let dataVersion = ref(0);
        const updateData = function () {
            dataVersion.value++;
        };

        let buttonClass = computed(() => {
            return styleManager.computedClass(proxy);
        });
        onMounted(() => {
            refreshEvents();
            // buttonStyle.value = styleManager.updateStyle(proxy)
            // buttonClass.value = styleManager.updateClass(proxy)
        });
        const refreshEvents = function (firstTime = false) {
            eventManager.registerEvent(proxy);
        };
        /* watch(props,(newValue,oldValue)=>{
            refreshEvents();
            buttonStyle.value = styleManager.updateStyle(proxy)
            buttonClass.value=styleManager.updateClass(proxy)
        });*/
        pageModel.watchProps(props, watch, proxy, (changes) => {
            // refreshEvents();
            // if (styleManager.styleChanged("kfImage", changes)) {
            //     buttonStyle.value = styleManager.updateStyle(proxy)
            // }
            // if(styleManager.classChanged("kfImage", changes)){
            //     buttonClass.value=styleManager.updateClass(proxy)
            // }
            if (changes && changes["deviceId"]) {
                // 组件绑定的数据ID变化，需要请求新的设备数据和对应的物模型
                updateDeviceAndModel(changes["deviceId"]);
            }
        });

        const bindData = computed(() => {
            let value = "";
            if (dataVersion.value > 0) {
                let newData = dataModel.getData(props.props, false, true);
                // console.log("newData", newData);
                if (newData !== undefined) {
                    originValue.value = newData;
                    value = newData;
                }
            }
            return value;
        });

        watch(bindData, (newValue, oldValue) => {
            nextTick(() => {
                stateManager.onDataChange(props, newValue);
            });
        });

        const updateDeviceAndModel = function (deviceId) {
            if (!deviceId) return;
            bindDevice = dataModel.getDataSourceByDeviceId(deviceId);
            if (bindDevice) {
                bindModel = dataModel.getDeviceModelByDevice(bindDevice);
            }
        };

        const doClick = function (event) {
            try {
                if (props.props.deviceId && props.props.deviceId != "") {
                    if (!bindModel) {
                        updateDeviceAndModel(props.props.deviceId);
                    }
                    let enumLabel = dataModel.getEnumLabelForValue(
                        props,
                        bindData.value,
                        bindModel
                    );
                    if (enumLabel) {
                        dataModel.doControl(
                            props,
                            bindDevice,
                            bindModel,
                            enumLabel
                        );
                    }
                }
                if (eventHandler.value?.click) {
                    eventHandler.value.click(event);
                }
            } catch (e) {
                console.error(e);
            }
        };
        const eventHandler = computed(() => {
            return eventManager.loadEventHandler(
                defaultHandler,
                undefined,
                props.props.pageName
            );
        });

        const getImageUrl = function (pubUuid) {
            let url = require("../../../../public/img/defaultImg.png");
            if (pubUuid != "") {
                url =
                    Const.servicePath.value +
                    "/api/repo/kf-pub-resource/load-file?uuid=" +
                    pubUuid;
            }
            return url;
        };

        return {
            buttonBox,
            buttonStyle,
            doClick,
            defaultHandler,
            eventHandler,
            getImageUrl,
            buttonClass,
            bindData,
            updateData,
        };
    },
};
</script>

<style lang="scss">
.kf-3dc-atom {
    border-width: 0;
    border-style: solid;
    padding: 0px;
    justify-content: center;
    align-items: center;
    transition: all 0.2s linear 0s;
    img {
        width: 100%;
        height: 100%;
        display: flex;
    }
    .kf-3dc-atom-i {
        width: 100%;
        height: 100%;
        background: none;
        border: none;
        display: flex;
        justify-content: inherit;
        align-items: center;
        color: inherit;
        font-size: inherit;
        border-radius: 0;
        font-family: inherit;
    }
}
</style>