<template>
    <TableHeader area datePicker ref="TableHeaderRef">
        <template #select>
            <el-form-item label="统计类型:">
                <el-select
                    v-model="tableStore.table.params.statisticalType"
                    value-key="id"
                    placeholder="请选择统计类型"
                >
                    <el-option
                        v-for="item in classificationData"
                        :key="item.id"
                        :label="item.name"
                        :value="item"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="电压等级:">
                <el-select
                    v-model="tableStore.table.params.scale"
                    multiple
                    collapse-tags
                    clearable
                    value-key="id"
                    placeholder="请选择电压等级"
                >
                    <el-option
                        v-for="item in voltageleveloption"
                        :key="item.id"
                        :label="item.name"
                        :value="item"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="终端厂家:">
                <el-select
                    v-model="tableStore.table.params.manufacturer"
                    multiple
                    collapse-tags
                    clearable
                    value-key="id"
                    placeholder="请选择终端厂家"
                >
                    <el-option
                        v-for="item in terminaloption"
                        :key="item.id"
                        :label="item.name"
                        :value="item"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="干扰源类型:">
                <el-select
                    v-model="tableStore.table.params.loadType"
                    multiple
                    collapse-tags
                    clearable
                    value-key="id"
                    placeholder="请选择干扰源类型"
                >
                    <el-option
                        v-for="item in interfereoption"
                        :key="item.id"
                        :label="item.name"
                        :value="item"
                    ></el-option>
                </el-select>
            </el-form-item>
        </template>
    </TableHeader>
    <my-echart class="mt10" :style="`height: calc(${tableStore.table.height} - 75px)`" :options="options" />
</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 tableStore = new TableStore({
    url: '/device-boot/terminalOnlineRateData/getOnlineRateDataCensus',

    showPage: false,
    method: 'POST',
    column: [],

    loadCallback: () => {
        // tableStore.table.data.type
        options.value = {
            title: {
                text: tableStore.table.params.statisticalType.name
            },
            tooltip: {
                formatter: function (params: any) {
                    var tips = ''

                    for (var i = 0; i < params.length; i++) {
                        if (params[i].value == 1) {
                            tips += params[i].name + '</br>'
                            tips += '在线率:暂无数据'
                        } else {
                            tips += params[i].name + '</br>'
                            tips += '在线率:' + params[i].value.toFixed(2)
                        }
                    }
                    return tips
                }
            },
            grid: {
                top: '50px',
                right: '80px'
            },
            xAxis: {
                name: tableStore.table.params.statisticalType.name,
                data: tableStore.table.data.type
            },
            yAxis: {
                name: '%',
                max: 100
            },
            options: {
                series: [
                    {
                        name: '在线率',
                        type: 'bar',
                        data: tableStore.table.data.single,
                        itemStyle: {
                            normal: {
                                // 随机显示
                                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                                // 定制显示（按顺序）
                                color: function (params: any) {
                                    if (params.value >= 90) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: '#339966'
                                                }
                                            ],
                                            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 <= 60 && params.value > 1) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: '#CC0000'
                                                }
                                            ],
                                            false
                                        )
                                    } else if (params.value > 0 && params.value <= 1) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: '#ccc'
                                                }
                                            ],
                                            false
                                        )
                                    }
                                }
                            }
                        },
                        markLine: {
                            silent: false,
                            symbol: 'circle',
                            data: [
                                {
                                    name: '',
                                    yAxis: 100,
                                    lineStyle: {
                                        color: '#339966'
                                    },
                                    label: {
                                        //position: "middle",
                                        formatter: '{b}',
                                        textStyle: {
                                            color: '#339966'
                                        }
                                    }
                                },
                                {
                                    name: '',
                                    yAxis: 90,
                                    lineStyle: {
                                        color: '#FFCC33'
                                    },
                                    label: {
                                        // position: "middle",
                                        formatter: '{b}',
                                        textStyle: {
                                            color: '#FFCC33'
                                        }
                                    }
                                },
                                {
                                    name: '',
                                    yAxis: 60,
                                    lineStyle: {
                                        color: '#CC0000'
                                    },
                                    label: {
                                        //position: "middle",
                                        formatter: '{b}',
                                        textStyle: {
                                            color: '#CC0000'
                                        }
                                    }
                                }
                            ]
                        }
                    }
                ]
            }
        }
    }
})

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'

provide('tableStore', tableStore)

onMounted(() => {
    tableStore.index()
})
</script>

<style scoped lang="scss"></style>
