<template>
    <div class="default-main" :style="height">
        <splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
            <pane :size="size">
                <PointTree
                    :default-expand-all="false"
                    @node-click="handleNodeClick"
                    @init="handleNodeClick"
                ></PointTree>
            </pane>
            <pane :style="height" style="background: #fff">
                <TableHeader ref="TableHeaderRef" datePicker>
                    <template #operation>
                        <el-button icon="el-icon-Download" type="primary" @click="exportData">导出区间数据</el-button>
                    </template>
                </TableHeader>

                <div class="container pd10">
                    <el-card class="cardBox">
                        <template #header>
                            <div class="card-header" style="display: flex; justify-content: space-between">
                                <span>功率区间</span>
                                <div>
                                    <span style="font-size: 14px">稳态越限图例:　</span>
                                    <span style="color: red">越限　</span>
                                    <span style="color: green">合格</span>
                                </div>
                            </div>
                        </template>

                        <el-card class="card-top mt5">
                            <div
                                v-for="(item, index) in powerList1"
                                class="pd10"
                                style="cursor: pointer"
                                :class="flag == item.label ? 'hoverBox' : ''"
                                @click="analyseList(item.label, index)"
                            >
                                <div style="font-size: 24px; font-weight: 700">
                                    <span :style="{ color: item.crossTheLine > 0 ? 'red' : 'green' }">
                                        {{ item.quantity }}
                                    </span>
                                    <span style="font-size: 14px; font-weight: 500">个</span>
                                </div>
                                <div>
                                    {{ item.label }}
                                </div>
                            </div>
                        </el-card>

                        <el-card class="card-top mt15">
                            <div
                                v-for="(item, index) in powerList2"
                                class="pd10"
                                style="cursor: pointer"
                                :class="flag == item.label ? 'hoverBox' : ''"
                                @click="analyseList(item.label, index + 5)"
                            >
                                <div style="font-size: 24px; font-weight: 700">
                                    <span :style="{ color: item.crossTheLine > 0 ? 'red' : 'green' }">
                                        {{ item.quantity }}
                                    </span>
                                    <span style="font-size: 14px; font-weight: 500">个</span>
                                </div>
                                <div>
                                    {{ item.label }}
                                </div>
                            </div>
                        </el-card>
                    </el-card>
                    <el-card class="echart">
                        <template #header>
                            <div class="card-header">
                                <span>有功率区间占比</span>
                            </div>
                        </template>
                        <my-echart :options="options" style="height: 212px" />
                    </el-card>
                </div>
                <div class="container" style="padding: 0px 10px 10px">
                    <el-card class="box">
                        <template #header>
                            <div class="card-header">
                                <span>功率区间稳态越限详情</span>
                            </div>
                        </template>
                        <!-- <h3>功率区间稳态越限详情</h3> -->
                        <div :style="`height:calc(${heightB.height} - 25px)`" style="overflow-y: auto">
                            <vxe-table
                                v-bind="defaultAttribute"
                                ref="vxeRef"
                                height="auto"
                                :data="tableData"
                                v-loading="loading"
                            >
                                <vxe-column field="time" title="时间" width="180px">
                                    <template #default="{ row }">
                                        <el-link
                                            type="primary"
                                            :underline="false"
                                            class="percentage"
                                            @click="timeClick(row)"
                                        >
                                            {{ row.time }}
                                        </el-link>
                                    </template>
                                </vxe-column>
                                <vxe-column field="voltageOffset" title="电压偏差(%)" min-width="110px">
                                    <template #default="{ row }">
                                        <el-link
                                            :type="row.voltageOffset == '1' ? 'danger' : 'success'"
                                            :class="row.voltageOffset == '1' ? 'percentage' : ''"
                                            @click="
                                                row.voltageOffset == '1'
                                                    ? detailClick(row, '电压偏差(%)', 'voltageOffsetList')
                                                    : ''
                                            "
                                        >
                                            {{ row.voltageOffset == '1' ? '越限' : '合格' }}
                                        </el-link>
                                    </template>
                                </vxe-column>
                                <vxe-column field="vtimes" title="谐波电压(%)" min-width="110px">
                                    <template #default="{ row }">
                                        <el-link
                                            :type="row.vtimes == '1' ? 'danger' : 'success'"
                                            :class="row.vtimes == '1' ? 'percentage' : ''"
                                            @click="
                                                row.vtimes == '1' ? detailClick(row, '谐波电压(%)', 'vtimesList') : ''
                                            "
                                        >
                                            {{ row.vtimes == '1' ? '越限' : '合格' }}
                                        </el-link>
                                    </template>
                                </vxe-column>
                                <vxe-column field="itimes" title="谐波电流(A)" min-width="110px">
                                    <template #default="{ row }">
                                        <el-link
                                            :type="row.itimes == '1' ? 'danger' : 'success'"
                                            :class="row.itimes == '1' ? 'percentage' : ''"
                                            @click="
                                                row.itimes == '1' ? detailClick(row, '谐波电流(A)', 'itimestList') : ''
                                            "
                                        >
                                            {{ row.itimes == '1' ? '越限' : '合格' }}
                                        </el-link>
                                    </template>
                                </vxe-column>
                                <vxe-column field="ubalance" title="三相电压不平衡度(%)" min-width="150px">
                                    <template #default="{ row }">
                                        <el-link
                                            :type="row.ubalance == '1' ? 'danger' : 'success'"
                                            :class="row.ubalance == '1' ? 'percentage' : ''"
                                            @click="
                                                row.ubalance == '1'
                                                    ? detailClick(row, '三相电压不平衡度(%)', 'ubalanceList')
                                                    : ''
                                            "
                                        >
                                            {{ row.ubalance == '1' ? '越限' : '合格' }}
                                        </el-link>
                                    </template>
                                </vxe-column>
                                <vxe-column field="voltageFluctuation" title="电压波动(%)" min-width="110px">
                                    <template #default="{ row }">
                                        <el-link
                                            :type="row.voltageFluctuation == '1' ? 'danger' : 'success'"
                                            :class="row.voltageFluctuation == '1' ? 'percentage' : ''"
                                            @click="
                                                row.voltageFluctuation == '1'
                                                    ? detailClick(row, '电压波动(%)', 'voltageFluctuationList')
                                                    : ''
                                            "
                                        >
                                            {{ row.voltageFluctuation == '1' ? '越限' : '合格' }}
                                        </el-link>
                                    </template>
                                </vxe-column>
                                <vxe-column field="flicker" title="长时闪变" min-width="110px">
                                    <template #default="{ row }">
                                        <el-link
                                            :type="row.flicker == '1' ? 'danger' : 'success'"
                                            :class="row.flicker == '1' ? 'percentage' : ''"
                                            @click="
                                                row.flicker == '1' ? detailClick(row, '长时闪变', 'flickerList') : ''
                                            "
                                        >
                                            {{ row.flicker == '1' ? '越限' : '合格' }}
                                        </el-link>
                                    </template>
                                </vxe-column>
                                <vxe-column field="interHarmonic" title="间谐波电压含有率(%)" min-width="150px">
                                    <template #default="{ row }">
                                        <el-link
                                            :type="row.interHarmonic == '1' ? 'danger' : 'success'"
                                            :class="row.interHarmonic == '1' ? 'percentage' : ''"
                                            @click="
                                                row.interHarmonic == '1'
                                                    ? detailClick(row, '间谐波电压含有率(%)', 'interHarmonicList')
                                                    : ''
                                            "
                                        >
                                            {{ row.interHarmonic == '1' ? '越限' : '合格' }}
                                        </el-link>
                                    </template>
                                </vxe-column>
                                <vxe-column field="sequenceCurrentUnbalance" title="电流不平衡度(%)" min-width="130px">
                                    <template #default="{ row }">
                                        <el-link
                                            :type="row.sequenceCurrentUnbalance == '1' ? 'danger' : 'success'"
                                            :class="row.sequenceCurrentUnbalance == '1' ? 'percentage' : ''"
                                            @click="
                                                row.sequenceCurrentUnbalance == '1'
                                                    ? detailClick(
                                                          row,
                                                          '电流不平衡度(%)',
                                                          'sequenceCurrentUnbalanceList'
                                                      )
                                                    : ''
                                            "
                                        >
                                            {{ row.sequenceCurrentUnbalance == '1' ? '越限' : '合格' }}
                                        </el-link>
                                    </template>
                                </vxe-column>

                                <vxe-column field="num3" fixed="right" title="操作" width="80">
                                    <template #default="{ row }">
                                        <el-button type="primary" link @click="addTo(row)">添加</el-button>
                                    </template>
                                </vxe-column>
                            </vxe-table>
                        </div>
                    </el-card>

                    <el-card class="box">
                        <template #header>
                            <div style="display: flex; justify-content: space-between">
                                <div class="card-header">
                                    <span>报告参数</span>
                                </div>
                                <el-button icon="el-icon-Download" size="small" type="primary" @click="generateReports">
                                    生成报表
                                </el-button>
                            </div>
                        </template>

                        <div :style="heightB" style="overflow-y: auto">
                            <div>
                                <el-tree style="max-width: 600px" :data="dataSource" node-key="id" default-expand-all>
                                    <template #default="{ node, data }">
                                        <span class="custom-tree-node">
                                            <span :style="data.level != 0 ? 'color: var(--el-color-primary)' : ''">
                                                {{ data.time }}
                                            </span>
                                            <Close
                                                v-if="data.level != 0"
                                                style="margin-left: 5px; height: 14px"
                                                @click="remove(node, data)"
                                            />
                                        </span>
                                    </template>
                                </el-tree>
                            </div>
                        </div>
                    </el-card>
                </div>
            </pane>
        </splitpanes>
        <!-- 时间弹框 -->
        <timePopUpBox
            v-if="timePopUpBox"
            ref="timePopUpBoxRef"
            :timePopUpBox="timePopUpBox"
            @close="timePopUpBox = null"
        />
        <!-- 越限详情 -->
        <detail ref="detailRef" />
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, provide } from 'vue'
import 'splitpanes/dist/splitpanes.css'
import { Splitpanes, Pane } from 'splitpanes'
import TableStore from '@/utils/tableStore'
import PointTree from '@/components/tree/pqs/pointTree.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import MyEchart from '@/components/echarts/MyEchart.vue'
import TimePopUpBox from './components/timePopUpBox.vue'
import { ElMessage } from 'element-plus'
import {
    getDataByLineId,
    getTargetLimitById,
    exportExcelRangTemplate,
    exportExcelListTemplate
} from '@/api/harmonic-boot/newEnergyAnalysis'
import detail from './components/detail.vue'
import { Close } from '@element-plus/icons-vue'
defineOptions({
    name: 'newEnergy/newEnergyAnalysis'
})
const timePopUpBox = ref<anyObj | null>(null)
const flag = ref('0%~10%')
const value1 = ref('0%~10%')

