<template>
    <div>
        <!--暂态事件概率分布 -->
        <TableHeader :showReset="false" @selectChange="selectChange" datePicker v-if="fullscreen"></TableHeader>
        <my-echart
            class="tall"
            :options="echartList"
            :style="{ width: prop.width, height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )` }"
        />
        <my-echart
            class="mt10"
            :options="echartList1"
            :style="{ width: prop.width, height: `calc(${prop.height} / 2  - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )` }"
        />
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, reactive, watch } from 'vue'
import TableStore from '@/utils/tableStore'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { getTimeOfTheMonth } from '@/utils/formatTime'
import { useConfig } from '@/stores/config'
import TableHeader from '@/components/table/header/index.vue'
import { useRoute } from 'vue-router'
import { useTimeCacheStore } from '@/stores/timeCache'

const prop = defineProps({
    w: { type: String },
    h: { type: String },
    width: { type: String },
    height: { type: String },
    timeKey: { type: String },
    timeValue: { type: Object }
})

const headerHeight = ref(57)

const route = useRoute()
const timeCacheStore = useTimeCacheStore()

const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
    headerHeight.value = height

    // 如果有传入 datePicker 的值
    if (datePickerValue) {
        // 更新表格参数
        tableStore.table.params.searchBeginTime = datePickerValue.timeValue?.[0]
        tableStore.table.params.searchEndTime = datePickerValue.timeValue?.[1]
    }
}

// 计算是否全屏展示
const fullscreen = computed(() => {
    const w = Number(prop.w)
    const h = Number(prop.h)
    if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
        // 执行相应逻辑
        return true
    } else {
        return false
    }
})

const config = useConfig()

