<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 style="display: flex; height: calc(100vh - 195px)" class="pt10">
                    <el-segmented
                        v-model="value1"
                        :options="[...powerList1, ...powerList2]"
                        direction="vertical"
                        @change="analyseList"
                    >
                        <template #default="scope">
                            <div class="flex flex-col items-center gap-2 p-2">
                                <div style="font-size: 24px; font-weight: 700">
                                    <span :style="{ color: scope.item.crossTheLine > 0 ? 'red' : 'green' }">
                                        {{ scope.item.quantity }}
                                    </span>
                                    <span style="font-size: 14px; font-weight: 500">个</span>
                                </div>
                                <div>
                                    {{ scope.item.label }}
                                </div>
                            </div>
                        </template>
                    </el-segmented>
                    <div class="container">
                        <el-card class="box ml10 mr10" style="flex: 1">
                            <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>
                            <!-- <h3>功率区间稳态越限详情</h3> -->
                            <div :style="heightA" 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, '电压偏差(%)', 'Dev')
                                                        : ''
                                                "
                                            >
                                                {{ 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, '谐波电压(%)', '2') : ''"
                                            >
                                                {{ 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)', '3') : ''"
                                            >
                                                {{ 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, '三相电压不平衡度(%)', 'Unbalance')
                                                        : ''
                                                "
                                            >
                                                {{ 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, '长时闪变', 'plt') : ''"
                                            >
                                                {{ 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, '间谐波电压含有率(%)', '4')
                                                        : ''
                                                "
                                            >
                                                {{ 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, '电流不平衡度(%)', 'iNeg')
                                                        : ''
                                                "
                                            >
                                                {{ 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>
                        <div style="padding: 0px 10px 10px 0; width: 450px">
                            <el-card class="echart">
                                <template #header>
                                    <div class="card-header">
                                        <span>有功率区间占比</span>
                                    </div>
                                </template>
                                <my-echart :options="options" style="height: 212px" />
                            </el-card>
                            <el-card class="box mt10">
                                <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>
                    </div>
                </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(448)
const heightA = mainHeight(180)
const size = ref(0)
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%~10%'
    },
    {
        label: '20%~30%',
        quantity: '0',
        percentage: '10%',
        crossTheLine: '合格',
        value: '10%~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: '0',
        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.toFixed(2)  + '%',
                crossTheLine: res.isOrNot0,
                value: '0%~10%'
            },
            {
                label: '10%~20%',
                quantity: res.minsNum1,
                percentage: res.proportion1.toFixed(2)  + '%',
                crossTheLine: res.isOrNot1,
                value: '10%~10%'
            },
            {
                label: '20%~30%',
                quantity: res.minsNum2,
                percentage: res.proportion2.toFixed(2)  + '%',
                crossTheLine: res.isOrNot2,
                value: '10%~30%'
            },
            {
                label: '30%~40%',
                quantity: res.minsNum3,
                percentage: res.proportion3.toFixed(2)  + '%',
                crossTheLine: res.isOrNot3,
                value: '30%~40%'
            },
            {
                label: '40%~50%',
                quantity: res.minsNum4,
                percentage: res.proportion4.toFixed(2)  + '%',
                crossTheLine: res.isOrNot4,
                value: '40%~50%'
            }
        ]
        powerList2.value = [
            {
                label: '50%~60%',
                quantity: res.minsNum5,
                percentage: res.proportion5.toFixed(2)  + '%',
                crossTheLine: res.isOrNot5,
                value: '50%~60%'
            },
            {
                label: '60%~70%',
                quantity: res.minsNum6,
                percentage: res.proportion6.toFixed(2)  + '%',
                crossTheLine: res.isOrNot6,
                value: '60%~70%'
            },
            {
                label: '70%~80%',
                quantity: res.minsNum7,
                percentage: res.proportion7.toFixed(2)  + '%',
                crossTheLine: res.isOrNot7,
                value: '70%~80%'
            },
            {
                label: '80%~90%',
                quantity: res.minsNum8,
                percentage: res.proportion8.toFixed(2)  + '%',
                crossTheLine: res.isOrNot8,
                value: '80%~90%'
            },
            {
                label: '90%~100%',
                quantity: res.minsNum9,
                percentage: res.proportion9.toFixed(2)  + '%',
                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)
    }
})
// 导出区间数据
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) => {
    detailRef.value.open({
        row: row,
        title: title,
        field: index.value,
        lineId: dotList.value.id,
        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) => {
    const i = [...powerList1.value, ...powerList2.value].findIndex(item => item.value === e)
    console.log(index)

    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) * 100)
    }
})

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 {
    width: calc(100% - 80px);
    display: flex;
    flex: 1;
    .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;
    }
}
:deep(.el-segmented__item-selected) {
    background: var(--el-color-primary-light-5) !important;
}
:deep(.el-segmented__item.is-selected, .el-segmented__item.is-selected.is-disabled) {
    color: #000 !important;
}
</style>
