<template>
    <div class="container">
        <!-- 使用 v-for 遍历四个角落 -->
        <div v-for="corner in corners" v-show="corner.show"  :key="corner.id" :class="['corner', corner.className]">
            <div class="content">
                <div class="title" style="display: flex">
                    <img src="@/assets/img/lightning.png" class="title_img" />
                    <span>{{ corner.title }}</span>
                </div>
                <vxe-table
                    :data="corner.data"
                    size="small"
                    border
                    show-header
                    :header-cell-style="{ textAlign: 'center' }"
                    :cell-style="{ textAlign: 'center' }"
                    height="200"
                    style="padding: 5px;"
                >
                    <vxe-column field="name" title="名称"></vxe-column>
                    <vxe-column field="a" title="A" width="40"></vxe-column>
                    <vxe-column field="b" title="B" width="40"></vxe-column>
                    <vxe-column field="c" title="C" width="40"></vxe-column>
                </vxe-table>
            </div>
            <span class="close-btn" @click="closeCorner(corner.id)">
                <Close />
            </span>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, nextTick, reactive } from 'vue'
// import { clickImage } from "@/api/manage_wx";
import { Close } from '@element-plus/icons-vue'
import socketClient from '@/utils/webSocketClient'

//开始创建webSocket客户端
const dataSocket = reactive({
    socketServe: socketClient.Instance
})
// 定义四个角落的数据
const corners = ref([
    {
        id: 'topLeft',
        title: '左上',
        className: 'top-left',
        show: false,
        data: [
            { name: '电压', a: 1098, b: 2080, c: 3006 },
            { name: '电流', a: 15, b: 25, c: 35 },
            { name: '电压畸变率', a: 12, b: 22, c: 32 },
            { name: '电流畸变率', a: 18, b: 28, c: 38 },
            { name: '电压偏值', a: 12, b: 22, c: 32 },
            { name: '电压不平衡', a: 18, b: 28, c: 38 }
        ] as any[],
        elementId: '', // 记录该角落对应的元素ID
        raceLists: [] as any[] // 为每个角落添加独立的跑马灯数据存储
    },
    {
        id: 'topRight',
        title: '右上',
        className: 'top-right',
        show: false,
        data: [] as any[],
        elementId: '',
        raceLists: [] as any[] // 为每个角落添加独立的跑马灯数据存储
    }
    // {
    //   id: "bottomLeft",
    //   title: "左下",
    //   className: "bottom-left",
    //   show: false,
    //   data: [] as { label: string; value: string }[],
    //   elementId: "",
    // },
    // {
    //   id: "bottomRight",
    //   title: "右下",
    //   className: "bottom-right",
    //   show: false,
    //   data: [] as { label: string; value: string }[],
    //   elementId: "",
    // },
])

interface DataTableItem {
    name: string
    a: number
    b: number
    c: number
}

const tableData = ref<DataTableItem[]>([
    { name: '电压', a: 1098, b: 2080, c: 3006 },
    { name: '电流', a: 15, b: 25, c: 35 },
    { name: '电压畸变率', a: 12, b: 22, c: 32 },
    { name: '电流畸变率', a: 18, b: 28, c: 38 },
    { name: '电压偏值', a: 12, b: 22, c: 32 },
    { name: '电压不平衡', a: 18, b: 28, c: 38 }
])

const steadyStateList = ref([])

const selectedId = ref('')

// 内部响应式数据
const eventList = ref<any[]>([])

// const handleClickImage = async (elementId: string) => {
//   // 检查 elementId 是否有值，没有值则直接返回空数组
//   if (!elementId) {
//     eventList.value = [];
//     return;
//   }
//   try {
//     // 发送点击图片请求
//     const res = await clickImage({ lineId: elementId });

//     // 确保返回的数据是数组格式，并且过滤掉 null/undefined 元素
//     let dataToStore: any[] = [];

