<template>
    <div class="pt50">
        <el-button class="shutDown" icon="el-icon-Back" @click="emit('shutDown')">返回</el-button>
        <div class="select">
            <div class="mr10">谐波次数</div>
            <el-select v-model="selectValue" style="width: 100px" @change="loading = true" filterable>
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <el-tabs type="border-card" v-model="activeName" @tab-change="handleClick" v-loading="loading">
            <el-tab-pane v-for="(item, index) in tabsList" :label="item.groupName" :name="index" :key="index">
                <div>
                    <div class="realtrend_top">
                        <div class="realtrend_table">
                            <div class="thead_left">
                                <p style="font-weight: 700; background-color: #f3f6f9">次数(次)</p>
                                <p>{{ item.groupName }}{{ item.unit ? '(' + item.unit + ')' : '' }}</p>
                            </div>
                            <div class="thead_right">
                                <div
                                    class="right_cell"
                                    v-for="i in selectValue == '1'
                                        ? item.title.filter(num => (activeName == 1 ? num - 0.5 : num) % 2 !== 0)
                                        : selectValue == '2'
                                        ? item.title.filter(num => (activeName == 1 ? num - 0.5 : num) % 2 == 0)
                                        : item.title"
                                    :key="index"
                                >
                                    <p style="background-color: #f3f6f9">
                                        <span>{{ i }}次</span>
                                    </p>
                                    <p>
                                        <span>{{ item.data[`h${i}`] == 0 ? 0 : item.data[`h${i}`] || '/' }}</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mt10" :style="height">
                        <MyEchart ref="barCharts" :options="tabsList[0].echartsData"></MyEchart>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { getOverLimitData } from '@/api/device-boot/communicate'
import { mainHeight } from '@/utils/layout'
import { useMonitoringPoint } from '@/stores/monitoringPoint'
const emit = defineEmits(['shutDown'])
const monitoringPoint = useMonitoringPoint()
const options = [
    {
        value: '3',
        label: '全部'
    },

    {
        value: '1',
        label: '奇次'
    },
    {
        value: '2',
        label: '偶次'
    }
]
const height = mainHeight(315)
const barCharts = ref()
const loading = ref(true)
const crossTheLine: any = ref({})
const tabsList: any = ref([
    {
        id: '6d5470f509ca271d7108a86e83bb283f',
        groupName: '谐波电压含有率',
        thdDataVOS: null,
        thdDataTdVODatas: null,
        unit: '%',
        title: [
            2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
            31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50
        ],
        data: {},
        echartsData: {}
    },
    {
        id: 'ae31115b83f02f03a0d3bd65cb017121',
        groupName: '间谐波电压含有率',
        thdDataVOS: null,
        thdDataTdVODatas: null,
        unit: '%',
        title: [
            0.5, 1.5, 2.5, 3.5, 4.5, 5.5, 6.5, 7.5, 8.5, 9.5, 10.5, 11.5, 12.5, 13.5, 14.5, 15.5, 
            // 16.5, 17.5, 18.5,
            // 19.5, 20.5, 21.5, 22.5, 23.5, 24.5, 25.5, 26.5, 27.5, 28.5, 29.5, 30.5, 31.5, 32.5, 33.5, 34.5, 35.5, 36.5,
            // 37.5, 38.5, 39.5, 40.5, 41.5, 42.5, 43.5, 44.5, 45.5, 46.5, 47.5, 48.5, 49.5
        ],
        data: {},
        echartsData: {}
    },
    {
        id: '8dc260f16280184e2b57d26668dc00b1',
        groupName: '谐波电流幅值',
        thdDataVOS: null,
        thdDataTdVODatas: null,
        unit: 'A',
        title: [
            2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
            31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50
        ],

        data: {},
        echartsData: {}
    }
])

