<template>
    <div class="default-main">
        <TableHeader date-picker ref="TableHeaderRef">
            <template v-slot:select>
                <el-form-item label="运行状态">
                    <el-select v-model="tableStore.table.params.lineRunFlag" clearable placeholder="请选择运行状态">
                        <el-option
                            v-for="item in runFlagList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="筛选数据">
                    <el-input v-model="tableStore.table.params.searchValue" placeholder="请输入终端名称" />
                </el-form-item>
            </template>

            <template v-slot:operation>
                <el-button type="primary" icon="el-icon-Download" @click="onExport">导出</el-button>
            </template>
        </TableHeader>
        <div class="card-list pt10" v-loading="tableStore.table.loading">
            <div class="monitoringPoints">
                <el-card style="height: 200px">
                    <template #header>
                        <div class="card-header">
                            <span>终端统计</span>
                        </div>
                    </template>
                    <div>
                        <div class="statistics">
                            <div class="divBox">
                                <span class="iconfont icon-qiyezongshu" style="color: #57bc6e"></span>
                                <span class="divBox_title">终端总数</span>
                                <span
                                    class="divBox_num text-style"
                                    style="color: #57bc6e"
                                    @click="totalTable(100001, '')"
                                >
                                    {{ monitoringPoints.runNum }}
                                </span>
                            </div>
                            <div class="divBox" style="width: 200px">
                                <span class="iconfont icon-igw-f-warning-data" style="color: #ff6600"></span>
                                <span class="divBox_title">低于90%终端数</span>
                                <span
                                    class="divBox_num text-style"
                                    style="color: #57bc6e"
                                    @click="totalTable(90, '低于90%终端_')"
                                >
                                    {{ monitoringPoints.abnormalNum }}
                                </span>
                            </div>
                        </div>
                        <div class="echartTitle">
                            <div>总的数据在线率</div>
                            <div>{{ monitoringPoints.totalOnlineRate }}%</div>
                        </div>
                        <div style="height: 30px">
                            <MyEchart :options="percentage"></MyEchart>
                        </div>
                    </div>
                </el-card>
                <el-card class="mt10">
                    <template #header>
                        <div class="card-header">
                            <span>在线率统计</span>
                        </div>
                    </template>
                    <div class="mb5" style="height: 40px">
                        <el-segmented
                            style="height: 100%"
                            v-model="segmented"
                            :props="props"
                            :options="segmentedList"
                            block
                            @change="tableStore.index()"
                        >
                            <template #default="scope">
                                <div>
                                    <div>{{ scope.item.name }}</div>
                                </div>
                            </template>
                        </el-segmented>
                    </div>
                    <div class="header">
                        <span style="width: 110px; text-align: left">
                            {{
                                segmented == 'Power_Network'
                                    ? '区域'
                                    : segmented == 'Manufacturer'
                                    ? '终端厂家'
                                    : '电网标志'
                            }}
                        </span>
                        <span style="width: 90px">终端总数</span>
                        <span style="flex: 1">低于90%终端数</span>
                        <span style="width: 80px">在线率(%)</span>
                    </div>
                    <div :style="indicatorHeight" style="overflow-y: auto">
                        <div v-for="o in abnormal" class="abnormal mb10">
                            <span style="width: 110px; height: 24px" class="iconDiv">
                                <div :style="{ backgroundColor: o.citTotalOnlineRate < 90 ? '#FF9100' : '' }"></div>
                                {{ o.citName }}
                            </span>
                            <!-- 终端总数 -->
                            <span
                                style="width: 90px; color: #388e3c"
                                class="text text-style"
                                @click="renderTable(o.detailList, 100001, o.citName + '_')"
                            >
                                {{ o.citTotalNum }}
                            </span>
                            <!-- 低于90%终端数 -->
                            <span
                                style="flex: 1; color: #388e3c"
                                class="text text-style"
                                @click="renderTable(o.detailList, 90, o.citName + '_低于90%终端_')"
                            >
                                {{ o.citBelowNum }}
                            </span>
                            <span
                                style="width: 80px; color: #388e3c"
                                :class="` ${o.citTotalOnlineRate < 90 ? 'text-red' : ''}`"
                                class="text"
                            >
                                {{ o.citTotalOnlineRate }}
                            </span>
                        </div>
                    </div>
                </el-card>
            </div>
            <el-card class="detail ml10" :style="pageHeight">
                <template #header>
                    <div class="card-header">
                        <span>{{ title }}在线率详情</span>
                    </div>
                </template>

                <!--表格-->

                <div :style="{ height: tableStore.table.height }" v-loading="loading">
                    <vxe-table
                        height="auto"
                        :data="dataList.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
                        v-bind="defaultAttribute"
                        ref="tableRef"
                        :scroll-y="{ enabled: true }"
                    >
                        <vxe-column type="seq" title="序号" width="80px">
                            <template #default="{ rowIndex }">
                                <span>
                                    {{ (pageNum - 1) * pageSize + rowIndex + 1 }}
                                </span>
                            </template>
                        </vxe-column>
                        <vxe-column field="cit" title="所在地市" width="110px"></vxe-column>
                        <vxe-column field="company" title="供电公司" minWidth="110px"></vxe-column>
                        <vxe-column field="subStation" title="变电站" minWidth="110px"></vxe-column>
                        <vxe-column field="manufacturer" title="终端厂家" minWidth="110px"></vxe-column>
                        <vxe-column field="deviceName" title="终端名称" minWidth="110px"></vxe-column>
                        <vxe-column field="ip" title="终端IP" :formatter="formatter" width="130px"></vxe-column>
                        <vxe-column field="runFlag" title="运行状态" width="90px">
                            <template #default="{ row }">
                                <el-tag
                                    :type="
                                        row.runFlag == '运行'
                                            ? 'success'
                                            : row.runFlag == '停运'
                                            ? 'danger'
                                            : row.runFlag == '检修'
                                            ? 'warning'
                                            : row.runFlag == '调试'
                                            ? 'warning'
                                            : 'danger'
                                    "
                                >
                                    {{ row.runFlag }}
                                </el-tag>
                            </template>
                        </vxe-column>
                        <vxe-column field="onlineRate" title="在线率(%)" width="90px"></vxe-column>
                    </vxe-table>
                </div>
                <div class="table-pagination">
                    <el-pagination
                        v-model:currentPage="pageNum"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 20, 50, 100, 200]"
                        background
                        layout="sizes,total, ->, prev, pager, next, jumper"
                        :total="dataList.length"
                    ></el-pagination>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup lang="ts">
