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

		<div class="mui-content vongi-hdsq  vongi-admin-kqtj">
			<div class="fyy-temper-date">
				<a href="" class="mui-col-xs-6" @click="selectStatus" >{{listForm.statusN}}<span class="mui-icon iconfont icon-xiajiantou"></span></a>
				<a href="" class="mui-col-xs-6" @click="selectData">{{listForm.date}}<span class="mui-icon iconfont icon-xiajiantou"></span></a>
			</div>
            <NullList :remark="'暂无账单记录'" v-if="!recordList.length"></NullList>

            <div class="mui-slider-group">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell" v-for="mod in recordList">
						<a  @click="goto(mod.orderId)">
							<div class="mui-media-body mui-ellipsis">
								缴费单位：{{mod.companyName}}
							</div>
							<div class='mui-ellipsis'>账单总额：<b class="colorfe616c">￥{{mod.totalFee}}</b></div>
							<p class='flew-sp flew-items'>
								推送时间：{{mod.pushTime}}
								<button type="button" class="mui-btn  mui-btn-outlined" :class="mod.payStatus=='10'?'mui-btn-yellow':'mui-btn-green'">{{mod.payStatus=='10'?'未支付':'已支付'}}</button>
							</p>
						</a>
					</li>

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

</div>
</template>


<script>
    require('$project/assets/js/mui.picker.min.js');

    import * as API_Pay from '$project/apis/payment'
    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 {
        hourDistance,
        currentTimeStamp,
        parseUnixTime
    } from '$project/utils'
    import {
        mapGetters,
        mapMutations
    } from 'vuex'
    export default {
        name: 'MasterPropertyCostList',
        components: {
            Common,
            Loading,
            TopHeader,NullList
        },
        data() {
            return {
                pageTitle: '账单管理',

                isLoading: false,
                listForm: {
                    pageIndex: 1,
                    pageSize: 20,
                    type:'public',
                    date:'',
                    totalPage: 1,
                    status:'',
                    statusN:'全部账单',

                },
                recordList: [],

            }
        },
        created() {
            this.listForm.date = parseUnixTime(currentTimeStamp(), '{y}-{m}');
        },
        methods: {
            selectStatus(){
                var picker = new mui.PopPicker();

                picker.setData([
                    {
                        text:'全部账单',value:''
                    },{
                        text:'未支付',value:'10'
                    },{
                        text:'已支付',value:'20'
                    }
                ]);
                var i=0;
                if(this.listForm.status==''){
                    i=0;
                }else if(this.listForm.status=='10'){
                    i=1;
                }else{
                    i=2;
                }
                picker.pickers[0].setSelectedIndex(i);

                picker.show((selectItems) => {
                    this.listForm.statusN = selectItems[0].text;
                    this.listForm.status = selectItems[0].value;
                    this.listForm.pageIndex = 1;
                    this.getList();
                });
            },
            //选择日期
            selectData() {
                var _this = this;
                var picker = new mui.DtPicker({
                    "type": "month",
                    "beginYear": 2020,
                    "endYear": 2040,
                    "endDate": new Date(),
                    "value": _this.listForm.date
                });
                picker.show(function(rs) {
                    _this.listForm.date = rs.text;
                    _this.listForm.pageIndex = 1;
                    _this.getList();
                    picker.dispose();
                });
            },


            //info
            goto(id) {

                this.$router.push({
                    name: 'MasterPropertyCostPay',
                    query: {
                        id: id
                    }
                })
            },

            //获取列表
            getList() {
                this.isLoading = true;
                API_Pay.orderList(this.listForm).then(res => {
                    var response=res;
                    if (response) {
                        if (this.listForm.pageIndex == 1) {
                            this.recordList = response.data;
                            this.listForm.pageIndex = response.pageNumber;
                            this.listForm.totalPage = response.totalPage;
                        } else {
                            this.recordList = [
                                ...this.recordList,
                                ...response.data
                            ];
                        }
                    }
                    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;
                    }
                }
            },

            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',
                person_data: 'person_data',
                person_popedom: 'person_popedom',
            })
        },

    }
</script>

<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style scoped src="$project/assets/css/sczpfyy.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style src="$project/assets/css/mui.picker.min.css"></style>

<style>
</style>
