<template>
	<view class="column hb bgf">
		<view class="column align-center pt50 mlr50 pb40" style="border-bottom: 2rpx solid #f5f5f5;">
			<view class="base-success fs52 bold">
				<text>+</text>
				<text>{{countDeatil.payMoney?countDeatil.payMoney.toFixed(2):'0.00'}}</text>
			</view>
			<view class="mt8 base-color-3" v-if="countDeatil.remark">备注:{{countDeatil.remark}}</view>
		</view>
		<view class="m40 fs24">
			<view class="justify-start align-center ptb4">
				<text style="width: 20%;" class="base-color-6">付款时间</text>
				<text>{{countDeatil.payTime}}</text>
			</view>
			<view class="justify-start align-center ptb4">
				<text style="width: 20%;" class="base-color-6">付款单号</text>
				<text>{{countDeatil.payCode}}</text>
			</view>
			<view class="justify-start align-center ptb4">
				<text style="width: 20%;" class="base-color-6">商户单号</text>
				<text>{{countDeatil.tradeNo}}</text>
			</view>
		</view>
		<view class="ptb40 fs24 mlr40" style="border-top: 2rpx solid #f5f5f5;border-bottom: 2rpx solid #f5f5f5;"
		v-if="countDeatil.refundAuditStatus!==null">
			<view class="justify-start align-center ptb4">
				<text style="width: 20%;" class="base-color-6">退款记录</text>
				<view>
					<view class="base-color-red mb8" v-if="countDeatil.refundAuditStatus==1">
						已退款￥{{countDeatil.refundMoney?countDeatil.refundMoney.toFixed(2):'0.00'}}</view>
					<view class="orangecol" v-if="countDeatil.refundAuditStatus==2">
						拒绝退款￥{{countDeatil.refundMoney?countDeatil.refundMoney.toFixed(2):'0.00'}}</view>
					<view class="orangecol" v-if="countDeatil.refundAuditStatus==0">
						待审核￥{{countDeatil.refundMoney?countDeatil.refundMoney.toFixed(2):'0.00'}}</view>
					<text>{{countDeatil.refundTime}}</text>
				</view>
			</view>
		</view>
		<view class="justify-start align-center p20 box mt20">
			<view class="fs28 mr20" v-if="countDeatil.refundAuditStatus">当前状态</view>
			<view class="review" @click="showReview=true" v-if="countDeatil.refundAuditStatus==0&&companyUserType=='00'">退款审核</view>
			<view class="refunding" @click="showReview=true" v-if="countDeatil.refundAuditStatus==0&&companyUserType=='01'">待审核</view>
			<view class="refuned" v-if="countDeatil.refundAuditStatus==2">拒绝退款</view>
			<view class="refuned" v-if="countDeatil.refundAuditStatus==1">已退款</view>
			<view class="refund" @click="showRefund=true" v-if="countDeatil.refundAuditStatus==3" >退款</view>
			<!-- <view class="refuned" v-if="countDeatil.refundAuditStatus==-1||countDeatil.refundAuditStatus==1">已退款</view> -->
		</view>
		<view>
			<u-modal :show="showRefund" :title="title" :content='content'
			:showCancelButton="true" @cancel='showRefund=false' @confirm='toRefund'></u-modal>
		</view>
		<view>
			<u-modal :show="showReview" :title="titleReview" :content='contentReview' cancelText='拒绝' confirmText='通过'
			 :showCancelButton='true' @cancel='toReview(2)' @confirm='toReview(1)'></u-modal>
		</view>
	</view>
</template>

<script>
	import {getPaymentDetail,applyRefund,refundStorePayment,auditRefund} from '@/api/payment'
	export default {
		data() {
			return {
				paymentId:null,
				showRefund:false,
				showReview:false,
				title:'退款',
				content:'确认退款金额并退款！',
				titleReview:'审核',
				contentReview:'确认退款金额并同意当前订单退款！',
				countDeatil:[],
				companyUserType:null
			}
		},
		onLoad(option) {
			this.paymentId=option.paymentId
			this.getPaymentDetails()
			console.log(this.paymentId)
			this.companyUserType=uni.getStorageSync('companyUserType')
		},
		methods: {
			toReview(type){
				const data={
					paymentId:this.paymentId,
					refundStatus:type
				}
				auditRefund(data).then(res=>{
					if(res.code==200){
						uni.showToast({
							icon:'none',
							title: '操作成功！',
						});
						this.showReview=false
						this.getPaymentDetails()
					}else{
						uni.showToast({
							icon:'none',
							title: res.msg,
						});
					}
				})
			},
			toRefund(){
				if(this.companyUserType=='00'){
					this.usermanagerefund()
				}else{
					this.userRefund()
				}
			},
			userRefund(){
				const data={
					paymentId:this.paymentId,
					refundMoney:this.countDeatil.payMoney
				}
				applyRefund(data).then(res=>{
					if(res.code==200){
						uni.showToast({
							icon:'none',
							title: '操作成功！',
						});
						uni.navigateBack({
							delta:1
						})
						this.showRefund=false
						this.getPaymentDetails()
					}else{
						uni.showToast({
							icon:'none',
							title: res.msg,
						});
					}
				})
			},
			usermanagerefund(){
				const data={
					paymentId:this.paymentId,
					refundMoney:this.countDeatil.payMoney
				}
				refundStorePayment(data).then(res=>{
					if(res.code==200){
						uni.showToast({
							icon:'none',
							title: '操作成功！',
						});
						uni.navigateBack({
							delta:1
						})
						this.showRefund=false
						this.getPaymentDetails()
					}else{
						uni.showToast({
							icon:'none',
							title: res.msg,
						});
					}
				})
			},
			getPaymentDetails(){
				getPaymentDetail({paymentId:this.paymentId}).then(res=>{
					console.log(res)
					if(res.code==200){
						console.log(res)
						this.countDeatil=res.data
					}else{
						uni.showToast({
							icon:'none',
							title: res.msg,
						});
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.box{
	view{
		padding: 10rpx 28rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
	}
}
.review{
	background-color: #ff8b06;
	color: #fff;
}
.refund{
	background-color: #ff1201;
	color: #fff;
}
.refunding{
	color: #ff8b06;
}
.refuned{
	color: #ff1201;
}
.orangecol{
	color: #ffa006;
}
</style>
