<template>
    <div style="display: flex; flex-direction: column; height: 100%">
        <TableHeader ref="TableHeaderRef" :showSearch="false">
            <template v-slot:select>
                <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>
            </template>
            <template v-slot:operation>
                <el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
            </template>
        </TableHeader>

        <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" v-loading="loading">
            <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'
import TableHeader from '@/components/table/header/index.vue'
import TableStore from '@/utils/tableStore'
const tableStore = new TableStore({
    url: '',
    method: 'POST',
    column: []
})
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) => {
        let xName = ''
        analysisData.value = []
        if (formData.harmState === 1) {
            xName = 'A'
            analysisData.value.push(
                {
                    name: '谐波电流幅值(A)',
                    originData: res.data.harmInHarmValue.map((item: number) =>
                        item == null || item == 3.14159 ? 0.14159 : Math.floor(item * 1000) / 1000
                    ),
                    ...res.data.harmInHarmValue.map((item: number) =>
                        item == null || item == 3.14159 ? '/' : Math.floor(item * 1000) / 1000
                    )
                },
                {
                    name: '国标限值(A)',
                    originData: res.data.harmInOverLimit,
                    ...res.data.harmInOverLimit
                }
            )
        } else {
            xName = '%'
            analysisData.value.push(
                {
                    name: '谐波电压含有率(%)',
                    originData: res.data.harmInHarmValue.map((item: number) =>
                        item == null || item == 3.14159 ? 0.14159 : Math.floor(item * 1000) / 1000
                    ),
                    ...res.data.harmInHarmValue.map((item: number) =>
                        item == null || item == 3.14159 ? '/' : Math.floor(item * 1000) / 1000
                    )
                },
                {
                    name: '国标限值(%)',
                    originData: res.data.harmInOverLimit,
                    ...res.data.harmInOverLimit
                }
            )
        }
        options.value = {
            title: {
                text: formData.harmState == 0 ? '谐波电压频谱' : '谐波电流频谱'
            }, 
            xAxis: {
                
                name: '次数',
                type: 'category',
                data: Array.from({ length: 49 }, (_, i) => `${i + 2}次`)
            },
            yAxis: {
                name: xName,
                type: 'value'
            },
            color: ['#2E8B57', '#DAA520'],
            series: analysisData.value.map((item: any) => {
                return {
                    name: item.name,
                    data: item.originData,
                    type: 'bar'
                }
            }),
            options: {
                // dataZoom: null
            }
        }
        nextTick(() => {
            loading.value = false
        })
    })
}
provide('tableStore', tableStore)
onMounted(() => {
    init()
})
</script>