const selectValue = ref('1')
const activeName = ref(0)
// 点击tab
const handleClick = (tab: any, event: any) => {
    loading.value = true
}
const init = (row: any) => {
    let vData: any = {}
    let iData: any = {}
    let SvData: any = {}
    for (let i = 1; i < 50; i++) {
        vData[`h${i + 1}`] =
            Math.floor(
                Math.max(...[row.V.A[`V` + (i + 1)], row.V.B[`V` + (i + 1)], row.V.C[`V` + (i + 1)]].map(Number)) * 100
            ) / 100

        SvData[`h${i - 0.5}`] =
            Math.floor(Math.max(...[row.V.A[`SV_` + (i-1)], row.V.B[`SV_` + (i-1)], row.V.C[`SV_` + (i-1)]].map(Number)) * 100) /
            100
        iData[`h${i + 1}`] =
            Math.floor(
                Math.max(...[row.I.A[`I` + (i + 1)], row.I.B[`I` + (i + 1)], row.I.C[`I` + (i + 1)]].map(Number)) * 100
            ) / 100
    }
    SvData[`h49.5`] =
        Math.floor(Math.max(...[row.V.A[`SV_49`], row.V.B[`SV_49`], row.V.C[`SV_49`]].map(Number)) * 100) / 100

    tabsList.value[0].data = vData
    tabsList.value[1].data = SvData
    tabsList.value[2].data = iData

    let xData =
        selectValue.value == '1'
            ? tabsList.value[activeName.value].title.filter(num => (activeName.value == 1 ? num - 0.5 : num) % 2 !== 0)
            : selectValue.value == '2'
            ? tabsList.value[activeName.value].title.filter(num => (activeName.value == 1 ? num - 0.5 : num) % 2 === 0)
            : tabsList.value[activeName.value].title

    barCharts.value[activeName.value]?.setOptions({
        title: {
            text: tabsList.value[activeName.value].groupName
        },
        xAxis: {
            data: xData.map(num => `${num}次`)
        },
         yAxis: {
            name: tabsList.value[activeName.value].unit // 更新Y轴单位
        },
        series: [
            {
                name: tabsList.value[activeName.value].groupName + '(' + tabsList.value[activeName.value].unit + ')' ,
                type: 'bar',
                data: xData.map(num => {
                    return tabsList.value[activeName.value].data[`h${num}`]
                })
            },
            {
                name: '国标限值(' + tabsList.value[activeName.value].unit + ')', // 更新series名称中的单位
                type: 'bar',
                data: xData.map(num => {
                    return (
                        crossTheLine.value[
                            activeName.value == 0
                                ? `uharm${num}`
                                : activeName.value == 1
                                ? `inuharm${num + 0.5}`
                                : `iharm${num}`
                        ] || ''
                    )
                })
            }
        ]
    })
    loading.value = false
}
// 设置ecartsData
const echarts = (num: number) => {
    return {
        title: {
            text: ''
        },
        xAxis: {
            name: "次数",
            data: []
        },
        yAxis: {name: tabsList.value[num].unit},
        color: ['#2E8B57', '#DAA520'],
        options: {
            series: [
                {
                    name: tabsList.value[num].groupName,
                    type: 'bar',
                    data: []
                },
                {
                    name: '国标限值('+ tabsList.value[num].unit +')',
                    type: 'bar',
                    // label: {
                    //     normal: {
                    //         position: 'top'
                    //     }
                    // },
                    data: []
                }
            ]
        }
    }
}
onMounted(() => {
    tabsList.value[0].echartsData = echarts(0)
    tabsList.value[1].echartsData = echarts(1)
    tabsList.value[2].echartsData = echarts(2)
    console.log(tabsList.value)
    getOverLimitData({ id: monitoringPoint.state.lineId }).then(res => {
        crossTheLine.value = res.data
    })
})
defineExpose({
    init
})
</script>
<style lang="scss" scoped>
.shutDown {
    position: absolute;
    right: 10px;
    top: 10px;
}
.select {
    position: absolute;
    top: 10px;
    display: flex;
    align-items: center;
    font-size: 14px;
}
.realtrend_top {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .table {
        flex: 1;
        // min-height: 80px;
        cursor: pointer;
        min-height: 90px;
        max-height: 170px;
        border: 1px solid #eee;
        overflow-x: auto;
        overflow-y: hidden;
        position: relative;

        ul {
            width: auto;
            height: 40px;
            display: flex;

            li {
                flex: none;
                width: 100px;
                line-height: 40px;
                border: 1px solid #eee;
                text-align: center;
                list-style: none;
            }
        }

        ul:nth-child(1) {
            li {
                font-weight: 800;
                background: #f4f6f9;
            }
        }
    }

    // .table::-webkit-scrollbar {
    //     display: none;
    // }

    .realtrend_table {
        width: 100%;
        height: auto;
        max-height: 150px;
        display: flex;
        border: 2px solid #eee;
        cursor: pointer;
        font-size: 13px;

        .thead_left {
            width: 150px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            line-height: 50px;

            padding-bottom: 5px;

            p {
                width: 100%;
                height: 100%;
                text-align: center;
                border: 1px solid #eee;
                line-height: 38px;
                margin: 0 !important;
            }
        }

        .thead_right {
            flex: 1;
            align-items: center;
            overflow-x: auto;
            overflow-y: hidden;
            display: flex;
            padding-bottom: 5px;

            .right_cell {
                width: 100%;
                display: flex;
                flex-direction: column;

                p {
                    flex: none;
                    min-width: 60px;
                    height: 100%;
                    text-align: center;
                    border: 1px solid #eee;
                    line-height: 38px;
                    margin: 0 !important;
                }

                p:nth-child(1) {
                    font-weight: 800;
                }
            }
        }
    }
}
</style>