//     if (Array.isArray(res.data)) {
//       dataToStore = res.data.filter(
//         (item:any) => item !== null && item !== undefined
//       );
//     } else if (res.data && Array.isArray(res.data.records)) {
//       dataToStore = res.data.records.filter(
//         (item:any) => item !== null && item !== undefined
//       );
//     } else if (res.data) {
//       // 如果是单个对象且不为 null
//       if (res.data !== null && res.data !== undefined) {
//         dataToStore = [res.data];
//       }
//     }

//     eventList.value = dataToStore;
//   } catch (error) {
//     console.error("调用 clickImage 接口出错:", error);
//     // 出错时设置为空数组，避免后续处理出错
//     eventList.value = [];
//   }
// };

// 记录显示顺序，用于循环替换
const displayOrder = ref<number[]>([])

// 更新指定角落数据的函数
const updateCornerData = (cornerIndex: number, dataItem: any, elementId: string) => {
    // 更新标题为 objName
    if (dataItem.objName) {
        corners.value[cornerIndex].title = dataItem.objName
    } else {
        corners.value[cornerIndex].title = dataItem.stationName
    }

    // 格式化数据
    corners.value[cornerIndex].data = [
        { label: '监测点', value: dataItem.lineName },
        // {
        //   label: "暂降次数",
        //   value: dataItem.eventIds.length,
        // },
        {
            label: '暂降次数',
            value: ``
        },
        // { label: "稳态指标", value: "Ua:65.5   Ub:65.02   Uc:65.27   Uac:112.85  Uab:112.67   Ubc:112.85"  },
        {
            label: '稳态指标',
            value: ``
        }
    ]

    // 记录该角落对应的元素ID
    corners.value[cornerIndex].elementId = elementId
    corners.value[cornerIndex].show = true
}

// 显示下一个角落的函数
const showNextCorner = (elementId: string) => {
    // 检查该元素ID是否已经显示过
    const existingCornerIndex = corners.value.findIndex(corner => corner.elementId === elementId && corner.show)

    if (existingCornerIndex !== -1) {
        // 如果该元素已经显示过，不更新数据
        return
    }

    // 确保 eventList.value 是数组并且过滤掉 null/undefined 元素
    if (!Array.isArray(eventList.value)) {
        console.warn('eventList.value 不是数组格式:', eventList.value)
        return
    }

    // 过滤掉 null 和 undefined 元素，然后查找匹配项
    const validItems = eventList.value.filter(item => item !== null && item !== undefined)
    const dataItem = validItems.find(item => item.lineId === elementId)

    // 如果没有找到匹配的数据项，则不更新数据
    if (!dataItem) {
        console.warn('未找到匹配的数据项:', elementId)
        return
    }

    // 查找一个未显示的角落
    const availableCornerIndex = corners.value.findIndex(corner => !corner.show)

    if (availableCornerIndex !== -1) {
        // 有空闲角落，显示在该角落
        updateCornerData(availableCornerIndex, dataItem, elementId)
        // 将事件数据存储到该角落
        corners.value[availableCornerIndex].raceLists = dataItem.eventList || []
        // 记录显示顺序
        displayOrder.value.push(availableCornerIndex)
    } else {
        // 没有空闲角落，按顺序替换角落
        // 获取需要替换的角落索引（循环替换）
        const replaceIndex = displayOrder.value.shift() || 0
        updateCornerData(replaceIndex, dataItem, elementId)
        // 将事件数据存储到该角落
        corners.value[replaceIndex].raceLists = dataItem.eventList || []
        // 将替换的索引重新加入队列末尾
        displayOrder.value.push(replaceIndex)
    }
}

// 关闭指定角落的函数
const closeCorner = (id: string) => {
    const cornerIndex = corners.value.findIndex(c => c.id === id)
    if (cornerIndex !== -1) {
        corners.value[cornerIndex].show = false
        corners.value[cornerIndex].elementId = '' // 清空元素ID记录

        // 从显示顺序中移除该角落索引
        const orderIndex = displayOrder.value.indexOf(cornerIndex)
        if (orderIndex !== -1) {
            displayOrder.value.splice(orderIndex, 1)
        }
    }
    send()
}

// 关闭所有角落的函数
const closeAllCorners = () => {
    corners.value.forEach(corner => {
        corner.show = false
        corner.elementId = ''
    })
    displayOrder.value = []
}

