<template>
    <div class="module-container">
        <module-header title="预警信息"></module-header>
        <div class="module-body event-overview" v-loading="loading" :element-loading-background="loadingColor">
            <section-title title="投诉咨询统计"></section-title>
            <div class="consult-item">
                <div class="consult-info-item consult-info-item01">
                    <div class="count-num">{{ consult.a }}</div>
                    <div class="count-type">来电咨询(件)</div>
                </div>
                <div class="consult-info-item consult-info-item02">
                    <div class="count-num">{{ consult.b }}</div>
                    <div class="count-type">投诉电话(件)</div>
                </div>
                <div class="consult-info-item consult-info-item03">
                    <div class="count-num">{{ consult.c }}</div>
                    <div class="count-type">其他问题(件)</div>
                </div>
            </div>
            <section-title title="事件总览"></section-title>
            <div class="event-count flex-wrap gap-10">
                <div class="event-count-item flex gap-10" v-for="(item, index) in eventCountList" :key="index">
                    <div class="img-bg flex-center">
                        <img :src="item.icon" />
                    </div>
                    <div class="event-count-info">
                        <div class="event-count-title">{{ item.title }}</div>
                        <div class="event-count-num"><span class="num">{{ item.eventCount }}</span>{{ item.unit }}</div>
                    </div>
                </div>
            </div>
            <div class="event-count-bar flex-column margin-t-10">
                <div v-for="(item, index) in sjlx" :key="index" class="event-count-bar-item flex-center">
                    <span class="event-bar-name">{{ item.name }}</span>
                    <div class="bar-wrapper">
                        <div :class="['bar-inner', { 'showspot': item.count > 0 }]"
                            :style="{ width: (item.count / (total * 1.1)) * 100 + '%' }"></div>
                    </div>
                    <div class="event-bar-num-wrapper">
                        <span class="event-bar-num">{{ item.count }}</span>
                        <span>件</span>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>
<script>
import ModuleHeader from '@/components/common/moduleHeader.vue'
import SectionTitle from '@/components/common/sectionTitle.vue'
import { getDictByCode } from "@/api/patrolAndRescue";
import { QueryMixin } from '../mixins/queryMixin'
import event01 from "@/assets/images/operationOverview/event-icon01.png"
import event02 from "@/assets/images/operationOverview/event-icon02.png"
export default {
    name: 'eventOverview',
    components: { ModuleHeader, SectionTitle },
    mixins: [QueryMixin],
    data() {
        return {
            loadingColor: 'rgba(6, 46, 106, 0.3)',
            loading: false,
            query: {
                "roadIds": [],
            },
            sjlx: [
                {
                    "name": "地质灾害",
                    "count": 23
                },
                {
                    "name": "交通事故",
                    "count": 16
                },
                {
                    "name": "火灾事故",
                    "count": 12
                },
                {
                    "name": "灾害天气",
                    "count": 12
                },
                {
                    "name": "危化品事故",
                    "count": 8
                },
                {
                    "name": "群体事件",
                    "count": 2
                },
                {
                    "name": "故障车占道",
                    "count": 2
                },
                {
                    "name": "其他",
                    "count": 0
                }
            ],
            total: 23,
            basicData: {

            },
            consult: {
                a: 162691,
                b: 204,
                c: 28128
            },
            eventCountList: [
                {
                    eventCount: 38,
                    title: '交通事故平均处置时长',
                    icon: event01,
                    unit: '分钟'
                },
                {
                    eventCount: 46,
                    title: '救援任务平均处置时长',
                    icon: event02,
                    unit: '分钟'
                },
                {
                    eventCount: 3,
                    title: '交通事故伤亡',
                    icon: event01,
                    unit: '人'
                },
                {
                    eventCount: 15,
                    title: '特殊交通事故',
                    icon: event02,
                    unit: '件'
                },
            ]
        }
    },
    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
                        }
                    })
            }
            this.loading = false;
            // getBasicData(this.query) // 传入路段id数组，如果没有则不传
            //     .then((res) => {
            //         if (res.state && res.value) {
            //             this.basicData = { ...res.value }
            //         }
            //     })
            //     .catch((err) => {
            //         console.log(err);
            //     })
            //     .finally(() => {
            //         this.loading = false
            //     })
        },
    },
}
</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;
    }

    .event-overview {
        display: flex;
        flex-direction: column;
    }

    .consult-item {
        width: 480px;
        margin: 5px auto 25px 0;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .consult-info-item {
            width: 80px;
            height: 50px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
        }

        .consult-info-item.consult-info-item01 {
            background: url('@/assets/images/patrolAndRescue/event-icon01.png') no-repeat;
            background-size: 100% 100%;
        }

        .consult-info-item.consult-info-item02 {
            background: url('@/assets/images/patrolAndRescue/event-icon02.png') no-repeat;
            background-size: 100% 100%;
        }

        .consult-info-item.consult-info-item03 {
            background: url('@/assets/images/patrolAndRescue/event-icon03.png') no-repeat;
            background-size: 100% 100%;
        }

        .count-num {
            font-size: 22px;
            font-weight: bold;
            color: #FFFFFF;
            text-align: center;

        }

        .count-type {
            text-align: center;
            margin-bottom: -16px;
            font-size: 12px;
            color: #FFFFFF;
        }
    }

    .event-count {
        .event-count-item {
            width: calc(50% - 5px);
            font-size: 14px;
            color: #CCE6FF;
            line-height: 18px;
            margin: 5px 0;
            padding: 0 20px;
            box-sizing: border-box;
        }

        .img-bg {
            width: 40px;
            height: 40px;
            background: url('@/assets/images/patrolAndRescue/icon-border.png') no-repeat;
            background-size: 100% 100%;

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

        .num {
            font-size: 20px;
            font-family: D-Din;
            font-weight: 700;
            color: #33BBFF;
            line-height: 26px;
        }
    }

    .event-count-bar {
        flex: 1;
        overflow: hidden;
        justify-content: space-evenly;
    }

    .event-bar-name {
        display: inline-block;
        width: 80px;
        text-align: right;
        font-weight: 400;
        padding-right: 6px;
        border-right: 1px solid rgba(51, 153, 255, 0.2);
    }

    .event-bar-num-wrapper {
        width: 46px;
        text-align: right;
        color: #CFDAE5;
    }

    .event-bar-num {
        font-size: 18px;
        font-family: D-DIN-Bold, D-DIN;
        font-weight: 700;
        color: #FFFFFF;

    }

    .bar-wrapper {
        // width: calc(100% - 126px);
        flex: 1;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 3px;
        height: 10px;
    }

    .bar-inner {
        height: 10px;
        background: linear-gradient(270deg, #FF5A7B 0%, rgba(255, 213, 0, 0) 100%);
        border-radius: 6px;
        position: relative;
    }

    .bar-inner.showspot::after {
        content: "";
        position: absolute;
        right: -15px;
        top: -14px;
        width: 38px !important;
        height: 38px !important;
        background: url('@/assets/images/operationOverview/spot-light.png') no-repeat;
        background-size: 100% 100%;
        z-index: 1;
    }
}
</style>