<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 v-slot:select>
                        <!-- <el-form-item label="有功功率区间">
                            <el-select
                                v-model="power"
                                multiple
                                collapse-tags
                                collapse-tags-tooltip
                                filterable
                                placeholder="请选择有功功率区间"
                            >
                                <el-option
                                    v-for="item in powerList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="各指标越限">
                            <el-select
                                v-model="index"
                                multiple
                                collapse-tags
                                collapse-tags-tooltip
                                filterable
                                placeholder="请选择各指标越限"
                            >
                                <el-option
                                    v-for="item in indexList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item> -->
                    </template>
                    <template #operation>
                        <el-button icon="el-icon-Download" type="primary">生成报表</el-button>
                    </template>
                </TableHeader>

                <div class="container pd10">
                    <div>
                        <el-card class="cardBox">
                            <div class="mb5" style="display: flex; justify-content: space-between">
                                <h3>有功功率趋势分析</h3>
                                <div>
                                    <span>图例:　</span>
                                    <span style="color: red">稳态越限　</span>
                                    <span style="color: green">合格</span>
                                </div>
                            </div>
                            <el-card class="card-top">
                                <div
                                    v-for="item in powerList1"
                                    class="pd10"
                                    style="cursor: pointer"
                                    :class="flag == item.label ? 'hoverBox' : ''"
                                    @click="handleClick(item.label)"
                                >
                                    <div style="font-size: 24px; font-weight: 700">
                                        <span :style="{ color: item.crossTheLine === '越限' ? '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 in powerList2"
                                    class="pd10"
                                    style="cursor: pointer"
                                    :class="flag == item.label ? 'hoverBox' : ''"
                                    @click="handleClick(item.label)"
                                >
                                    <div style="font-size: 24px; font-weight: 700">
                                        <span :style="{ color: item.crossTheLine === '越限' ? 'red' : 'green' }">
                                            {{ item.quantity }}
                                        </span>
                                        <span style="font-size: 14px; font-weight: 500">个</span>
                                    </div>
                                    <div>
                                        {{ item.label }}
                                    </div>
                                </div>
                            </el-card>
                        </el-card>
                    </div>
                    <el-card class="echart">
                        <my-echart :options="options" style="height: 198px" />
                    </el-card>
                </div>
                <div class="container mt10 ml10">
                    <el-card class="box">
                        <div :style="heightB" style="overflow-y: auto">
                            <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="auto" :data="tableData">
                                <vxe-column field="num" title="时间" min-width="100px">
                                    <template #default="{ row }">
                                        <el-link type="primary" @click="timeClick(row)">{{ row.num }}</el-link>
                                    </template>
                                </vxe-column>
                                <vxe-column field="num1" title="电压偏差(%)" />
                                <vxe-column field="num2" title="谐波电压(%)" />
                                <vxe-column field="num3" title="谐波电流(%)" />
                                <vxe-column field="num4" title="三相电压不平衡度(%)" />
                                <vxe-column field="num5" title="电压波动(%)" />
                                <vxe-column field="num6" title="闪变(%)" />
                                <vxe-column field="num7" title="间谐波电压含有率(%)" />
                                <vxe-column field="num8" title="流不平衡度" />
                                <vxe-column field="crossTheLine" title="越限情况">
                                    <template #default="{ row }">
                                        <el-link :type="row.crossTheLine === '越限' ? 'danger' : 'success'">
                                            <span @click="detailClick(row)">{{ row.crossTheLine }}</span>
                                        </el-link>
                                    </template>
                                </vxe-column>
                                <vxe-column field="num3" title="操作">
                                    <el-button type="primary" link>添加</el-button>
                                </vxe-column>
                            </vxe-table>
                        </div>
                    </el-card>

                    <el-card class="box mr10">
                        <div :style="heightB" style="overflow-y: auto">
                            <div style="display: flex; justify-content: space-between">
                                <span style="font-size: 16px; font-weight: 700">报告参数</span>
                                <el-radio-group v-model="radio2" size="small">
                                    <el-radio-button label="统计结果" value="1" />
                                    <el-radio-button label="原始数据" value="2" />
                                </el-radio-group>
                            </div>
                        </div>
                    </el-card>
                </div>
            </pane>
        </splitpanes>
        <!-- 时间弹框 -->
        <timePopUpBox
            ref="timePopUpBoxRef"
            :timePopUpBox="timePopUpBox"
            @close="timePopUpBox = null"
            v-if="timePopUpBox"
        />
        <!-- 越限详情 -->
        <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 detail from './components/detail.vue'
