<template>
    <view class="waper">
		<u-navbar @leftClick="leftClick" :placeholder="true" bgColor="#FFFFFF">
			<view slot='center' style="font-size: 36rpx; font-weight: bold;">
				申请退款
			</view>
		</u-navbar>
		<view v-if="detail">
			<view class="content" v-if="!reason">
				<view class="amount">
					<view class="label">退款金额</view>
					<view class="price"><text>￥</text>{{ refund }}</view>
				</view>
				<view class="reason" @click="reason = true">
					<view class="label">退款原因</view>
					<view class="con">
						<text>{{ isReason.dictLabel }}</text>
						<u-icon name="arrow-right" color="rgba(0,0,0,0.85)" size="28rpx"></u-icon>
					</view>
				</view>
				<view class="detailed">
					<view class="title">退款明细</view>
					<view class="row">
						<view>房费</view>
						<view>¥{{ detail.totalAmount }}</view>
					</view>
					<view class="row" v-if="amount">
						<view>违约金</view>
						<view>¥{{ amount }}</view>
					</view>
				</view>
				<view class="detailed">
					<view class="title">退回方式</view>
					<view class="row">
						<view>退回原支付方式</view>
						<view>预计1-3个工作日到账</view>
					</view>
				</view>
				<view class="footer" :style="'padding-bottom: ' + windowBottom + 'px;'">
					<view class="btn btn1" @click="cancel">取消申请</view>
					<view class="btn btn2" @click="confirm">确认提交</view>
				</view>
			</view>
			<view class="content" v-if="reason">
				<view class="h4">申请退款</view>
				<view class="h8">请选择退款原因，以帮助我们改进</view>
				<view class="list">
					<view class="item" v-for="(item, index) in reasonList" :key="index" @click="changeReason(item)">
						<view class="label">{{item.dictLabel}}</view>
						<view class="noChange" v-if="isReason.dictValue != item.dictValue"></view>
						<view class="isChange" v-if="isReason.dictValue == item.dictValue">
							<u-icon name="checkmark" color="#fff" size="28rpx" />
						</view>
					</view>
				</view>
				<view class="footer" :style="'padding-bottom: ' + windowBottom + 'px;'">
					<view class="btn3" @click="submit">提交</view>
				</view>
			</view>
		</view>
    </view>
</template>

<script>
export default {
	data () {
		return {
            windowBottom: 0,
			id: '',
			amount: null,
			refund: null,
			detail: null,
			reason: false,
			reasonList: [],
			isReason: {}
		}
	},
	onLoad (options) {
		this.id = options.id;
		this.amount = Number(options.amount);
		this.refund = options.refund;
		this.getDate();
		this.common();
        this.windowBottom = this.$safeAreaBottom || uni.upx2px(20);
	},
	
	methods: {
		async getDate() {
			let res = await this.$http.hotelOrderDetail(this.id);
			this.detail = res.data;
		},
		async common() {
			const params = {
				dictType: 'hotel_homestay_personal_refund_type'
			}
			let info = await this.$http.common(params)
			if (info.code === 200) {
				this.reasonList = info.data;
			} else {
				uni.$u.toast(info.msg);
			}
		},
		changeReason(i) {
			this.isReason = i;
		},
		submit() {
			this.reason = false;
		},
		cancel() {
			uni.navigateBack();
		},
		async confirm() {
			if (!this.isReason.dictValue) {
				uni.showToast({ mask: true, title: '请选择退款原因', icon: 'none' });
				return false;
			}
			let params = {
				orderId: this.id,
				personalRefundType: this.isReason.dictValue
			}
			let info = await this.$http.hotelOrderCancel(params);
			uni.$u.toast('提交成功');
			setTimeout(() => {
				uni.navigateBack();
			}, 1500)
		},
        leftClick () {
			if (this.reason) {
				this.reason = false;
			} else {
				uni.navigateBack();
			}
        }
	}
}
</script>

<style lang="scss">
.waper { min-height: 100vh; background-color: #F6F6F6; }
.content {
	padding: 24rpx; box-sizing: border-box;
	.amount {
		height: 103rpx; background: #FFFFFF; border-radius: 10rpx; padding: 0 24rpx; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;
		.label { font-size: 28rpx; color: rgba(0,0,0,0.85); }
		.price {
			font-weight: bold; font-size: 42rpx; color: #EE595A;
			text { font-weight: 400; font-size: 24rpx; }
		}
	}
	.reason {
		height: 103rpx; margin-top: 22rpx; background: #FFFFFF; border-radius: 10rpx; padding: 0 24rpx; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; font-size: 28rpx; color: rgba(0,0,0,0.85);
			.con {flex: 1; display: flex; align-items: center; justify-content: flex-end;}
		}
	.detailed {
		margin-top: 22rpx; background: #FFFFFF; border-radius: 10rpx; padding: 30rpx 24rpx; box-sizing: border-box;
		.title { font-size: 28rpx; color: rgba(0,0,0,0.45); }
		.row {
			margin-top: 20rpx; display: flex; align-items: center; justify-content: space-between;
			view { font-size: 28rpx; color: rgba(0,0,0,0.85); }
		}
	}
	.h4 { font-weight: 500; font-size: 32rpx; color: rgba(0,0,0,0.85); }
	.h8 { font-size: 26rpx; color: rgba(0,0,0,0.45); margin-top: 12rpx; }
	.list {
		margin-top: 24rpx; background-color: #FFFFFF;
		.item {
			margin: 0 24rpx; box-sizing: border-box; height: 109rpx; border-bottom: 1rpx solid #E8E8E8; display: flex; align-items: center; justify-content: space-between;
			&:last-child { border-bottom: none; }
			.label { font-size: 30rpx; color: rgba(0,0,0,0.85); }
			.noChange { width: 42rpx; height: 42rpx; border-radius: 50%; border: 1rpx solid rgba(0,0,0,0.2); }
			.isChange {
				width: 42rpx; height: 42rpx; border-radius: 50%; border: 1rpx solid #03AE80; background-color: #03AE80; position: relative;
				::v-deep .u-icon{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
			}
		}
	}
	.footer {
		position: fixed; left: 0; bottom: 0; width: 100%; background: #FFFFFF; box-shadow: 0rpx -1rpx 6rpx 0rpx rgba(0,0,0,0.05); padding: 20rpx 24rpx 0; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-end;
		.btn { width: 200rpx; height: 80rpx; line-height: 80rpx; text-align: center; border-radius: 66rpx; font-size: 30rpx; }
		.btn1 { border: 1rpx solid rgba(0,0,0,0.45); color: rgba(0,0,0,0.45); margin-right: 24rpx; }
		.btn2 { background: #03AE80; color: #FFFFFF; }
		.btn3 { width: 654rpx; height: 90rpx; background: #03AE80; border-radius: 49rpx; line-height: 90rpx; text-align: center; font-weight: 500; font-size: 32rpx; color: #FFFFFF; margin: 0 auto; }
	}
}
</style>