<template>
    <page-container>
            <a-row>
                <a-col v-show="isfullscreen" :xs='24' :sm='24' :md='24' :lg='12' :xl='12'>
                    <j-card>
                        <j-select show-search v-model:value="activeIframe.montorId" :options="monitorList" size="small" placeholder="请选择" style="width: 100%;"></j-select>
                        <iframe :id="'realdata'" :ref="'realdata'" src="static/index.html?viewIndex=88" width="100%" :height="activeIframe.iframeHeight" :style="{ border: 'none',height:activeIframe.iframeHeight }" scrolling='no'/>
                    </j-card>
                </a-col>
                <a-col :xs='24' :sm='24' :md='24' :lg='isfullscreen?12:24' :xl='isfullscreen?12:24'>
                    <a-row>
                        <a-col v-for="(item,index) in iframeInfo" :key="index" :xs="item.xs" :sm="item.sm" :md="item.md" :lg="item.lg" :xl="item.xl">
                            <j-card :bordered="false">
                                <j-select show-search v-model:value="item.montorId" :options="monitorList" size="small" placeholder="请选择" style="width: 100%;"></j-select>
                                <iframe :id="'realdata' + index" :ref="'realdata' + index" src="static/index.html" width="100%" :height="item.iframeHeight" :style="{ border: 'none',height:item.iframeHeight }" scrolling='no'/>
                            </j-card>
                        </a-col>
                    </a-row>
                </a-col>
            </a-row>
    </page-container>
</template>
<script lang="ts" setup name="RealTimeGraph">
import {getCurrentInstance} from 'vue';
import type { iframeInfoType } from './type.d.ts'
import { minHeight, iframeChild1, iframeChild2 } from './data.ts'
import { queryList, getAccessConfig } from '@/api/device/product'
const instance = getCurrentInstance();
//高度计算
const getHeight = (num:number,minHeight:number) :number => {
    const height = (document.body.clientHeight - (60 + (num * 36))) / num
    return height < minHeight ? minHeight : height 
}
const isfullscreen = ref<boolean>(false);
const height = ref<number>(627);
const activeIframe = ref<iframeInfoType>({index:0,montorId:1,viewType:1,xs:24,sm:24,md:12,lg:12,xl:8,iframeHeight:getHeight(1,627)})
const iframeInfo = reactive<iframeInfoType[]>([])
const monitorList = ref<{ label: any; value: any; }[]>([
        {label:'监测点1',value:1},
        {label:'监测点2',value:2},
        {label:'监测点3',value:3},
        {label:'监测点4',value:4},
        {label:'监测点5',value:5},
        {label:'监测点6',value:6},
    ])

// 定义一个更新窗口高度的函数
const updateheight = () => {
    console.log(getHeight(1,627),getHeight(isfullscreen.value?3:2,300))
    activeIframe.value.iframeHeight = getHeight(1,627)
    iframeInfo.map((i, id) => {
        iframeInfo[id].iframeHeight = getHeight(isfullscreen.value?3:2,300)// splice(id,1,{...i,iframeHeight: getHeight(isfullscreen.value?3:2,300)})
    })
};

const listenerFun = (e:any) => {
    if(e?.data?.command == 'event'){
        console.log(e)
    }else if (e?.data?.command == 'load'){
        iframeInfo.forEach((it,id) => {
            let i18n = {
                command:'i18n',
                index:id,
                i18n:{},
            };
            window.frames["realdata" + id].contentWindow.postMessage(i18n, '*')
        })
    }else if (e?.data?.command == 'dblClick'){
        iframeInfo.forEach((it,id) => {
            iframeInfo.splice(id,1,{...iframeChild1,index:id})
            window.frames["realdata" + id].contentWindow.postMessage({command: 'setView',...iframeChild1}, '*')
        })
        isfullscreen.value = true;
        updateheight()
    }else if(e.data.command == 'closeFullScreen'){
        isfullscreen.value = false;
        [1,2,3,4,5,6].map((i,id) => {
        iframeInfo.splice(id,1,{
            ...iframeChild2,
            index:id,
            montorId:id,
        });
        window.frames["realdata" + id].contentWindow.postMessage({command: 'setView',...iframeChild2}, '*')
        updateheight()
    })
    }
};

const iframeIsShow = computed(() => {
    const isfullscreen = iframeInfo.filter(i => i.viewType == 2).length == 0;
    return (index:number)=>{
        return !(isfullscreen && index == iframeInfo.length - 1)
    }
});

watchEffect(() => {

})

const initIframeInfo = () => {
    [1,2,3,4,5,6].map((i,id) => {
        iframeInfo.push({
            ...iframeChild2,
            index:i,
            montorId:i,
            iframeHeight: getHeight(2,300),
        })
    })
};
initIframeInfo()
const bindListener = () => {
    window.removeEventListener('message',listenerFun,true);
// if(!window.listenerEcharts ){
    window.addEventListener('message',listenerFun,true );
    // window.listenerEcharts  = true;
// }
};
// 在 mounted 生命周期钩子中添加事件监听器
onBeforeMount(() => {
    bindListener()
    window.addEventListener('resize', updateheight);
});

onMounted(async () => {
    const resp = await queryList({})
    console.log("🚀  resp:", resp)
})

// 在 unmounted 生命周期钩子中移除事件监听器
onUnmounted(async () => {
    window.removeEventListener('resize', updateheight);

});

</script>

<style lang="less" scoped>
:deep(.ant-card-body){
    padding: 5px 24px;
}
</style>
