<!-- 详情 -->
<template>
    <div class="default-main pd10">
        <div class="title">
            <!-- <div style="font-size: 14px; font-weight: 500">
               
            </div> -->
            <span class="monitoring-point">{{ query.name || '' }}</span>
            <back-component />
        </div>

        <el-tabs type="border-card" v-model="activeName" @tab-change="generateFn">
            <el-tab-pane
                v-for="(item, index) in tabList"
                :key="index"
                :label="item.name + '次谐波'"
                :style="height"
                :name="index"
                v-loading="loading"
            >
                <div style="height: calc(100vh - 250px); overflow-y: auto">
                    <div
                        class="box boxTab mb10"
                        :style="{
                            height: `calc((100vh - 280px) / ${
                                item.list.length == 0 ? 1 : item.list.length > 3 ? 3 : item.list.length
                            })`
                        }"
                        v-for="(value, i) in item.dynamicOptions"
                        :key="i"
                    >
                        <MyEChart :options="item.dynamicOptions[i]" style="flex: 1" />
                        <div style="width: 500px">
                            <vxe-table ref="tableRef" :data="item.list[i]" height="auto" v-bind="defaultAttribute">
                                <vxe-column field="customerName" title="用户名(用户号)"></vxe-column>
                                <vxe-column field="responsibilityData" title="责任数据(%)" width="120">
                                    <template v-slot="{ row }">
                                        {{ Math.floor(row.responsibilityData * 10000) / 10000 }}
                                    </template>
                                </vxe-column>
                            </vxe-table>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { mainHeight } from '@/utils/layout'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import BackComponent from '@/components/icon/back/index.vue'
import MyEChart from '@/components/echarts/MyEchart.vue'
import { timeFormat } from '@/utils/common'
import { yMethod } from '@/utils/echartMethod'
import { displayHistoryData } from '@/api/advance-boot/division'
const { query } = useRoute() // 查询参数
const height = mainHeight(155)
const activeName = ref(0)
const tabList: any = ref([])

const loading: any = ref(false)
const init = () => {
    let data = (Array.isArray(query.time) ? query.time[0] : query.time)?.split(',') ?? []
    tabList.value = []
    data.forEach((item: any) => {
        tabList.value.push({
            name: item,
            dynamicOptions: [],
            list: []
        })
    })
    activeName.value = 0
    generateFn(0)
}

// 生成动态谐波责任数据
const generateFn = async (e: any) => {
    if (tabList.value[e].dynamicOptions.length != 0) return

    loading.value = true
    await displayHistoryData({
        id: query.id,
        time: tabList.value[e].name
    })
        .then((res: any) => {
            res.data.forEach((item: any) => {
                tabList.value[e].list.push(item.responsibilities)

                let [min, max] = yMethod(item.datas.map((k: any) => k.valueDatas).flat())
                let series: any[] = []
                let time: any[] = item.timeDatas.map((k: any) => timeFormat(k))
                item.datas.forEach((k: any) => {
                    series.push({
                        name: k.customerName,
                        data: k.valueDatas.map((k: any, i: number) => [time[i], Math.floor(k * 10000) / 10000]),
                        type: 'line',
                        symbol: 'none'
                    })
                })
                tabList.value[e].dynamicOptions.push({
                    title: {
                        text: `时间：${item.limitSTime} 至${item.limitETime}　限值：${item.limitValue}`
                    },
                    xAxis: {
                        type: 'time',
                        name: '时间',
                        axisLabel: {
                            formatter: {
                                day: '{MM}-{dd}',
                                month: '{MM}',
                                year: '{yyyy}'
                            }
                        }
                    },
                    tooltip: {
                        formatter(params: any) {
                            let str = params[0].value[0] + '<br/>'
                            for (let i = 0; i < params.length; i++) {
                                str =
                                    str + params[i].marker + params[i].seriesName + '：' + params[i].value[1] + '<br/>'
                            }

                            return str
                        }
                    },
                    grid: {
                        top: 30
                    },
                    legend: {
                        show: false
                    },
                    yAxis: {
                        min: min,
                        max: max
                    },
                    toolbox: {
                        show: false
                    },

                    options: {
                        series: series
                    }
                })
            })
        })
        .catch(() => {
            loading.value = false
        })
    loading.value = false
}

onMounted(() => {
    init()
})
</script>
<style lang="scss" scoped>
.title {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px;
    font-size: 16px;
    font-weight: 550;
    color: var(--el-color-primary);
}
.monitoring-point {
    font-size: 14px;
    font-weight: 700;
}
.boxTab {
    display: flex;
}
</style>
