<template>
    <div class="default-main">
        <TableHeader datePicker ref="header">
            <template v-slot:select>
                <el-form-item label="电网标志">
                    <el-select v-model="tableStore.table.params.powerFlag" placeholder="请选择电网标志">
                        <el-option v-for="item in sign" :key="item.id" :label="item.name" :value="item.algoDescribe" />
                    </el-select>
                </el-form-item>
            </template>
        </TableHeader>
        <div v-loading="tableStore.table.loading" class="pr10">
            <el-row>
                <el-col :span="12" class="pd10">
                    <el-tag style="background: #339966;" class="tag" size="small">5级</el-tag>
                    <span style="color: #339966;" class="text">:优秀--(4.5,5]</span>
                    <el-tag style="background: #3399ff;" class="tag" size="small">4级</el-tag>
                    <span style="color: #3399ff;" class="text">:良好--(4,4.5]</span>
                    <el-tag style="background: #ffcc33;" class="tag" size="small">3级</el-tag>
                    <span style="color: #ffcc33;" class="text">:合格--(3,4]</span>
                    <el-tag style="background: #ff9900;" class="tag" size="small">2级</el-tag>
                    <span style="color: #ff9900;" class="text">:较差--(2,3]</span>
                    <el-tag style="background: #cc0000;" class="tag" size="small">1级</el-tag>
                    <span style="color: #cc0000;" class="text">:极差--[1,2]</span>
                    <div :style="{ height: layout.height }" style="overflow-y: auto" class="mt10">
                        <div class=" cardBox">
                            <el-card v-for="(item, index) in tableStore.table.data" :key="index">
                                <template #header>
                                    <div style="cursor: pointer;">
                                        <el-tag v-if="item.data == 3.14159 || item.data == 0"
                                            style="background: #ccc; color: #fff" size="small">
                                            无
                                        </el-tag>
                                        <el-tag v-if="4.5 < item.data && item.data <= 5 && item.data !== 3.14159"
                                            style="background: #339966; color: #fff" size="small">
                                            5级
                                        </el-tag>
                                        <el-tag v-if="4 < item.data && item.data <= 4.5 && item.data !== 3.14159"
                                            style="background: #3399ff; color: #fff" size="small">
                                            4级
                                        </el-tag>
                                        <el-tag v-if="3 < item.data && item.data <= 4 && item.data !== 3.14159"
                                            style="background: #ffcc33; color: #fff" size="small">
                                            3级
                                        </el-tag>
                                        <el-tag v-if="2 < item.data && item.data <= 3 && item.data !== 3.14159"
                                            style="background: #ff9900; color: #fff" size="small">
                                            4级
                                        </el-tag>
                                        <el-tag v-if="1 <= item.data && item.data <= 2 && item.data !== 3.14159"
                                            style="background: #cc0000; color: #fff" size="small">
                                            1级
                                        </el-tag>
                                        <span>{{ item.name }}</span>
                                    </div>



                                </template>
                                <div class="card-content">
                                    <div class="card-item" v-for="(item1, index1) in item.children" :key="index1">
                                        <el-tag v-if="item1.data == 3.14159 || item1.data == 0"
                                            style="background: #ccc; color: #fff" size="small">
                                            无
                                        </el-tag>
                                        <el-tag v-if="4.5 < item1.data && item1.data <= 5 && item1.data !== 3.14159"
                                            style="background: #339966; color: #fff" size="small">
                                            5级
                                        </el-tag>
                                        <el-tag v-if="4 < item1.data && item1.data <= 4.5 && item1.data !== 3.14159"
                                            style="background: #3399ff; color: #fff" size="small">
                                            4级
                                        </el-tag>
                                        <el-tag v-if="3 < item1.data && item1.data <= 4 && item1.data !== 3.14159"
                                            style="background: #ffcc33; color: #fff" size="small">
                                            3级
                                        </el-tag>
                                        <el-tag v-if="2 < item1.data && item1.data <= 3 && item1.data !== 3.14159"
                                            style="background: #ff9900; color: #fff" size="small">
                                            2级
                                        </el-tag>
                                        <el-tag v-if="1 <= item1.data && item1.data <= 2 && item1.data !== 3.14159"
                                            style="background: #cc0000; color: #fff" size="small">
                                            1级
                                        </el-tag>
                                        <span class="xdf">
                                            <el-tooltip :show-arrow="false" :offset="-0" :content="item1.name"
                                                popper-class="atooltip" placement="bottom-start">

                                                <div class="tooltipText">
                                                    {{ item1.name }}
                                                </div>
                                            </el-tooltip>
                                        </span>
                                    </div>
                                </div>
                            </el-card>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <my-echart class="tall" :options="echartList" />
                    <div class="tall">
                        <vxe-table height="auto" auto-resize :data="tableStore.table.data" v-bind="defaultAttribute">

                            <vxe-column field="name" title="名称"></vxe-column>
                            <vxe-column field="zc" title="综合评估值">
                                <template #default="scope">
                                    <span v-if="scope.row.data == 3.14159" style="color: #000;">
                                        暂无数据
                                    </span>
                                    <span v-if="scope.row.data !== 3.14159" style="color: #000;">
                                        {{ scope.row.data }}
                                    </span>
                                </template>
                            </vxe-column>
                            <vxe-column field="monitors" title="监测点个数(个)"></vxe-column>
                            <vxe-column field="level" title="评估等级">

                            </vxe-column>
                        </vxe-table>
                    </div>

                </el-col>
            </el-row>
        </div>


    </div>
