<template>
    <SecondSheet>
        <div style='height: 100%; overflow: hidden' >
            <div class='switch-tab'>
                <el-radio-group v-model='radio' >
                    <el-radio-button value='三维图'>三维图</el-radio-button>
                    <el-radio-button value='表格'>表格</el-radio-button>
                </el-radio-group>
            </div>
            <Table ref='tableRef'  isGroup />
            <SecondSheet v-if="radio === '三维图'">
                <MyEchart :options='options' v-if='options'></MyEchart>
            </SecondSheet>
        </div>
    </SecondSheet>
</template>

<script lang='ts' setup>
import { ref, provide } from 'vue'
import SecondSheet from '@/components/secondSheet/index.vue'
import Table from '@/components/table/index.vue'
import TableStore from '@/utils/tableStore'
import MyEchart from '@/components/echarts/MyEchart.vue'

const radio = ref('三维图')
const options = ref()
const apiData = ref()
const tableStore3D = new TableStore({
    showPage: false,
    // 若页面表格高度需要调整，请修改publicHeight(内容区域除表格外其他内容的高度)
    url: '/advance-boot/sgEvent/3DList',
    method: 'POST',
    column: [
        {
            title: '电压暂降频次统计表',
            children: [
                { title: '暂降幅值(p.u.)', field: 'amplitude', width: '130' },
                {
                    title: '持续时间(s)',
                    field: 'loginName',
                    children: []
                }
            ]
        }
    ],
    loadCallback: () => {
        const eventCount = tableStore3D.table.data.values
        tableStore3D.table.data = {
            amplitudes: ['0.8~0.9', '0.7~0.8', '0.6~0.7', '0.5~0.6', '0.4~0.5', '0.1~0.4'],
            durations: ['0.01~0.02', '0.02~0.05', '0.05~0.07', '0.07~0.10', '0.10~1.00'],
            values: [
                ['0.8~0.9', '0.01~0.02', eventCount[0][2]],
                ['0.8~0.9', '0.02~0.05', eventCount[1][2]],
                ['0.8~0.9', '0.05~0.07', eventCount[2][2]],
                ['0.8~0.9', '0.07~0.10', eventCount[3][2]],
                ['0.8~0.9', '0.10~1.00', eventCount[4][2]],
                ['0.7~0.8', '0.01~0.02', eventCount[5][2]],
                ['0.7~0.8', '0.02~0.05', eventCount[6][2]],
                ['0.7~0.8', '0.05~0.07', eventCount[7][2]],
                ['0.7~0.8', '0.07~0.10', eventCount[8][2]],
                ['0.7~0.8', '0.10~1.00', eventCount[9][2]],
                ['0.6~0.7', '0.01~0.02', eventCount[10][2]],
                ['0.6~0.7', '0.02~0.05', eventCount[11][2]],
                ['0.6~0.7', '0.05~0.07', eventCount[12][2]],
                ['0.6~0.7', '0.07~0.10', eventCount[13][2]],
                ['0.6~0.7', '0.10~1.00', eventCount[14][2]],
                ['0.5~0.6', '0.01~0.02', eventCount[15][2]],
                ['0.5~0.6', '0.02~0.05', eventCount[16][2]],
                ['0.5~0.6', '0.05~0.07', eventCount[17][2]],
                ['0.5~0.6', '0.07~0.10', eventCount[18][2]],
                ['0.5~0.6', '0.10~1.00', eventCount[19][2]],
                ['0.4~0.5', '0.01~0.02', eventCount[20][2]],
                ['0.4~0.5', '0.02~0.05', eventCount[21][2]],
                ['0.4~0.5', '0.05~0.07', eventCount[22][2]],
                ['0.4~0.5', '0.07~0.10', eventCount[23][2]],
                ['0.4~0.5', '0.10~1.00', eventCount[24][2]],
                ['0.1~0.4', '0.01~0.02', eventCount[25][2]],
                ['0.1~0.4', '0.02~0.05', eventCount[26][2]],
                ['0.1~0.4', '0.05~0.07', eventCount[27][2]],
                ['0.1~0.4', '0.07~0.10', eventCount[28][2]],
                ['0.1~0.4', '0.10~1.00', eventCount[29][2]]
            ],
            table: {
                total: 6,
                rows: [
                    {
                        amplitude: '0.8~0.9',
                        d001_002s: eventCount[0][2],
                        d002_005s: eventCount[1][2],
                        d005_007s: eventCount[2][2],
                        d007_010s: eventCount[3][2],
                        d010_100s: eventCount[4][2]
                    },
                    {
                        amplitude: '0.7~0.8',
                        d001_002s: eventCount[5][2],
                        d002_005s: eventCount[6][2],
                        d005_007s: eventCount[7][2],
                        d007_010s: eventCount[8][2],
                        d010_100s: eventCount[9][2]
                    },
                    {
                        amplitude: '0.6~0.7',
                        d001_002s: eventCount[10][2],
                        d002_005s: eventCount[11][2],
                        d005_007s: eventCount[12][2],
                        d007_010s: eventCount[13][2],
                        d010_100s: eventCount[14][2]
                    },
                    {
                        amplitude: '0.5~0.6',
                        d001_002s: eventCount[15][2],
                        d002_005s: eventCount[16][2],
                        d005_007s: eventCount[17][2],
                        d007_010s: eventCount[18][2],
                        d010_100s: eventCount[19][2]
                    },
                    {
                        amplitude: '0.4~0.5',
                        d001_002s: eventCount[20][2],
                        d002_005s: eventCount[21][2],
                        d005_007s: eventCount[22][2],
                        d007_010s: eventCount[23][2],
                        d010_100s: eventCount[24][2]
                    },
                    {
                        amplitude: '0.1~0.4',
                        d001_002s: eventCount[25][2],
                        d002_005s: eventCount[26][2],
                        d005_007s: eventCount[27][2],
                        d007_010s: eventCount[28][2],
                        d010_100s: eventCount[29][2]
                    }
                ],
                code: 200,
                msg: '查询成功'
            }
        }
        apiData.value = tableStore3D.table.data
        tableStore3D.table.column![0].children![1].children = []
        tableStore3D.table.column![0].children![1].children!.push(
            ...(apiData.value.durations.map((item: string) => {
                return {
                    title: item,
                    field: `d${item.replaceAll('.', '').replaceAll('~', '_')}s`
                }
            }) as any[])
        )
        tableStore3D.table.data = apiData.value.table.rows
        initEchart()
    }
})
// 注入到子组件
provide('tableStore3D', tableStore3D)

