<template>
    <div class="page">
        <headNav title="限改审批"></headNav>

        <div class="search">
			<van-search v-model="searchWord" placeholder="请输入搜索关键词" input-align="center" @click.prevent="searchApproves"/>
		</div>

        <div class="date_totalInfo">
            <div class="jfsb">
                <div class="df">
                    <span class="custom-title" @click="show_time = true">{{showDate}}</span>
                    <div @click="show_time = true">
                        <van-icon class="iconArrow" name="play"></van-icon>
                    </div>
                    <van-button v-if="showBackMonth" type="primary" size="mini" @click="backToCurrentMonth">回到当月</van-button>
                </div>

                <div class="df">
                    <span @click="show_mission = true">{{showMission}}</span>
                    <van-icon @click="show_mission = true" class="iconArrow" name="play"></van-icon>
                </div>

                    <!-- 时间弹窗 -->
                <van-popup v-model="show_time" position="bottom">
                    <van-datetime-picker
                        v-model="currentDate"
                        type="year-month"
                        title="选择年月"
                        :min-date="minDate"
                        :max-date="maxDate"
                        @cancel="show_time = false"
                        @confirm="chooseDate"
                    />
                </van-popup>

                    <!-- 任务弹窗 -->
                <van-popup v-model="show_mission" position="bottom">
                    <van-picker
                        show-toolbar
                        title="任务状态"
                        :columns="missionSelect"
                        @cancel="show_mission = false"
                        @confirm="chooseStatus"
                    />
                </van-popup>
            </div>
        </div>

        <div class="container">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad">
                <template v-for="item in list">
                    <van-cell-group :key="item.id" inset @click.stop="showDetail(item)">
                        <van-cell class="title" :title="item.enforce_obj_name">
                            <!-- 待审批-橙色，已通过-绿色，已驳回-红色 -->
                            <div :class="item.cls">{{item.status}}</div>
                        </van-cell>
                        <van-cell @click.stop="showMapDialog(item.enforce_obj)">
                            <template #title>
                                <span>单位地址：{{item.enforce_obj && item.enforce_obj.enforce_obj_address}}</span>
                                <van-icon name="location-o" color="#02A7F0" />
                            </template>
                        </van-cell>
                        <div class="problems">
                            <div>限改问题：</div>
                            <div v-if="item.deadline_problems">
                                <span v-for="(problem, proInd) in item.deadline_problems" :key="proInd">{{`${proInd+1}.${problem}`}}</span>
                            </div>
                        </div>
                        <van-cell center :title="`执行人员：${item.executor_names || ''}`">
                            <span class="black">检查时间：{{item.start_time}}</span>
                        </van-cell>
                    </van-cell-group>
                </template>
            </van-list>
        </div>

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

        <v-mask :showOverLay="showOverLay" tipMsg="加载中..."></v-mask>
    </div>
</template>

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

import { dateFormat, notEmpty } from '@/utils/tool';
import { getInfo } from '@/utils/auth';
import dayjs from 'dayjs';

