<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; display: flex; overflow: hidden" class="mt10" v-loading="loading">
            <div style="flex: 1">
                <my-echart :options="options1" />
            </div>
            <div style="flex: 1">
                <my-echart :options="options2" />
            </div>
        </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 { getProbabilityDistribution } from '@/api/event-boot/monitor'
import { getRunInfoData, getComFlagInfoData } from '@/api/device-boot/communicate'
import { ElMessage, ElMessageBox } from 'element-plus'
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: '',
    periodBeginTime: '',
    periodEndTime: ''
})
const searchType = ref('')
const searchTypeOptions = [
    {
        label: '同比',
        value: '1'
    },
    {
        label: '环比',
        value: '2'
    }
]
const options1 = ref({})
const options2 = ref({})
onMounted(() => {
    init()
})
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 = ''
    }
    Promise.all([getComFlagInfoData(formData), getRunInfoData(formData)])
        .then((res: any) => {
            handlerOptions1(res[0].data)
            handlerOptions2(res[1].data)
            loading.value = false
        })
        .catch(() => {
            loading.value = false
        })
}
const handlerOptions1 = (data: any) => {
    options1.value = {
        title: {
            text: '运行状态'
        },
        legend: {
            show: false
        },
        tooltip: {
            formatter: function (params: any) {
                var res = params[0].data[0] + '<br/>终端运行状态为：'
                var texts = ''
                if (params[0].data[1] === 2 || params[0].data[1] === '2') {
                    texts = '退出'
                } else if (params[0].data[1] === 0 || params[0].data[1] === '0') {
                    texts = '中断'
                } else if (params[0].data[1] === 1 || params[0].data[1] === '1') {
                    texts = '正常'
                }
                res = res + texts
                return res
            }
        },
        xAxis: {
            // type: 'category',
            // data: data.updateTime
            type: 'time',
            name: '时间',
            //
            axisLabel: {
                formatter: {
                    day: '{MM}-{dd}',
                    month: '{MM}',
                    year: '{yyyy}'
                }
            }
        },
        yAxis: {
            name: '状态',
            type: 'value',
            axisLabel: {
                // 这里重新定义就可以
                formatter: function (value: number) {
                    var texts = []
                    if (value === 2) {
                        texts.push('退出')
                    } else if (value === 0) {
                        texts.push('中断')
                    } else if (value === 1) {
                        texts.push('正常')
                    }
                    return texts
                }
            }
        },
        series: [
            {
                name: '中断运行状态',
                data: data.type.map((item: any, index: number) => [data.updateTime[index], item]),
                type: 'line',
                step: 'end'
            }
        ]
    }
}
const handlerOptions2 = (data: any) => {
    let title = ''
    if (data.integrityData.some((item: any) => item > 100)) {
        title = '数据存在异常，已进行转换处理'
        data.integrityData = data.integrityData.map(item => {
            return item > 100 ? 100 : item;
        });
    }

    options2.value = {
        title: {
            text: '在线率和完整性',
            subtext: title,
            subtextStyle: {
                color: 'red'  // 设置副标题颜色为红色
            }
        },
        xAxis: {
            type: 'category',
            data: formData.periodBeginTime
                ? [
                    `${formData.searchBeginTime} 至 ${formData.searchEndTime}`,
                    `${formData.periodBeginTime} 至 ${formData.periodEndTime}`
                ]
                : [`${formData.searchBeginTime} 至 ${formData.searchEndTime}`]
        },
        yAxis: {
            name: '%',
            type: 'value'
        },
        series: [
            {
                name: '在线率',
                data: data.onlineRateData,
                type: 'bar'
            },
            {
                name: '完整性',
                data: data.integrityData,
                type: 'bar'
            }
        ]
    }
}
provide('tableStore', tableStore)
</script>
<style></style>
