<template>
	<JeepayBackground>
	  <view class="page-wrapper jeepay-edit-form">
		<JeepayCustomNavbar :title="vdata.ruleId ? '修改充值规则' : '创建充值规则' " backCtrl="back" />
		<uni-forms ref="formRef" :rules="rules" :model="vdata.formData" :label-width="140">
			
		  <uni-forms-item required label="充值金额" name="rechargeAmount">
			  <uni-easyinput type="digit" v-model="vdata.formData.rechargeAmount" placeholder="请输入充值金额" :inputBorder="false"></uni-easyinput>
		  </uni-forms-item>
		  
		  <uni-forms-item required label="赠送金额" name="giveAmount">
			<uni-easyinput type="digit" v-model="vdata.formData.giveAmount" placeholder="请输入赠送金额" :inputBorder="false"></uni-easyinput>
		  </uni-forms-item>
		  
		  <uni-forms-item required label="排序" name="sort">
				<uni-easyinput type="number" v-model="vdata.formData.sort" placeholder="请输入排序" :inputBorder="false"></uni-easyinput>
		  </uni-forms-item>
		  
		<JeepayTableListItem v-if="vdata.ruleId" title="状态" subtitle="状态禁用后，规则将无法使用">
			<template #titleRight>
				<JeepayStateSwitch v-model:state="vdata.formData.state" :showSwitchType="true" :confirm='false'  />
			</template>
		</JeepayTableListItem>
		
		  <uni-forms-item required label="备注" name="remark">
				<uni-easyinput v-model="vdata.formData.remark" placeholder="请输入备注" :inputBorder="false"></uni-easyinput>
		  </uni-forms-item>
	   
	   </uni-forms>
		
		<view class="confirm-wrapper">
		  <view class="confirm-button flex-center" hover-class="touch-button" @tap="confirmFunc"> {{ vdata.ruleId ? '确认修改' : '确认创建' }}</view>
		</view>
		
	  </view>
	</JeepayBackground>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { reqLoad, API_URL_MEMBER_RECHARGE_RULES } from '@/http/apiManager.js'
import infoBox from '@/commons/utils/infoBox.js';
import go from '@/commons/utils/go.js'
import formUtil from '@/commons/utils/formUtil.js'
import cal from '@/commons/utils/cal.js'
import emit from '@/commons/utils/emit.js'

const formRef = ref()

onLoad((options) => {
	
	// 修改页面 
	if(options.ruleId){
		vdata.ruleId = options.ruleId
		reqLoad.getById(API_URL_MEMBER_RECHARGE_RULES, vdata.ruleId).then(({bizData}) => {
			vdata.formData = bizData
			vdata.formData.rechargeAmount = cal.cert2Dollar(vdata.formData.rechargeAmount)
			vdata.formData.giveAmount = cal.cert2Dollar(vdata.formData.giveAmount)
		})
	}
	
})

	
const rules = {
	rechargeAmount: {
		rules:[ formUtil.rules.requiredInput('充值金额') ]
	}
}


const vdata = reactive({
	
	ruleId: null, // 新建 or 修改 
	
	 // 表单数据 
	formData: {
		state: 1
	}
})


function confirmFunc(){
  if(vdata.formData.rechargeAmount<=0) return infoBox.showToast('充值金额 不能小于0')
	const REG_AMOUNT = /^([0-9]{1}|^[1-9]{1}\d{1,15})(\.\d{1,2})?$/
	if (!REG_AMOUNT.test(vdata.formData.rechargeAmount)) {
		return infoBox.showToast('请输入正确的充值金额，最多两位小数')
	}
	if (vdata.formData.giveAmount && !REG_AMOUNT.test(vdata.formData.giveAmount)) {
		return infoBox.showToast('请输入正确的赠送金额，不能小于0 最多保留两位小数')
	}
	
	formUtil.validate(formRef.value).then(() => {
		return reqLoad.addOrUpdate(vdata.ruleId, API_URL_MEMBER_RECHARGE_RULES, vdata.formData)
	})
	.then(( {bizData} ) => {
		go.back(1, emit.ENAME_REF_RECHARGE_RULE_LIST) // 返回页面 && 更新 
	})
	
}

</script>


<style lang="scss" scoped>
input {
  font-size: 32rpx;
}
.f-label {
	width: 240rpx;
}
.selected-sex {
  display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: 45rpx;
	margin-bottom: 10rpx;
  font-size: 32rpx;
  color: #b3b3b3;
  image {
    width: 120rpx;
    height: 120rpx;
		margin-top: -40rpx;
  }
	.selected-box {
		color: #000;
	}
}
.confirm-wrapper {
  padding: 50rpx 30rpx;
  .confirm-button {
    height: 110rpx;
    color: #fff;
    border-radius: 20rpx;
    background: $jeepay-bg-primary;
  }
}
</style>