const options1 = [
    '0%~10%',
    '10%~20%',
    '20%~30%',
    '30%~40%',
    '40%~50%',
    '50%~60%',
    '60%~70%',
    '70%~80%',
    '80%~90%',
    '90%~100%'
]
const height = mainHeight(20)
const heightB = mainHeight(445)
const size = ref(19)
const TableHeaderRef = ref()
const detailRef = ref()
const dotList: any = ref({})
const loading = ref(false)
const timePopUpBoxRef = ref()
const index = ref(0)
const treeList = ref([])
const powerList1: any = ref([
    {
        label: '0%~10%',
        quantity: '0',
        percentage: '10%',
        crossTheLine: '越限',
        value: '0%~10%'
    },
    {
        label: '10%~20%',
        quantity: '0',
        percentage: '10%',
        crossTheLine: '合格',
        value: '10%~20%'
    },
    {
        label: '20%~30%',
        quantity: '0',
        percentage: '10%',
        crossTheLine: '合格',
        value: '20%~30%'
    },
    {
        label: '30%~40%',
        quantity: '0',
        percentage: '10%',
        crossTheLine: '合格',
        value: '30%~40%'
    },
    {
        label: '40%~50%',
        quantity: '0',
        percentage: '10%',
        crossTheLine: '合格',
        value: '40%~50%'
    }
])
const powerList2: any = ref([
    {
        label: '50%~60%',
        quantity: '0',
        percentage: '10%',
        crossTheLine: '合格',
        value: '50%~60%'
    },
    {
        label: '60%~70%',
        quantity: '0',
        percentage: '10%',
        crossTheLine: '合格',
        value: '60%~70%'
    },
    {
        label: '70%~80%',
        quantity: '0',
        percentage: '10%',
        crossTheLine: '合格',
        value: '70%~80%'
    },
    {
        label: '80%~90%',
        quantity: '0',
        percentage: '10%',
        crossTheLine: '越限',
        value: '80%~90%'
    },
    {
        label: '90%~100%',
        quantity: '20',
        percentage: '10%',
        crossTheLine: '越限',
        value: '90%~100%'
    }
])

