<template>
<div>
	<common @asynCallBack="asynCallBack"></common>
	<top-header :pageTitle="pageTitle" :routeName="'Master'"></top-header>

	<div class="mui-content">
			<ul class="mui-table-view vongi-jy-ul" v-for="(item,index) in recordList">
				<li class="mui-table-view-cell">
					<router-link  class="mui-navigate-right" :to="{name:'MasterPropertyCarMyInfo',query:{id:item.id}}"  >

 						<div class="mui-media-body">
							{{item.parkingName}}
							<p class='mui-ellipsis'>{{item.rentTime}}</p>
						</div>
						<span :class="statusClass[item.status]">{{item.statusN}}</span>
					</router-link>
				</li>

			</ul>
		</div>

		<div class="fyy-footer">
			<div class="bindfyy-btn"><button type="submit" class="mui-btn mui-btn-primary " @click="goto">申请车位</button></div>
		</div>
	<NullList :remark="'暂无车位申请记录'" v-if="!recordList.length"></NullList>

	<loading :visible="isLoading"></loading>
</div>
</template>

<script>
    import * as API from '@/apis/Master/Property/car'
    import Common from '$project/components/Common.vue'

    import Loading from '$project/components/Loading.vue'
    import TopHeader from '$project/components/TopHeader.vue'
    import isReachBottom from '$project/utils/isReachBottom'
    import NullList from '$project/components/NullList.vue'
    import {
        mapGetters,
        mapMutations
    } from 'vuex'
    export default {
        name: 'masterPropertyCarmylist',
        components: {
            Common,
            Loading,
            TopHeader,NullList
        },
        data() {
            return {
                pageTitle: '我的车位',

                isLoading: false,

                listForm: {
                    pageIndex: 1,
                    pageSize: 20,
                    totalPage: 1,
                    status: 2,
                },
                recordList: [],
                selectIdList: [],
                allSelect: [],
                subForm: {
                    ids: '',
                    content: '',
                    status: ''
                },
                //审批内容弹窗显示
                openFromVisible: false,
                firstRecordsTotal: 0,
                statusClass:['color4fc5f7 ','color55f868  ','','colorfe616c  ']
            }
        },
        created() {

        },
        methods: {
            goto(){
                 this.$router.push({
                	name: 'MasterPropertyCar',
                 })
			},
            //获取列表
            getList() {
                this.isLoading = true;
                API.ParkingApplicationList(this.listForm).then(response => {
                    if (response) {
                        if (this.listForm.pageIndex == 1) {
                            this.recordList = response.list;
                            this.listForm.pageIndex = response.pageNumber;
                            this.listForm.totalPage = response.totalPage;
                        } else {
                            this.recordList = [
                                ...this.recordList,
                                ...response.list
                            ];
                        }
                    }

                    if (this.listForm.status == 0) {
                        this.firstRecordsTotal = response.num;
                    }

                    this.listForm.pageIndex++;
                    this.isLoading = false;
                }).catch(error => {
                    this.isLoading = false;
                    mui.toast(error);
                })
            },
            //下拉事件
            handleScrool() {
                if (isReachBottom()) {
                    console.log('到达底部')
                    if (this.listForm.pageIndex <= this.listForm.totalPage && this.isLoading == false) {
                        this.getList();
                    } else {
                        return;
                    }
                }
            },
            //切换
            reloadList(status) {
                this.listForm.status = status;
                this.listForm.pageIndex = 1;
                this.getList();
            },

            asynCallBack() {

            },
        },
        mounted() {
            this.getList();
            //监控下拉加载事件
            var _this = this;
            window.addEventListener('scroll', _this.handleScrool);
        },
        destroyed() {
            //销毁监听事件
            var _this = this;
            window.removeEventListener('scroll', _this.handleScrool);
        },
        computed: {
            ...mapGetters({
                openId: 'wx_openid',
                token: 'token',
            })
        }
    }
</script>

<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style>
</style>
