<template>
    <div class="charts" style="position: relative; width: 100%">

        <div style="position: absolute; right: 60px; top: 5px; font-weight: bold"
            v-if="!loading && tableStore.table.data.length != 0">
            <el-tag style="
                    background: #A52a2a;
                    width: 30px;
                    height: 15px;
                    border: 1px solid #A52a2a;
                    float: left;
                    margin-top: 2px;
                "></el-tag>
            <span style="color: #A52a2a; font-weight: 400; float: left">&nbsp&nbsp在线率<60% &nbsp&nbsp</span>
                    <el-tag size="small" style="
                    background: #ffcc33;
                    width: 30px;
                    height: 15px;
                    border: 1px solid #ffcc33;
                    float: left;
                    margin-top: 2px;
                "></el-tag>
                    <span style="color: #ffcc33; font-weight: 400; float: left">&nbsp&nbsp60%≤在线率<90% &nbsp&nbsp</span>
                            <el-tag style="
                    background: #339966;
                    width: 30px;
                    height: 15px;
                    border: 1px solid #339966;
                    float: left;
                    margin-top: 2px;
                "></el-tag>
                            <span style="color: #339966; font-weight: 400; float: left">&nbsp&nbsp在线率≥90%</span>
        </div>
        <my-echart v-loading="loading" :style="`height: calc(${tableStore.table.height} - 125px)`" :options="options" />
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData'
import * as echarts from 'echarts/core'
import { Top } from '@element-plus/icons-vue/dist/types'
const dictData = useDictData()
const options = ref({})