const tableData: any = ref([])
const dataSource: any = ref([
    {
        id: 1,
        level: 0,
        time: '0%~10%',
        children: []
    },
    {
        id: 2,
        level: 0,
        time: '10%~20%',
        children: []
    },
    {
        id: 3,
        level: 0,
        time: '20%~30%',
        children: []
    },
    {
        id: 4,
        level: 0,
        time: '30%~40%',
        children: []
    },
    {
        id: 5,
        level: 0,
        time: '40%~50%',
        children: []
    },
    {
        id: 6,
        level: 0,
        time: '50%~60%',
        children: []
    },
    {
        id: 7,
        level: 0,
        time: '60%~70%',
        children: []
    },
    {
        id: 8,
        level: 0,
        time: '70%~80%',
        children: []
    },
    {
        id: 9,
        level: 0,
        time: '80%~90%',
        children: []
    },
    {
        id: 10,
        level: 0,
        time: '90%~100%',
        children: []
    }
])
// 添加树
const addTo = (row: any) => {
    // console.log("🚀 ~ addTo ~ uniqueObjectsByJSON([...dataSource.value[index.value].children, row]):", uniqueObjectsByJSON([...dataSource.value[index.value].children, row])[0].time)
    let list = JSON.parse(JSON.stringify(dataSource.value[index.value].children))
    dataSource.value[index.value].children = uniqueObjectsByJSON([...list, row])
}
// 树去重
const uniqueObjectsByJSON = (arr: any) => {
    const seen = new Set()
    return arr.filter((item: any) => {
        const str = JSON.stringify(item)
        if (!seen.has(str)) {
            seen.add(str)
            return true
        }
        return false
    })
}