</template>
<script setup lang="ts">
import TableHeader from '@/components/table/header/index.vue'

import { useDictData } from '@/stores/dictData'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import MyEchart from '@/components/echarts/MyEchart.vue'
import TableStore from '@/utils/tableStore'
import { ref, onMounted, provide } from 'vue'
import { mainHeight } from '@/utils/layout'
import * as echarts from 'echarts/core'
defineOptions({
    name: 'harmonic-boot/qydetailedAnalysis/pollutionqy'
})
const dictData = useDictData()
const echartList = ref({})
const sign = dictData.getBasicData('power_flag')
const header = ref()
const options = dictData.getBasicData('Pollution_Statis', ['I_Neg', 'V_Inharm', 'V_Dev', 'V_Unbalance', 'Plt', 'Freq_Dev'])
const tableStore = new TableStore({
    url: '/harmonic-boot/comAccess/getComAccessData',
    method: 'POST',
    column: [],
    loadCallback: () => {
        histogram(tableStore.table.data)
        header.value.areaRef.change()
        



    }
})
provide('tableStore', tableStore)

tableStore.table.params.deptIndex = dictData.state.area[0].id
tableStore.table.params.monitorFlag = 2
tableStore.table.params.powerFlag = sign[0]?.algoDescribe || 0
tableStore.table.params.statisticalType = {}


