<template>
    <div class="default-main">
        <TableHeader datePicker ref="header">
            <template v-slot:select>
                <el-form-item label="统计类型">
                    <el-select v-model="tableStore.table.params.statisticalType" value-key="id" placeholder="请选择统计类型">
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item" />
                    </el-select>
                </el-form-item>
                <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>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-DataAnalysis"
                        @click="rankingClick">排名前10监测点</el-button>
                </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; color: #fff" size="small">优</el-tag>
                    <span style="color: #339966">:优秀≤60%</span>　
                    <el-tag style="background: #ffcc33; color: #fff" size="small">良</el-tag>
                    <span style="color: #ffcc33">:60%＜良好＜90% </span>　
                            <el-tag style="background: #cc0000; color: #fff" size="small">差</el-tag>
                            <span style="color: #cc0000">:极差≥90%</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;" @click="queryline(item, false)">
                                                <el-tag v-if="item.data < 60 && item.data >= 0"
                                                    style="color: #fff; background: #339966" size="small">
                                                    优
                                                </el-tag>
                                                <el-tag v-if="60 <= item.data && item.data < 90"
                                                    style="color: #fff; background: #ffcc33" size="small">
                                                    良
                                                </el-tag>
                                                <el-tag v-if="90 <= item.data && item.data"
                                                    style="color: #fff; background: #cc0000" size="small">
                                                    差
                                                </el-tag>
                                                <el-tag v-if="item.data == 3.14159 "
                                                    style="color: #fff; background: #ccc" size="small">
                                                    无
                                                </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" @click="queryline(item1, true)">

                                                <el-tag v-if="item1.data < 60 && item1.data >= 0"
                                                    style="color: #fff; background: #339966" size="small">
                                                    优
                                                </el-tag>
                                                <el-tag v-if="60 <= item1.data && item1.data < 90"
                                                    style="color: #fff; background: #ffcc33" size="small">
                                                    良
                                                </el-tag>
                                                <el-tag v-if="90 <= item1.data && item1.data"
                                                    style="color: #fff; background: #cc0000" size="small">
                                                    差
                                                </el-tag>
                                                <el-tag v-if="item1.data == 3.14159 "
                                                    style="color: #fff; background: #ccc" size="small">
                                                    无
                                                </el-tag>
                                                <!-- <el-tag v-if="item1.data == 3.14159 || item1.data == 0"
                                                    style="background: #ccc; color: #fff" size="small">
                                                    无
                                                </el-tag>
                                                <el-tag
                                                    v-if="0 < item1.data && item1.data < 1 && item1.data !== 3.14159"
                                                    style="background: #339966; color: #fff" size="small">
                                                    1级
                                                </el-tag>
                                                <el-tag
                                                    v-if="1 <= item1.data && item1.data < 1.2 && item1.data !== 3.14159"
                                                    style="background: #3399ff; color: #fff" size="small">
                                                    2级
                                                </el-tag>
                                                <el-tag
                                                    v-if="1.2 <= item1.data && item1.data < 1.6 && item1.data !== 3.14159"
                                                    style="background: #ffcc33; color: #fff" size="small">
                                                    3级
                                                </el-tag>
                                                <el-tag
                                                    v-if="1.6 <= item1.data && item1.data < 2 && item1.data !== 3.14159"
                                                    style="background: #ff9900; color: #fff" size="small">
                                                    4级
                                                </el-tag>
                                                <el-tag v-if="2 <= item1.data && item1.data && item1.data !== 3.14159"
                                                    style="background: #cc0000; color: #fff" size="small">
                                                    5级
                                                </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="dataList" v-bind="defaultAttribute">
                            <vxe-column field="name" title="名称"></vxe-column>
                            <vxe-column field="onlineCount" title="在运监测点数(个)">
                                <template #default="scope">
                                    {{ scope.row.onlineCount == 3.14159 ? '暂无数据' : scope.row.onlineCount }}
                                </template>
                            </vxe-column>
                            <vxe-column field="overLineCount" title="超标监测点数(个)">
                                <template #default="scope">
                                    {{ scope.row.overLineCount == 3.14159 ? '暂无数据' : scope.row.overLineCount }}
                                </template>
                            </vxe-column>
                            <vxe-column field="ratio" title="监测点超标占比(%)">
                                <template #default="scope">
                                    {{ scope.row.lineRatio == 3.14159 ? '暂无数据' : scope.row.lineRatio }}
                                </template>
                            </vxe-column>
                            <vxe-column field="averageOverDay" title="平均超标天数(天/点)">
                                <template #default="scope">
                                    {{ scope.row.averageOverDay == 3.14159 ? '暂无数据' : scope.row.averageOverDay }}
                                </template>
                            </vxe-column>


                        </vxe-table>
                    </div>

                </el-col>
            </el-row>
        </div>
        <!-- 详情 -->
        <provinceDetails ref="provinceDetailsRef" />
        <!-- 排名前10的监测点 -->
        <ranking ref="rankingRef" />
    </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 provinceDetails from './components/provinceDetails.vue'
