<template>
    <div class="module-container">
        <module-header title="管制情况"></module-header>
        <div class="module-body flex-column gap-10" v-loading="loading" :element-loading-background="loadingColor">
            <div class="section-type flex-center gap-10">
                <div class="section-type-item flex-between padding-20">
                    <div class="section-type-icon flex-start gap-4">
                        <img src="~@/assets/images/operationOverview/type-icon01.png" />
                        <span>主线管制</span>
                    </div>
                    <div class="section-type-count flex-end gap-6">
                        <span class="num">4</span>
                        <span class="unit">个</span>
                    </div>
                </div>
                <div class="section-type-item flex-between padding-20">
                    <div class="section-type-icon flex-start gap-4">
                        <img src="~@/assets/images/operationOverview/type-icon02.png" />
                        <span>收费站管制</span>
                    </div>
                    <div class="section-type-count flex-end gap-6">
                        <span class="num">20</span>
                        <span class="unit">个</span>
                    </div>
                </div>
            </div>
            <div class="chart-wrapper flex-center">
                <div class="chart-container flex-center">
                    <div class="chart-bg flex-center">
                        <div id="pie-chart" class="fullWH"></div>
                    </div>
                </div>
                <div class="chart-types">
                    <vue-seamless-scroll :limitMoveNum="7" v-if="situationTypeData.length" :data="situationTypeData"
                        class="scroll-types-wrapper fullWH">
                        <div v-for="(item, index) in situationTypeData" :key="index"
                            class="scroll-types-item flex-between">
                            <span class="flex-start gap-6">
                                <span class="icon" :style="{ background: colors[index] }"></span>
                                <span>{{ item.name }}</span>
                            </span>
                            <span class="num">{{ item.value }}</span>
                        </div>
                    </vue-seamless-scroll>
                    <empty v-else />
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts'
import ModuleHeader from '@/components/common/moduleHeader.vue'
import vueSeamlessScroll from "@/components/vueSeamlessScroll/index.vue";
import { getBasicData } from "@/api/patrolAndRescue";
import { QueryMixin } from '../mixins/queryMixin'
const colors = ['#566AFF', '#00FFD4', '#FFE043', '#FFA54B', '#00D4FF', '#EC4881', '#D641FF', '#00E117']
export default {
    name: 'regulatorySituation',
    components: { ModuleHeader, vueSeamlessScroll },
    mixins: [QueryMixin],
    data() {
        return {
            colors,
            loadingColor: 'rgba(6, 46, 106, 0.3)',
            loading: false,
            query: {
                "roadIds": [],
            },
            basicData: {

            },
            timer: null,
            PiecurIndex: 0,
            situationChart: null,
            situationTypeData: [{
                name: '省内交通影响',
                value: 12,
            }, {
                name: '交通事故',
                value: 25,
            }, {
                name: '车流量大',
                value: 12,
            }, {
                name: '节日管制',
                value: 1,
            }, {
                name: '站点事件',
                value: 3,
            }, {
                name: '恶劣天气',
                value: 15,
            }],
            situationOption: {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)',
                    backgroundColor: 'rgba(13, 79, 145, 0.9)',
                    borderColor: '#3399FF',
                    textStyle: {
                        color: '#fff',
                    },
                },
                title: {
                    text: "",
                    subtext: '',
                    left: '47%',
                    x: 'center',
                    y: '35%',
                    textAlign: 'center',
                    textStyle: {
                        color: '#fff',
                        fontSize: 22,
                        fontWeight: 'bold',
                    },
                    subtextStyle: {
                        color: '#fff',
                        fontSize: 16,
                        lineHeight: 18,
                    },
                },
                color: colors,
                series: [
                    {
                        name: '事件类型',
                        type: 'pie',
                        radius: ['68%', '80%'],
                        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)',
                            },
                        },
                    },
                ],
            },
        }
    },
    methods: {
        getData() {
            this.loading = true;
            this.situationOption.series[0].data = this.situationTypeData
            this.situationOption.title.text = this.situationTypeData[this.PiecurIndex].value
            this.situationOption.title.subtext = this.situationTypeData[this.PiecurIndex].name
            this.initEcharts()
            getBasicData(this.query) // 传入路段id数组，如果没有则不传
                .then((res) => {
                    if (res.state && res.value) {
                        this.basicData = { ...res.value }
                    }
                })
                .catch((err) => {
                    console.log(err);
                })
                .finally(() => {
                    this.loading = false
                })
        },
        initEcharts() {
            if (this.situationChart) {
                this.situationChart.setOption(this.situationOption)
            } else {
                this.situationChart = echarts.init(document.getElementById('pie-chart'))
                this.situationChart && this.situationChart.setOption(this.situationOption)
                window.addEventListener('resize', () => this.situationChart.resize())
            }
            if (this.situationTypeData.length > 1) {
                this.intervalPieAction()
                this.situationChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: this.PiecurIndex
                })
            }
        },
        intervalPieAction() {
            this.timer && clearInterval(this.timer)
            this.timer = setInterval(() => {
                this.situationChart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: this.PiecurIndex
                })
                this.PiecurIndex++
                if (this.PiecurIndex >= this.situationTypeData.length) {
                    this.PiecurIndex = 0
                }
                this.situationChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: this.PiecurIndex
                })
                // 跟随变化统计数量、名称
                this.situationOption.title.text = this.situationTypeData[this.PiecurIndex].value
                this.situationOption.title.subtext = this.situationTypeData[this.PiecurIndex].name
                this.situationOption && this.situationChart.setOption(this.situationOption)
            }, 3000)
        },
    },
    beforeUnmount() {
        if (this.timer) {
            clearInterval(this.timer);
            this.timer = null;
        }
    }
}
</script>
<style scoped lang="scss">
@import "~/styles/common.scss";
@import "~/styles/viewport-convert.scss";

.module-container {
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, rgba(12, 22, 51, 0.3) 0%, rgba(10, 17, 26, 0.5) 100%);
    padding: 0 10px 10px 10px;
    box-sizing: border-box;

    .module-body {
        height: calc(100% - 34px);
        width: 100%;
        margin-top: 10px;
    }

    .section-type-item {
        height: 60px;
        width: 200px;
        background: url("@/assets/images/operationOverview/type-border.png") no-repeat center;
        background-size: contain;

        img {
            width: 22px;
            height: 22px;
        }

        .num {
            font-size: 18px;
            font-family: D-DIN-Bold, D-DIN;
            font-weight: 700;
            color: #3399FF;
        }

        .unit {
            font-size: 12px;
            font-weight: 400;
            color: #CFDAE5;
        }

    }

    .chart-wrapper {
        flex: 1;
        border: 1px solid rgba(51, 153, 255, 0.2);
    }

    .chart-container {
        flex: 1;

        .chart-bg {
            width: 180px;
            height: 180px;
            background: url("@/assets/images/operationOverview/pie-bg.png") no-repeat center;
            background-size: contain;
        }
    }

    .chart-types {
        width: 150px;
        height: 100%;
        border-left: 1px solid rgba(51, 153, 255, 0.2);
        position: relative;
        padding: 5px 0;
    }

    .scroll-types-item {
        padding: 5px 10px;

        .icon {
            width: 6px;
            height: 6px;
            display: inline-block;
        }

        .num {
            font-family: D-Din;
            font-weight: 700;
            font-size: 16px;
            color: #FFFFFF;
        }
    }
}
</style>