<template>
	<JeepayBackground>
		<view class="page-wrapper jeepay-edit-form">
			<JeepayCustomNavbar :title="vdata.ruleId ? '修改红包规则' : '创建红包规则' " backCtrl="back" />
			<view class="hb_mian">
				<uni-forms ref="formRef" :rules="rules" :model="vdata.formData" :label-width="130">

					<uni-forms-item required label="红包类型" name="packetType">
						<JeepayRadioPopupView label="请选择红包类型" v-model:value="vdata.formData.packetType"
							:list="[{ label: '门店专享', value: 1}]">
						</JeepayRadioPopupView>
					</uni-forms-item>

					<uni-forms-item required label="营销折扣比例" name="marketing">
						<JeepayRadioPopupView label="请选择营销折扣比例" v-model:value="vdata.formData.marketing"
							:list="vdata.marketingList" @change="getMarketingList">
						</JeepayRadioPopupView>
					</uni-forms-item>

					<uni-forms-item required label="平台补贴比例" name="marketScale">
						<uni-easyinput v-model="vdata.formData.marketScale" class="p-box" :disabled="true"
							placeholder="请选择营销折扣比例" :inputBorder="false"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item required label="顾客获得红包比例" name="userPerkScale">
						<uni-easyinput v-model="vdata.formData.userPerkScale" class="p-box" :disabled="true"
							placeholder="请选择营销折扣比例" :inputBorder="false"></uni-easyinput>
					</uni-forms-item>

					<uni-forms-item required label="领取红包后有效期" name="expireNumber">
						<JeepayRadioPopupView label="请选择领取红包后有效期" v-model:value="vdata.formData.expireNumber"
							:list="vdata.receiveList">
						</JeepayRadioPopupView>
					</uni-forms-item>

