<template>
    <!-- 终端 -->
    <el-dialog draggable title="终端统计" v-model="dialogVisible" width="1400px" :before-close="handleClose">
        <el-row style="height: 300px" :gutter="20">
            <el-col :span="12">
                <div class="title">
                    <span>趋势分析</span>
                    <!-- <el-select v-model="time" style="width: 80px; margin-right: 80px" @change="analysis">
                        <el-option label="年" value="1" />
                        <el-option label="月" value="3" />
                    </el-select> -->
                    <el-radio-group v-model="time" style="margin-right: 50px" @change="analysis" size="small">
                        <el-radio-button label="1">年</el-radio-button>
                        <el-radio-button label="3">月</el-radio-button>
                    </el-radio-group>
                </div>
                <MyEChart style="height: 260px" :options="trendEChart" />
            </el-col>
            <el-col :span="12">
                <div class="title">
                    <span>分布统计</span>
                    <el-radio-group v-model="type" size="small" @change="getGridDiagramDev">
                        <el-radio-button label="1">区域</el-radio-button>
                        <el-radio-button label="3">终端厂家</el-radio-button>
                    </el-radio-group>
                </div>
                <div class="pie">
                    <MyEChart style="height: 260px; width: 50%" :options="picEChart" />
                    <el-table size="small" height="260px" style="width: 50%" :data="picList">
                        <el-table-column prop="orgName" width="80px" align="center"></el-table-column>
                        <el-table-column prop="onlineEvaluate" label="终端评价" align="center">
                            <template #default="scope">
                                <span
                                    :style="{
                                        color:
                                            scope.row.onlineEvaluate < 60
                                                ? 'red'
                                                : scope.row.onlineEvaluate < 90
                                                ? 'orange'
                                                : 'green'
                                    }"
                                >
                                    {{
                                        scope.row.onlineEvaluate < 60
                                            ? '差'
                                            : scope.row.onlineEvaluate < 90
                                            ? '良'
                                            : '优'
                                    }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="devCount" label="在运终端数" align="center" />
                        <el-table-column prop="devOnCount" label="在线终端数" align="center" />
                    </el-table>
                </div>
            </el-col>
        </el-row>
        <div>
            <div class="title">
                <span>区域终端统计</span>
            </div>
            <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="325px" :data="tableData">
                <vxe-column field="orgName" title="区域" />
                <vxe-column field="runNum" sortable title="运行个数	" />
                <vxe-column field="overhaulNum" sortable title="检修个数	" />
                <vxe-column field="refundNum" sortable title="退役个数" />
                <vxe-column field="onLineRate" sortable title="终端在线率(%)" />
            </vxe-table>
        </div>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useDictData } from '@/stores/dictData'
import MyEChart from '@/components/echarts/MyEchart.vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { getGridDiagramDevTendency, getGridDiagramDevData, getGridDiagramDevDataList } from '@/api/device-boot/panorama'
const dictData = useDictData()
const dialogVisible: any = ref(false)
const time = ref('1')
const rowList: any = ref({})
const tableData: any = ref()
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type', 'Voltage_Level', 'Load_Type'])

const picList = ref([])
const type = ref('1')
const trendEChart: any = ref({})
const loadingTab = ref(false)
const picEChart = ref()
const open = async (row: any) => {
    time.value = '1'
    rowList.value = {
        deviceInfoParam: {
            ...row
        },
        pageNum: 1,
        pageSize: 1000,
        ...row
    }
    // 趋势分析
    analysis(1)
    dialogVisible.value = true
    //分布统计
    getGridDiagramDev()
    // 列表
    getGridDiagramDevDataList({
        deviceInfoParam: {
            ...row,
            serverName: 'pqs-common',
            ids: [row.id],
            runFlag: [],
            comFlag: [],
            manufacturer: dictData.getBasicData('Dev_Manufacturers'),
            statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0]
        },
        ...row,
        serverName: 'pqs-common',
        ids: [row.id],
        runFlag: [],
        comFlag: [],
        manufacturer: dictData.getBasicData('Dev_Manufacturers'),
        statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0]
    }).then((res: any) => {
        tableData.value = res.data
    })
}

const getGridDiagramDev = async () => {
    loadingTab.value = true
    let data = JSON.parse(JSON.stringify(rowList.value))
    data.deviceInfoParam.statisticalType = type.value == '1' ? classificationData[0] : classificationData[1]
    data.statisticalType = type.value == '1' ? classificationData[0] : classificationData[1]

    await getGridDiagramDevData(data).then((res: any) => {
        const total = res.data.reduce((sum, item) => {
            return sum + item.devCount
        }, 0)

        picList.value = type.value == '1' ? res.data : res.data.filter((item: any) => item.devCount != 0)
        let picData: any = []
        picList.value = picList.value.sort((a, b) => b.devCount - a.devCount)
        picList.value.forEach((item: any) => {
            picData.push({
                value: item.devCount,
                name: `${item.orgName}(${item.devCount})`,
                proportion: (item.devCount / total).toFixed(2),
                itemStyle: {
                    color: item.onlineEvaluate < 60 ? 'red' : item.onlineEvaluate < 90 ? 'orange' : 'green'
                }
            })
        })

        picEChart.value = {
            tooltip: {
                trigger: 'item',
                formatter: '{b}: 占比 {d}%  '
            },
            legend: {
                show: false
            },
            xAxis: {
                show: false
            },
            yAxis: {
                show: false
            },
            options: {
                dataZoom: null,
                series: [
                    {
                        type: 'pie',
                        startAngle: 360,
                        center: ['50%', '55%'],
                        radius: ['40%', '60%'],
                        endAngle: 0,
                        labelLine: {
                            length: 8,
                            length2: 30,
                            show: true
                        },
                        label: {
                            padding: [0, -30],
                            formatter: '{b}\n\n'
                        },
                        itemStyle: {
                            borderColor: '#fff',
                            borderWidth: 1
                        },

                        data: picData
                    }
                ]
            }
        }
    })
    loadingTab.value = false
}
const analysis = (e: any) => {
    let time = rowList.value.searchBeginTime.slice(0, 4) + `-01-01`

    getGridDiagramDevTendency({ ...rowList.value, searchBeginTime: time, type: e }).then(res => {
        let name = []
        let data = []
        let num = 0
        for (let k in res.data) {
            name.push(k)
            // num = num + res.data[k]
            data.push(res.data[k])
        }

        trendEChart.value = {
            title: {
                text: '终端接入总数量'
            },
            xAxis: {
                name: '时间',
                data: name
            },
            legend: {
                show: false
            },
            yAxis: {
                name: '台'
            },

            options: {
                dataZoom: null,
                series: [
                    {
                        name: '接入',
                        type: 'line',
                        data: data,
                        smooth: true,

                        label: {
                            show: true,
                            position: 'top',
                            fontSize: 12
                        }
                    }
                ]
            }
        }
    })
}
const formatter = (row: any) => {
    if (row.column.field == 'onlineEvaluate') {
        return row.cellValue == 3.14159 ? '/' : row.cellValue * 100
    } else {
        return row.cellValue
    }
}
const handleClose = () => {
    tableData.value = []
    dialogVisible.value = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
:deep(.el-select) {
    min-width: 80px;
}
.title {
    display: flex;
    justify-content: space-between;
    margin: 10px;
    span {
        font-weight: 550;
        font-size: 18px;
    }
}
.pie {
    display: flex;
    justify-content: space-around;
}
:deep(.el-table thead) {
    color: #000;
}
:deep(.el-dialog__body) {
    max-height: none !important;
}
</style>
