<template>
    <div class="page">
        <headNav title="违法占道" @rightClick="rightClick" iconName="plus"></headNav>

        <div class="container">
            <div class="option">
                <div class="option-item">
                    <span>{{showDate}}</span>
                    <van-icon class="iconArrow" name="play"></van-icon>
                </div>
                <div class="option-item">
                    <span>本月违法：{{count}}条</span>
                </div>
            </div>
            <div class="list">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="getMoreList">
                    <template v-for="row in list">
                        <div :key="row.id" class="card" @click="showDetail(row.id)">
                            <div class="row">
                                <div class="row-title">
                                    <span>{{row.license_plate_num}}</span>
                                    <van-tag plain type="primary">{{row.stopType}}</van-tag>
                                </div>
                                <div class="row-status">
                                    <span :class="row.statusColor">{{row.statusDesc}}</span>
                                </div>
                            </div>
                            <div class="row" @click="onShowMap(row)">
                                <span>占道地址：{{row.inspection_location}}</span>
                                <van-icon color="#02A7F0" name="location-o" />
                            </div>
                            <div class="row">
                                <span>执法时间：{{row.examTime}}</span>
                            </div>
                            <div class="row">
                                <span>车辆类型：{{row.carType}}</span>
                            </div>
                            <div v-if="row.noticeTime" class="card-time">{{row.noticeTime}}</div>
                        </div>
                    </template>
                </van-list>
            </div>
        </div>

        <van-popup
            v-model="showMap"
            position="bottom"
            @click-overlay="showMap = false">
            <div v-if="showMap">
                <baiduMap :coor="coor" :zoom="zoom"></baiduMap>
            </div>
        </van-popup>
    </div>
</template>

<script>
import headNav from '@/components/headNav.vue';
import baiduMap from "@/components/baiduMap.vue";

import { dateFormat } from '@/utils/tool';
import { get } from '@/utils/http.js';
import dayjs from 'dayjs';
import punishmentMixin from '@/mixins/punishment';

export default {
    components: {
        headNav,
        baiduMap,
    },
    data () {
        return {
            date: new Date(),
            count: 0,
            query: {
                page: 0,
                size: 10,
                sort: 'create_time desc',
            },
            loading: false,
            finished: false,
            list: [],
            showMap: false,
            coor: {
                lat: 106.504962,
                lng: 29.533155,
            },
            zoom: 12,
            doTimeInterval: null,
        }
    },
    mixins: [punishmentMixin],
    computed: {
        showDate() {
            return dateFormat('YYYY年mm月', this.date);
        },
    },
    methods: {
        rightClick() {
            this.$router.push('/carList/add');
        },
        getMoreList() {
            this.query.page++;
            this.loadList();
        },
        loadList() {
            let query = [];
            if (this.date) {
                query.push('create_time>=' + dateFormat('YYYY-mm', this.date));
                const end = dayjs(this.date).add(1, 'month').format('YYYY-MM');
                query.push('create_time<' + end);
            }
            this.query.query = query.join(';');
            get('/v2/api/illegal_occupy', this.query).then(res => {
                const data = res && res.data || [];
                data.map(item => {
                    item.examTime = '';
                    item.noticeTime = null;
                    // item.inspection_time = new Date().toString();
                    if (item.inspection_time) {
                        item.examTime = dateFormat('YYYY年mm月dd日 HH:MM:SS', new Date(item.inspection_time));
                    }
                    item.carType = this.parseVehicleModel(item.vehicle_model);
                    item.stopType = this.parseStopType(item.illegal_stop_types);
                    item.statusDesc = this.parseStatus(item.processing_status);
                    item.statusColor = 'FontColorSuccess';
                    if (item.processing_status == 'NOTICED') {
                        item.statusColor = 'FontColorWarn';
                    }
                    if (item.processing_status == 'PUNISHMENTED') {
                        item.statusColor = 'FontColorError';
                    }
                });
                if (this.query.page <= 1) {
                    this.list = data;
                }
                else {
                    this.list = this.list.concat(data);
                }
                this.handleNoticeTime();
                this.loading = false;
                this.finished = res.page * res.size >= res.total;
                this.count = res.total;
            });
        },
        formatNum(num) {
            if (num > 9) {
                return `${num}`;
            }
            return `0${num}`;
        },
        handleNoticeTime() {
            let have = false;
            let str = null, dis = 0, m = 0, s = 0;
            this.list.map(item => {
                str = null;
                if (item.processing_status == 'NOTICED' && item.inspection_time) {
                    dis = 300 - parseInt((new Date() - new Date(item.inspection_time)) / 1000);
                    if (dis > 0) {
                        if (!have) {
                            have = true;
                        }
                        m = parseInt(dis / 60);
                        s = parseInt(dis % 60);
                        str = this.formatNum(m) + ':' + this.formatNum(s);
                    }
                }
                item.noticeTime = str;
            });
            if (have) {
                if (!this.doTimeInterval) {
                    this.doTimeInterval = setInterval(() => {
                        this.handleNoticeTime();
                    }, 1000);
                }
            }
            else if (this.doTimeInterval) {
                clearInterval(this.doTimeInterval);
            }
        },
        onShowMap(item) {
            this.coor = {
                lng: 106.504962,
                lat: 29.533155,
            };
            if (item.inspection_location_latitude && item.inspection_location_longitude) {
                this.coor = {
                    lng: parseFloat(item.inspection_location_longitude),
                    lat: parseFloat(item.inspection_location_latitude),
                }
            }
            this.showMap = true;
        },
        showDetail(id) {
            this.$router.push(`/carList/detail/${id}`);
        },
    },
    beforeDestroy () {
        if (this.doTimeInterval) {
            clearInterval(this.doTimeInterval);
        }
    },
}
</script>

<style lang="scss" scoped>
.container {
    margin-top: 47px;
    .option {
        padding: 8px 16px;
        background-color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        color: #565656;
        &-item {
            display: flex;
            align-items: center;
        }
    }
    .iconArrow {
        margin-top: -3px;
        transform: rotate(90deg);
        margin-left: 5px;
        color: #999999;
        font-size: 12px;
    }
    .list {
        height: calc(100vh - 47px - 50px);
        padding: 10px 15px;
        overflow-y: auto;
        font-size: 13px;
        .card {
            margin-top: 10px;
            background-color: #FFFFFF;
            border-radius: 8px;
            padding: 10px;
            position: relative;
            .row {
                margin-top: 8px;
                display: flex;
                align-items: center;
                font-size: 14px;
                color: #666666;
                &-title {
                    font-size: 17px;
                    color: #343434;
                    font-weight: bold;
                    &>span {
                        margin-right: 10px;
                    }
                }
            }
            .row:first-child {
                justify-content: space-between;
            }

            .card-time {
                position: absolute;
                right: 14px;
                bottom: 8px;
                font-size: 28px;
                color: #F00;
            }
        }
    }
}
</style>