<template>
	<view class="boxconstant">
		<view class="boxconstantbox"
			style="border-radius: 18px 18px 0 0;padding:32rpx 24rpx;border-bottom: 2rpx solid #E5E5E5;">
			<view class="boxconstantbox_one">
				充值设置
			</view>
			<view class="boxconstantbox_tow">
				<text>用户消费结账时，成功充值</text>
				<input class="text" type="number" :min='2' v-model="form.rechargeTimes" @change="rechargeTimesInput"/>
				<text>倍的金额本单即可享受免单</text>
			</view>
		</view>
		<view class="boxconstantbox" style="border-radius: 0 0  18px 18px;">
			<view class="boxconstantbox_one">
				充值门槛
			</view>
			<view class="boxconstantbox_tow">
				<text>订单支付金额需满</text>
				<input class="text" type="digit" v-model="form.rechargeThreshold" @change="form.rechargeThreshold = $utils.isMoney(form.rechargeThreshold)"></input>
				<!-- <input class="text" type="digit" v-model="form.rechargeThreshold" @input="form.rechargeThreshold = 2"></input> -->
				<!-- <input class="text" type="digit" v-model.lazy="form.rechargeThreshold" @input="form.rechargeThreshold = $utils.debounce($utils.isMoney(form.rechargeThreshold))"></input> -->
				<!-- <input class="text" type="digit" v-model="form.rechargeThreshold" @input="form.rechargeThreshold = $utils.isMoney(form.rechargeThreshold)"></input> -->
				<text> 元，才能使用</text>
			</view>
		</view>
		<view class="oneboxconstant">
			<view class="oneboxconstant_one">
				功能启用
			</view>
			<up-switch v-model="form.enable" size="18"></up-switch>
		</view>
		<view class="boxconstantbox"
			style="margin-top:24rpx; padding:32rpx 24rpx; border-radius: 0 0  18px 18px;">
			<view class="boxconstantbox_one" style="margin-bottom: 15rpx;">
				充值说明
			</view>
			<view>
				<up-textarea v-model="form.rechargeDesc" placeholder="请输入内容"></up-textarea>
			</view>
		</view>
		<view class="save" @click="editFreeDing">
			保存
		</view>

	</view>
</template>

<script setup>
	import { onShow ,onLoad} from '@dcloudio/uni-app';
	import { reactive, ref, watch } from 'vue';
	
	import { getFreeDing, updateFreeDing } from '@/http/api/freeDing.js'
	const form = reactive({
		rechargeTimes: 2,
		rechargeThreshold: '',
		enable: false,
		rechargeDesc: '',
	});
	onLoad(()=>{
		// uni.$utils.inputReg.bind()()
	})
	onShow(() => {
		getlist()
	})
	/**
	 * 获取配置信息
	 */
	const getlist = async () => {
		let res = await getFreeDing()
		Object.assign(form, res)
	}
	
	let rechargeTimesInput = (e) => {
		if( uni.$utils.isNumber(e.detail.value) == '' || uni.$utils.isNumber(e.detail.value) < 2 ){
			form.rechargeTimes = 2;
			return;
		}
		form.rechargeTimes = uni.$utils.isNumber(e.detail.value)
	}
	
	/**
	 * 修改配置信息
	 */
	const editFreeDing = async () => {
		let res = await updateFreeDing(form)
		uni.showToast({
			title: '保存成功'
		})
		Object.assign(form, res)
		setTimeout(() => {
			uni.navigateBack()
		}, 1500)
	}

</script>

<style lang="scss" scoped>
	page {
		background: #F9F9F9;
	}

	.boxconstant {
		padding: 32rpx 28rpx;

		.boxconstantbox {
			padding: 32rpx 24rpx;
			width: 100%;
			background: #FFFFFF;

			.boxconstantbox_one {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
			}

			.boxconstantbox_tow {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				// display: flex;
				// justify-content: flex-start;
				// align-items: center;
				// flex-wrap: wrap;
				// align-content: flex-start;
				.text {
					display:inline-flex;
					text-align: center;
					margin: 0 12rpx;
					width: 118rpx;
					height: 48rpx;
					line-height: 48rpx;
					background: #FFFFFF;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 2rpx solid #E5E5E5;
				}
			}
		}

		.oneboxconstant {
			margin-top: 32rpx;
			width: 100%;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			padding: 32rpx 24rpx;

			.oneboxconstant_one {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}

		}

		.save {
			margin: 100rpx auto 50rpx auto;
			width: 530rpx;
			height: 80rpx;
			background: #318AFE;
			border-radius: 56rpx 56rpx 56rpx 56rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
		}
	}
</style>