<template>
    <div class="msg">
        <headNav :Larrow="false" title="消息"></headNav>
        <div class="content">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="getMoreData">
                <template v-for="item in list">
                    <div :key="item.id" class="item" @click="showDetail(item)">
                        <div class="item-title">
                            <span>新增【{{item.jobType}}】</span>
                            <span>NEW</span>
                        </div>
                        <div>
                            <span>检查单位：</span>
                            <span>{{item.enforce_obj_name}}</span>
                        </div>
                        <div>
                            <span>任务地点：</span>
                            <span>{{ item.enforce_obj && item.enforce_obj.enforce_obj_address }}</span>
                        </div>
                        <div>
                            <span>检查时间：</span>
                            <span>{{item.jobExecuteDate}}</span>
                        </div>
                        <div>
                            <span>执行人员：</span>
                            <span>{{item.executor_names}}</span>
                        </div>
                    </div>
                </template>
            </van-list>
            <template v-if="list.length <= 0">
                <van-empty description="暂无新消息">
                    <van-button icon="replay" type="info" class="bottom-button">点击刷新</van-button>
                </van-empty>
            </template>
        </div>

        <v-mask :showOverLay="showOverLay"></v-mask>
    </div>
</template>

<script>
import headNav from "@/components/headNav.vue";
import mask_overLay from "@/components/overLay_xy.vue";

import jobMixin from '@/mixins/job';
import { formatYYYYMMDD } from '@/utils/tool';
import { get, put } from '@/utils/http.js';
import { getInfo } from '@/utils/auth';

export default {
    components: {
        headNav,
        "v-mask": mask_overLay,
    },
    inject: ["reload"],
	beforeRouteEnter: (to, from, next) => {
		next(vm => {
            if (vm._data.list.length > 0) {
                vm.reload();
            }
        });
	},
    mixins: [jobMixin],
    data () {
        return {
            showOverLay: false,
            list: [],
            query: {
                page: 0,
                size: 8,
                sort: 'create_time desc',
            },
            loading: false,
            finished: false,
        }
    },
    computed: {
        userId() {
            const info = getInfo();
            return info ? info.uid : null;
        }
    },
    methods: {
        getMoreData() {
            this.query.page++;
            this.loadMsg();
        },
        loadMsg() {
            this.showOverLay = true;
            let query = ['message_status==UN_READ'];
            if (this.userId) {
                query.push(`executor_ids==*${this.userId}*`);
            }
            this.query.query = query.join(';');
            get("/v2/api/enforce-job", this.query).then(res => {
                const data = res.data || [];
                data.map(item => {
                    item.jobType = this.parseJobType(item.job_type);
                    item.jobExecuteDate = item.start_time ? formatYYYYMMDD(item.start_time, true) : '未开始';
                });
                if (this.query.page < 2) {
                    this.list = data;
                }
                else {
                    this.list = this.list.concat(data);
                }
                this.loading = false;
                this.finished = res.page * res.size >= res.total;
                this.showOverLay = false;
            }).catch(err => {
                this.showOverLay = false;
            });
        },
        showDetail(data) {
            put(`/v2/api/enforce-job/${data.id}`, {
                message_status: 'READ',
            });

            if (data.job_type == 'NORMAL' || data.job_type == 'SPECIAL') {
                this.$router.push(`/task/detail/${data.id}/${data.enforce_obj_id}`);
                return;
            }
            
            if (data.job_type == 'TOWNS') {
                this.$router.push(`/town/detail/${data.id}`);
                return;
            }
            
            if (data.job_type == 'REPORT') {
                this.$router.push(`/reportListDetail/${data.id}`);
                return;
            }
            
            if (data.job_type == 'OTHER') {
                this.$router.push(`/otherListDetail/${data.id}`);
                return;
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.content {
    margin-top: 47px;
    height: calc(100vh - 47px - 49px);
    overflow-y: auto;
}
.item {
    margin: 16px;
    border-radius: 8px;
    box-shadow: 0 0 5px rgba($color: #000000, $alpha: 0.3);
    font-size: 14px;
    color: #666666;
    padding: 8px;
    background-color: #FFFFFF;
    &-title {
        color: #323232;
        font-weight: bolder;
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
        &>span:last-child {
            color: #FF0000;
        }
    }
    &>div:not(:first-child) {
        margin-top: 4px;
    }
}
</style>