const initEchart = () => {
    options.value = {
        options: {
            xAxis: null,
            yAxis: null,
            dataZoom: null,
            backgroundColor: '#fff',
            tooltip: {
                axisPointer: {
                    type: 'shadow',
                    label: {
                        color: '#fff',
                        fontSize: 16
                    }
                },
                textStyle: {
                    color: '#fff',
                    fontStyle: 'normal',
                    opacity: 0.35,
                    fontSize: 14
                },
                backgroundColor: 'rgba(0,0,0,0.55)',
                borderWidth: 0,
                formatter: function (params: any) {
                    let tips = ''
                    tips += '<font>暂降幅值(p.u.):' + apiData.value.amplitudes[params.value[0]] + '</font><br/>'
                    tips += '<font>持续时间(s):' + apiData.value.durations[params.value[1]] + '</font><br/>'
                    tips += '<font>事件次数::' + params.value[2] + '</font>'
                    return tips
                }
            },
            title: {
                text: '暂降密度图',
                x: 'center'
            },
            xAxis3D: {
                name: '暂降幅值(p.u.)',
                type: 'category',
                data: apiData.value.amplitudes
            },
            yAxis3D: {
                name: '持续时间(s)',
                type: 'category',
                data: apiData.value.durations
            },
            zAxis3D: {
                name: '次数',
                type: 'value'
            },
            grid3D: {
                boxWidth: 200,
                boxDepth: 80,
                viewControl: {
                    projection: 'perspective',
                    distance: 250
                },
                light: {
                    main: {
                        intensity: 1.2,
                        shadow: true
                    },
                    ambient: {
                        intensity: 0.3
                    }
                }
            },
            series: [
                {
                    type: 'bar3D',
                    data: apiData.value.values.map((item: [string, string, string]) => {
                        return [
                            apiData.value.amplitudes.indexOf(item[0]),
                            apiData.value.durations.indexOf(item[1]),
                            item[2]
                        ]
                    }),
                    shading: 'lambert',
                    label: {
                        fontSize: 16,
                        borderWidth: 1
                    },
                    emphasis: {
                        label: {
                            fontSize: 20,
                            color: '#900'
                        },
                        itemStyle: {
                            color: '#900'
                        }
                    }
                }
            ]
        }
    }
}
const search = (id: string, beginTime: string, endTime: string) => {
    // 从父组件tableStore3D获取参数
    tableStore3D.table.params.searchBeginTime = beginTime
    tableStore3D.table.params.searchEndTime = endTime
    tableStore3D.table.params.userId = id
    tableStore3D.index()
}
defineExpose({ search })
</script>
<style lang='scss'>
.switch-tab {
    position: absolute;
      right: 345px;
    top: -37px;
    z-index: 11;
}
</style>
