<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>
                <el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
            </el-form-item>
        </el-form>
        <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 { getQualityAssessData } from '@/api/harmonic-boot/asses'
import { gradeColor5 } from '@/components/echarts/color'
const datePickerRef = ref()
const monitoringPoint = useMonitoringPoint()
const loading = ref(true)
const formData = reactive({
    id: '',
    searchBeginTime: '',
    searchEndTime: '',
    periodBeginTime: '',
    periodEndTime: ''
})
const options = ref({})
const gradeNames = ['优质', '良好', '一般', '较差', '极差']
const grade = gradeColor5.map((item, index) => {
    return {
        name: gradeNames[index],
        color: item
    }
})

const init = () => {
    loading.value = true
    if (!monitoringPoint.state.lineId) {
        return
    }
    formData.id = monitoringPoint.state.lineId
    formData.searchBeginTime = datePickerRef.value.timeValue[0]
    formData.searchEndTime = datePickerRef.value.timeValue[1]
    getQualityAssessData(formData).then((res: any) => {
        let data = res.data.syn[0]
        if (data == 3.14159) {
            data = 0.25
        } else if (data == 3.1415) {
            data = 0.15
        }
        options.value = {
            title: {
                text: '稳态综合评估',
                x: 'center',
                y: '0%'
            },
            tooltip: {
                trigger: 'item',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        color: '#fff',
                        fontSize: 16
                    }
                },
                textStyle: {
                    color: '#fff',
                    fontStyle: 'normal',

                    opacity: 0.35,
                    fontSize: 14
                },
                borderColor: '#fff',
                backgroundColor: 'rgba(0,0,0,0.55)',
                formatter: function (params: any) {
                    if (params.value >= 5) {
                        return params.name + ' : ' + '优质'
                    } else if (params.value > 4 && params.value <= 5) {
                        return params.name + ' : ' + '良好'
                    } else if (params.value > 3 && params.value <= 4) {
                        return params.name + ' : ' + '合格'
                    } else if (params.value > 2 && params.value <= 3) {
                        return params.name + ' : ' + '较差'
                    } else if (params.value <= 2 && params.value >= 1) {
                        return params.name + ' : ' + '极差'
                    } else if (params.value >= 0.25 && params.value < 1) {
                        return params.name + ' : ' + '暂无数据'
                    } else if (params.value <= 0.15 && params.value >= 0) {
                        return params.name + ' : ' + '/'
                    }
                }
            },
            legend: {
                show: false
            },
            xAxis: [
                {
                    name: '指标',
                    type: 'category',
                    data: ['稳态综合评估'],
                    axisLabel: {
                        margin: 10
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        symbol: ['none', 'arrow']
                    }
                }
            ],
            yAxis: {
                name: '等级',
                type: 'value',
                min: 0,
                max: 5,
                axisLabel: {
                    show: true,
                    // 这里重新定义就可以
                    formatter: function (value: number) {
                        var texts = []
                        if (value === 1) {
                            texts.push('1级')
                        } else if (value === 2) {
                            texts.push('2级')
                        } else if (value === 3) {
                            texts.push('3级')
                        } else if (value === 4) {
                            texts.push('4级')
                        } else if (value === 5) {
                            texts.push('5级')
                        }
                        return texts
                    }
                },
                axisLine: {
                    show: true,
                    symbol: ['none', 'arrow']
                }
            },
            series: [
                {
                    name: '综合评估',
                    type: 'bar',
                    label: {
                        show: true,
                        position: 'top',
                        distance: 2,
                        color: '#fff',
                        fontWeight: 'bolder'
                    },
                    barWidth: '45',
                    data: [
                        {
                            value: data
                        }
                    ],
                    markLine: {
                        silent: false,
                        symbol: 'circle',
                        data: grade.map((item, index) => {
                            return {
                                yAxis: grade.length - index,
                                name: item.name,
                                lineStyle: {
                                    color: item.color
                                },
                                label: {
                                    color: item.color,
                                    formatter: item.name
                                }
                            }
                        })
                    },
                    itemStyle: {
                        color: (params: any) => {
                            if (params.value > 5) {
                                return gradeColor5[0]
                            } else if (params.value > 4) {
                                return gradeColor5[1]
                            } else if (params.value > 3) {
                                return gradeColor5[2]
                            } else if (params.value > 2) {
                                return gradeColor5[3]
                            } else {
                                return gradeColor5[4]
                            }
                        }
                    }
                }
            ],
            options: {
                dataZoom: null
            }
        }
        nextTick(() => {
            loading.value = false
        })
    })
}

onMounted(() => {
    init()
})
</script>
<style></style>
