<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 class="color4fc5f7"><a :href="'tel:'+info.telephone">{{info.telephone}}</a></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.status!=3">
						<label style="width:40%">实际租金(元)</label>
						<input  v-if="info.status==0" type="text" class="mui-input-clear" v-model="detail.actualFee" placeholder="请输入调整后金额，无变动可不填" style="width:60%">
						<span   v-if="info.status!=0" style="width:60%">{{info.actualFee}}</span>

					</div>
				</form>
			</div>
			<div class="mui-content-padded vongi-qingjiadt vongi-editme" v-if="info.status==0">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>收费方式</label>
						<button class="mui-btn mui-btn-block mui-navigate-right" @click="onSelect()"
								type='button' style="width:65%">{{payTypeN}}</button>
					</div>
				</form>
			</div>
			<div class="fyy-scon-botton" v-if="info.status==0">
				<div class="examine-btn examine-btn1" @click="show=1">关闭申请</div>
				<div class="examine-btn examine-btn4" v-show="payType==2" @click="show=2">推送账单</div>
				<div class="examine-btn examine-btn2"v-show="payType==1" @click="show=2">确认租出</div>
			</div>
			<!--已推送状态-->
			<div class="mui-content-padded vongi-editme vongi-qingjiadt"  v-if="info.status!=0" >
				<form class="mui-input-group">

					<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">
						<label>状态</label>
						<span :class="colors[info.status]">{{info.statusN}}</span>
						<!--<span class="color55f868">已到账</span>-->
					</div>

					<div class="mui-input-row" v-if="info.pushTime">
						<label>推送时间</label>
						<span>{{info.pushTime}}</span>
					</div>
					<div class="mui-input-row" v-if="info.payTime">
						<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>

			<!--弹窗1-->
			<div class="mui-popup mui-popup-in vongi-mui-pop" v-if="show==1">
				<div class="mui-popup-inner vongi-pop-inner">
					<div class="mui-popup-title">关闭申请理由</div>
					<div class="mui-popup-input">
						<textarea id="textarea" rows="3" placeholder="可输入关闭申请理由" v-model="detail.reason"></textarea>
					</div>
				</div>
				<div class="mui-popup-buttons" ><span class="mui-popup-button"@click="show=0" >取消</span>
					<span class="mui-popup-button mui-popup-button-bold" @click="opClose()">确定</span></div>
			</div>
			<div class="mui-popup-backdrop mui-active" v-if="show==1" style="display: block;"></div>
			<!--弹窗2-->
			<div class="mui-popup mui-popup-in vongi-mui-pop" style="display: block;" v-if="show==2">
				<div class="mui-popup-inner vongi-pop-inner">
					<div class="mui-popup-title">确认</div>
					<div class="mui-media-body" v-if="payType==2">
						确认是否向<b class="color4fc5f7">{{info.applicationName}}</b>推送本次车位费账单？账单金额为<b class="colorfe616c">{{detail.actualFee?detail.actualFee:info.estimateFee}}</b>元。
					</div>
					<div class="mui-media-body" v-if="payType==1">
						确认是否向<b class="color4fc5f7">{{info.applicationName}}</b>收取了车位费<b class="colorfe616c">{{detail.actualFee?detail.actualFee:info.estimateFee}}</b>元。
					</div>
				</div>
				<div class="mui-popup-buttons"><span class="mui-popup-button" @click="show=0">取消</span>
					<span class="mui-popup-button mui-popup-button-bold" @click="opLease()">确定</span></div>
			</div>
			<div class="mui-popup-backdrop mui-active" style="display: block;" v-if="show==2"></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','','color999']
			}
		},
		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=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 src="$project/assets/css/iconfont.css"></style>
<style src="$project/assets/css/mui.picker.min.css"></style>

<style>
</style>

