<template>
    <div style='display: flex;flex-direction: column;height: 100%' v-loading='loading'>
        <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'>
            <my-echart :options='firstOptions' style='flex: 1;height: 100%' />
            <div style='width: 712px;height: 100%;display: flex;flex-direction: column'>
                <my-echart :options='secondOptions' style='flex: 1' />
                <my-echart :options='thirdOptions' style='flex: 1' />
            </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 { getReasonTypeTime, getStatistic } from '@/api/event-boot/monitor'
import { color } from '@/components/echarts/color'

const datePickerRef = ref()
const loading = ref(true)
const monitoringPoint = useMonitoringPoint()
const formData = reactive({
    lineIndex: monitoringPoint.state.lineId,
    startTime: '',
    endTime: '',
    flag: 1
})
const firstOptions = ref<any>({})
const secondOptions = ref<any>({})
const thirdOptions = ref<any>({})
const firstData = ref<any>([])
const secondData = ref<any>([])
const thirdData = ref<any>([])


const init = () => {

    loading.value = true
    formData.lineIndex = monitoringPoint.state.lineId
    formData.startTime = datePickerRef.value.timeValue[0]
    formData.endTime = datePickerRef.value.timeValue[1]
    formData.flag = datePickerRef.value.interval
    Promise.all([getReasonTypeTime(formData), getStatistic(formData)]).then(res => {
        firstData.value = res[0].data
        secondData.value = res[1].data.reason
        thirdData.value = res[1].data.types
        initFirst()
        initSecond()
        initThird()
        loading.value = false
    })
}
const initFirst = () => {
    let months = new Array()
    let handle = new Array()
    for (let i = 0; i < firstData.value.length; i++) {
        if ((firstData.value[i].month == '01') || (i == 0)) {
            if (formData.flag == 0) {
                months[i] = firstData.value[i].month
            } else {
                months[i] = firstData.value[i].month + '-' + firstData.value[i].day
            }
        } else {
            if (formData.flag == 0) {
                months[i] = firstData.value[i].month
            } else {
                months[i] = firstData.value[i].month + '-' + firstData.value[i].day
            }
        }
        handle[i] = firstData.value[i].times
    }

    firstOptions.value = {
        backgroundColor: '#fff', //背景色,
        title: {
            text:
                formData.flag == 3
                    ? '月份统计'
                    : formData.flag == 2
                        ? '季度统计'
                        : formData.flag == 1
                            ? '年份统计'
                            : '',
            x: 'center'
        },
        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 += '<font>时间:' + params[0].name + '</font><br/>'
                tips += '<font>暂降次数：' + params[0].data + '</font>'
                return tips
            }
        },
        legend: {
            data: ['暂降次数'],
           
        },
        xAxis: [
            {
                type: 'category',
                data: months,
                name: '时间'
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '次',
                minInterval: 1
            }
        ],
        series: [
            {
                name: '暂降次数',
                type: 'bar',
                barMinHeight: 10,
                itemStyle: {
                    normal: {
                        color: function (params: any) {
                            if (params.data == 0) {
                                return '#ccc'
                            } else {
                                return color[0]
                            }
                        },
                        // label: {
                        //     show: true,
                        //     textStyle: {
                        //         label: { show: true, position: 'top' }
                        //     }
                        // }
                    }
                },
                data: handle
            }
        ]
    }
}
const initSecond = () => {
    let reaArray = []
    let valueArray = []
    secondData.value.reverse()
    for (let i = 0; i < secondData.value.length; i++) {
        reaArray.push(secondData.value[i].reason)
        valueArray.push({
            name: secondData.value[i].reason,
            value: secondData.value[i].times
        })
    }
    secondOptions.value = {
        backgroundColor: '#fff', //背景色,
        animation: false,
        title: {
            text: '暂降原因',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            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: '{a} <br/>{b} ： {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            data: reaArray
        },
        series: [
            {
                name: '暂降原因',
                type: 'pie',
                radius: '65%',
                center: ['50%', '53%'],
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                },
                lableLine: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                },
                data: valueArray,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }
}
const initThird = () => {
    let typeArray = []
    let valueArray = []
    for (let i = 0; i < thirdData.value.length; i++) {
        typeArray.push(thirdData.value[i].type)
        valueArray.push({
            name: thirdData.value[i].type,
            value: thirdData.value[i].times
        }
        )
    }
    thirdOptions.value = {
        backgroundColor: '#fff', //背景色,
        animation: false,
        title: {
            text: '暂降类型',
            x: 'center'
        },

        tooltip: {
            trigger: 'item',
            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: '{a} <br/>{b} ： {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            data: typeArray
        },
        series: [
            {
                name: '暂降类型',
                type: 'pie',
                radius: '65%',
                center: ['50%', '60%'],
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                },
                lableLine: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                },
                data: valueArray,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }
}

onMounted(() => {
      datePickerRef.value.setTheDate(1)
    init()
})

</script>
<style lang='scss'>
.zanjiangfenbutongji {
    display: flex;
    overflow: hidden;
}
</style>