// 树删除
const remove = (node: any, data: any) => {
    const parent = node.parent
    const children = parent.data.children || parent.data
    const index = children.findIndex(d => d.id === data.id)
    children.splice(index, 1)
    dataSource.value = [...dataSource.value]
}
const options = ref({})
const tableStore = new TableStore({
    url: '/harmonic-boot/powerStatistics/getDataByLineId',
    method: 'POST',
    column: [],
    beforeSearchFun: () => {
        treeList.value = dotList.value

        tableStore.table.params.lineId = dotList.value.id
        tableStore.table.params.searchBeginTime = TableHeaderRef.value.datePickerRef.timeValue[0]
        tableStore.table.params.searchEndTime = TableHeaderRef.value.datePickerRef.timeValue[1]
    },
    loadCallback: () => {
        let res = tableStore.table.data

        powerList1.value = [
            {
                label: '0%~10%',
                quantity: res.minsNum0,
                percentage: res.proportion0 + '%',
                crossTheLine: res.isOrNot0,
                value: '0%~10%'
            },
            {
                label: '10%~20%',
                quantity: res.minsNum1,
                percentage: res.proportion1 + '%',
                crossTheLine: res.isOrNot1,
                value: '10%~20%'
            },
            {
                label: '20%~30%',
                quantity: res.minsNum2,
                percentage: res.proportion2 + '%',
                crossTheLine: res.isOrNot2,
                value: '20%~30%'
            },
            {
                label: '30%~40%',
                quantity: res.minsNum3,
                percentage: res.proportion3 + '%',
                crossTheLine: res.isOrNot3,
                value: '30%~40%'
            },
            {
                label: '40%~50%',
                quantity: res.minsNum4,
                percentage: res.proportion4 + '%',
                crossTheLine: res.isOrNot4,
                value: '40%~50%'
            }
        ]
        powerList2.value = [
            {
                label: '50%~60%',
                quantity: res.minsNum5,
                percentage: res.proportion5 + '%',
                crossTheLine: res.isOrNot5,
                value: '50%~60%'
            },
            {
                label: '60%~70%',
                quantity: res.minsNum6,
                percentage: res.proportion6 + '%',
                crossTheLine: res.isOrNot6,
                value: '60%~70%'
            },
            {
                label: '70%~80%',
                quantity: res.minsNum7,
                percentage: res.proportion7 + '%',
                crossTheLine: res.isOrNot7,
                value: '70%~80%'
            },
            {
                label: '80%~90%',
                quantity: res.minsNum8,
                percentage: res.proportion8 + '%',
                crossTheLine: res.isOrNot8,
                value: '80%~90%'
            },
            {
                label: '90%~100%',
                quantity: res.minsNum9,
                percentage: res.proportion9 + '%',
                crossTheLine: res.isOrNot9,
                value: '90%~100%'
            }
        ]
        options.value = {
            legend: {
                show: false
            },
            tooltip: {},
            xAxis: {
                show: false
            },
            yAxis: {
                show: false
            },

            dataZoom: { show: false },

            options: {
                series: [
                    {
                        type: 'pie',
                        center: ['50%', '52%'],
                        selectedOffset: 30,
                        label: {
                            show: true,
                            color: '#96A2B5',
                            lineHeight: 8,
                            minMargin: 10,
                            formatter: function (e) {
                                return '{name|' + e.name + '}{percent|' + e.data.percentage + '}'
                            },
                            rich: {
                                name: {
                                    fontSize: 12
                                },

                                percent: {
                                    fontSize: 14,
                                    color: '#000',
                                    padding: [0, 0, 0, 5]
                                }
                            }
                        },
                        data: [
                            ...powerList1.value.map(item => {
                                return { value: item.quantity, name: item.label, percentage: item.percentage }
                            }),
                            ...powerList2.value.map(item => {
                                return { value: item.quantity, name: item.label, percentage: item.percentage }
                            })
                        ]
                    }
                ]
            }
        }
        dataSource.value = [
            {
                id: 1,
                level: 0,
                time: '0%~10%',
                children: []
            },
            {
                id: 2,
                level: 0,
                time: '10%~20%',
                children: []
            },
            {
                id: 3,
                level: 0,
                time: '20%~30%',
                children: []
            },
            {
                id: 4,
                level: 0,
                time: '30%~40%',
                children: []
            },
            {
                id: 5,
                level: 0,
                time: '40%~50%',
                children: []
            },
            {
                id: 6,
                level: 0,
                time: '50%~60%',
                children: []
            },
            {
                id: 7,
                level: 0,
                time: '60%~70%',
                children: []
            },
            {
                id: 8,
                level: 0,
                time: '70%~80%',
                children: []
            },
            {
                id: 9,
                level: 0,
                time: '80%~90%',
                children: []
            },
            {
                id: 10,
                level: 0,
                time: '90%~100%',
                children: []
            }
        ]

        analyseList(flag.value, index.value)
    }
})
// 导出区间数据
const exportData = () => {
    ElMessage('正在下载中,请稍等...')
    exportExcelRangTemplate({
        lineId: dotList.value.id,
        searchValue: treeList.value?.name + ' 0%-100% 区间数据',
        searchBeginTime: tableStore.table.params.searchBeginTime,
        searchEndTime: tableStore.table.params.searchEndTime
    }).then((res: any) => {
        let blob = new Blob([res], {
            type: 'application/vnd.ms-excel'
        })

        const url = window.URL.createObjectURL(blob)
        const link = document.createElement('a') // 创建a标签
        link.href = url
        link.download = treeList.value?.name + ' 0%-100% 区间数据' // 设置下载的文件名
        document.body.appendChild(link)
        link.click() //执行下载
        document.body.removeChild(link)
    })
}
// 导出报告参数
const generateReports = () => {
    let data: any = {
        lineId: dotList.value.id,
        searchValue: treeList.value?.name + ' 报告',
        searchBeginTime: tableStore.table.params.searchBeginTime,
        searchEndTime: tableStore.table.params.searchEndTime
    }
    dataSource.value.forEach((item: any, i: number) => {
        // item.children
        data[`time${i}`] = item.children.map((it: any) => it.time)
    }),
        exportExcelListTemplate(data).then((res: any) => {
            let blob = new Blob([res], {
                type: 'application/vnd.ms-excel'
            })

            const url = window.URL.createObjectURL(blob)
            const link = document.createElement('a') // 创建a标签
            link.href = url
            link.download = treeList.value?.name + ' 报告' // 设置下载的文件名
            document.body.appendChild(link)
            link.click() //执行下载
            document.body.removeChild(link)
        })
}

