<template>
    <div v-loading="loading" class="running-condition">
        <el-form :inline="true" class="fx-jcsb">
            <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 zanjiangfenbutongji">
            <div
                style="
                    position: absolute;
                    right: 55px;
                    top: 25px;
                    z-index: 2;
                    display: flex;
                    align-items: center;
                    font-size: 12px;
                "
            >
                <el-tag style="width: 20px; height: 12px" :style="{ background: gradeColor3[2] }"></el-tag>
                <span class="ml2" :style="{ color: gradeColor3[2] }">{{ 'X<60%' }}</span>
                <el-tag class="ml10" style="width: 20px; height: 12px" :style="{ background: gradeColor3[1] }"></el-tag>
                <span class="ml2" :style="{ color: gradeColor3[1] }">{{ '60%≤X<90%' }}</span>
                <el-tag class="ml10" style="width: 20px; height: 12px" :style="{ background: gradeColor3[0] }"></el-tag>
                <span class="ml2" :style="{ color: gradeColor3[0] }">{{ 'X≥90 %' }}</span>
            </div>
            <my-echart :options="secondOptions" style="flex: 1; height: 100%" />
            <my-echart :options="firstOptions" style="flex: 1; height: 100%" />
        </div>
    </div>
</template>
<script setup lang="ts">
import { nextTick, onMounted, reactive, ref, watch } from 'vue'
import DatePicker from '@/components/form/datePicker/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { useMonitoringPoint } from '@/stores/monitoringPoint'
import { getComFlagInfoData, getRunOnlineRateData } from '@/api/device-boot/communicate'
import { gradeColor3 } from '@/components/echarts/color'

const datePickerRef = ref()
const loading = ref(true)
const monitoringPoint = useMonitoringPoint()
const formData = reactive({
    id: '',
    searchBeginTime: '',
    searchEndTime: '',
    timeFlag: 1
})
const firstOptions = ref<any>({})
const secondOptions = ref<any>({})
const firstData = ref<any>([])
const secondData = ref<any>([])

const init = () => {
    loading.value = true
    formData.id = monitoringPoint.state.lineId
    formData.searchBeginTime = datePickerRef.value.timeValue[0]
    formData.searchEndTime = datePickerRef.value.timeValue[1]
    formData.timeFlag = datePickerRef.value.interval
    Promise.all([getRunOnlineRateData(formData), getComFlagInfoData(formData)]).then(res => {
        firstData.value = res[0].data
        secondData.value = res[1].data
        initFirst()
        initSecond()
        loading.value = false
    })
}
const initFirst = () => {
    let months = new Array()
    let handle = new Array()
    let year = firstData.value[0].dateView

    for (let i = 0; i < firstData.value.length; i++) {
        months[i] = firstData.value[i].dateView
        handle.push(firstData.value[i].onlineRate)
    }
    firstOptions.value = {
        title: {
            text: '在线率统计',
            x: 'center',
            textStyle: {
                fontWeight: 'normal'
            }
        },
        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 tips = ''
                tips += '时间:' + params[0].name + '</br/>'
                for (let i = 0; i < params.length; i++) {
                    if (params[i].value == 3.14159) {
                        tips += '在线率' + ':暂无数据<br/>'
                    } else {
                        tips += '在线率' + ':' + params[i].value + '%<br/>'
                    }
                }
                return tips
            }
        },
        xAxis: [
            {
                type: 'category',
                data: months,
                name: '时间',
                nameTextStyle: {
                    verticalAlign: 'top', //标题位置
                    padding: [-5, 0, 0, -10]
                },

                splitLine: {
                    show: false
                },
                axisLine: {
                    show: true
                }
            }
        ],
        yAxis: [
            {
                min: 0,
                max: 100,
                type: 'value',
                name: '%',
                axisLine: {
                    show: true
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        // 使用深浅的间隔色
                        type: 'dashed',
                        opacity: 0.5
                    }
                }
            }
        ],
        series: [
            {
                type: 'bar',
                data: handle,
                itemStyle: {
                    color: (params: any) => {
                        if (params.value == 3.14159) {
                            return '#ccc'
                        } else {
                            if (params.value < 60) {
                                return gradeColor3[2]
                            } else if (params.value < 90) {
                                return gradeColor3[1]
                            } else {
                                return gradeColor3[0]
                            }
                        }
                    }
                },
                markLine: {
                    silent: false,
                    symbol: 'circle',
                    data: [
                        {
                            yAxis: 100,
                            lineStyle: {
                                color: gradeColor3[0]
                            },
                            label: {
                                position: 'end',
                                formatter: '100%'
                            }
                        },
                        {
                            yAxis: 90,
                            lineStyle: {
                                color: gradeColor3[1]
                            },
                            label: {
                                position: 'end',
                                formatter: '90%'
                            }
                        },
                        {
                            yAxis: 60,
                            lineStyle: {
                                color: gradeColor3[2]
                            },
                            label: {
                                position: 'end',
                                formatter: '60%'
                            }
                        }
                    ]
                }
            }
        ]
    }
}
const initSecond = () => {
    let list = secondData.value.type.map((item, i) => [secondData.value.updateTime[i], item])

    secondOptions.value = {
        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 res = ''
                res += `${params[0].value[0]}：${params[0].value[1] == '0' ? '中断' : '正常'}` //params[0].value[0] + '：' //+ params[0].value[1] == '0' ? '中断' : '正常'

                return res
            }
        },

        xAxis: {
            // name: '时间',
            // type: 'category',
            // data: items,
            // boundaryGap: false
            type: 'time',
            name: '时间',
            //
            axisLabel: {
                formatter: {
                    day: '{MM}-{dd}',
                    month: '{MM}',
                    year: '{yyyy}'
                }
            }
        },
        yAxis: {
            name: '状态',
            type: 'value',
            axisLine: {
                show: true
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: 'blue'
                },
                // 这里重新定义就可以
                formatter: function(value: number) {
                    let texts = []
                    if (value === 2) {
                        texts.push('退出')
                    } else if (value === 0) {
                        texts.push('中断')
                    } else if (value === 1) {
                        texts.push('正常')
                    }
                    return texts
                }
            }
        },
        series: [
            {
                name: '运行状态',
                type: 'line',
                step: 'end',
                data: list
            }
        ]
    }
}
onMounted(() => {
    init()
})
</script>
<style lang="scss">
.running-condition {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    padding: 14px;
    border: 1px solid var(--el-border-color);
    overflow: hidden;

    .zanjiangfenbutongji {
        position: relative;
        display: flex;
        overflow: hidden;
    }
}
</style>
