<template>
	<view class="p30">
		<view style="font-size: 36rpx; font-weight: bold; margin-top: 40rpx">
			退款信息
			<text style="font-size: 26rpx; color: chocolate; font-weight: 500">活动金额不在退款范围内</text>
		</view>
		<view style="display: flex; align-items: center; height: 100rpx; justify-content: space-between">
			<view>￥</view>
			<input v-model="dataFrom.amount" :placeholder="`可申请退款${balance}元`" style="width: 500rpx; font-size: 32rpx" type="number" />
			<view @click="dataFrom.amount = balance" style="font-size: 28rpx; color: #4879e6">全部</view>
		</view>
		<view style="font-size: 28rpx; margin-bottom: 20rpx">申请退款理由</view>
		<view style="margin-bottom: 30rpx">
			<up-textarea v-model="dataFrom.refundReason" placeholder="请输入退款理由"></up-textarea>
		</view>
		<view style="font-weight: bold; font-size: 30rpx; margin-bottom: 20rpx">退款须知：</view>
		<view style="font-size: 26rpx; color: #60646b; line-height: 50rpx">1.退款金额不包含充值时使用的第三方优惠抵扣金额，退款时充值享受到的优惠金额也将全部扣除</view>
		<view style="font-size: 26rpx; color: #60646b; line-height: 50rpx">2.您的退款金额到账时间由各充值渠道（微信/支付宝）决定，请耐心等待，约1~3工作日到账</view>
		<view style="font-size: 26rpx; color: #60646b; line-height: 50rpx">3.退款按照充值记录进行逐笔退款，一次申请可能产生多笔退款到账记录，请注意查收</view>
		<view style="font-size: 26rpx; color: #60646b; line-height: 50rpx">4.正在充电或存在异常订单时无法进行退款操作</view>
		<view style="font-size: 26rpx; color: #60646b; line-height: 50rpx">5.根据各充值渠道规则，只可退一年内的充值金额</view>
		<view style="position: fixed; bottom: 0; left: 0; width: 750rpx; padding: 20rpx 30rpx; border-top: 1rpx solid #eee" class="flex-acsb">
			<view style="width: 230rpx">
				<!-- openType="contact" -->
				<up-button @click="toKft" :customStyle="{ height: '80rpx' }" text="联系客服" shape="circle"></up-button>
			</view>
			<view style="width: 400rpx">
				<up-button @click="refundTo" :customStyle="{ height: '80rpx' }" color="#4879e6" text="提交" shape="circle"></up-button>
			</view>
		</view>
	</view>
</template>

<script>
import { refund } from '@/api/api.js';
export default {
	data() {
		return {
			balance: 0,
			dataFrom: {
				amount: '',
				refundReason: ''
			}
		};
	},
	onLoad(options) {
		if (options.balance) {
			this.balance = options.balance;
		}
	},
	methods: {
		toKft() {
			uni.makePhoneCall({
				phoneNumber: '4008005326' //仅为示例
			});
		},
		refundTo() {
			if (!this.dataFrom.amount) {
				return uni.showToast({
					title: '请输入退款金额',
					icon: 'none'
				});
			}
			refund(this.dataFrom).then((res) => {
				uni.showModal({
					title: '提示',
					content: '提交成功',
					showCancel: false,
					success: function (res) {
						uni.navigateBack();
					}
				});
			});
		}
	}
};
</script>

<style>
page {
	background-color: #fff;
}
</style>
