<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="请选择运行状态" filterable>
                        <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" clearable 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: 215px">
                    <template #header>
                        <div class="card-header">
                            <span>终端统计</span>
                        </div>
                    </template>
                    <div>
                        <statistics :params="statisticsList" @change="change" />
                    </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">完整性(%)</span>
                        <span style="width: 80px">在线率(%)</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.name }}
                            </span>
                            <!-- 终端总数 -->
                            <span style="width: 90px; color: #388e3c" class="text text-style"
                                @click="renderTable(o.list, o.name + '_')">
                                {{ o.count }}
                            </span>
                            <!--  -->
                            <span style="flex: 1; color: #388e3c" class="text"
                                :class="` ${o.integrity < 90 ? 'text-red' : ''}`">
                                {{ o.integrity }}
                            </span>
                            <span style="width: 80px; color: #388e3c" :class="` ${o.online < 90 ? 'text-red' : ''}`"
                                class="text">
                                {{ o.online }}
                            </span>
                            <span style="width: 80px; color: #388e3c" :class="` ${o.qualified > 10 ? 'text-red' : ''}`"
                                class="text">
                                {{ o.qualified }}
                            </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="所在地市" minWidth="110px"></vxe-column>
                        <vxe-column field="company" title="供电公司" minWidth="110px"></vxe-column>
                        <vxe-column field="subName" title="变电站" minWidth="110px"></vxe-column>
                        <vxe-column field="manufacturer" title="终端厂家" minWidth="110px"></vxe-column>
                        <vxe-column field="name" title="终端名称" minWidth="110px"></vxe-column>
                        <vxe-column field="ip" title="终端IP" :formatter="formatter" width="120px"></vxe-column>
                        <vxe-column field="runFlag" title="运行状态" width="100px">
                            <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="integrityRate" title="完整性(%)" width="100px"></vxe-column>
                        <vxe-column field="onLineRate" title="在线率(%)" width="100px"></vxe-column>
                        <vxe-column field="passRate" title="异常率(%)" width="100px"></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 TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { onMounted, provide, ref, nextTick } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import statistics from './components/statistics_JB.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { getMonitorVerifyDay } from '@/api/device-boot/dataVerify'
defineOptions({
    name: 'runManage/runEvaluate'
})

const dictData = useDictData()
//字典获取监督对象类型
const pageHeight = mainHeight(97)
const indicatorHeight = mainHeight(462)
const monitoringPoints = ref({
    runNum: 0,
    abnormalNum: 0,
    totalOnlineRate: 0
})
const pageSize = ref(20)
const pageNum = ref(1)
const title = ref('')
const statisticsList: any = ref({
    allNum: 0,
    runNum: 0,
    checkNum: 0,
    stopRunNum: 0
})
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/deviceRunEvaluate/getRunEvaluateInfo',
    method: 'POST',
    showPage: false,
    publicHeight: 145,
    column: [],
    beforeSearchFun: () => {
        tableStore.table.params.statisticalType = segmentedList.filter(item => item.code === segmented.value)[0]
    },
    loadCallback: () => {
        totalData.value = Array.from(
            tableStore.table.data
                .map((item: any) => item.list)
                .flat()
                .reduce((map: any, item: any) => {
                    if (!map.has(item.id)) {
                        map.set(item.id, item)
                    }
                    return map
                }, new Map())
                .values()
        )

        // tableStore.table.data
        statisticsList.value.allNum = totalData.value.length
        statisticsList.value.runNum = totalData.value.filter(item => item.runFlag === '运行').length
        statisticsList.value.checkNum = totalData.value.filter(item => item.runFlag === '调试').length
        statisticsList.value.stopRunNum = totalData.value.filter(item => item.runFlag === '停运').length

        abnormal.value = tableStore.table.data.filter((k: any) => {
            if (tableStore.table.params.statisticalType.name == '终端厂家') {
                return k.count != 0
            } else {
                return !k.name.includes('上送')
            }
        })
        // 合并子集数据 并去重

        totalTable(101, '')
        // 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: {
                        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],
                    z: 0,
                    zlevel: 0,
                    itemStyle: {
                        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: {
                        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: {
                        color: 'transparent',
                        borderColor: 'rgb(148,217,249)',
                        borderWidth: 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
    })

    loading.value = false
}

const change = (e: string) => {
    title.value = e == '' ? '' : e + '_'
    loading.value = true
    pageNum.value = 1
    dataList.value = []
    dataList.value = totalData.value.filter(item => item.runFlag == e)
    loading.value = false
}

// 渲染表格
const renderTable = (list: any, t: string) => {
    title.value = t
    loading.value = true
    pageNum.value = 1
    dataList.value = []
    dataList.value = list
    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(() => {
    nextTick(() => {
        TableHeaderRef.value?.onComSearch()
    })
})

tableStore.table.params.name = ''
provide('tableStore', tableStore)
</script>
<style lang="scss" scoped>
.card-list {
    display: flex;

    .monitoringPoints {
        width: 460px;
        position: relative;

        .statistics {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-bottom: 10px;

            .divBox {
                width: 215x;
                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>
