<template>
    <div class="module-container">
        <module-header title="预警信息"></module-header>
        <div class="module-body warning-info" v-loading="loading" :element-loading-background="loadingColor">
            <div class="warning-types">
                <div class="warning-type flex-center">
                    <img src="@/assets/images/operationOverview/disaster-warning.png">
                    <div class="warning-type-content flex-column flex-around">
                        <div>灾害预警</div>
                        <div><span class="num">12</span>次</div>
                    </div>
                </div>
                <div class="warning-type  flex-center">
                    <img src="@/assets/images/operationOverview/weather-warning.png">
                    <div class="warning-type-content flex-column flex-around">
                        <div>气象预警</div>
                        <div><span class="num">62</span>次</div>
                    </div>
                </div>
                <div class="warning-type  flex-center">
                    <img src="@/assets/images/operationOverview/flow-warning.png">
                    <div class="warning-type-content flex-column flex-around">
                        <div>车流量预警</div>
                        <div><span class="num">52</span>次</div>
                    </div>
                </div>
            </div>
            <div class="line"></div>
            <div class="warning-counts">
                <div class="count-item" v-for="(item, index) in warningcounts" :key="index">
                    <div class="count-item-name">
                        <img class="icon" :src="item.icon" />
                        <span>{{ item.name }}</span>
                    </div>
                    <div class="count-item-count"><span :class="item.type" class="count-num">{{ item.count }}</span>次
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import ModuleHeader from '@/components/common/moduleHeader.vue'
import SectionTitle from '@/components/common/sectionTitle.vue'
import { getBasicData } from "@/api/patrolAndRescue";
import { QueryMixin } from '../mixins/queryMixin'

import redIcon from "@/assets/images/operationOverview/circle-red.png";
import orangeIcon from "@/assets/images/operationOverview/circle-orange.png";
import yellowIcon from "@/assets/images/operationOverview/circle-yellow.png";
import blueIcon from "@/assets/images/operationOverview/circle-blue.png";
export default {
    name: 'warningInfo',
    components: { ModuleHeader, SectionTitle },
    mixins: [QueryMixin],
    data() {
        return {
            loadingColor: 'rgba(6, 46, 106, 0.3)',
            loading: false,
            query: {
                "roadIds": [],
            },
            warningcounts: [{
                type: 'red',
                name: '红色',
                count: 5,
                icon: redIcon
            }, {
                type: 'orange',
                name: '橙色',
                count: 10,
                icon: orangeIcon
            }, {
                type: 'yellow',
                name: '黄色',
                count: 2,
                icon: yellowIcon
            }, {
                type: 'blue',
                name: '蓝色',
                count: 8,
                icon: blueIcon
            }],
            basicData: {
            }
        }
    },
    methods: {
        getData() {
            this.loading = true;
            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;
    }

    .warning-info {
        display: flex;
        flex-direction: column;
    }

    .warning-types {
        width: 100%;
        height: 45%;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .warning-type {
        flex: 1;
        display: flex;

        img {
            width: 64px;
            height: 56px;
        }

        .warning-type-content {
            align-items: flex-start;
            font-size: 12px;
            color: #FFFFFF;
            line-height: 16px;
            gap: 4px;

            .num {
                font-size: 20px;
                margin-right: 4px;
                font-weight: 700;
                color: #FFFFFF;
                font-family: D-Din;
            }
        }
    }

    .warning-counts {
        width: 100%;
        height: calc(55% - 6px);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        gap: 0 10px;
    }

    .count-item {
        width: calc(40% - 5px);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        box-sizing: border-box;
        font-weight: 400;
        font-size: 12px;
        color: #FFFFFF;

        .icon {
            width: 36px;
            height: 36px;
        }
    }

    .count-item-name,
    .count-item-count {
        display: flex;
        align-items: center;
    }

    .count-num {
        font-family: D-DIN;
        font-weight: 700;
        font-size: 16px;
        line-height: 17px;
        margin-right: 6px;
    }

    .red {
        color: #FF5A7B;
    }

    .orange {
        color: #FF915A;
    }

    .yellow {
        color: #FFC85A;
    }

    .blue {
        color: #43E0FF;
    }

    .line {
        margin: 0 auto;
        width: 392px;
        height: 6px;
        background: #003367;
        box-shadow: inset 0px 1px 2px 0px rgba(255, 255, 255, 0.3);
        border-radius: 3px 3px 3px 3px;
    }
}
</style>