// 点击时间
const timeClick = (row: any) => {
    let data = { ...row, field: index.value, lineId: dotList.value.id }
    timePopUpBox.value = data
}
// 点击越限
const detailClick = (row: any, title: string, key: string) => {
   // console.log('🚀 ~ detailClick ~ row:', row)
    detailRef.value.open({
        row: row,
        title: title,
        key: key
    })
}
// // 获取有功功率趋势分析数据
// const analyse = (e: any) => {
//     getDataByLineId({
//         lineId: e.id,
//         searchBeginTime: tableStore.table.params.searchBeginTime,
//         searchEndTime: tableStore.table.params.searchEndTime
//     }).then(res => {})
// }
// 功率列表
const analyseList = (e: string, i: number) => {
    flag.value = e
    index.value = i
    loading.value = true
    getTargetLimitById({
        lineId: dotList.value.id,
        searchBeginTime: tableStore.table.params.searchBeginTime,
        searchEndTime: tableStore.table.params.searchEndTime,
        field: i
    })
        .then(res => {
            loading.value = false
            tableData.value = res.data
        })
        .catch(() => {
            loading.value = false
        })
}

provide('tableStore', tableStore)

onMounted(() => {
    const dom = document.getElementById('navigation-splitpanes')
    if (dom) {
        size.value = Math.round((180 / dom.offsetHeight) * 120)
    }
})

