<template>
    <page-container>
        <a-row>
            <a-row :style="{ width: 'calc(100% - 160px)' }">
                <a-col :xs='24' :sm='24' :md='24' :lg='24' :xl='24'>
                    <j-card>
                        <j-tabs v-model:activeKey="activeKey">
                            <j-tab-pane v-for="item in list" :key="item.key" :tab="item.title" />
                        </j-tabs>
                        <keep-alive>
                            <component :type='activeKey' :monitorIds="monitorIds" :monitorList="monitorList"
                                :is="tabs[activeKey]" />
                        </keep-alive>
                    </j-card>
                </a-col>
            </a-row>
            <a-card :style="{ width: '150px', marginLeft: '10px' }">
                <a-list size="small" :data-source="data">
                    <template #renderItem="{ item, index }">
                        <a-list-item>
                            <a-button @click='changeTime(index)'
                                :type="index == activeIndex ? 'link' : 'text'">{{ item }}</a-button>
                        </a-list-item>
                    </template>
                    <template #header>
                        <div :style="{ textAlign: 'center' }">时间</div>
                    </template>
                </a-list>
            </a-card>
        </a-row>

    </page-container>
</template>
<script lang="ts" setup name="gisAnalyzeDiagnosis">
import { getCurrentInstance } from 'vue';
import type { iframeInfoType } from './type'
import { minHeight, iframeChild1, iframeChild2 } from './data'
import { useMenuStore } from 'store/menu';
import { onlyMessage } from '@/utils/comm';
import ThreeChart from '@/components/Chart/index.vue';

import Prpd from './Prpd.vue';
import PrpdTotal from './PrpdTotal.vue';
import Prps from './Prps.vue';
import EventStatistics from './EventStatistics.vue';
import EventList from './EventList.vue';


const monitorIds = [1, 2, 3, 4, 5, 6];

const monitorList = ref<{ label: string; value: number; }[]>([
    { label: '监测点1', value: 1 },
    { label: '监测点2', value: 2 },
    { label: '监测点3', value: 3 },
    { label: '监测点4', value: 4 },
    { label: '监测点5', value: 5 },
    { label: '监测点6', value: 6 },
])


type KeyType = 'Prpd' | 'PrpdTotal' | 'Prps' | 'EventStatistics' | 'EventList';

const activeKey = ref<KeyType>('Prpd');

const list: { key: KeyType; title: string }[] = [
    {
        key: 'Prpd',
        title: 'PRPD',
    },
    {
        key: 'PrpdTotal',
        title: 'PRPD(累计)',
    },
    {
        key: 'Prps',
        title: 'PRPS',
    },
    {
        key: 'EventStatistics',
        title: '事件统计',
    },
    {
        key: 'EventList',
        title: '事件列表',
    },
];
const tabs = {
    Prpd,
    PrpdTotal: Prpd,
    Prps: Prpd,
    EventStatistics,
    EventList,
};

const activeIndex = ref<number>(1)

const changeTime = (index: number) => {
    activeIndex.value = index
}

const menuStory = useMenuStore();

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 data: string[] = [
    '10:30:00',
    '10:30:00',
    '10:30:00',
    '10:30:00',
    '10:30:00',
    '10:30:00',
    '10:30:00',
    '10:30:00',
    '10:30:00',
    '10:30:00',
    '10:30:00',
    '10:30:00',
    '10:30:00',
    '10:30:00',
    '10:30:00',
    '10:30:00',
    '10:30:00',
    '10:30:00',

];

const height = ref<number>(627);
const iframeInfo = reactive<iframeInfoType[]>([])


// 定义一个更新窗口高度的函数
const updateheight = () => {
    iframeInfo.map((i, id) => {
        iframeInfo[id].iframeHeight = getHeight(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, '*')
            iframeInfo.splice(id, 1, { ...iframeChild1, index: id })
            window.frames["realdata" + id].contentWindow.postMessage({ command: 'setView', ...iframeChild1 }, '*')
        })
    }
};


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);
});

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

</script>

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

:deep(.ant-list-item) {
    padding: 0;
    width: 100px;
}
</style>