<!-- 					<JeepayTableListItem title="将规则配置到门店" class="configurationBtn">
						<template #titleRight>
							<JeepayStateSwitch v-model:state="vdata.formData.state" :showSwitchType="true"
								:confirm='false' />
						</template>
					</JeepayTableListItem> -->

					<uni-forms-item required label="将规则配置到门店" name="receivered">
						<JeepayRadioPopupView label="请选择配置到门店" v-model:value="vdata.formData.configType"
							:list="[{ label: '配置到所有门店', value: 1},{ label: '配置到指定门店', value: 2}]"
							@change="getStoreList">
						</JeepayRadioPopupView>
						<!-- <view class="store-name" @tap="selectedStore"></view> -->
					</uni-forms-item>



					<JeepayTableListItem v-show="false" title="状态" subtitle="状态禁用后，规则将无法使用" class="configurationBtn">
						<template #titleRight>
							<JeepayStateSwitch v-model:state="vdata.formData.state" :showSwitchType="true"
								:confirm='false' />
						</template>
					</JeepayTableListItem>


				</uni-forms>
			</view>
			<view class="confirm-wrapper" style="position: fixed;bottom: 40rpx;width: 92%;">
				<view class="confirm-button flex-center" hover-class="touch-button" @tap="confirmFunc">
					{{ vdata.ruleId ? '确认修改' : '确认创建' }}</view>
			</view>

		</view>
	</JeepayBackground>

	<JeepayBizinfoSelect @confirmData="confirmData" :params="vdata.params" :isShowAllBiz="false" :isCheckbox="vdata.isCheckbox"  :configMode="red" ref="jeepayPopupListSelect" />
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		reqLoad,
		API_URL_MCH_REF_PACKET_RULE_QUERY,
		API_URL_MCH_REF_PACKET_RULE_EDIT,
		API_URL_MCH_REF_PACKET_RULE_LIST,
		API_URL_MCH_REF_PACKET_RULE_ADD
	} 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()
	const jeepayPopupListSelect = ref(null)
	
	
	
	const vdata = reactive({
		// receiveList:["1","2","3","4","5","6"], 
		receiveList: [{
			label: '1个月',
			value: 1
		}, {
			label: '2个月',
			value: 2
		}, {
			label: '3个月',
			value: 3
		}, {
			label: '4个月',
			value: 4
		}, {
			label: '5个月',
			value: 5
		}, {
			label: '6个月',
			value: 6
		}],
		marketingList: [{
			label: '98折',
			value: '0'
		}, {
			label: '95折',
			value: '1'
		}, {
			label: '9折',
			value: '2'
		}, {
			label: '85折',
			value: '3'
		}, {
			label: '8折',
			value: '4'
		}],
		platformList: ['97', '93', '85', '8', '7'],
		userList: ['4', '10', '20', '30', '50'],
		ruleId: null, // 新建 or 修改 
	
		// 表单数据 
		formData: {
			state: 1,
			storeIdList:[],
		},
		confirmFormData:{},
		isCheckbox:false,
		params:null,
	})

	onLoad((options) => {
    console.log(options,'options')
		// 修改页面 
		if (options.ruleId) {
			vdata.ruleId = options.ruleId
			console.log(vdata.ruleId,'vdata.ruleId')
			reqLoad.getById(API_URL_MCH_REF_PACKET_RULE_QUERY, vdata.ruleId).then(({
				bizData
			}) => {
				console.log(bizData);
				vdata.formData = bizData
				// vdata.formData.marketScale = bizData.platScale+"折"
				let marketScale = bizData.marketScale+"折"
				console.log(marketScale);
				vdata.marketingList.map((item)=>{
					console.log(item.label);
					if(item.label==marketScale){
						vdata.formData.marketing = item.value
					}
				})
				vdata.formData.marketScale = bizData.platScale+"折"
				vdata.formData.storeIdList=[]
				if(bizData.storeId){
					vdata.formData.configType= 2
					// vdata.params={
					// 	bizType:"mchApp",
					// 	storeId:bizData.storeId,
					// }
				}else{
					vdata.formData.configType= 1
				}
				vdata.formData.storeIdList.push(bizData.storeId)
				vdata.formData.platScale = bizData.platScale+"折"
				vdata.formData.userPerkScale =Number(bizData.userPerkScale)*100+"%"
				vdata.formData.rechargeAmount = cal.cert2Dollar(vdata.formData.rechargeAmount)
				vdata.formData.giveAmount = cal.cert2Dollar(vdata.formData.giveAmount)
			})
		}

	})


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


	function confirmData(data){
		vdata.formData.storeIdList=[]
		if(data){
			data.map((item=>{
				vdata.formData.storeIdList.push(item.storeId)
			}))
		}
		console.log(vdata.formData);
	}

	function confirmFunc() {
		console.log(vdata.formData);
		vdata.confirmFormData={
			configType:vdata.formData.configType,
			expireNumber:vdata.formData.expireNumber,
			marketScale:vdata.formData.marketScale,
			packetType:vdata.formData.packetType,
			platScale:vdata.formData.platScale,
			state:vdata.formData.state,
			storeIdList:vdata.formData.storeIdList,
			userPerkScale:vdata.formData.userPerkScale
		}
		console.log(vdata.confirmFormData);
		console.log(vdata.formData.marketing);
		//处理最后一个字
		// if(vdata.confirmFormData.marketScale){
		// 	vdata.confirmFormData.marketScale= Number(vdata.confirmFormData.marketScale.substring(0,vdata.confirmFormData.marketScale.length - 1))
		// }else{
		// 	vdata.confirmFormData.marketScale=''
		// }
		vdata.confirmFormData.marketScale =vdata.marketingList[vdata.formData.marketing].label
		vdata.confirmFormData.marketScale=Number(vdata.confirmFormData.marketScale.substring(0,vdata.confirmFormData.marketScale.length-1)) 
		if(vdata.confirmFormData.userPerkScale){
			vdata.confirmFormData.userPerkScale= Number(vdata.confirmFormData.userPerkScale.substring(0,vdata.confirmFormData.userPerkScale.length - 1)/100)
		}else{
			vdata.confirmFormData.userPerkScale=''
		}
		
		
		if(typeof vdata.confirmFormData.platScale ==="string"){
			vdata.confirmFormData.platScale=Number(vdata.confirmFormData.platScale.substring(0,vdata.confirmFormData.platScale.length - 1))
		}
		
		// if(vdata.confirmFormData.platScale){
		// 	vdata.confirmFormData.platScale=Number(vdata.confirmFormData.platScale.substring(0,vdata.confirmFormData.platScale.length - 1))
		// }
		
		vdata.marketingList.map((item)=>{
			if(item.value==vdata.confirmFormData.marketing){
				vdata.confirmFormData.marketScale=Number(item.label.substring(0,item.label.length - 1))
			}
		})
		delete vdata.confirmFormData.marketing;


		if(vdata.confirmFormData.configType===1){
			vdata.confirmFormData.storeIdList=[]
		}
		
		if(!vdata.confirmFormData.packetType){
			return infoBox.showToast('请选择红包类型')
		}
		if(!vdata.confirmFormData.marketScale){
			return infoBox.showToast('请设置营销折扣比例')
		}
		if(!vdata.confirmFormData.expireNumber){
			return infoBox.showToast('请选择红包有效期')
		}
		if(!vdata.confirmFormData.configType){
			return infoBox.showToast('请选择规则配置')
		}
		// 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(() => {
			if(vdata.ruleId){			
				vdata.confirmFormData.id = vdata.ruleId;
				return reqLoad.addOrUpdate( false, API_URL_MCH_REF_PACKET_RULE_EDIT, vdata.confirmFormData)
			}else{
				return reqLoad.addOrUpdate(false,API_URL_MCH_REF_PACKET_RULE_ADD,vdata.confirmFormData)
			}
				
			})
			.then(({
				bizData
			}) => {
				go.back(1, emit.ENAME_REF_RECHARGE_RULE_LIST) // 返回页面 && 更新 
			})

	}

	function getMarketingList(value) {
		console.log(value, 'value');
		vdata.formData.marketScale = vdata.platformList[value]+'折'
		vdata.formData.userPerkScale = vdata.userList[value] + "%"
		vdata.formData.platScale=Number(vdata.platformList[value])
		console.log(vdata.formData.platScale);
	}
	const selectedStore = (e) => {
		console.log(e);
		jeepayPopupListSelect.value.open(vdata.store).then((selected) => {
			if (selected) {
				vdata.store = selected
				refTableFunc()
			}
		})
	}

	function getStoreList(e) {
		if(e===2){
			vdata.isCheckbox=true
			console.log(vdata.isCheckbox,'vdata.isCheckboxvdata.isCheckboxvdata.isCheckbox');
		}
		selectedStore()
	}
</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;
		}
	}

	.p-box .uni-input-input {
		padding: 10px;
	}
</style>

<style lang="scss">
.hb_mian{
	flex:1;
	padding: 20rpx;
	.uni-forms{
		border-radius: 20rpx;
		background: #fff;
		.uni-forms-item{
			background: none;
			padding:0 20rpx;
			border-bottom: 1px solid #eee;
		}
		.uni-forms-item__label{
			font-size: 28rpx !important;
			font-weight: 900;
			color: #000;
			text-indent: 0;
		}
		.selected-radio{
			font-size: 28rpx !important;
		}
		.uni-forms-item__content{
			font-size: 32rpx !important;
		}
		.uni-easyinput__placeholder-class{
			font-size: 28rpx !important;
			color: #b3b3b3;
			background: #fff;
			padding-right:0 !important;
		}
		.uni-easyinput__content-input{
			background: #fff !important;
		}
	}
	.configurationBtn{
		.list-item{
			padding: 0 20rpx !important;
			margin-top: 20rpx !important;
			border-bottom: 1px solid #eee;
		}

	}
}
</style>