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

		<div class="mui-content">
			<div class="mui-content-padded vongi-editme vongi-qingjiadt">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>业主姓名</label>
						<span>{{info.applicationName}}</span>
					</div>
					<div class="mui-input-row">
						<label>车牌号</label>
						<span>{{info.carNum}}</span>
					</div>
				</form>
			</div>
			<div class="mui-content-padded vongi-editme vongi-qingjiadt">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>申请车位</label>
						<span>{{info.parkingName}}</span>
					</div>
					<div class="mui-input-row">
						<label style="width:40%">租用起止时间</label>
						<span style="width:60%">{{info.rentTime}}</span>
					</div>
					<div class="mui-input-row">
						<label>租用时长</label>
						<span>{{info.contractDuration}}</span>
					</div>
					<div class="mui-input-row">
						<label style="width:40%">预估租金(元)</label>
						<span style="width:60%">{{info.estimateFee}}</span>
					</div>
					<div class="mui-input-row"  v-if="info.actualFee">
						<label style="width:40%">实际租金(元)</label>
 						<span  style="width:60%">{{info.actualFee}}</span>

					</div>
				</form>
			</div>
			<div class="mui-content-padded vongi-qingjiadt vongi-editme">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>提交时间</label>
						<span>{{info.createTime}}</span>
					</div>
					<div class="mui-input-row">
						<label>申请状态</label>
						<span  :class="colors[info.status]">{{info.statusN}}</span>
						<!--<span class="color55f868">申请成功</span>-->
						<!--<span class="colorfe616c">申请失败</span>-->
					</div>
					<!--申请成功状态-->
					<div class="mui-input-row" v-if="info.status==1">
						<label>缴费方式</label>
						<span class="color4fc5f7" >{{payTypeList[info.payType]}}</span>
					</div>
					<div class="mui-input-row" v-if="info.status==1">
						<label>缴费时间</label>
						<span>{{info.payTime}}</span>
					</div>
					<!--申请失败状态-->
					<div class="mui-input-row" v-if="info.status==3">
						<label style="width:100%">关闭申请理由</label>
						<span class="vongi-span">{{info.reason}}</span>
					</div>
					<div class="mui-input-row" v-if="info.status==3">
						<label>关闭时间</label>
						<span>{{info.updateTime}}</span>
					</div>
				</form>
			</div>
		</div>
	<loading :visible="isLoading"></loading>

</div>
</template>


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

    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 {
        mapGetters,
        mapMutations
    } from 'vuex'
    export default {
        name: 'MasterPropertyCarInfo',
        components: {
            Common,
            Loading,
            TopHeader
        },
        data() {
            return {
                pageTitle: '车位申请详情',

                isLoading: false,

                id: this.$route.query.id,
                detail: {
                    id: this.$route.query.id,
                    actualFee:'',
                    reason:'该车位已被售出/租出',
                },
                info: {},
                show:0,
                payType:1,
                payTypeN:'线下收款',
                payTypeList:['','线下收款','推送账单'],
                colors:['color4fc5f7','color55f868','','colorfe616c']

            }
        },
        created() {},
        methods: {
            onSelect(){
                var picker = new mui.PopPicker();

                picker.setData([
                    {
                        text:'线下收款',value:'1'
                    }
                    ,
                    {
                        text:'推送账单',value:'2'
                    }
                ]);

                picker.show((selectItems) => {
                    this.payType = selectItems[0].value;
                    this.payTypeN = selectItems[0].text;
                });
            },
            opLease(){
                if(!this.detail.actualFee){
                    this.detail.actualFee=this.info.estimateFee;
                }
                this.show=0;
                this.isLoading = true;

                if(this.payType ==1){
                    API.ParkingApplicationConfirmLease(this.detail).then(res => {
                        mui.toast("操作成功");
                        this.getDetail()

                    }).catch(error => {
                        this.isLoading = false;
                        mui.toast(error);
                    })
                }
                if(this.payType ==2){
                    // var url = window.location.href.split("#")[0];
                    this.detail.url="/master/mine/bill/pay?id=";
                    API.ParkingApplicationSendOrder(this.detail).then(res => {
                        mui.toast("操作成功");
                        this.getDetail()

                    }).catch(error => {
                        this.isLoading = false;
                        mui.toast(error);
                    })
                }

            },
            opClose(){
                if(!this.detail.reason){
                    mui.toast("请填写关闭申请理由")
                    return false;
                }
                this.isLoading = true;
                this.show=0;
                API.ParkingApplicationClose(this.detail).then(res => {
                    mui.toast("操作成功");
                    this.getDetail()

                }).catch(error => {
                    this.isLoading = false;
                    mui.toast(error);
                })
            },
            //获取详情
            getDetail() {

                this.isLoading = true;
                API.ParkingApplicationDetail({id:this.id}).then(info => {
                    this.isLoading = false;

                    this.info=info;
                }).catch(error => {
                    this.isLoading = false;
                    mui.toast(error);
                })
            },
            asynCallBack() {

            },
        },
        mounted() {
            this.getDetail();
        },
        computed: {
            ...mapGetters({
                openId: 'wx_openid',
                token: 'token',
            })
        },
    }
</script>

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