const handleNodeClick = (data: any, node: any) => {
   // console.log('🚀 ~ handleNodeClick ~ data:', data)
    if (data.level == 6) {
        dotList.value = data
        // dotList.value.id = '6469e77fda42db12c7ca6620a092f03c1'
        tableStore.index()
    }
}
</script>
<style lang="scss">
.splitpanes.default-theme .splitpanes__pane {
    background: #eaeef1;
}
.cardBox {
    .el-card__body {
        padding: 5px 10px 10px;
    }
}
.box {
    .el-card__body {
        padding: 10px;
    }
}
.container {
    display: grid;
    grid-template-columns: 5fr 2.5fr;
    gap: 10px;
    .card-top {
        background-color: var(--el-color-primary-light-9);
        // color: #fff;
        .el-card__body {
            display: grid; /* 使用 Grid 布局 */
            grid-template-columns: repeat(5, 1fr); /* 每行5列，每列占1份空间 */
            text-align: center;
            gap: 20px;
            padding: 10px;
            .img {
                vertical-align: middle;
                height: 16px;
            }
        }
    }
    .echart {
        .el-card__body {
            padding: 5px;
        }
    }
}
.el-card {
    border-radius: 10px;
}

.hoverBox {
    background-color: var(--el-color-primary-light-5);
    border-radius: 10px;
}
.percentage {
    text-decoration: underline;
    text-underline-offset: 0.1em;
}
</style>
<style lang="scss" scoped>
:deep(.el-card__header) {
    padding: 10px;
}
.card-header {
    span {
        font-weight: 600;
        font-size: 16px;
    }
}
</style>
