<template>
    <div class="charts" style="position: relative; width: 100%" v-loading="loading">
        <div style="position: absolute; right: 60px; top: 5px; font-weight: bold"
            v-if="!loading && tableStore.table.data.length != 0">
            <el-tag style="
                    background: #cc0000;
                    width: 30px;
                    height: 15px;
                    border: 1px solid #cc0000;
                    float: left;
                    margin-top: 2px;
                "></el-tag>
            <span style="color: #cc0000; font-weight: 400; float: left">&nbsp&nbsp在线率<60% &nbsp&nbsp</span>
                    <el-tag size="mini" 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 class="mt10" :style="`margin-top:50px;height: calc(${tableStore.table.height} - 135px)`"
            :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'
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: '/device-boot/LineIntegrityData/getIntegrityIcon',
    showPage: false,
    method: 'POST',
    column: [],
    beforeSearchFun: () => {
        tableStore.table.params = tableStoreParams.value
    },
    loadCallback: () => {
        const chartsData = ref(tableStore.table.data)
        let xData = [],
            yData = []
        chartsData.value.map((item: any) => {
            xData.push(item.type)
            if (item.single == 0 || item.single == 3.14159) {
                yData.push(1)
            } else {
                yData.push(item.single)
            }
        })
        // 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: {
                show: false
            },
           
            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
                }
            },
           
            calculable: true,
            xAxis: {
                name: titleX,
                data: xData
            },
            yAxis: [
                {
                    type: 'value',
                    name: '%',
                    nameTextStyle: {
                        color: '#000',
                        verticalAlign: 'top', //标题位置
                        padding: [-22, 0, 10, 0]
                    },
                    max: 100,
                    offset: 0,
                    axisLine: {
                        show: true,
                        // symbol: ["none", "arrow"],
                        symbolOffset: 20, //箭头距离x轴末端距离
                        lineStyle: {
                            shadowOffsetY: -20,
                            color: '#000',
                            shadowColor: '#000' //设置阴影的颜色
                        }
                    },
                    splitLine: {
                        show: true
                    },
                    axisLabel: {
                        show: true,
                        formatter: '{value} ', //右侧Y轴文字显示
                        textStyle: {
                            color: '#000'
                        }
                    }
                }
            ],
            series: [
                {
                    name: '数据完整性',
                    type: 'bar',
                    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: yData
                }
            ]
        }
        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>
