<template>
    <div class="default-main">
        <TableHeader area date-picker ref="header" />
        <div v-loading="tableStore.table.loading" class="pr10">
            <el-row>
                <el-col :span="12">
                    <MyEchartMap
                        ref="EchartMap"
                        :options="echartMapList"
                        class="map"
                        @eliminate="eliminate"
                        @getRegionByRegion="getRegionByRegion"
                    />
                </el-col>
                <el-col :span="12">
                    <my-echart class="tall" :options="echartList" />
                    <div class="tall">
                        <vxe-table height="auto" auto-resize :data="distributionData" v-bind="defaultAttribute">
                            >
                            <vxe-column field="areaName" title=" 区域" show-overflow-tooltip></vxe-column>
                            <vxe-column field="ci" title="区域暂降评估">
                                <template #default="{ row }">
                                    {{ row.ci == 0.05 ? '暂无数据' : row.ci.toFixed(2) }}
                                </template>
                            </vxe-column>
                            <vxe-column sortable field="isCount" title="等级">
                                <template #default="{ row }">
                                    <span v-if="row.ci == 0.05">暂无等级</span>
                                    <span v-if="row.ci !== 0.05 && row.ci >= 0.2 && row.ci < 0.4">1级</span>
                                    <span v-if="row.ci !== 0.05 && row.ci >= 0.4 && row.ci < 0.8">2级</span>
                                    <span v-if="row.ci !== 0.05 && row.ci >= 0.8 && row.ci < 1.2">3级</span>
                                    <span v-if="row.ci !== 0.05 && row.ci >= 1.2">4级</span>
                                </template>
                            </vxe-column>
                        </vxe-table>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="dw">
            <el-popover placement="left" :width="600" trigger="hover">
                <template #reference>
                    <span class="level">详细区域暂降评估等级</span>
                </template>
                <vxe-table :data="areaData1" v-bind="defaultAttribute">
                    <vxe-column title="等级" field="level" min-width="90"></vxe-column>
                    <vxe-column title="1级" field="one" min-width="80"></vxe-column>
                    <vxe-column title="2级" field="two" min-width="90"></vxe-column>
                    <vxe-column title="3级" field="three" min-width="90"></vxe-column>
                    <vxe-column title="4级" field="four" min-width="90"></vxe-column>
                </vxe-table>
            </el-popover>
        </div>
    </div>
</template>
<script setup lang="ts">
import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData'
import MyEchartMap from '@/components/echarts/MyEchartMap.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 { defaultAttribute } from '@/components/table/defaultAttribute'
defineOptions({
    name: 'Region/transientassessment'
})
const EchartMap = ref()
const dictData = useDictData()
const echartMapList: any = ref({})
const echartList = ref({})
const header = ref()
const distributionData: any = ref([])
const areaData1: any = ref([
    {
        level: '相对得分',
        one: '[0,0.4]',
        two: '(0.4,0.8)',
        three: '(0.8,1.2)',
        four: '(1.2,+∞)'
    }
])

const tableStore = new TableStore({
    url: '/advance-boot/balance/getBalanceInfo',
    method: 'POST',
    column: [],
    beforeSearchFun: () => {
        tableStore.table.params.deptId = tableStore.table.params.deptIndex
    },
    loadCallback: () => {
        header.value.areaRef.change()
        // 处理地图数据
        map(tableStore.table.data)
        tabulation(tableStore.table.data)
        histogram(tableStore.table.data)
        EchartMap.value.GetEchar(header.value.areaRef.areaName)
    }
})
provide('tableStore', tableStore)

tableStore.table.params.loadType = null
tableStore.table.params.deptId = dictData.state.area[0].id

// 地图点击事件
const getRegionByRegion = (list: any) => {
    tableStore.table.params.deptIndex = list.id
    tableStore.onTableAction('search', {})
}
// 消除点
const eliminate = (name: string) => {
    echartMapList.value.options.series = []
    EchartMap.value.GetEchar(name)
}

// 地图数处理
const map = (res: any) => {
    let list: any = []
    res.forEach((item: any) => {
        list.push({
            name: item.areaName,
            value: item.ci
        })
    })

    echartMapList.value = {
        name: '',
        title: {
            text: '区域暂降评估'
        },
        tooltip: {
            formatter: function (params: any) {
                var tips = ''
                

                if (Number.isNaN(params.value) == true) {
                    tips += params.name + '</br>'
                    tips += '评估值:暂无数据'
                } else {
                    tips += params.name + '</br>'
                    tips += '评估值:' + params.value
                }
                return tips
            }
        },
        visualMap: {
            min: 0,
            max: 2,
            left: 26,
            bottom: 20,
            showLabel: !0,

            pieces: [
                {
                    gt: -2,
                    lte: -1,
                    label: '无数据'
                },
                {
                    gte: 0,
                    lte: 0.4,
                    label: '1级--相对得分 [0,0.4]'
                },
                {
                    gt: 0.4,
                    lte: 0.9,
                    label: '2级--得分 (0.4,0.8]'
                },
                {
                    gt: 0.9,
                    lte: 1.2,
                    label: '3级--相对得分 (0.8,1.2]'
                },
                {
                    gt: 1.2,
                    label: '4级--相对得分 (1.2,+∞]'
                }
            ],
            inRange: {
                color: ['#ccc', '#A52a2a', '#FF9900', '#3399CC', '#339966']
            }
        },

        options: {
            series: [
                {
                    // type: "scatter",
                    type: 'map',
                    mapName: name,
                    coordinateSystem: 'geo',
                    geoIndex: 0,
                    animation: false, //坐标点是否显示动画
                    roam: true,
                    selectedMode: 'false', //是否允许选中多个区域
                    symbol: 'pin',
                    rippleEffect: {
                        brushType: 'fill' // stroke|fill
                    },

                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            label: {
                                show: true
                            }
                        }
                    },
                    data: list
                }
            ]
        }
    }
}