// import '@/assets/font/iconfont.css'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { onMounted, provide, ref } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { getMonitorVerifyDay } from '@/api/device-boot/dataVerify'
defineOptions({
    name: 'harmonic-boot/harmonic/getIntegrityData'
})
import { useRoute } from 'vue-router'
const route = useRoute()
const dictData = useDictData()
//字典获取监督对象类型
const pageHeight = mainHeight(97)
const indicatorHeight = mainHeight(447)
const monitoringPoints = ref({
    runNum: 0,
    abnormalNum: 0,
    totalOnlineRate: 0
})
const pageSize = ref(20)
const pageNum = ref(1)
const title = ref('')
const loading = ref(false)
const dataList = ref([])
const tableRef = ref()
const percentage = ref({})
const TableHeaderRef = ref()
const abnormal: any = ref([])
const totalData: any = ref([])
//定义终端运行状态下拉框数据
const runFlagList = [
    { id: 0, name: '运行' },
    { id: 1, name: '检修' },
    { id: 2, name: '停运' },
    { id: 3, name: '调试' },
    { id: 4, name: '退运' }
]
// Statistical_Type

const segmented = ref('Power_Network')

const segmentedList = dictData.getBasicData('Statistical_Type', ['Report_Type', 'Voltage_Level', 'Load_Type'])
const props = {
    value: 'code',
    label: 'name'
}
const tableStore = new TableStore({
    url: '/device-boot/onLineRate/deviceOnlineRateInfo',
    method: 'POST',
    showPage: false,
    publicHeight: 145,
    column: [],
    beforeSearchFun: () => {
        tableStore.table.params.statisticalType = segmentedList.filter(item => item.code === segmented.value)[0]
    },
    loadCallback: () => {
        monitoringPoints.value.runNum = tableStore.table.data.totalNum
        monitoringPoints.value.abnormalNum = tableStore.table.data.belowNum
        monitoringPoints.value.totalOnlineRate = tableStore.table.data.totalOnlineRate - 0
        abnormal.value = tableStore.table.data.citDetailList.filter((k: any) => {
            if (tableStore.table.params.statisticalType.name == '终端厂家') {
                return k.citTotalNum != 0
            } else {
                return k.citName != '上送国网' && k.citName != '非上送国网'
            }
        })
        console.log(123, tableStore.table.params.statisticalType.name)

        // 合并子集数据 并去重
        totalData.value = Array.from(
            tableStore.table.data.citDetailList

                .map((item: any) => item.detailList)
                .flat()
                .reduce((map: any, item: any) => {
                    if (!map.has(item.deviceId)) {
                        map.set(item.deviceId, item)
                    }
                    return map
                }, new Map())
                .values()
        )

        totalTable(100001, '')
        echart()
    }
})

