<template>
    <div style="display: flex; flex-direction: column; height: 100%">
        <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">
            <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 { getProbabilityDistribution } from '@/api/event-boot/monitor'

const datePickerRef = ref()
const monitoringPoint = useMonitoringPoint()
const loading = ref(true)
const formData = reactive({
    lineIndex: monitoringPoint.state.lineId,
    startTime: '',
    endTime: ''
})
const options = ref({})

const init = () => {
    loading.value = true
    formData.lineIndex = monitoringPoint.state.lineId
    formData.startTime = datePickerRef.value.timeValue[0]
    formData.endTime = datePickerRef.value.timeValue[1]
    getProbabilityDistribution(formData).then((res: any) => {
        let data = res.data
        let sisttime = data.sisttime
        let persisttime = data.persisttime
        options.value = {
            backgroundColor: '#fff', //背景色,
            title: {
                text: '持续时间的概率分布函数',
                x: 'center'
            },
            legend: {
                top: 0,
                show: true,
                data: ['概率分布', '占比'],

                textStyle: {
                    rich: {
                        a: {
                            verticalAlign: 'middle'
                        }
                    },

                    padding: [2, 0, 0, 0] //[上、右、下、左]
                }
            },
            toolbox: {
                top: -10
            },
            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)',
                borderWidth: 0
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    name: '持续时间',
                    nameGap: 10,
                    nameTextStyle: {
                        fontSize: 12
                    },
                    data: ['0.01', '0.1', '0.25', '0.5', '1', '3', '20', '60', '180']
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '概率分布',
                    nameTextStyle: {
                        fontSize: 15
                    },
                    axisLabel: {
                        formatter: '{value}%'
                    },
                    axisLine: {
                        show: true
                    },
                    splitLine: {
                        lineStyle: {
                            // 使用深浅的间隔色
                            type: 'dashed',
                            opacity: 0.5
                        }
                    }
                },
                {
                    type: 'value',
                    name: '占比',

                    nameTextStyle: {
                        fontSize: 15
                    },
                    axisLine: {
                        show: true
                    },

                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            opacity: 0.5
                        }
                    }
                }
            ],
            series: [
                {
                    name: '概率分布',
                    type: 'line',
                    data: sisttime,
                    itemStyle: {
                        normal: { show: true }
                    }
                },
                {
                    name: '占比',
                    type: 'bar',
                    data: persisttime,
                    barWidth: 30,
                    itemStyle: {
                        normal: { show: true }
                    }
                }
            ],
            options: {
                dataZoom: null
            }
        }
        nextTick(() => {
            loading.value = false
        })
    })
}

onMounted(() => {
      datePickerRef.value.setTheDate(1)
    init()
})
</script>
<style></style>