// 表格数据处理
const tabulation = (res: any) => {
    distributionData.value = res
    distributionData.value.forEach((item: any) => {
        if (item.ci == 0) {
            item.ci = 0.05
        }
    })
}
// 柱状图数据处理
const histogram = (res: any) => {
    echartList.value = {
        title: {
            text: header.value.areaRef.areaName
        },
        tooltip: {
            formatter: function (params: any) {
                var tips = ''
                for (var i = 0; i < params.length; i++) {
                    if (params[i].value == 0.05) {
                        tips += params[i].name + '</br>'
                        tips += '评估值:0'
                    } else {
                        tips += params[i].name + '</br>'
                        tips += '评估值:' + params[i].value
                    }
                }
                return tips
            }
        },

        xAxis: {
            name: '(区域)',

            data: res.map((item: any) => item.areaName)
        },
        yAxis: {
            name: ' 等级',
            min: 0,
            max: 2,
            // minInterval: 0.2,
            axisLabel: {
                fontSize: 14,
                // interval: 4,
                formatter: function (value: any) {
                    var texts = ''
                    if (value === 0.4) {
                        texts = '1级'
                    } else if (value === 0.8) {
                        texts = '2级'
                    } else if (value === 1.2) {
                        texts = '3级'
                    } else if (value === 2) {
                        texts = '4级'
                    }
                    return texts
                }
            }
        },
        options: {
            series: [
                //
                {
                    name: '',
                    data: res.map((item: any) => {
                        if (item.ci == 0) {
                            return (item.ci = 0.05)
                        }
                        return item.ci.toFixed(2)
                    }),

                    barMaxWidth: 30,
                    barMinHeight: 1,
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: function (params: any) {
                                if (params.value > 2 && params.value !== 0.05) {
                                    return '#339966'
                                } else if (0.8 < params.value && params.value <= 1.2 && params.value !== 0.05) {
                                    return '#3399FF'
                                } else if (0.4 < params.value && params.value <= 0.8 && params.value !== 0.05) {
                                    return '#FF9900'
                                } else if (0 < params.value && params.value <= 0.4 && params.value !== 0.05) {
                                    return '#A52a2a'
                                } else if (params.value == 0.05) {
                                    return '#A52a2a'
                                }
                            }
                        }
                    },
                    markLine: {
                        silent: false,
                        symbol: 'circle',
                        lineStyle: {
                            color: 'red',
                            width: 1
                        },
                        emphasis: {
                            lineStyle: {
                                width: 1
                            }
                        },
                        data: [
                            {
                                name: '',
                                yAxis: 0.4,
                                lineStyle: {
                                    color: '#A52a2a'
                                },
                                label: {
                                    // position: "middle",
                                    formatter: '{b}',
                                    textStyle: {
                                        color: '#A52a2a'
                                    }
                                }
                            },
                            {
                                name: '',
                                yAxis: 0.8,
                                lineStyle: {
                                    color: '#FF9900'
                                },
                                label: {
                                    // position: "middle",
                                    formatter: '{b}',
                                    textStyle: {
                                        color: '#FF9900'
                                    }
                                }
                            },
                            {
                                name: '',
                                yAxis: 1.2,
                                lineStyle: {
                                    color: '#3399FF'
                                },
                                label: {
                                    // position: "middle",
                                    formatter: '{b}',
                                    textStyle: {
                                        color: '#3399FF'
                                    }
                                }
                            },
                            {
                                name: '',
                                yAxis: 2,
                                lineStyle: {
                                    color: '#339966'
                                },
                                label: {
                                    // position: "middle",
                                    formatter: '{b}',
                                    textStyle: {
                                        color: '#339966'
                                    }
                                }
                            }
                        ]
                    }
                }
            ]
        }
    }
}

onMounted(() => {
    setTimeout(() => {
        tableStore.index()
    }, 10)
})
const layout = mainHeight(83) as any
const layout1 = mainHeight(93) as any
</script>
<style lang="scss" scoped>
.map {
    height: v-bind('layout.height');
}
.tall {
    height: calc(v-bind('layout1.height') / 2);
}
.dw {
    position: absolute;
    top: 50px;
    right: 50px;
    width: 200px;
    z-index: 2;
    .level {
        color: red;
        cursor: pointer;
    }
}
</style>
