<template>
    <div>
        <el-form :inline="true" class="formFlex">
            <el-form-item label="统计时间">
                <DatePicker ref="datePickerRef"></DatePicker>
            </el-form-item>
            <el-form-item class="mr5">
                <el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
            </el-form-item>
        </el-form>

        <div v-loading="loading" :style="{ height: height }">
            <div style="display: flex">
                <my-echart class="bars_w" :options="options1" />
                <my-echart class="bars_w" :options="options2" />
            </div>
            <div style="display: flex">
                <my-echart class="bars_w" :options="options3" />
                <my-echart class="bars_w" :options="options4" />
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { useDictData } from '@/stores/dictData'
import DatePicker from '@/components/form/datePicker/index.vue'
import { ref, reactive, onMounted } from 'vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { getVoltage, getGeneralSituation } from '@/api/event-boot/report'
import { mainHeight } from '@/utils/layout'
const dictData = useDictData()
const datePickerRef = ref()
const loading = ref(true)
const formData = reactive({
    deptIndex: dictData.state.area[0].id,
    monitorFlag: 2,
    powerFlag: 2,
    searchBeginTime: '',
    searchEndTime: '',
    serverName: 'event-boot'
})
const height = mainHeight(145).height
const options1 = ref({})
const options2 = ref({})
const options3 = ref({})
const options4 = ref({})

const init = () => {
    let label = {
        normal: {
            show: true,
            textStyle: {
                //数值样式
                color: '#fff',
                fontSize: 14
            }
        }
    }
    loading.value = true
    formData.searchBeginTime = datePickerRef.value.timeValue[0]
    formData.searchEndTime = datePickerRef.value.timeValue[1]

    Promise.all([
        getGeneralSituation({
            ...formData,
            statisticalType: dictData.getBasicData('Statistical_Type', [
                'Report_Type',
                'Manufacturer',

                'Voltage_Level',
                'Load_Type'
            ])[0]
        }),
        getVoltage({
            ...formData,
            statisticalType: dictData.getBasicData('Statistical_Type', [
                'Report_Type',
                'Power_Network',
                'Manufacturer',
                'Load_Type'
            ])[0]
        })
    ]).then(res => {
        // region.value = res[0].data
        // voltage.value = res[1].data

        let area = []
        let onlineData = []
        let offlineData = []
        res[0].data.forEach(item => {
            area.push(item.name)
            onlineData.push(item.onLine)
            offlineData.push(item.offLine)
        })
        options1.value = {
            title: {
                text: '终端运行情况',
                subtext: '区域统计'
            },

            legend: {
                data: ['在线', '离线']
            },

            xAxis: {
                name: '(区域)',
                data: res[0].data.map(item => item.name)
            },
            yAxis: {
                name: '个' // 给X轴加单位
            },
            color: ['#07CCCA', '#FFBF00'],
            options: {
                series: [
                    {
                        name: '在线',
                        type: 'bar',
                        barMaxWidth: 20,
                        stack: 'account',

                        // color: 'green',
                        data: res[0].data.map(item => item.onLine)
                    },
                    {
                        name: '离线',
                        type: 'bar',
                        barMaxWidth: 20,
                        stack: 'account',

                        // color: 'orange',
                        data: res[0].data.map(item => item.offLine)
                    }
                ]
            }
        }
        options2.value = {
            title: {
                text: '终端运行情况',
                subtext: '电压等级统计'
            },

            legend: {
                data: ['在线', '离线']
            },

            xAxis: {
                name: '电压\n等级',
                data: res[1].data.map(item => item.name)
            },
            yAxis: {
                name: '个' // 给X轴加单位
            },
            color: ['#07CCCA', '#FFBF00'],
            options: {
                series: [
                    {
                        name: '在线',
                        type: 'bar',
                        barMaxWidth: 20,
                        stack: 'account',

                        // color: 'green',
                        data: res[1].data.map(item => item.onLine)
                    },
                    {
                        name: '离线',
                        type: 'bar',
                        barMaxWidth: 20,
                        stack: 'account',

                        // color: 'orange',
                        data: res[1].data.map(item => item.offLine)
                    }
                ]
            }
        }
        options3.value = {
            title: {
                text: '暂态事件次数',
                subtext: '区域统计'
            },

            legend: {
                data: ['暂降次数', '中断次数', '暂升次数']
            },

            xAxis: {
                name: '(区域)',
                data: res[0].data.map(item => item.name)
            },
            yAxis: {
                name: '次' // 给X轴加单位
            },
            color: ['#07CCCA', '#FFBF00', '#77DA63'],
            options: {
                series: [
                    {
                        name: '暂降次数',
                        type: 'bar',
                        stack: 'account',

                        barWidth: 20,

                        data: res[0].data.map(item => item.sagsCount)
                    },
                    {
                        name: '中断次数',
                        type: 'bar',
                        stack: 'account',

                        barWidth: 20,

                        data: res[0].data.map(item => item.breakCount)
                    },
                    {
                        name: '暂升次数',
                        type: 'bar',
                        stack: 'account',

                        barWidth: 20,

                        data: res[0].data.map(item => item.upCount)
                    }
                ]
            }
        }
        options4.value = {
            title: {
                text: '暂态事件次数',
                subtext: '电压等级统计'
            },

            legend: {
                data: ['暂降次数', '中断次数', '暂升次数']
            },
            color: ['#07CCCA', '#FFBF00', '#77DA63'],
            xAxis: {
                name: '电压\n等级',
                data: res[1].data.map(item => item.name)
            },
            yAxis: {
                name: '次'
            },
            options: {
                series: [
                    {
                        name: '暂降次数',
                        type: 'bar',
                        stack: 'account',

                        barWidth: 20,

                        data: res[1].data.map(item => item.sagsCount)
                    },
                    {
                        name: '中断次数',
                        type: 'bar',
                        stack: 'account',

                        barWidth: 20,

                        data: res[1].data.map(item => item.breakCount)
                    },
                    {
                        name: '暂升次数',
                        type: 'bar',
                        stack: 'account',
                        barWidth: 20,

                        data: res[1].data.map(item => item.upCount)
                    }
                ]
            }
        }
        loading.value = false
    })
}
onMounted(() => {
    init()
})
const layout = mainHeight(150) as any
</script>
<style lang="scss" scoped>
.bars_w {
    width: 100%;
    height: calc(v-bind('layout.height') / 2);
}
.formFlex {
    display: flex;
    justify-content: space-between;
}
</style>