const echart = () => {
    percentage.value = {
        color: ['#FF9100'],
        options: {
            dataZoom: null,
            toolbox: {
                show: false
            },
            grid: {
                top: '0%',
                left: '0%',
                right: '0%',
                bottom: '0%'
            },
            tooltip: {
                show: false
            },
            legend: {
                show: false
            },
            yAxis: {
                show: false,
                data: ['']
            },
            xAxis: [
                {
                    show: false,
                    type: 'value'
                }
            ],

            series: [
                {
                    name: '异常总数',
                    type: 'bar',
                    barWidth: 12,
                    data: [100],
                    z: 0,
                    zlevel: 0,
                    itemStyle: {
                        normal: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 1,
                                        color: '#57bc6e' // 100% 处的颜色
                                    }
                                ],
                                global: false // 缺省为 false
                            }
                        }
                    }
                },
                {
                    name: '异常占比',
                    type: 'bar',
                    barWidth: 13,
                    data: [monitoringPoints.value.totalOnlineRate == 0 ? '' : monitoringPoints.value.totalOnlineRate],
                    z: 0,
                    zlevel: 0,
                    itemStyle: {
                        normal: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#FF9100' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#FF9100' // 100% 处的颜色
                                    }
                                ],
                                global: false // 缺省为 false
                            }
                        }
                    }
                },
                {
                    type: 'pictorialBar',
                    itemStyle: {
                        normal: {
                            color: '#fff'
                        }
                    },
                    symbolRepeat: 50,
                    // symbolMargin: 300,
                    symbol: 'rect',
                    symbolClip: true,
                    symbolSize: [2, 20],
                    symbolPosition: 'start',
                    symbolOffset: [0, 0],
                    data: [100],
                    z: 1,
                    zlevel: 0
                },
                {
                    name: '',
                    type: 'bar',
                    barGap: '-110%',
                    data: [100],
                    barWidth: 18,

                    itemStyle: {
                        normal: {
                            color: 'transparent',
                            barBorderColor: 'rgb(148,217,249)',
                            barBorderWidth: 1
                        }
                    },
                    z: 2
                }
            ]
        }
    }
}
tableStore.table.params.deptIndex = dictData.state.area[0].id
tableStore.table.params.lineRunFlag = 0
tableStore.table.params.searchValue = ''

const formatter = (row: any) => {
    return row.cellValue || '/'
}
// 渲染总表格
const totalTable = (num: number, t: string) => {
    title.value = t
    loading.value = true
    pageNum.value = 1
    dataList.value = []
    dataList.value = totalData.value.filter((item: any) => {
        return item.onlineRate < num
    })

    loading.value = false
}
// 渲染表格
const renderTable = (list: any, num: number, t: string) => {
    title.value = t
    loading.value = true
    pageNum.value = 1
    dataList.value = []
    dataList.value = list.filter((item: any) => {
        return item.onlineRate < num
    })
    loading.value = false
}
// 导出
const onExport = () => {
    tableRef.value?.exportData({
        filename: title.value + '在线率详情', // 文件名字
        sheetName: 'Sheet1',
        type: 'xlsx', //导出文件类型 xlsx 和 csv
        useStyle: true,
        data: dataList.value, // 数据源 // 过滤那个字段导出
        columnFilterMethod: function (column: any) {
            return !(
                column.column.title === undefined ||
                column.column.title === '序号' ||
                column.column.title === '操作'
            )
        }
    })
}
onMounted(() => {
    // TableHeaderRef.value.setDatePicker([
    //     { label: '年份', value: 1 },
    //     { label: '季度', value: 2 },
    //     { label: '月份', value: 3 }
    // ])

    // 加载数据

    tableStore.index()
})
watch(
    () => route.query.t,
    async (newValue, oldValue) => {
        if (route.fullPath.includes('harmonic-boot/area/OnlineRate')) {
            let type = (route.query.type as string) || 'null'
            if (type == 'null') {
            } else if (type == '1') {
                setTimeout(() => {
                    tableStore.table.params.searchValue = (route.query.name as string) || ''
                    tableStore.index()
                }, 500)
            }
        }
    },
    { deep: true, immediate: true }
)