const echartList = ref({
    options: {
        xAxis: null,
        yAxis: null,
        dataZoom: null,
        backgroundColor: '#fff',
        tooltip: {
            // trigger: 'axis'
            textStyle: {
                color: '#fff',
                fontStyle: 'normal',
                opacity: 0.35,
                fontSize: 14
            },
            backgroundColor: 'rgba(0,0,0,0.55)',
            borderWidth: 0,
            formatter: function (params: any) {
                console.log(params)
                var tips = ''
                for (var i = 0; i < params.length; i++) {
                    tips += params[i].name + '</br/>'
                    tips += '监测点数' + ':' + '&nbsp' + '&nbsp' + params[i].value + '</br/>'
                }
                return tips
            }
        },
        title: {
            text: '暂态事件概率分布',
            x: 'center'
        },

        visualMap: {
            max: 20,
            show: false,
            inRange: {
                color: ['#313695', '#00BB00', '#ff8000', '#a50026']
            }
        },
        xAxis3D: {
            type: 'category',
            name: '特征幅值',
            data: [
                '0-10%',
                '10%-20%',
                '20%-30%',
                '30%-40%',
                '40%-50%',
                '50%-60%',
                '60%-70%',
                '70%-80%',
                '80%-90%',
                '90%-100%'
            ],
            axisLine: {
                lineStyle: {
                    color: '#111'
                }
            },
            axisLabel: {
                color: '#111'
            }
        },
        yAxis3D: {
            type: 'category',
            name: '持续时间',
            data: ['0-0.01s', '0.01s-0.1s', '0.1s-1s', '1s-10s', '10s'],
            nameTextStyle: {
                color: '#111'
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#111'
                }
            },
            axisLabel: {
                color: '#111'
            },
            splitLine: {
                lineStyle: {
                    // 使用深浅的间隔色
                    color: ['#111'],
                    type: 'dashed',
                    opacity: 0.5
                }
            }
        },
        zAxis3D: {
            type: 'value',
            splitNumber: 10,
            minInterval: 10,
            name: '暂态事件次数'
        },
        grid3D: {
            viewControl: {
                projection: 'perspective',
                distance: 250
            },
            boxWidth: 200,
            boxDepth: 80,
            light: {
                main: {
                    intensity: 1.2
                },
                ambient: {
                    intensity: 0.3
                }
            }
        },
        series: [
            {
                type: 'bar3D',
                data: [
                    [0, 0, 1],
                    [0, 1, 1],
                    [0.2, 1]
                ],
                shading: 'realistic',
                label: {
                    show: false,
                    textStyle: {
                        fontSize: 16,
                        borderWidth: 1
                    }
                },

                itemStyle: {
                    opacity: 1
                },
                emphasis: {
                    label: {
                        textStyle: {
                            fontSize: 20,
                            color: '#900'
                        }
                    },
                    itemStyle: {
                        color: '#900'
                    }
                }
            }
        ]
    }
})
const echartList1 = ref({
    title: {
        text: '越限时间概率分布'
    },

    xAxis: {
        // name: '时间',
        // data: ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']
        type: 'time',
        axisLabel: {
            formatter: {
                day: '{MM}-{dd}',
                month: '{MM}',
                year: '{yyyy}'
            }
        }
    },

    yAxis: {
        name: '次' // 给X轴加单位
    },
    grid: {
        left: '10px',
        right: '20px'
    },
    options: {
        series: [
            {
                type: 'line',
                showSymbol: false,
                // smooth: true,
                name: '电压中断',
                color: '#FF9100',
                data: [
                    ['2025-10-16 07:00:00', 10],
                    ['2025-10-16 07:15:00', 10],
                    ['2025-10-16 07:30:00', 10],
                    ['2025-10-16 07:45:00', 10],
                    ['2025-10-16 08:00:00', 30],
                    ['2025-10-16 08:15:00', 50],
                    ['2025-10-16 08:30:00', 60],
                    ['2025-10-16 08:45:00', 70],
                    ['2025-10-16 09:00:00', 100],
                    ['2025-10-16 09:15:00', 120],
                    ['2025-10-16 09:30:00', 130],
                    ['2025-10-16 09:45:00', 140],
                    ['2025-10-16 10:00:00', 160],
                    ['2025-10-16 10:15:00', 160],
                    ['2025-10-16 10:30:00', 130],
                    ['2025-10-16 10:45:00', 120],
                    ['2025-10-16 11:00:00', 140],
                    ['2025-10-16 11:15:00', 80],
                    ['2025-10-16 11:30:00', 70],
                    ['2025-10-16 11:45:00', 90],
                    ['2025-10-16 12:00:00', 60],
                    ['2025-10-16 12:15:00', 60],
                    ['2025-10-16 12:30:00', 60],
                    ['2025-10-16 12:45:00', 60]
                ]
            },
            {
                type: 'line',
                showSymbol: false,
                // smooth: true,
                color: '#FFBF00',
                name: '电压暂降',
                data: [
                    ['2025-10-16 07:00:00', 1],
                    ['2025-10-16 07:15:00', 1],
                    ['2025-10-16 07:30:00', 1],
                    ['2025-10-16 07:45:00', 1],
                    ['2025-10-16 08:00:00', 3],
                    ['2025-10-16 08:15:00', 5],
                    ['2025-10-16 08:30:00', 6],
                    ['2025-10-16 08:45:00', 7],
                    ['2025-10-16 09:00:00', 10],
                    ['2025-10-16 09:15:00', 12],
                    ['2025-10-16 09:30:00', 13],
                    ['2025-10-16 09:45:00', 14],
                    ['2025-10-16 10:00:00', 16],
                    ['2025-10-16 10:15:00', 16],
                    ['2025-10-16 10:30:00', 13],
                    ['2025-10-16 10:45:00', 12],
                    ['2025-10-16 11:00:00', 14],
                    ['2025-10-16 11:15:00', 8],
                    ['2025-10-16 11:30:00', 7],
                    ['2025-10-16 11:45:00', 9],
                    ['2025-10-16 12:00:00', 6],
                    ['2025-10-16 12:15:00', 6],
                    ['2025-10-16 12:30:00', 6],
                    ['2025-10-16 12:45:00', 6]
                ]
            },
            {
                type: 'line',
                showSymbol: false,
                // smooth: true,
                name: '电压暂升',
                color: config.layout.elementUiPrimary[0],
                data: [
                    ['2025-10-16 07:00:00', 19],
                    ['2025-10-16 07:15:00', 19],
                    ['2025-10-16 07:30:00', 19],
                    ['2025-10-16 07:45:00', 19],
                    ['2025-10-16 08:00:00', 39],
                    ['2025-10-16 08:15:00', 59],
                    ['2025-10-16 08:30:00', 69],
                    ['2025-10-16 08:45:00', 79],
                    ['2025-10-16 09:00:00', 109],
                    ['2025-10-16 09:15:00', 129],
                    ['2025-10-16 09:30:00', 139],
                    ['2025-10-16 09:45:00', 149],
                    ['2025-10-16 10:00:00', 169],
                    ['2025-10-16 10:15:00', 169],
                    ['2025-10-16 10:30:00', 139],
                    ['2025-10-16 10:45:00', 129],
                    ['2025-10-16 11:00:00', 149],
                    ['2025-10-16 11:15:00', 89],
                    ['2025-10-16 11:30:00', 79],
                    ['2025-10-16 11:45:00', 99],
                    ['2025-10-16 12:00:00', 69],
                    ['2025-10-16 12:15:00', 69],
                    ['2025-10-16 12:30:00', 69],
                    ['2025-10-16 12:45:00', 69]
                ]
            }
        ]
    }
})
const tableStore: any = new TableStore({
    url: '/user-boot/dept/deptTree',
    method: 'POST',
    showPage: false,
    column: [],
    beforeSearchFun: () => {
        // 尝试从缓存获取时间值
        let beginTime, endTime

        if (fullscreen.value) {
            const cached = timeCacheStore.getCache(route.path)
            if (cached && cached.timeValue) {
                beginTime = cached.timeValue[0]
                endTime = cached.timeValue[1]
            }
        }

        // 如果缓存中没有则使用默认值
        tableStore.table.params.searchBeginTime = beginTime || prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]

        tableStore.table.params.searchEndTime = endTime || prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
    },
    loadCallback: () => {
        tableStore.table.data = []
    }
})

const tableRef = ref()
provide('tableRef', tableRef)

provide('tableStore', tableStore)

onMounted(() => {
    tableStore.index()
})
watch(
    () => prop.timeKey,
    val => {
        tableStore.index()
    }
)
watch(
    () => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
    (newVal, oldVal) => {
        tableStore.index()
    },
    {
        deep: true // 若 timeValue 是对象/数组，需开启深度监听
    }
)

const addMenu = () => {}
</script>
<style lang="scss" scoped></style>
