<template>
	<view class="form">
		<u-form ref="formRef" :model="form" :rules="rules" label-width="200px" label-position="top">
			<view class="card">
				<u-form-item>
					<view class="switch-wrap">
						<view class="top">
							<text class="t">开启积分</text>
							<u-switch v-model="form.enableRewards" :active-value="1" :inactive-value="0"></u-switch>
						</view>
						<view class="info">
							<text class="t">开启后，所有用户可通过消费获得积分及可用积分抵扣支付</text>
						</view>
					</view>
				</u-form-item>
			</view>
			<view class="card">
				<u-form-item prop="consumeAmount">
					<view class="switch-wrap">
						<view class="top">
							<text class="t">消费送积分</text>
						</view>
						<view class="info">
							<text class="i">每消费</text>
							<view class="ipt">
								<u-input placeholder="请输入" :maxlength="8" v-model="form.consumeAmount" @change="consumeAmountInput">
									<template #suffix>
										<text>元</text>
									</template>
								</u-input>
							</view>
							<text class="i">获得1积分</text>
						</view>
					</view>
				</u-form-item>
				<u-form-item prop="minPaymentAmount">
					<view class="switch-wrap">
						<view class="top">
							<text class="t">可抵扣门槛</text>
						</view>
						<view class="info">
							<view class="ipt">
								<u-input placeholder="请输入" :maxlength="8" v-model="form.minPaymentAmount" @change="minPaymentAmountInput">
									<template #suffix>
										<text>元</text>
									</template>
								</u-input>
							</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item prop="maxDeductionRatio">
					<view class="switch-wrap">
						<view class="top">
							<text class="t">最高抵扣比例</text>
						</view>
						<view class="info">
							<view class="ipt">
								<u-input placeholder="请输入" :maxlength="8" v-model="form.maxDeductionRatio" @change="maxDeductionRatioInput">
									<template #suffix>
										<text>%</text>
									</template>
								</u-input>
							</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item prop="equivalentPoints">
					<view class="switch-wrap">
						<view class="top">
							<text class="t">抵扣积分比例</text>
						</view>
						<view class="info">
							<text class="i">1元等于</text>
							<view class="ipt">
								<u-input placeholder="请输入" :maxlength="8" v-model="form.equivalentPoints" @change="equivalentPointsInput">
									<template #suffix>
										<text>积分</text>
									</template>
								</u-input>
							</view>
						</view>
					</view>
				</u-form-item>
			</view>
			<view class="card">
				<u-form-item>
					<view class="switch-wrap">
						<view class="top">
							<text class="t">开启积分商城</text>
							<u-switch v-model="form.enablePointsMall" :active-value="1" :inactive-value="0"></u-switch>
						</view>
					</view>
				</u-form-item>
			</view>
		</u-form>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { filterNumberInput } from '@/utils/index.js';
import { pointsConfigPost, pointsConfigGet } from '@/http/api/market/point.js';

const formRef = ref(null);
const form = ref({
	enableRewards: 0,
	consumeAmount: '', // 每消费xx元赠送1积分
	minPaymentAmount: '', // 下单实付抵扣门槛
	maxDeductionRatio: 100, // 下单最高抵扣比例
	equivalentPoints: '', // 下单抵扣积分比例 1元=?积分
	enablePointsMall: 0 // 开启积分商城
});

const rules = ref({
	consumeAmount: [
		{
			required: true,
			trigger: ['blur'],
			message: '请输入',
			validator: (rule, value, callback) => {
				if (form.value.consumeAmount < 0 || form.value.consumeAmount === '') {
					return false;
				} else {
					return true;
				}
			}
		}
	],
	minPaymentAmount: [
		{
			required: true,
			trigger: ['blur'],
			message: '请输入',
			validator: (rule, value, callback) => {
				if (form.value.minPaymentAmount < 0 || form.value.minPaymentAmount === '') {
					return false;
				} else {
					return true;
				}
			}
		}
	],
	maxDeductionRatio: [
		{
			required: true,
			trigger: ['blur'],
			message: '请输入',
			validator: (rule, value, callback) => {
				if (form.value.maxDeductionRatio < 0 || form.value.maxDeductionRatio === '') {
					return false;
				} else {
					return true;
				}
			}
		}
	],
	equivalentPoints: [
		{
			required: true,
			trigger: ['blur'],
			message: '请输入',
			validator: (rule, value, callback) => {
				if (form.value.equivalentPoints < 0 || form.value.equivalentPoints === '') {
					return false;
				} else {
					return true;
				}
			}
		}
	]
});

function consumeAmountInput(e) {
	setTimeout(() => {
		form.value.consumeAmount = filterNumberInput(e);
	}, 50);
}

function minPaymentAmountInput(e) {
	setTimeout(() => {
		form.value.minPaymentAmount = filterNumberInput(e);
	}, 50);
}

function maxDeductionRatioInput(e) {
	setTimeout(() => {
		form.value.maxDeductionRatio = filterNumberInput(e, 1);
		if (form.value.maxDeductionRatio > 100) {
			form.value.maxDeductionRatio = 100;
		}
	}, 50);
}

function equivalentPointsInput(e) {
	setTimeout(() => {
		form.value.equivalentPoints = filterNumberInput(e, 1);
	}, 50);
}

// 提交
function submitHandle() {
	formRef.value
		.validate()
		.then(async () => {
			try {
				uni.showLoading({
					title: '保存中...',
					mask: true
				});
				await pointsConfigPost(form.value);
				uni.showToast({
					title: '保存成功',
					icon: 'none'
				});
			} catch (error) {
				console.log(error);
			}
			uni.hideLoading();
		})
		.catch(() => {});
}

// 获取配置
async function pointsConfigGetAjax() {
	try {
		uni.showLoading({
			title: '加载中...',
			mask: true
		});
		const res = await pointsConfigGet();
		form.value = res;
	} catch (error) {
		console.log(error);
	}
	setTimeout(() => {
		uni.hideLoading();
	}, 300);
}

defineExpose({
	submitHandle
});

onMounted(() => {
	pointsConfigGetAjax();
});
</script>

<style scoped lang="scss">
.card {
	background-color: #fff;
	border-radius: 20px;
	padding: 28upx;
	&:not(:last-child) {
		margin-bottom: 28upx;
	}
}
.switch-wrap {
	flex: 1;
	width: 100%;
	.top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.t {
			font-size: 32upx;
			color: #333;
			font-weight: bold;
		}
	}
	.info {
		padding-top: 16upx;
		display: flex;
		align-items: center;
		gap: 16upx;
		.i {
			font-size: 28upx;
			color: #666;
		}
		.ipt {
			flex: 1;
		}
		.t {
			font-size: 24upx;
			color: #666;
		}
	}
}
</style>
