<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">
				申请退款
			</block>
		</cu-custom>
		
		<view class="flex-direction" >
			
			<view class="padding" style="background-color: #F6F6F6;" >
				<text class="" style="color: #333;26rpx">温馨提示：</text>
				<text class="" style="color: #999;26rpx">
					 如果对收到的商品不满意，您可先联系商家进行沟通，如需退款，将商家退款给您。如与商家无法达成退款协议，再申请【平台介入退款】，谢谢配合。
				</text>
			</view>
			
			<view class="padding" style="background-color: #FFF;">
				<view class=" flex align-center justify-between" >
				   <text class="" style="color: #111;font-weight: bold;font-size: 30rpx;">退款方式</text>
				   <text class="" style="color: #111;font-size: 30rpx;">原支付返还</text>
				</view>
			</view>
			<view class="" style="background-color: #F6F6F6;height: 1rpx;">

			</view>
			<view class="flex-direction padding " style="background-color: #FFFFFF;">
				<text class="" style="color: #111;font-weight: bold;font-size: 30rpx;">
					退款原因
				</text>
				<view class="padding" style="background-color: #F8F9FA;height: 250rpx;margin-top: 15rpx;border-radius: 15rpx;">
					<input v-model="content" type="text" placeholder="请输入更多备注..." style="color: #999999;font-size: 28rpx;" />
				</view>
			</view>
			<view class="" style="width: 85%;margin: 0 auto;margin-top: 40vw;">
			
				<u-button v-if="content.length>0" :custom-style="customStyle2" hover-class="none" @click="applyForRefund" shape="circle">确定
				</u-button>
				<u-button v-else :custom-style="customStyle1" hover-class="none"  shape="circle">确定
				</u-button>
			 
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				///输入信息
				 content:"",
				 orderId:"",
				
				customStyle1: {
									// 保存按钮样式
									'backgroundColor': '#E0E0E0',
									'color': '#fff',
									'borderRadius': '50rpx',
									'height':'90rpx',
									'font-size':'33rpx'
								},
			    customStyle2: {
			    					// 保存按钮样式
			    					'backgroundColor': '#FC6035',
			    					'color': '#fff',
			    					'borderRadius': '50rpx',
			    					'height':'90rpx',
			    					'font-size':'33rpx'
			    				},
			}
		},
		onLoad(options) {
			var orderId = JSON.parse(options.orderId)
			this.orderId = orderId
			console.log(orderId)
		},
		methods: {
			applyForRefund(){
				var param = {
					"orderId":this.orderId,
					"refundReason":this.content
				}
				var that = this
				this.$u.api.applyForRefund(param).then(res => {
						console.log(res)
						if (res.code == 200) {
							that.$api.msg('申请退款成功')
							uni.navigateBack({
								delta:1
							});
						  	// that.contentData = res.data		
						}
					}).catch(error => {
				
					})
			}
		}
	}
</script>

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