<template>
    <div class="module-container">
        <module-header title="任务统计"></module-header>
        <div class="module-body task-overview" v-loading="loading" :element-loading-background="loadingColor">
            <section-title title="当日救援情况"></section-title>
            <div class="today-data">
                <div class="count-item">
                    <div :class="['count-type', { active: currentType === 'event' }]" @click="changeType('event')">
                        <div class="img-bg">
                            <img src="~@/assets/images/patrolAndRescue/event.png" alt="" />
                        </div>
                        <div class="count-info">
                            <div class="count-title">突发事件</div>
                            <div class="count-num warning">
                                {{ taskData.eventTaskFrequency }} <span class="count-unit">次</span>
                            </div>
                        </div>
                    </div>
                    <div :class="['count-type', { active: currentType === 'rescue' }]" @click="changeType('rescue')">
                        <div class="img-bg">
                            <img src="~@/assets/images/patrolAndRescue/sos.png" alt="" />
                        </div>
                        <div class="count-info">
                            <div class="count-title">救援任务</div>
                            <div class="count-num danger">
                                {{ taskData.rescueTaskFrequency }} <span class="count-unit">次</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="event-item">
                    <div class="event-info-item event-info-item01">
                        <div class="count-num">{{ currentType === 'rescue' ?
                            taskData.rescueComplete : taskData.eventComplete }}</div>
                        <div class="count-type">完成</div>
                    </div>
                    <div class="event-info-item event-info-item02">
                        <div class="count-num">{{ currentType === 'rescue' ? taskData.rescueEmpty :
                            taskData.eventDisposal }}</div>
                        <div class="count-type">{{ currentType === 'rescue' ? '返空' : '处置中' }}</div>
                    </div>
                    <div class="event-info-item event-info-item03">
                        <div class="count-num">{{ currentType === 'rescue' ? taskData.rescueAbort :
                            taskData.eventNotDisposal }}</div>
                        <div class="count-type"> {{ currentType === 'rescue' ? '中止' : '未处置' }}</div>
                    </div>
                </div>
            </div>
            <div class="title-wrapper">
                <section-title class="title-mian" :title="`实时事件列表  (${taskData.eventTaskList.length})`"></section-title>
                <div class="event-add" @click="handleAddEvent">
                    <img src="~@/assets/images/patrolAndRescue/addEvent.png" />
                    添加事件
                </div>
            </div>
            <div class="err-scroll-wrapper">
                <vue-seamless-scroll class="scroll-error-wrapper" v-if="taskData.eventTaskList.length"
                    :data="taskData.eventTaskList">
                    <div class="scroll-errot-item" v-for="(item, index) in taskData.eventTaskList" :key="index"
                        @click="handleEventClick(item)">
                        <div class="err-item-title">{{ item.roadName }} {{ item.startStakeMark }} {{
                            item.overStakeMark ? '至 ' + item.overStakeMark : '' }}
                        </div>
                        <div class="err-item-info">
                            <div>
                                <span class="tag primary">{{ filterDictTextByKey(sjlx, item.eventTypeText) }}</span>
                                <span :class="`tag level${item.eventLevel || 0}`">{{ transLevel(item.eventLevel)
                                    }}级</span>
                            </div>
                            <div class="time">{{ item.eventTime }}</div>
                        </div>
                    </div>
                </vue-seamless-scroll>
                <empty v-else />
            </div>
        </div>
    </div>