import ranking from './components/ranking.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import TableStore from '@/utils/tableStore'
import { ref, onMounted, provide } from 'vue'
import { mainHeight } from '@/utils/layout'
import { deptInfo } from '@/api/harmonic-boot/area'
import * as echarts from 'echarts/core'
defineOptions({
    name: 'harmonic-boot/detailedAnalysis/harmonictj'
})
const dictData = useDictData()
const echartList = ref({})
const provinceDetailsRef = ref()
const rankingRef = ref()
const dataList = ref([])

const header = ref()
const sign = dictData.getBasicData('power_flag')
const options = dictData.getBasicData('Indicator_Type', ['PLPC', 'DYPC', 'SXDYBPHD', 'CSSB', 'FXDL', 'JXBDY'])
const tableStore = new TableStore({
    url: '/harmonic-boot/detailAnalysis/deptSubRelations',
    method: 'POST',
    column: [],
    loadCallback: () => {
        deptInfo(tableStore.table.params).then((res: any) => {
            histogram(res.data)
            dataList.value = res.data
        })
        header.value.areaRef.change()
    }
})
provide('tableStore', tableStore)

tableStore.table.params.deptIndex = dictData.state.area[0].id
tableStore.table.params.statisticalType = options[0]
tableStore.table.params.monitorFlag = 2
tableStore.table.params.powerFlag = sign[0]?.algoDescribe || 0
tableStore.table.params.statFlag = true
tableStore.table.params.serverName = 'event-boot'




// 地图数处理
const rankingClick = () => {
    rankingRef.value.open(tableStore.table.params)
}
const queryline = (row: any, flag: boolean) => {
    provinceDetailsRef.value.open(row, flag, tableStore.table.params)
}

// 表格数据处理
// 柱状图数据处理
const histogram = (res: any) => {


    echartList.value = {
        title: {
            text: '监测点超标占比'
        },
        tooltip: {
            formatter: function (params: any) {
                // console.log(params);
                var tips = ''
                for (var i = 0; i < params.length; i++) {
                    tips += params[i].name + '</br/>'
                    tips += '超标监测点占比' + ':' + '&nbsp' + '&nbsp' + (params[i].value == 0.14159 ? '暂无数据' : params[i].value) + '</br/>'
                }
                return tips
            }
        },

        xAxis: {
            name: '区域',
            data: res.map((item: any) => item.name)
        },
        yAxis: {
            name: '超标占比',// 给X轴加单位
            min: 0,
            max: 100,

            splitLine: {
                show: false
            },
            axisLabel: {
                show: true,

                // 这里重新定义就可以

            },
        },

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

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

                            // 定制显示（按顺序）
                            color: function (params) {
                                if ( params.value == 0.14159) {
                                    return '#ccc'
                                } else if (params.value >= 90) {
                                    return new echarts.graphic.LinearGradient(
                                        0,
                                        1,
                                        0,
                                        0,
                                        [
                                            {
                                                offset: 1,
                                                color: '#CC0000'
                                            }
                                        ],
                                        false
                                    )
                                } else if (60 < params.value && params.value < 90) {
                                    return new echarts.graphic.LinearGradient(
                                        0,
                                        1,
                                        0,
                                        0,
                                        [
                                            {
                                                offset: 1,
                                                color: '#FFCC33'
                                            }
                                        ],
                                        false
                                    )
                                } else if (

                                    params.value <= 60 &&
                                    params.value >= 0 &&
                                    params.value !== 0.05
                                ) {
                                    return new echarts.graphic.LinearGradient(
                                        0,
                                        1,
                                        0,
                                        0,
                                        [
                                            {
                                                offset: 1,
                                                color: '#339966'
                                            }
                                        ],
                                        false
                                    )
                                } else if (params.value == 0.05) {
                                    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: 60,
                                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: 100,
                                lineStyle: {
                                    color: '#CC0000'
                                },
                                label: {
                                    // position: "middle",
                                    formatter: '{b}',
                                    textStyle: {
                                        color: '#CC0000'
                                    }
                                }
                            }
                        ]
                    },

                }
            ]
        }
    }
}

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>
