<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-select v-model="searchType" clearable placeholder="可选择同比、环比" filterable>
                        <el-option
                            v-for="item in searchTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
            </template>
            <template v-slot:operation>
                <el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
            </template>
        </TableHeader>

        <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 { getSteadyData } from '@/api/harmonic-boot/pollution'
import { gradeColor3 } from '@/components/echarts/color'
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: '',
    searchBeginTime: '',
    searchEndTime: '',
    periodBeginTime: '',
    periodEndTime: ''
})
const options = ref({})
const searchType = ref('')
const searchTypeOptions = [
    {
        label: '同比',
        value: '1'
    },
    {
        label: '环比',
        value: '2'
    }
]
const gradeNames = ['优质', '良好', '一般', '较差', '极差']
const init = () => {
    loading.value = true
    formData.id = monitoringPoint.state.lineId
    formData.searchBeginTime = datePickerRef.value.timeValue[0]
    formData.searchEndTime = datePickerRef.value.timeValue[1]
    if (searchType.value == '1') {
        ;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getYearOnYear(
            formData.searchBeginTime,
            formData.searchEndTime
        )
    } else if (searchType.value == '2') {
        ;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getMonthOnMonth(
            formData.searchBeginTime,
            formData.searchEndTime
        )
    } else {
        formData.periodBeginTime = ''
        formData.periodEndTime = ''
    }
    getSteadyData(formData).then((res: any) => {
        const { steadyInfoData, steadyInfoList } = res.data
        let yData = [],
            yData2 = []
        for (let i = 0; i < steadyInfoList.length; i++) {
            // if (steadyInfoList[i] == 3.1415) {
            //     steadyInfoList[i] = 1
            //     yData.push(steadyInfoList[i])
            // } else if (steadyInfoList[i] == 3.14159) {
            //     steadyInfoList[i] = 1
            //     yData.push(steadyInfoList[i])
            // } else if (steadyInfoList[i] !== 3.14159) {
            yData.push(steadyInfoList[i])
            // }
        }
        for (let i = 0; i < steadyInfoData.length; i++) {
            yData2.push(steadyInfoData[i])
            // if (steadyInfoData[i] == 3.14159) {
            //     steadyInfoData[i] = 0
            //     yData2.push(steadyInfoData[i])
            // } else if (steadyInfoData[i] == 3.14159) {
            //     steadyInfoData[i] = 0
            //     yData2.push(steadyInfoData[i])
            // } else if (steadyInfoData[i] !== 3.14159) {
            //     yData2.push(steadyInfoData[i])
            // }
        }
        let series: any[] = [
            {
                name: formData.searchBeginTime + '至' + formData.searchEndTime,
                type: 'bar',
                barMaxWidth: 30,
                label: {
                    show: true,
                    position: 'top',
                    distance: 2,
                    color: '#fff',
                    fontWeight: 'bolder'
                },
                data: yData,
                markLine: {
                    silent: false,
                    symbol: 'circle',
                    data: [
                        {
                            name: '',
                            yAxis: 100,
                            lineStyle: {
                                color: gradeColor3[0]
                            },
                            label: {
                                show: true,
                                formatter: '优质',
                                color: gradeColor3[0]
                            }
                        },
                        {
                            name: '',
                            yAxis: 90,
                            lineStyle: {
                                color: gradeColor3[1]
                            },
                            label: {
                                show: true,
                                color: gradeColor3[1],
                                formatter: '良好'
                            }
                        },
                        {
                            name: '',
                            yAxis: 60,
                            lineStyle: {
                                color: gradeColor3[2]
                            },
                            label: {
                                show: true,
                                color: gradeColor3[2],
                                formatter: '合格'
                            }
                        }
                    ]
                },
                itemStyle: {
                    color: (params: any) => {
                        if (params.value > 90) {
                            return gradeColor3[0]
                        } else if (params.value > 60) {
                            return gradeColor3[1]
                        } else if (params.value == 3.14159) {
                            return '#ccc'
                        } else {
                            return gradeColor3[2]
                        }
                    }
                }
            }
        ]
        if (searchType.value) {
            series.push({
                name: formData.periodBeginTime + '~' + formData.periodEndTime,
                type: 'bar',
                barMaxWidth: 30,
                
                // label: {
                //     show: true,
                //     position: 'top',
                //     distance: 2,
                //     color: '#fff',
                //     fontWeight: 'bolder'
                // },
                data: yData2,
                itemStyle: {
                    color: (params: any) => {
                        if (params.value > 90) {
                            return gradeColor3[0]
                        } else if (params.value > 60) {
                            return gradeColor3[1]
                        } else if (params.value == 3.14159) {
                            return '#ccc'
                        } else {
                            return gradeColor3[2]
                        }
                    }
                }
            })
        }
        options.value = {
            title: {
                text: '稳态指标合格率'
            },
            legend: {
                show: false
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        color: '#fff',
                        fontSize: 16
                    }
                },
                textStyle: {
                    color: '#fff',
                    fontStyle: 'normal',
                    opacity: 0.35,
                    fontSize: 14
                },
                backgroundColor: 'rgba(0,0,0,0.55)',
                formatter: function (params: any) {
                    let msg = ''
                    msg += params[0].name 
                    for (let i in params) {
                       
                        if (params[i].data == 3.14159) {
                             if (params[i].seriesName && params[i].seriesName.includes('~')) {
                                msg += params[i].marker +  ': 暂无数据<br/>'
                            } else {
                                msg += '（' + params[i].seriesName + '）' + '<br/>' + params[i].marker +  ': 暂无数据<br/>'
                            }
                        } else {
                            if (params[i].seriesName && params[i].seriesName.includes('~')) {
                                msg += params[i].marker +  ': ' + params[i].data + '<br/>'
                            } else {
                                msg += '（' +  params[i].seriesName + '）' + '<br/>' + params[i].marker +  ': ' + params[i].data + '<br/>'
                            }
                        }
                    }
                    return msg
                }
            },
            xAxis: {
                name: '指标类型',
                type: 'category',
                axisLine: {
                    lineStyle: {
                        width: 1
                    },
                    symbol: ['none', 'arrow']
                },
                axisLabel: {
                    textStyle: {
                        fontFamily: 'dinproRegular'
                    }
                },
                data: [
                    '频率偏差',
                    '闪变',
                    '三相电压不平衡',
                    '谐波电压',
                    '谐波电流',
                    '电压偏差',
                    '负序电流',
                    '间谐波电压含有率'
                ]
            },
            yAxis: [
                {
                    name: '%',
                    type: 'value',
                    min: 0,
                    max: 100,
                    position: 'left',
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            width: 1
                        },
                        symbol: ['none', 'arrow']
                    }
                },
                {
                    position: 'left',
                    axisLine: {
                        show: true,
                        symbol: ['none', 'arrow']
                    },
                    splitLine: {
                        //分割线配置
                        lineStyle: {
                            color: '#fff'
                        }
                    }
                }
            ],
            series
        }
        nextTick(() => {
            loading.value = false
        })
    })
}
provide('tableStore', tableStore)
onMounted(() => {
    init()
})
</script>
<style></style>
