<template>
    <div style="display: flex; flex-direction: column; height: 100%">
        <el-form :inline="true">
            <el-form-item label="日期">
                <DatePicker ref="datePickerRef"></DatePicker>
            </el-form-item>
            <el-form-item label="指标">
                <el-radio-group v-model="formData.harmState">
                    <el-radio-button :label="0">谐波电压含有率</el-radio-button>
                    <el-radio-button :label="1">谐波电流幅值</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="init">查询</el-button>
            </el-form-item>
        </el-form>
        <vxe-table :data="analysisData" v-bind="defaultAttribute">
            <vxe-column field="name" title="指标" width="140px"></vxe-column>
            <vxe-column
                :field="index.toString()"
                :title="item + 1 + '次'"
                v-for="(item, index) in 49"
                width="80px"
            ></vxe-column>
        </vxe-table>
        <div style="flex: 1" class="mt10">
            <my-echart :options="options" />
        </div>
    </div>
</template>
<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from 'vue'
import DatePicker from '@/components/form/datePicker/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { useMonitoringPoint } from '@/stores/monitoringPoint'
import { getHarmInHarmData } from '@/api/harmonic-boot/inHarm'
import { defaultAttribute } from '@/components/table/defaultAttribute'

const datePickerRef = ref()
const monitoringPoint = useMonitoringPoint()
const loading = ref(true)
const formData = reactive({
    id: monitoringPoint.state.lineId,
    searchBeginTime: '',
    searchEndTime: '',
    harmState: 0
})
const analysisData = ref<any>([])
const options = ref({})

const init = () => {
    loading.value = true
    formData.id = monitoringPoint.state.lineId
    formData.searchBeginTime = datePickerRef.value.timeValue[0]
    formData.searchEndTime = datePickerRef.value.timeValue[1]
    getHarmInHarmData(formData).then((res: any) => {
        analysisData.value = []
        if (formData.harmState === 1) {
            analysisData.value.push(
                {
                    name: '谐波电流幅值(A)',
                    originData: res.data.harmInHarmValue.map((item: number) => item.toFixed(3)),
                    ...res.data.harmInHarmValue.map((item: number) => item.toFixed(3))
                },
                {
                    name: '国标限值(A)',
                    originData: res.data.harmInOverLimit,
                    ...res.data.harmInOverLimit
                }
            )
        } else {
            analysisData.value.push(
                {
                    name: '谐波电压含有率(%)',
                    originData: res.data.harmInHarmValue.map((item: number) => item.toFixed(3)),
                    ...res.data.harmInHarmValue.map((item: number) => item.toFixed(3))
                },
                {
                    name: '国标限值(%)',
                    originData: res.data.harmInOverLimit,
                    ...res.data.harmInOverLimit
                }
            )
        }
        options.value = {
            xAxis: {
                type: 'category',
                data: Array.from({ length: 49 }, (_, i) => `${i + 2}次`)
            },
            yAxis: {
                type: 'value'
            },
            series: analysisData.value.map((item: any) => {
                return {
                    name: item.name,
                    data: item.originData,
                    type: 'bar'
                }
            }),
            options: {
                dataZoom: null
            }
        }
        nextTick(() => {
            loading.value = false
        })
    })
}
onMounted(() => {
    init()
})
</script>
