<template>
	<up-popup :show="show" @close="close" round="20" mode="center" customStyle="width: 80%;">
	    <view class="head">
	        <text></text>
	        <text class="title">{{pageData.formData.orderId?'挂账付款':'挂账还款'}}</text>
			<text></text>
		</view>
		<view class="content">
			<up-form
				labelPosition="top"
				labelWidth="120"
				required
				:model="pageData.formData"
				:rules="pageData.rules"
				ref="uFormRef"
				:labelStyle="{fontSize: '28rpx',color: '#333',fontWeight: 'bold'}"
				>
				<view class="card top" v-if="pageData.formData.repaymentMethod == 'total'">
					<view>
						<text class="label">挂账人</text>
						<text class="value">{{pageData.debtor.debtor}}</text>
					</view>
					<view>
						<text class="label">挂账金额</text>
						<text class="value">{{pageData.debtor.owedAmount || 0}}</text>
					</view>
					<view>
						<text class="label">账户余额</text>
						<text class="value">{{pageData.debtor.accountBalance || 0}}</text>
					</view>
				</view>
				
				<view class="card">
					<up-form-item label="还款方式" labelPosition="left" v-if="pageData.formData.repaymentMethod == 'total'">
						<view style="width: 100%;display: flex;justify-content: flex-end;">
							<up-radio-group v-model="pageData.formData.repaymentMethod" placement="row" style="justify-content: flex-end;">
							    <view v-for="(item, index) in pageData.repaymentMethodList" :key="index">
									<up-radio
										v-if="pageData.formData.repaymentMethod == item.value"
									  :label="item.label"
									  :name="item.value"
									></up-radio>
								</view>
							</up-radio-group>
						</view>
					</up-form-item>
					
					<up-form-item label="还款金额（￥）" prop="repaymentAmount">
						<up-input v-model="pageData.formData.repaymentAmount" type="digit" @change="pageData.formData.repaymentAmount = $utils.isMoney(pageData.formData.repaymentAmount)" placeholder="请输入金额" customStyle="padding: 0!important;">
							<template #prefix>
								<up-button color="#e5e5e5" customStyle="font-size:32rpx;color: #999;width: 124rpx;margin-right: 10rpx;" :hairline="false">￥</up-button>
							</template>
						</up-input>
					</up-form-item>
					<up-form-item label="支付方式" prop="paymentMethod">
						<up-input v-model="pageData.formData.paymentMethod" placeholder="请输入支付方式"></up-input>
					</up-form-item>
					<up-form-item label="备注" prop="remark">
						<up-input v-model="pageData.formData.remark" placeholder="请输入备注"></up-input>
					</up-form-item>
				</view>
				
			</up-form>
			<view class="bottomPop">
				<view class="save" @click="affirm">保存</view>
				<view class="cancel" @click="close">取消</view>
			</view>
		</view>
		
	</up-popup>
</template>

<script setup>
	import { reactive,ref } from 'vue';
	
	import { getCreditBuyerPage,creditBuyerRepayment,creditBuyerOrderPay } from '@/http/api/buyer.js';
	
	const props=defineProps({
		show:{
			type:Boolean,
			default:false
		}
	})
	const emits=defineEmits(['close', "affirm"])
	const pageData = reactive({
		id: null,
		title: "",
		debtor: {
			debtor: '',
			formData: 0,
			accountBalance: 0,
		},
		repaymentMethodList: [
	        { label: '按总金额还款', value: 'total' },
	        { label: '按订单还款', value: 'order' }
		],
		formData: {
			id: null,
			creditBuyerId: null,
			orderId: null,
			repaymentMethod: '',
			repaymentAmount: '',
			paymentMethod: '',
			remark: ''
		},
		rules: {  
		    'repaymentAmount': {  
		      type: 'string',  
		      required: true,  
		      message: '请输入金额',  
		      trigger: ['blur'],  
		    },  
		    'paymentMethod': {
		      type: 'string',  
		      required: true,  
		      message: '请输入支付方式',  
		      trigger: ['blur'],  
		    }, 
			
		  },  
	})
	// 表单引用  
	const uFormRef = ref(null);  
	let show=ref(false)

	function open(options){
		show.value = true;
		if (options.creditBuyerId) {
			pageData.formData.creditBuyerId = options.creditBuyerId;
			pageData.formData.orderId = options.order.orderId;
			pageData.formData.repaymentMethod = options.repaymentMethod;
		
		} else {
			pageData.formData.id = options.id;
			pageData.formData.repaymentMethod = options.repaymentMethod;
			pageData.debtor.debtor = options.debtor;
			pageData.debtor.owedAmount = options.owedAmount;
			pageData.debtor.accountBalance = options.accountBalance;
		}
		pageData.formData.repaymentAmount = "";
		pageData.formData.paymentMethod = "";
		pageData.formData.remark = "";
	}
	
	function close(){
		show.value = false;
		emits('close')
	}
	/**
	 * 确认
	 */
	let affirm = uni.$utils.debounce(() => {
		uFormRef.value.validate().then(valid => {
		    if (valid) {  
				console.log(pageData.formData)
				let params = {
					...pageData.formData
				}
				if ( !pageData.formData.orderId ) {
					creditBuyerRepayment(params).then((res) => {
						console.log(res.repaymentCount > 0)
						emits('affirm')
						close();
						
					})
				} else {
					creditBuyerOrderPay(params).then((res) => {
						emits('affirm')
						close();
						
					})
				}
				
				
		    }
		}).catch(() => {  
		    // 处理验证错误  
		}); 
		
	},1000)
	defineExpose({
		open,close,affirm
	})
</script>

<style lang="scss" scoped>
	.head{
		display: flex;
		padding: 32rpx 28rpx;
		align-items: center;
		justify-content: space-between;
		.title{
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
		}
	}
	.content{
		padding: 0 32rpx 32rpx 32rpx;
		.card{
			background-color: #fff;
			margin-bottom: 42rpx;
		}
		.card.top{
			display: flex;
			align-items: center;
			justify-content: space-around;
			background: #F8F8FA;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			margin-top: 20rpx;
			margin-bottom: 48rpx;
			padding: 16rpx 0 ;
			>view{
				display: flex;
				flex-direction: column;
				align-items: center;
				.label{
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					margin-bottom: 8rpx;
				}
				.value{
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
				}
			}
		}
		.bottomPop{
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			>view {
				width: 100%;
				margin: 0 auto;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 32rpx;
				border-radius: 56rpx 56rpx 56rpx 56rpx;
				text-align: center;
			}
			.save{
				color: #fff;
				background: #318AFE;
			}
			.cancel{
				font-weight: 400;
				color: #999999;
			}
		}
		
	}

</style>