<template>

    <div id="chart-container" v-loading="tableStore.table.loading"
        :style="`height: calc(${tableStore.table.height} - 125px)`"></div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'

import * as echarts from 'echarts';
import { useDictData } from '@/stores/dictData'
import { useConfig } from '@/stores/config'
const config = useConfig()
const dictData = useDictData()
const options = ref({})



const TableHeaderRef = ref()
const tableStoreParams: any = ref({})
const loading = ref(false)
const getTableStoreParams = async (val: any) => {
    tableStoreParams.value = val
    loading.value = true
    setTimeout(() => {
        tableStore.index()
    }, 1500)
}
const tableStore = new TableStore({
    url: '/harmonic-boot/steadyExceedRate/getSteadyExceedRateCensus',
    showPage: false,
    method: 'POST',
    column: [],
    beforeSearchFun: () => {
        tableStore.table.params = tableStoreParams.value
    },
    loadCallback: () => {

        let code = tableStore.table.params.statisticalType.code
        let title = '',
            titleX = ''
        if (code == 'Power_Network') {
            title = '区域'
            titleX = '区域'
        } else if (code == 'Manufacturer') {
            title = '终端厂家'
            titleX = '终端\n厂家'
        } else if (code == 'Voltage_Level') {
            title = '电压等级'
            titleX = '电压\n等级'
        } else if (code == 'Load_Type') {
            title = '干扰源类型'
            titleX = '干扰\n源类型'
        }
        const chart = echarts.init(document.getElementById('chart-container'));
        let data = tableStore.table.data.steadyExceedRate
        let ydata = tableStore.table.data.type


        for (var i = 0; i < tableStore.table.data.time.length; i++) {
            if (i != 0) {
                i
                tableStore.table.data.time[i] = tableStore.table.data.time[i].slice(5)
            } else if (i == 0) {
                let date = tableStore.table.data.time[i].slice(5)
                let t = tableStore.table.data.time[i].slice(0, 4)
                tableStore.table.data.time[i] = date + '\n' + '(' + t + ')'
            }
        }
        let xdata = tableStore.table.data.time

        let arr = []
        for (var i = 0; i < data.length; i++) {
            for (var j = 0; j < data[i].length; j++) {
                if (data[i][j] == 3.14159 || data[i][j] == 0) {
                    arr.push([i, j, 0])
                } else if (data[i][j] == 3.1415) {
                    arr.push([i, j, '/'])
                } else {
                    arr.push([i, j, data[i][j]])
                }
            }
        }

        // 配置项
        const option = {
            title: {
                text: '稳态指标符合性占比' + '(统计类型' + title + ')',
                left: 'center',
                // textStyle: {
                color: '#000',
                fontSize: 18,
            },

            toolbox: {
                right: 20,
                top: 20,
                feature: {
                    saveAsImage: {
                        title: '保存图片',
                    },
                },
                emphasis: {
                    iconStyle: {
                        borderColor: config.layout.elementUiPrimary[0], // 鼠标悬停时的边框颜色
                        color: config.layout.elementUiPrimary[0] // 鼠标悬停时的图标颜色
                    }
                },

            },
            grid: {
                top: '60px',
                left: '30px',
                right: '70px',
                bottom: '40px',
                containLabel: true,

            },
            dataZoom: [
                {
                    type: 'inside',
                    height: 13,
                    start: 0,
                    bottom: '20px',
                    end: 100
                },
                {
                    start: 0,
                    height: 13,
                    bottom: '20px',
                    end: 100
                }
            ],
            visualMap: {
                min: 0,
                max: 100,
                text: ['', '稳态指标符合性占比(%)'],
                //calculable: true,
                orient: 'horizontal',
                top: '0px',
                right: '50px',
                inRange: {
                    color: ['#ccc', '#A52a2a', "#339966"]
                }
            },
            tooltip: {
                trigger: 'item',
                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,
                confine: true,
                formatter: function (param) {
                    let msg = ''
                    if (param.value[2] === 0) {
                        msg += ydata[param.value[1]] + '<br/>'
                        if (xdata[param.value[0]].length == 1) {
                            msg += '时间:' + xdata[param.value[0]] + '月<br/>'
                            msg += param.seriesName + ':暂无数据'
                        } else if (xdata[param.value[0]].length == 8) {
                            let p = xdata[param.value[0]].slice(0, 2)
                            msg += '时间:' + p + '月<br/>'
                            msg += param.seriesName + ':暂无数据'
                        } else if (xdata[param.value[0]].length == 12) {
                            let r = xdata[param.value[0]].slice(0, 5)
                            msg += '时间:' + r + '<br/>'
                            msg += param.seriesName + ':暂无数据'
                        }
                        else {
                            msg += '时间:' + xdata[param.value[0]] + '<br/>'
                            msg += param.seriesName + ':暂无数据'
                        }



                        return msg
                    } else {
                        msg += ydata[param.value[1]] + '<br/>'
                        if (xdata[param.value[0]].length == 1) {

                            msg += '时间:' + xdata[param.value[0]] + '月<br/>'
                            msg += param.seriesName + ':' + param.value[2]
                        } else if (xdata[param.value[0]].length == 8) {
                            let p = xdata[param.value[0]].slice(0, 2)
                            msg += '时间:' + p + '月<br/>'
                            msg += param.seriesName + ':' + param.value[2]
                        } else if (xdata[param.value[0]].length == 12) {
                            let r = xdata[param.value[0]].slice(0, 5)
                            msg += '时间:' + r + '<br/>'
                            msg += param.seriesName + ':' + param.value[2]
                        }
                        else {
                            msg += '时间:' + xdata[param.value[0]] + '<br/>'
                            msg += param.seriesName + ':' + param.value[2]
                        }


                        return msg
                    }
                },
            },
            xAxis: {
                name: titleX,
                type: 'category',
                data: xdata,

            },
            yAxis: {
                type: 'category',
                data: ydata
            },
            series: [
                {
                    name: '稳态指标符合性占比',
                    type: 'heatmap',
                    data: arr,
                    itemStyle: {
                        normal: {
                            // 随机显示
                            //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                            // 定制显示（按顺序）
                            color: function (params) {
                                if (params.value == 3.14159 || params.value == 0) {
                                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 1, color: "#ccc" }], false);
                                }
                            }
                        },
                    },
                    label: {
                        normal: {
                            show: true,
                            fontSize: '12px',
                            color: '#fff'

                        }
                    },

                }
            ]
        };

        // 使用配置项设置图表
        chart.setOption(option);

    }
})


provide('tableStore', tableStore)

onMounted(() => { })
defineExpose({ getTableStoreParams })
</script>
<style scoped lang="scss"></style>