const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
const interfereoption = dictData.getBasicData('Interference_Source')

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 chartsRef = ref()
const tableStore = new TableStore({
    url: '/harmonic-boot/terminal/getTerminalDataCensus',
    showPage: false,
    method: 'POST',
    column: [],
    beforeSearchFun: () => {
        tableStore.table.params = tableStoreParams.value
    },
    loadCallback: () => {
        const chartsData = ref(tableStore.table.data)
        chartsData.value.single.map((item: any) => {
            if (item == 3.14159) {
                item = 0.5
            }
            item = item.toFixed(2)
        })
        // tableStore.table.data.type
        const legendColorList = ['#0099CC', '#9A6601', '#CCCCCC', '#FFFFFF']
        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源类型'
        } else if (code == 'Report_Type') {
            title = '上报类型'
            titleX = '上报\n类型'
        }
        options.value = {
            title: {
                text: title
            },
            legend: {
                data: ['投运', '检修', '停运'],
                left: '4%',
                textStyle: {
                    color: '#666666'
                },
                itemWidth: 30,
                itemHeight: 15,
                itemGap: 25
            },
             toolbox: {
                top: 0,
                 right: 10,
             },
            // tooltip: {
            //     backgroundColor: '#fff',
            //     textStyle: {
            //         color: '#000'
            //     },
            //     formatter: function (params: any) {
            //         var tips = `<div style="min-width:80px;display:flex;justify-content:space-between;align-items:center">
            //             <span style="margin-left:5px;dislpay:block;min-width:80px;color:#000">${params[0].name}</span></div>`
            //         for (var i = 0; i < params.length; i++) {
            //             // <p style="width:14px;height:8px;border-radius:2px;background:${
            //             //     legendColorList[i]
            //             // }"></p>
            //             tips += `<div style="min-width:80px;display:flex;justify-content:space-between;align-items:center">
            //             <span style="margin-left:5px;dislpay:block;min-width:80px;color:#000">${params[i].seriesName
            //                 }</span> ${params[i].seriesName == '在线率' ? params[i].value?.toFixed(2) : params[i].value
            //                 } </div>`
            //         }
            //         return tips
            //     }
            // },
            grid: {
                top: '50px', // 等价于 y: '16%'
                left: '10px',
                right: '10px',
                bottom: '40px',
                containLabel: true
            },
            calculable: true,
            xAxis: {
                name: titleX,
                data: chartsData.value.type
            },
            yAxis: [
                {
                    type: 'value',
                    name: '台',

                    // max:50,
                    // interval: 2,
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#000'
                        }
                    },

                },
                {
                    type: 'value',
                    name: '%',

                    max: 100,
                    // nameTextStyle: {
                    //     color: "#000"
                    // },
                    position: 'right',
                    offset: 0,

                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        formatter: '{value} ', //右侧Y轴文字显示
                        textStyle: {
                            color: '#000'
                        }
                    }
                }
            ],
            series: [
                {
                    name: '投运',
                    type: 'bar',
                    // stack: 'false',
                    barMaxWidth: 24,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: '#0099CC'
                                },
                                {
                                    offset: 1,
                                    color: '#0099CC'
                                }
                            ]),
                            barBorderRadius: 0
                        }
                    },
                    // data: [0, 1, 8, 5, 7, 6,1, 4, 7, 7,3,2]
                    data: chartsData.value.runFlag
                },
                {
                    name: '检修',
                    type: 'bar',
                    // stack: 'false',
                    barMaxWidth: 24,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: '#996600'
                                },
                                {
                                    offset: 1,
                                    color: '#996600'
                                }
                            ]),
                            barBorderRadius: 0
                        }
                    },
                    //data: [2, 1, 8, 5, 7, 6, 1, 4, 7, 7,3,2]
                    data: chartsData.value.reaFlag
                },
                {
                    name: '停运',
                    type: 'bar',
                    // stack: 'false',
                    barMaxWidth: 24,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: '#CCCCCC'
                                },
                                {
                                    offset: 1,
                                    color: '#CCCCCC'
                                }
                            ]),
                            barBorderRadius: 0
                        }
                    },
                    // data: [2, 5, 8, 5, 7, 6, 2, 4, 7, 7,3,2]
                    data: chartsData.value.stopFlag
                },
                {
                    name: '在线率',
                    type: 'bar',
                    yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                    smooth: false, //平滑曲线显示
                    barMaxWidth: 24,
                    symbol: 'circle', //标记的图形为实心圆
                    symbolSize: 8, //标记的大小
                    itemStyle: {
                        normal: {
                            // 随机显示
                            //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                            // 定制显示（按顺序）
                            color: function (params) {
                                if (params.value >= 90) {
                                    return new echarts.graphic.LinearGradient(
                                        0,
                                        1,
                                        0,
                                        0,
                                        [
                                            {
                                                offset: 1,
                                                color: '#349966'
                                            }
                                        ],
                                        false
                                    )
                                } else if (params.value >= 60 && params.value <= 90) {
                                    return new echarts.graphic.LinearGradient(
                                        0,
                                        1,
                                        0,
                                        0,
                                        [
                                            {
                                                offset: 1,
                                                color: '#FFCC33'
                                            }
                                        ],
                                        false
                                    )
                                } else if (params.value > 0.5 && params.value <= 60) {
                                    return new echarts.graphic.LinearGradient(
                                        0,
                                        1,
                                        0,
                                        0,
                                        [
                                            {
                                                offset: 1,
                                                color: '#CC0100'
                                            }
                                        ],
                                        false
                                    )
                                } else if (params.value > 0 && params.value <= 0.5) {
                                    return new echarts.graphic.LinearGradient(
                                        0,
                                        1,
                                        0,
                                        0,
                                        [
                                            {
                                                offset: 1,
                                                color: '#ccc'
                                            }
                                        ],
                                        false
                                    )
                                }
                            }
                        }
                    },
                    lineStyle: {
                        color: '#ffa43a'
                    },
                    markLine: {
                        silent: false,
                        symbol: 'circle',
                        data: [
                            {
                                name: '',
                                yAxis: 100,
                                lineStyle: {
                                    color: '#349966'
                                },
                                label: {
                                    //position: "middle",
                                    formatter: '{b}',
                                    textStyle: {
                                        color: '#349966'
                                    }
                                }
                            },
                            {
                                name: '',
                                yAxis: 90,
                                lineStyle: {
                                    color: '#FFCC33'
                                },
                                label: {
                                    //position: "middle",
                                    formatter: '{b}',
                                    textStyle: {
                                        color: '#FFCC33'
                                    }
                                }
                            },
                            {
                                name: '',
                                yAxis: 60,
                                lineStyle: {
                                    color: '#CC0100'
                                },
                                label: {
                                    //position: "middle",
                                    formatter: '{b}',
                                    textStyle: {
                                        color: '#CC0100'
                                    }
                                }
                            }
                        ]
                    },
                    //data: [22.6, 75.9, 39.0, 66.4, 28.7, 90.7, 95.6, 82.2, 78.7, 58.8, 86.0, 72.3]
                    data: chartsData.value.single
                }
            ]
        }
        loading.value = false
    }
})
// tableStore.table.params.statisticalType = classificationData.filter(item => item.name == '电网拓扑')[0]
// tableStore.table.params.monitorFlag = 2
// tableStore.table.params.powerFlag = 2
// tableStore.table.params.serverName = 'harmonicBoot'
// tableStore.table.params.deptIndex = '5699e5916a18a6381e1ac92da5bd2628'

provide('tableStore', tableStore)

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