tableStore.table.params.name = ''
provide('tableStore', tableStore)
</script>
<style lang="scss" scoped>
@import '@/assets/font/iconfont.css';
.card-list {
    display: flex;
    .monitoringPoints {
        width: 440px;
        position: relative;
        .statistics {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-bottom: 10px;
            .divBox {
                width: 200px;
                height: 70px;
                padding: 10px;
                display: flex;

                .iconfont {
                    font-size: 40px;
                    margin-right: 5px;
                }
                .divBox_title {
                    font-weight: 550;
                }
                .divBox_num {
                    font-size: 20px;
                    font-weight: 550;
                    margin-left: auto;
                    font-family: AlimamaDongFangDaKai;
                }
                align-items: center;
                // text-align: center;
                border-radius: 5px;
                &:nth-child(1) {
                    background-color: #eef8f0;
                }
                &:nth-child(2) {
                    background-color: #fff6ed;
                }
                &:nth-child(3) {
                    background-color: #e5f8f6;
                }
            }
        }
    }
    .detail {
        flex: 1;
    }
    .abnormal {
        width: 100%;
        background-color: #f3f6f9;
        border-radius: 5px;
        display: flex;
        // justify-content: space-between;
        align-items: center;
        padding: 5px 0px 5px 10px;
        .iconDiv {
            display: flex;
            align-items: center;
            div {
                width: 4px;
                height: 18px;
                margin-right: 5px;
                background-color: var(--el-color-primary);
            }
        }
        .text {
            font-weight: 700;
            font-size: 16px;
            font-family: 'Source Code Pro', monospace;
            text-align: center;

            // font-feature-settings: 'tnum';
        }
    }
}
.header {
    display: flex;
    text-align: center;

    font-weight: 700;
    padding: 5px;
}
:deep(.el-card__header) {
    padding: 10px;
    span {
        font-weight: 600;
    }
}
:deep(.el-card__body) {
    padding: 10px;
}
.iconFont {
    font-size: 18px;
    display: inline-block;
    vertical-align: middle;
}
.form {
    position: relative;
    .form_but {
        position: absolute;
        right: -22px;
    }
}
.card-header {
    font-size: 16px;
}
:deep(.table_name) {
    color: var(--el-color-primary);
    cursor: pointer;
    text-underline-offset: 4px;
}
.echartTitle {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
    div:nth-child(2) {
        font-size: 16px;
        color: #ff6600;
    }
}

:deep(.el-segmented__item-selected, ) {
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}
:deep(.el-segmented__item, ) {
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
    position: relative;
}
:deep(.el-segmented) {
    clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
}
.text-red {
    color: #ff9100 !important;
}
.text-style {
    cursor: pointer;
    text-decoration: underline;
}
.segmentedIcon {
    position: absolute;
    top: 1px;
    left: 100px;
    height: 18px !important;
    line-height: 19px;
    padding: 0 4px;
    font-size: 12px;
    background: #ff9100;
    color: #fff;
    border-radius: 8px;
}
.table-pagination {
    height: 58px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    background-color: var(--ba-bg-color-overlay);
    padding: 13px 15px;
    border-left: 1px solid #e4e7e9;
    border-right: 1px solid #e4e7e9;
    border-bottom: 1px solid #e4e7e9;
}
</style>