defineOptions({
    name: 'newEnergy/newEnergyAnalysis'
})
const timePopUpBox = ref<anyObj | null>(null)
const flag = ref('0%~10%')
const radio2 = ref('1')
const height = mainHeight(20)
const heightB = mainHeight(395)
const size = ref(0)
const TableHeaderRef = ref()
const detailRef = ref()
const dotList: any = ref({})
const power = ref([])
const timePopUpBoxRef = ref()
const index = ref([])

const powerList1: any = ref([
    {
        label: '0%~10%',
        quantity: '20',
        percentage: '10%',
        crossTheLine: '越限',
        value: '0%~10%'
    },
    {
        label: '10%~20%',
        quantity: '20',
        percentage: '10%',
        crossTheLine: '合格',
        value: '10%~10%'
    },
    {
        label: '20%~30%',
        quantity: '20',
        percentage: '10%',
        crossTheLine: '合格',
        value: '10%~30%'
    },
    {
        label: '30%~40%',
        quantity: '20',
        percentage: '10%',
        crossTheLine: '合格',
        value: '30%~40%'
    },
    {
        label: '40%~50%',
        quantity: '20',
        percentage: '10%',
        crossTheLine: '合格',
        value: '40%~50%'
    }
])
const powerList2: any = ref([
    {
        label: '50%~60%',
        quantity: '20',
        percentage: '10%',
        crossTheLine: '合格',
        value: '50%~60%'
    },
    {
        label: '60%~70%',
        quantity: '20',
        percentage: '10%',
        crossTheLine: '合格',
        value: '60%~70%'
    },
    {
        label: '70%~80%',
        quantity: '20',
        percentage: '10%',
        crossTheLine: '合格',
        value: '70%~80%'
    },
    {
        label: '80%~90%',
        quantity: '20',
        percentage: '10%',
        crossTheLine: '越限',
        value: '80%~90%'
    },
    {
        label: '90%~100%',
        quantity: '20',
        percentage: '10%',
        crossTheLine: '越限',
        value: '90%~100%'
    }
])

const tableData: any = ref([
    {
        num: '2023-08-08 09:00:00',
        num1: '0',
        num2: '1',
        num3: '3',
        num4: '2',
        num5: '1',
        num6: '1',
        num7: '1',
        num8: '0',
        crossTheLine: '越限'
    }
])
const options = ref({})
const tableStore = new TableStore({
    url: '',
    method: 'POST',
    column: [],
    beforeSearchFun: () => {},
    loadCallback: () => {}
})
// 卡片点击变色
const handleClick = (e: string) => {
    flag.value = e
}
// 点击时间
const timeClick = (row: any) => {
    timePopUpBox.value = row
}
// 点击越限
const detailClick = () => {
    detailRef.value.open()
}
provide('tableStore', tableStore)

onMounted(() => {
    const dom = document.getElementById('navigation-splitpanes')
    if (dom) {
        size.value = Math.round((180 / dom.offsetHeight) * 100)
    }
    options.value = {
        title: {
            text: '占比',
            left: '10px'
        },
        legend: {
            show: false
        },
        tooltip: {},
        xAxis: {
            show: false
        },
        yAxis: {
            show: false
        },
        dataZoom: { show: false },

        options: {
            series: [
                {
                    type: 'pie',
                    center: ['50%', '50%'],
                    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 }
                        })
                    ]
                }
            ]
        }
    }
})

const handleNodeClick = (data: any, node: any) => {
    dotList.value = data
}
</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: 20px;
    .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;
}
</style>
