<template>
    <div class="module-container">
        <module-header title="事件类型"></module-header>
        <div class="module-body event-overview" v-loading="loading" :element-loading-background="loadingColor">
            <div class="event-type-left">
                <div class="event-type-item" v-for="(item, index) in eventTypeData.slice(4).reverse()" :key="index">
                    <span class="event-type-color" :style="`background-color: ${item.color}`"></span>
                    <span class="event-type-name">{{ item.name }}</span>
                    <span class="event-type-value">{{ item.value }}</span>
                </div>
            </div>
            <div class="event-chart-warpper">
                <div id="eventChart"></div>
            </div>
            <div class="event-type-right">
                <div class="event-type-item" v-for="(item, index) in eventTypeData.slice(0, 4)" :key="index">
                    <span class="event-type-value">{{ item.value }}</span>
                    <span class="event-type-name">{{ item.name }}</span>
                    <span class="event-type-color" :style="`background-color: ${item.color}`"></span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts'
import ModuleHeader from '@/components/common/moduleHeader.vue'
import { QueryMixin } from '../mixins/queryMixin'
import { getTaskTypeData, getDictByCode } from "@/api/patrolAndRescue";
import moment from 'moment'
const colors = ['#566AFF', '#00FFD4', '#FFE043', '#FFA54B', '#00D4FF', '#EC4881', '#D641FF', '#00E117']
export default {
    name: 'eventType',
    components: { ModuleHeader },
    mixins: [QueryMixin],
    data() {
        return {
            loadingColor: 'rgba(6, 46, 106, 0.3)',
            loading: false,
            eventChart: null,
            eventTypeData: [],
            total: 0,
            eventOption: {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)',
                    backgroundColor: 'rgba(13, 79, 145, 0.9)',
                    borderColor: '#3399FF',
                    textStyle: {
                        color: '#fff',
                    },
                },
                title: {
                    text: this.total,
                    subtext: '总数',
                    left: '47%',
                    x: 'center',
                    y: '30%',
                    textAlign: 'center',
                    textStyle: {
                        color: '#fff',
                        fontSize: 22,
                        fontWeight: 'bold',
                    },
                    subtextStyle: {
                        color: '#fff',
                        fontSize: 16,
                        lineHeight: 18,
                    },
                },
                color: colors,
                series: [
                    {
                        name: '事件类型',
                        type: 'pie',
                        radius: ['75%', '86%'],
                        center: ['50%', '50.5%'],
                        label: {
                            show: false,
                            position: 'center',
                        },
                        padAngle: 5,
                        labelLine: {
                            show: false,
                        },
                        data: [],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                            },
                        },
                    },
                ],
            },
            sjlx: [],//事件类型列表
            query: {
                "roadIds": [],
                "month": moment().format('YYYY-MM-01'),
            },
        }
    },
    mounted() {
    },
    methods: {
        getData() {
            this.loading = true;
            const formData = new FormData()
            formData.append('codes', 'sjlx')
            if (!this.sjlx.length) {
                getDictByCode(formData)
                    .then((res) => {
                        if (res.sjlx) {
                            this.sjlx = res.sjlx
                        }
                    })
            }
            getTaskTypeData(this.query)
                .then((res) => {
                    if (res.state && res.value && res.value.length) { // 事件类型数据    
                        this.eventTypeData = res.value.map((item, index) => {
                            this.total += item.count
                            return {
                                name: this.sjlx.length ? this.filterDictTextByKey(this.sjlx, item.eventTypeText) : item.eventTypeText,
                                value: item.count,
                                color: colors[index],
                            }
                        })
                    } else {
                        this.resetData()
                    }
                    this.eventOption.title.text = this.total
                    this.eventOption.series[0].data = this.eventTypeData
                    this.initEcharts()
                })
                .finally(() => {
                    this.loading = false;
                })
        },
        resetData() {
            this.total = 0
            if (this.sjlx.length > 0) {
                this.eventTypeData = this.sjlx.map((item, index) => {
                    return {
                        name: item.name,
                        value: 0,
                        color: colors[index],
                    }
                })
            }
        },
        initEcharts() {
            if (this.eventChart) {
                this.eventChart.setOption(this.eventOption)
            } else {
                this.eventChart = echarts.init(document.getElementById('eventChart'))
                this.eventChart && this.eventChart.setOption(this.eventOption)
                window.addEventListener('resize', () => this.eventChart.resize())
            }
        },
    },
}
</script>
<style scoped lang="scss">
.module-container {
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, rgba(10, 17, 26, 0.5) 0%, rgba(12, 22, 51, 0.3) 100%);
    padding: 10px;
    box-sizing: border-box;

    .module-body {
        height: calc(100% - 34px);
        width: 100%;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        position: relative;
        padding: 0 30px;
        box-sizing: border-box;
    }

    .event-type-left {
        position: absolute;
        height: 100%;
        width: 100px;
        left: 20px;
        top: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .event-type-item {
            display: flex;
            align-items: center;
            gap: 10px;
        }
    }

    .event-type-right {
        position: absolute;
        height: 100%;
        width: 100px;
        right: 20px;
        top: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .event-type-item {
            text-align: right;
            display: flex;
            align-items: center;
            gap: 10px;
        }
    }

    .event-type-color {
        width: 2px;
        height: 12px;
    }

    .event-type-name {
        font-size: 12px;
        color: #C7CFE8;
    }

    .event-type-value {
        font-size: 16px;
        color: #FFFFFF;
        font-weight: bold;
    }

    .event-chart-warpper {
        width: 284px;
        height: 193px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: url('@/assets/images/patrolAndRescue/pie-bg.png') no-repeat;
        background-size: 100% 100%;
    }

    #eventChart {
        width: 160px;
        height: 160px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}
</style>