<template>
    <div class="kf-3dc-atom flex-row-center-center w-100 h-100" v-show="props.show" :style="textStyle" ref="textBox"
         :class="'vivify '+ buttonClass" @click="doClick($event,textContent)" @dblclick="eventHandler.dbclick"
         @contextmenu.prevent="eventHandler.contextmenu">
        {{ textContent }}
    </div>
</template>

<script>
import {
    onMounted,
    ref,
    getCurrentInstance,
    computed,
    watch,
    nextTick,
} 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";
import serviceModel from "../model/service";

export default {
    name: "kfText",
    props: {
        props: {
            type: Object,
            default: () => {},
        },
        eventScript: {
            type: String,
        },
    },
    widgetConfig: {
        parent: "base",
        rank: 2,
        label: {
            zh: "文本",
        },
        category: "基础",
        component: "kfText",
        display: true,
        version: 1,
        icon: "icon-anniu",
        defaultSize: {
            x: 80,
            y: 29,
        },
        imgName: "kfText",
    },
    setup(props) {
        let bindDevice = null,
            bindModel = null;
        let textBox = ref(null);
        const { proxy } = getCurrentInstance();
        let defaultHandler = ref({});

        let textStyle = computed(() => {
            return styleManager.computedStyle(proxy);
        });

        let buttonClass = computed(() => {
            return styleManager.computedClass(proxy);
        });

        let originValue = ref();

        onMounted(() => {
            refreshEvents();
        });

        const refreshEvents = function () {
            eventManager.registerEvent(proxy);
        };

        pageModel.watchProps(props, watch, proxy, (changes) => {
            if (changes && changes["deviceId"]) {
                // 组件绑定的数据ID变化，需要请求新的设备数据和对应的物模型
                bindDevice = dataModel.getDataSourceByDeviceId(
                    props.props.deviceId
                );
                if (bindDevice) {
                    bindModel = dataModel.getDeviceModelByDevice(bindDevice);
                }
            }
        });

        const dataVersion = ref(0);

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

        let textContent = computed(() => {
            let text = props.props.content;
            if (dataVersion.value > 0) {
                const newData = dataModel.getData(props.props, false, true);
                if (newData !== undefined) {
                    originValue.value = newData;
                }
                if (
                    props.props.hasOwnProperty("contentShow") &&
                    props.props.contentShow
                ) {
                    text = props.props.content;
                } else {
                    const noShowData = dataModel.getData(
                        props.props,
                        false,
                        false
                    );
                    text = noShowData;
                }
            }
            return text;
        });

        const doClick = (e, text) => {
            doControl();
            if (eventHandler.value?.click) {
                eventHandler.value.click(e);
            }
        };

        const doControl = () => {
            if (props.props.deviceId && props.props.deviceId != "") {
                if (!bindModel) {
                    updateDeviceAndModel(props.props.deviceId);
                }
                let enumLabel = dataModel.getEnumLabelForValue(
                    props,
                    originValue.value,
                    bindModel
                );
                if (enumLabel) {
                    dataModel.doControl(
                        props,
                        bindDevice,
                        bindModel,
                        enumLabel
                    );
                }
            }
        };

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

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

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

        return {
            updateData,
            textBox,
            textStyle,
            defaultHandler,
            eventHandler,
            textContent,
            buttonClass,
            doClick,
        };
    },
};
</script>

<style scoped>
</style>