<template>
    <span style="color: red; font-size: 12px">注:暂降类型仅统计暂降原因为短路故障事件</span>

    <div class="statistics-main">
        <template v-if="flag">
            <div>
                <my-echart :options="descent" />
            </div>
            <div>
                <vxe-table height="auto" auto-resize :data="descentData" v-bind="defaultAttribute">
                    <vxe-column field="name" title="暂降原因"></vxe-column>
                    <vxe-column field="value" title="暂降次数"></vxe-column>
                </vxe-table>
            </div>
            <div>
                <my-echart :options="resemble" />
            </div>
            <div>
                <vxe-table height="auto" auto-resize :data="resembleData" v-bind="defaultAttribute">
                    <vxe-column field="name" title="暂降类型"></vxe-column>
                    <vxe-column field="value" title="暂降次数"></vxe-column>
                </vxe-table>
            </div>
        </template>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { mainHeight } from '@/utils/layout'
const descent = ref({})
const descentData = ref([])
const resemble = ref({})
const resembleData = ref([])
const flag = ref(true)

const info = (res: any) => {
    flag.value = false
    descentData.value = res.reason
    resembleData.value = res.type

    descent.value = {
        title: {
            text: '暂降原因'
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            top:null,
            left: 25,
            bottom: 40,
            
        },
        xAxis: {
            show: false
        },
        yAxis: {
            show: false
        },
        dataZoom: { show: false },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} (次)'
        },
        options: {
            series: [
                {
                    name: '暂降原因',
                    type: 'pie',
                    center: ['50%', '50%'],
                    selectedOffset: 30,
                    clockwise: true,
                    label: {
                        show: false,
                        position: 'outside',
                        textStyle: {
                            //数值样式
                        }
                    },

                    data: res.reason?.filter((item: any) => item.name != '总计')
                }
            ]
        }
    }
    resemble.value = {
        title: {
            text: '暂降类型'
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            top:null,
            left: 25,
            bottom: 40,
        },
        tooltip: {
             trigger: 'item',
            formatter: '{a} <br/>{b} : {c} (次)',
        },
        xAxis: {
            show: false
        },
        yAxis: {
            show: false
        },
        dataZoom: { show: false },
        options: {
            series: [
                {
                    name: '暂降类型',
                    type: 'pie',
                    center: ['50%', '50%'],
                    selectedOffset: 30,
                    clockwise: true,
                    label: {
                        show: false,
                        position: 'outside'
                    },

                    data: res.type?.filter((item: any) => item.name != '总计')
                }
            ]
        }
    }
    flag.value = true
}

defineExpose({ info })
const layout = mainHeight(175) as any
</script>

<style lang="scss" scoped>
.statistics-main {
    box-sizing: border-box;
    height: v-bind('layout.height');
    padding: 0 10px 10px;
    display: grid;
    grid-template-columns: 1fr 600px;
    grid-template-rows: 1fr 1fr;
    grid-gap: 10px;
}
</style>
