<template>
    <div class="module-container">
        <module-header title="巡查统计">
            <div class="sub-info">
                当日巡查里程<span class="number">{{ Math.abs(inspectionData.patrolMileage) }}</span><span
                    class="unit">km</span>
            </div>
        </module-header>
        <div class="module-body inspection-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" @click="handleOpenDialog('route', inspectionData.patrolFrequency)">
                        <div class="img-bg">
                            <img src="~@/assets/images/patrolAndRescue/route.png" alt="" />
                        </div>
                        <div class="count-info">
                            <div class="count-title">道路巡查</div>
                            <div class="count-num">{{ inspectionData.patrolFrequency }} <span
                                    class="count-unit">次</span>
                            </div>
                        </div>
                    </div>
                    <div class="count-type">
                        <div class="img-bg">
                            <img src="~@/assets/images/patrolAndRescue/video.png" alt="" />
                        </div>
                        <div class="count-info">
                            <div class="count-title">视频巡查</div>
                            <div class="count-num">{{ inspectionData.videoPatrolFrequency }} <span
                                    class="count-unit">次</span></div>
                        </div>
                    </div>
                </div>
                <div class="err-item">
                    <img src="~@/assets/images/patrolAndRescue/err-icon.png" alt="" />
                    <div class="err-info">
                        <div class="err-info-item">
                            <div class="err-info-title">当日异常情况</div>
                            <div class="count-num">
                                <span class="number">{{ inspectionData.abnormalFrequency }}</span><span
                                    class="unit">次</span>
                            </div>
                        </div>
                        <div class="gap-line"></div>
                        <div class="err-info-item">
                            <div class="err-info-title">已处置</div>
                            <div class="count-num">
                                <span class="number">{{ inspectionData.disposedFrequency }}</span><span
                                    class="unit">次</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <section-title title="异常情况任务处理列表"> </section-title>
            <div class="err-scroll-wrapper">
                <vue-seamless-scroll :limitMoveNum="3" v-if="inspectionData.abnormalList.length"
                    :data="inspectionData.abnormalList" class="scroll-error-wrapper">
                    <div class="scroll-errot-item" v-for="(item, index) in inspectionData.abnormalList" :key="index">
                        <div class="err-item-title">{{ item.roadName }} {{ item.stakeMark }}</div>
                        <div class="err-item-info">
                            <div>
                                <span class="tag primary">{{ filterDictTextByKey(xcdwlx, item.type) || '-' }}</span>
                                <span class="tag level3">{{ item.typeContent || '-' }}</span>
                            </div>
                            <div class="time">{{ item.abnormalTime }}</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 { getPatrolCountData, getDictByCode } from "@/api/patrolAndRescue";
import { QueryMixin } from '../mixins/queryMixin'
export default {
    name: 'inspectionStatistics',
    components: {
        ModuleHeader,
        SectionTitle,
        vueSeamlessScroll
    },
    mixins: [QueryMixin],
    data() {
        return {
            loadingColor: 'rgba(6, 46, 106, 0.3)',
            loading: false,
            inspectionData: {
                "abnormalFrequency": 0,
                "abnormalList": [
                    // {
                    //     "abnormalTime": "2025-02-10 10:00:00",
                    //     "roadName": "G75兰海高速",
                    //     "stakeMark": "1075KM+100M",
                    //     "type": "1",
                    //     "typeContent": "障碍物"
                    // }
                ],
                "disposedFrequency": 0,
                "patrolFrequency": 0,
                "patrolMileage": 0,
                "videoPatrolFrequency": 0
            },
            xcdwlx: [] // 巡查点类型字典
        }
    },
    methods: {
        getData() {
            this.loading = true
            const formData = new FormData()
            formData.append('codes', 'xcdwlx')
            getDictByCode(formData)
                .then((res) => {
                    if (res.xcdwlx) {
                        this.xcdwlx = res.xcdwlx
                    }
                })
            getPatrolCountData(this.query) // 传入路段id数组，如果没有则不传
                .then((res) => {
                    if (res.state && res.value) {
                        this.inspectionData = { ...res.value }
                    }
                })
                .catch((err) => {
                })
                .finally(() => {
                    this.loading = false
                })
        },

        handleOpenDialog(type, count) {
            if (count > 0) {
                this.$emit('patrol', type)
            }
        }
    },
}
</script>
<style scoped lang="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: 10px;
    box-sizing: border-box;

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

    .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;
            background: linear-gradient(180deg, #17C3E6 0%, #019AE6 100%);
            text-shadow: none;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .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: 44px;
                    height: 44px;
                    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: 30px;
                        height: 30px;
                        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;
                        color: #33BBFF;
                    }

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

        }

        .err-item {
            width: 440px;
            height: 96px;
            background: linear-gradient(180deg, rgba(0, 61, 115, 0.5) 0%, rgba(0, 48, 114, 0.5) 100%);
            border-radius: 10px 10px 10px 10px;
            border: 1px solid rgba(51, 153, 255, 0.2);
            margin: 20px auto;
            display: flex;
            align-items: center;
            justify-content: space-around;

            img {
                width: 64px;
                height: 56px;
                margin-right: 20px;
            }

            .err-info {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 50px;
                margin-right: 20px;

                .err-info-item {
                    font-size: 14px;
                    font-weight: bold;
                    color: #FFFFFF;
                    margin-bottom: 4px;
                }

                .gap-line {
                    width: 1px;
                    height: 30px;
                    background: rgba(51, 153, 255, 0.2);
                }

                .err-info-title {
                    font-size: 14px;
                    color: #CCE6FF;
                    margin-bottom: 10px;
                }

                .count-num {
                    font-size: 16px;
                    font-weight: bold;
                    color: #FFFFFF;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .number {
                        font-size: 22px;
                        font-weight: bold;
                        color: #FF3E81;
                        margin-right: 4px;
                    }

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

            }
        }
    }

    .err-scroll-wrapper {
        width: 100%;
        flex: 1;
        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 {
            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>