// 柱状图数据处理
const histogram = (res: any) => {
    console.log(123);

    echartList.value = {
        title: {
            text: '区域'
        },
      
        legend: {
                show: false
            },

        xAxis: {
            name: '区域',
            data: res.map((item: any) => item.name)
        },
        yAxis: {
            name: '等级',// 给X轴加单位
            min: 0,
            max: 5,
            splitLine: {
                show: false
            },
            axisLabel: {
                show: true,

                // 这里重新定义就可以
                formatter: function (value, index) {
                    var texts = []
                    if (value == 1) {
                        texts.push('1级')
                    } else if (value == 2) {
                        texts.push('2级')
                    } else if (value == 3) {
                        texts.push('3级')
                    } else if (value == 4) {
                        texts.push('4级')
                    } else if (value == 5) {
                        texts.push('5级')

                    }
                    return texts
                }
            },
        },

        options: {
            dataZoom: null,
            series: [
                {
                    name: '评估值',
                    type: 'bar',
                    data: res.map((item: any) => {
                        return item.data == 3.14159 ? 0.14159 : item.data
                    }),
                    barMaxWidth: 30,

                    itemStyle: {
                        normal: {
                            // 随机显示
                            //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                            // 定制显示（按顺序）
                            color: function (params) {
                                if (4.5 < params.value && params.value <= 5 && params.value !== 0.2) {
                                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                        {
                                            offset: 1,
                                            color: '#339966',
                                        }], false)
                                } else if (4 < params.value && params.value <= 4.5 && params.value !== 0.2) {
                                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                        {
                                            offset: 1,
                                            color: '#3399FF'
                                        }], false)
                                } else if (3 < params.value && params.value <= 4 && params.value !== 0.2) {
                                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                        {
                                            offset: 1,
                                            color: '#FFCC33'
                                        }], false)
                                } else if (2 < params.value && params.value <= 3 && params.value !== 0.2) {
                                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                        {
                                            offset: 1,
                                            color: '#FF9900'
                                        }], false)
                                } else if (params.value >= 1 && params.value <= 2 && params.value !== 0.2) {
                                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                        {
                                            offset: 1,
                                            color: '#CC0000'
                                        }], false)
                                } else if (params.value == 0.2) {
                                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                        {
                                            offset: 1,
                                            color: "#999999"
                                        }], false)
                                }
                            }
                        },
                    },
                    markLine: {
                        silent: false,
                        symbol: 'circle',
                        lineStyle: {
                            color: 'red',
                            width: 1
                        },
                        emphasis: {
                            lineStyle: {
                                width: 1
                            },
                        },
                        data: [

                            {
                                name: "",
                                yAxis: 1,
                                lineStyle: {
                                    color: '#CC0000',
                                },
                                label: {
                                    // position:"middle",
                                    formatter: '{b}',
                                    textStyle: {
                                        color: '#CC0000',


                                    }
                                }
                            },
                            {
                                name: "",
                                yAxis: 2,
                                lineStyle: {
                                    color: '#FF9900',

                                },
                                label: {
                                    // position:"middle",
                                    formatter: '{b}',
                                    textStyle: {
                                        color: '#FF9900',

                                    }
                                }
                            },
                            {
                                name: "",
                                yAxis: 3,
                                lineStyle: {
                                    color: '#FFCC33',
                                },
                                label: {
                                    // position:"middle",
                                    formatter: '{b}',
                                    textStyle: {
                                        color: '#FFCC33',

                                    }
                                }
                            },
                            {
                                name: "",
                                yAxis: 4,
                                lineStyle: {
                                    color: '#3399FF',
                                },
                                label: {
                                    // position:"middle",
                                    formatter: '{b}',
                                    textStyle: {
                                        color: '#3399FF',

                                    }
                                }
                            },
                            {
                                name: "",
                                yAxis: 5,
                                lineStyle: {
                                    color: '#339966',
                                },
                                label: {
                                    // position:"middle",
                                    formatter: '{b}',
                                    textStyle: {
                                        color: '#339966',

                                    }
                                }
                            },
                        ]
                    },

                }
            ]
        }
    }
}

onMounted(() => {
    tableStore.index()
})
const layout = mainHeight(133) as any
const layout1 = mainHeight(93) as any
</script>
<style lang="scss" scoped>
.tall {
    height: calc(v-bind('layout1.height') / 2);
}

.tag {
    color: #fff;
    border: #fff;
    margin-left: 5px;
    width: 28px;
}

.text {
    font-weight: bold;
    font-size: 12px;
}

:deep(.cardBox) {

    box-sizing: border-box;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-template-rows: max-content;
    grid-gap: 10px;
    justify-content: center;

    .el-card {
        background-image: linear-gradient(var(--el-color-primary), var(--el-color-primary-light-3));
        font-weight: bold;



        .el-card__header {
            padding: 10px !important;
            color: #fff;

            div {
                display: flex;
                justify-content: space-between;
            }

        }

        .el-card__body {
            padding: 10px !important;
        }

        .card-content {
            height: 200px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            overflow-y: auto;
            color: #000;

            .card-item {
                margin-bottom: 20px;
                width: 50%;
                display: flex;
                cursor: pointer;

            }

            .xdf {
                width: 70%;
            }

            .tooltipText {
                font-weight: 500;
                font-size: 12px;
                color: #fff;
                // width: 50%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-left: 5px;

            }

        }
    }

}
</style>