</template>
<script>
import ModuleHeader from '@/components/common/moduleHeader.vue'
import SectionTitle from '@/components/common/sectionTitle.vue'
import vueSeamlessScroll from "@/components/vueSeamlessScroll/index.vue";
import { getTaskCountData, getDictByCode } from "@/api/patrolAndRescue";
import { QueryMixin } from '../mixins/queryMixin'
export default {
    name: 'taskStatistics',
    components: {
        ModuleHeader,
        SectionTitle,
        vueSeamlessScroll
    },
    mixins: [QueryMixin],
    data() {
        return {
            count: 5,
            loadingColor: 'rgba(6, 46, 106, 0.3)',
            loading: false,
            sjlx: [],
            currentType: 'event',
            taskData: {
                "eventComplete": 0,
                "eventDisposal": 0,
                "eventNotDisposal": 0,
                "eventTaskFrequency": 0,
                "eventTaskList": [
                    // {
                    //     "eventLevel": 1,
                    //     "eventTime": "2025-10-20 10:00:00",
                    //     "eventTypeText": "1",
                    //     "id": "DN_6001001",
                    //     "lng": 105.638497,
                    //     "lat": 29.645515,
                    //     "overStakeMark": "1075KM+100MG",
                    //     "roadName": "G75兰海高速渝黔段",
                    //     "startStakeMark": "1075KM+100M"
                    // }
                ],
                "rescueAbort": 0,
                "rescueComplete": 0,
                "rescueEmpty": 0,
                "rescueTaskFrequency": 0
            },
        }
    },
    methods: {
        getData() {
            this.loading = true
            const formData = new FormData()
            formData.append('codes', 'sjlx')
            getDictByCode(formData)
                .then((res) => {
                    if (res.sjlx) {
                        this.sjlx = res.sjlx
                    }
                })
            getTaskCountData(this.query) // 传入路段id数组，如果没有则不传
                .then((res) => {
                    if (res.state && res.value) {
                        this.taskData = { ...res.value }
                    }
                })
                .catch((err) => {
                })
                .finally(() => {
                    this.loading = false
                })
        },
        changeType(type) {
            this.currentType = type
        },
        transLevel(val) {
            let text = '无等'
            switch (val) {
                case 1:
                    text = '一'
                    break
                case 2:
                    text = '二'
                    break
                case 3:
                    text = '三'
                    break
                case 4:
                    text = '四'
                    break
                default:
                    break
            }
            return text
        },
        handleEventClick(item) {
            item.lat = "29.25958538887112"
            item.lng = "105.79763870398254"
            if (item.lat && item.lng) {
                this.$parent.$refs.mainMap.moveToEvent(item)
            } else {
                console.log("该事件无坐标信息")
            }
        },
        handleAddEvent() {
            this.$emit('eventRegister')
        }
    },
}
</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: 0 10px 0 10px;
    box-sizing: border-box;

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

    .title-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title-mian {
            flex: 1;
        }
    }

    .event-add {
        width: 80px;
        gap: 4px;
        color: #CCE6FF;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: 14px;
        cursor: pointer;
    }

    .sub-info {
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #CCE6FF;
        line-height: 18px;
        margin-bottom: 14px;

        .number {
            font-size: 24px;
            font-family: YouSheBiaoTiHei-Bold, YouSheBiaoTiHei;
            font-weight: bold;
            line-height: 24px;
            color: #019AE6;
            margin: 0 6px 0 10px;
        }

        .unit {
            font-size: 14px;
            font-weight: bold;
            color: #00AAFF;
        }
    }

    .today-data {
        text-align: center;

        .count-item {
            display: flex;
            justify-content: space-around;
            margin-top: 10px;

            .count-type {
                display: flex;
                align-items: center;
                cursor: pointer;

                .img-bg {
                    width: 40px;
                    height: 40px;
                    margin-right: 10px;
                    background: url('@/assets/images/patrolAndRescue/icon-border.png') no-repeat;
                    background-size: 100% 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    img {
                        width: 22px;
                        height: 22px;
                        margin-left: 2px;
                    }
                }

                .count-info {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;

                    .count-title {
                        font-size: 14px;
                        color: #CCE6FF;
                        margin-bottom: 4px;
                    }

                    .count-num {
                        font-size: 20px;
                        font-weight: bold;

                    }

                    .count-num.warning {
                        color: #FFA565;
                    }

                    .count-num.danger {
                        color: #FF3E81;
                    }

                    .count-unit {
                        font-size: 12px;
                        color: #CCE6FF;
                    }
                }
            }

            .count-type.active {
                .img-bg {
                    width: 44px;
                    height: 44px;

                    img {
                        width: 30px;
                        height: 30px;
                        margin-left: 2px;
                    }
                }
            }
        }

        .event-item {
            width: 480px;
            margin: 20px auto;
            display: flex;
            align-items: center;
            justify-content: space-around;

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

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

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

            .event-info-item.event-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;
            }
        }
    }

    .err-scroll-wrapper {
        width: 100%;
        height: 80%;
        overflow: hidden;
        position: relative;
    }

    .scroll-error-wrapper {
        width: 100%;
        height: 100%;
        overflow: hidden;

        .scroll-errot-item:before {
            position: absolute;
            content: "";
            top: 15%;
            left: 0;
            width: 1px;
            height: 70%;
            background: #00D4FF;
        }

        .scroll-errot-item {
            cursor: pointer;
            position: relative;
            margin-bottom: 10px;
            padding: 10px;
            background: linear-gradient(90deg, rgba(86, 106, 255, 0.15) 0%, rgba(86, 106, 255, 0) 100%);

            .err-item-title {
                font-size: 12px;
                font-weight: 700;
                color: #CFDAE5;
            }

            .err-item-info {
                margin-top: 10px;
                display: flex;
                justify-content: space-between;
                align-items: center;

            }

            .time {
                font-size: 12px;
                color: #FFFFFF;
                margin-top: 5px;
            }

            .tag {
                font-size: 12px;
                color: #C7CFE8;
                margin-right: 5px;
                border-radius: 2px;
                padding: 3px 5px;
                display: inline-block;
                margin-bottom: 5px;
            }

            .tag.primary,
            .tag.level4,
            .tag.level0 {
                background: rgba(86, 106, 255, 0.2);
                border-radius: 2px 2px 2px 2px;
                border: 1px solid rgba(0, 212, 255, 0.3);
                color: #00D4FF;
            }

            .tag.level3 {
                background: rgba(255, 255, 0, 0.2);
                border-radius: 2px 2px 2px 2px;
                border: 1px solid rgba(255, 255, 0, 0.3);
                color: #FFFF00;
            }

            .tag.level2 {
                background: rgba(255, 170, 0, 0.2);
                border-radius: 2px 2px 2px 2px;
                border: 1px solid rgba(255, 170, 0, 0.3);
                color: #FFAA00;

            }

            .tag.level1 {
                background: rgba(255, 62, 129, 0.2);
                border-radius: 2px 2px 2px 2px;
                border: 1px solid rgba(255, 62, 129, 0.3);
                color: #FF3E81;
            }
        }
    }
}
</style>