// 组件挂载后初始化监听器
onMounted(() => {
    init()
    // 初始化时不显示任何内容
})

// 连接webSocket客户端
const init = () => {
    if (!dataSocket.socketServe) {
        console.error('WebSocket 客户端实例不存在')
        return
    }
    dataSocket.socketServe.connect(new Date().getTime())
    dataSocket.socketServe.registerCallBack('message', (res: any) => {
        if (res.type == 1) {
            //稳态指标数据
            let steadyState = JSON.parse(res.message)

            // console.log(steadyState, "8990hhhhh");
            if (steadyState == null || steadyState.length == 0) return
            steadyStateList.value = steadyState
            corners.value.forEach((corner, index) => {
                let str = ``
                steadyState
                    .filter((item: any) => item.lineId == corner.elementId)
                    .forEach((item: any) => {
                        if (item.value == 3.1415926) {
                            str += `<div>${item.statisticalName}：/</div>`
                        } else {
                            str += `<div>${item.statisticalName}：${item.value}${item.unit}</div>`
                        }
                    })

                corner.data.length > 0
                    ? (corner.data[2].value = `<div style="max-height: 100px;overflow-y: auto;">${str} </div>`)
                    : ''
            })
        }
    })
}

const time = ref(null)
// 推送消息
const send = () => {
    dataSocket.socketServe.send({
        pageId: selectedId.value,
        lineIdList: corners.value.filter(item => item.show == true).map(corner => corner.elementId)
    })
    if (time.value) {
        clearTimeout(time.value)
    }
    if (corners.value.filter(item => item.show == true).map(corner => corner.elementId).length == 0) return
    time.value = setInterval(() => {
        dataSocket.socketServe.send({
            pageId: selectedId.value,
            lineIdList: corners.value.filter(item => item.show == true).map(corner => corner.elementId)
        })
    }, 1000 * 60)
}

// 监听来自 iframe 的消息
window.addEventListener('message', async function (event) {
    // 安全起见，可以验证消息来源（origin）
    // if (event.origin !== 'https://trusted-origin.com') return;

    // 处理从 iframe 发送过来的消息
    if (event.data.action === 'coreClick') {
        const clickedElementId = event.data.coreId
        selectedId.value = event.data.selectedId

        // 调用接口获取最新数据
        // await handleClickImage(clickedElementId);

        // 根据接收到的元素LineId显示对应数据
        await showNextCorner(clickedElementId)

        await send()
    }
})

// 页面卸载时清除定时器
onBeforeUnmount(() => {
    clearTimeout(time.value)
    dataSocket.socketServe?.closeWs()
})
</script>


<style scoped lang="scss">
.container {
    position: relative;
}

.corner {
    width: 240px;
    /* height: 135px; */
    background-color: #fff;
    position: absolute;
    color: #000;
    /* font-weight: bold; */
    /* 添加弹出动画 */
    opacity: 0;
    transform: scale(0.3);
    transition: all 0.4s ease-out;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* 显示状态的样式 */
.corner:not([style*='display: none']):not([style*='display:none']) {
    opacity: 1;
    transform: scale(1);
}

.top-left {
    top: 10px;
    left: 10px;
}

.top-right {
    top: 10px;
    right: 10px;
}

.bottom-left {
    top: 170px;
    left: 10px;
}

.bottom-right {
    top: 170px;
    right: 10px;
}

.content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.title {
    font-size: 16px;
    // text-align: center;
    padding: 5px;
     color: #fff; 
    border-bottom: 1px solid #444;
    background-color: var(--el-color-primary);
    border-radius: 8px 8px 0 0;
}

.title_img {
    width: 25px;
    height: 25px;
    margin-right: 10px;
}

.data-item {
    display: flex;
    margin-bottom: 4px;
    font-size: 12px;
}

.label {
    /* font-weight: bold; */
    width: 55px;
    flex-shrink: 0;
}

.value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 关闭按钮样式 */
.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 14px;
    color: white;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}

.indicator {
    display: flex;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    border: 1px solid #000;
    text-align: center;
    font-size: 12px;
}
</style>