export default {
    components: {
        headNav,
        "v-mask": mask_overLay,
        baiduMap
    },
    data () {
        return {
            loading: false,
            finished: false,
            showOverLay: false,
            showBackMonth: false,
            show_time: false,
            show_mission: false,
            searchWord: '',
            currentDate: new Date(),
            currentMonth: new Date(),
            minDate: new Date(2000, 0, 1),
            maxDate: new Date(2050, 10, 1),
            showDate: "全部时间",
            showMission: "全部任务",
            // 待审批-橙色，已通过-绿色，已驳回-红色
            missionSelect: [
                {
                    k: '',
                    text: '全部任务'
                },
                {
                    k: 'AUDIT',
                    text: '待审批'
                },
                {
                    k: 'REJECT',
                    text: '已驳回'
                },
                {
                    k: 'SENDED',
                    text: '已通过'
                }
            ],
            query: {
                page: 0,
                size: 10,
                sort: 'start_time desc',
            },
            queryData: {
                job_status: "",
                showDate: "",
            },
            list: [],
            showMap: false,
            coor: {
                lat: 0,
                lng: 0
            },
            zoom: 15,
        }
    },
    computed: {
        userId() {
            const info = getInfo();
            return info ? info.uid : null;
        }
    },
    mounted () {
        this.initData();
    },
    methods: {
        initData() {
            this.showDate = dateFormat('YYYY年mm月', this.currentDate);
            this.queryData.showDate = dateFormat('YYYY-mm', this.currentDate);
        },
        showDetail(data) {
            this.$router.push(`/approveDetail/${data.id}`);
        },
        showMapDialog(location) {
            this.coor = {
                lng: location.longitude,
                lat: location.latitude,
            };
            this.showMap = true;
        },
        backToCurrentMonth() {
            this.showDate = dateFormat('YYYY年mm月', this.currentMonth);
            this.currentDate = this.currentMonth;
            this.queryData.showDate = dateFormat('YYYY-mm', this.currentMonth);
            this.query.page = 1;
            this.showBackMonth = false;
            this.loadList();
        },
        // 选择了一个时间
        chooseDate() {
            this.showDate = dateFormat('YYYY年mm月', this.currentDate);
            this.queryData.showDate = dateFormat('YYYY-mm', this.currentDate);
            this.loadList();
            this.show_time = false;
            const date = dateFormat('YYYYmm', this.currentDate);
            const now = dateFormat('YYYYmm', this.currentMonth);
            this.showBackMonth = date != now;
        },
        // 选择了一个状态
        chooseStatus(obj, index) {
            const e = document.getElementsByClassName('missionList')[0];
            if (e) {
                e.scrollTo(0, 0);
            }
            this.query.page = 1;
            this.queryData.job_status = obj.k;
            this.showMission = obj.text;
            this.show_mission = false;
            this.loadList();
        },
        searchApproves() {
            if (notEmpty(this.searchWord)) {
                this.query.page = 1;
                this.loadList();
            }
            else {
                this.$toast.fail('请输入搜索关键词');
            }
        },
        onLoad() {
            this.query.page++;
            this.loadList();
        },
        loadList() {
            this.showOverLay = true;
            let query = [];
            let word = this.searchWord || '';
            word = word.trim();
            if (notEmpty(word)) {
                query.push(`enforce_obj_name==*${word}*`);
            }
            if (notEmpty(this.queryData.showDate)) {
                query.push('create_time>=' + this.queryData.showDate);
                const end = dayjs(this.currentDate).add(1, 'month').format('YYYY-MM');
                query.push('create_time<' + end);
            }
            if (notEmpty(this.queryData.job_status)) {
                query.push(`notification_audit_status==${this.queryData.job_status}`);
            }
            else {
                query.push(`notification_audit_status=in=("AUDIT","SENDED","REJECT")`);
            }
            // if (this.userId) {
            //     query.push(`executor_ids==*${this.userId}*`);
            // }
            this.query.query = query.join(';');
            this.$http.get('/v2/api/enforce-job/approve', {
                params: this.query
            }).then(result => {
                const res = result.data;
                if (res.data) {
                    let arr = res.data;
                    arr.map(item => {
                        switch (item.notification_audit_status) {
                            case 'SENDED':
                                item.status = '已通过';
                                item.cls = 'status2';
                                break;
                            case 'REJECT':
                                item.status = '已驳回';
                                item.cls = 'status1';
                                break;
                            default:
                                item.status = '待审批';
                                item.cls = 'status3';
                                break;
                        }
                        const time = item.start_time || item.update_time;
                        if (time) {
                            item.start_time = dateFormat('YYYY-mm-dd', new Date(time));
                        }
                    });
                    if (this.query.page > 1) {
                        arr = this.list.concat(arr);
                    }
                    this.list = arr;
                    this.finished = res.page * res.size >= res.total;
                }
                else {
                    this.finished = true;
                }
                this.loading = false;
                this.showOverLay = false;
            });
        },
    }
}
</script>

<style lang="scss">
.container {
    .van-cell-group {
        margin-top: 15px;
        padding: 10px 4px;
    }
    .van-cell {
        padding: 4px 10px;
    }
    .van-cell::after {
        border-bottom: none;
    }
    .title {
        .van-cell__title {
            flex: 5;
        }
    }
}
</style>

<style lang="scss" scoped>
@import '@/style/variable.scss';

.search {
    margin-top: 48px;
}
.date_totalInfo {
    background-color: #fff;
    border-bottom: 1px solid #d5d5d5;
    .jfsb {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .df {
        padding: 4px 0 8px;
        font-size: 13px;
    }
    .iconArrow {
        margin-top: -3px;
        transform: rotate(90deg);
        margin-left: 5px;
        color: #999999;
        font-size: 12px;
    }
}
.custom-title {
    color: #323232;
    display: inline-block;
    max-width: 240px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.container {
    width: 100%;
    height: calc(100vh - 100px);
    overflow-y: auto;
}
.status1 {
    position: relative;
    color: $colorRed;
}
.status1::before {
    content: ' ';
    position: absolute;
    left: 0;
    top: 7px;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: $colorRed;
}
.status2 {
    position: relative;
    color: $colorGreen;
}
.status2::before {
    content: ' ';
    position: absolute;
    left: 0;
    top: 7px;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: $colorGreen;
}
.status3 {
    position: relative;
    color: $colorOrange;
}
.status3::before {
    content: ' ';
    position: absolute;
    left: 0;
    top: 7px;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: $colorOrange;
}
.problems {
    font-size: 14px;
    padding: 4px 10px;
    display: flex;
    &>div:last-child {
        flex: 1;
        &>span {
            margin-right: 8px;
        }
    }
}
</style>