<template>
	<view class="container">
		<u-form ref="formRef" :model="form" :rules="rules" label-position="top">
			<view class="card">
				<u-form-item>
					<view class="switch-wrap">
						<view class="top">
							<text class="t">商品类型</text>
						</view>
						<view class="info">
							<u-radio-group v-model="form.goodsCategory">
								<u-radio label="优惠券" name="优惠券"></u-radio>
								<u-radio label="其它商品" name="其它商品"></u-radio>
							</u-radio-group>
						</view>
					</view>
				</u-form-item>
				<u-form-item prop="couponId" v-if="includesString(form.goodsCategory, '优惠券')">
					<view class="switch-wrap">
						<view class="top">
							<text class="t">选择优惠券</text>
						</view>
						<view class="info">
							<view class="ipt">
								<my-select-coupon v-model="form.couponId"></my-select-coupon>
							</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item prop="goodsName">
					<view class="switch-wrap">
						<view class="top">
							<text class="t">商品名称</text>
						</view>
						<view class="info">
							<view class="ipt">
								<u-input placeholder="请输入" :maxlength="30" v-model="form.goodsName"></u-input>
							</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item prop="goodsImageUrl" v-if="includesString(form.goodsCategory, '其它商品')">
					<view class="switch-wrap">
						<view class="top">
							<text class="t">商品图片</text>
						</view>
						<view class="info">
							<my-upload-img v-model="form.goodsImageUrl"></my-upload-img>
						</view>
					</view>
				</u-form-item>
				<u-form-item prop="requiredPoints">
					<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.requiredPoints" @change="requiredPointsInput">
									<template #suffix>
										<text>积分</text>
									</template>
								</u-input>
							</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item>
					<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.extraPrice" @change="extraPriceInput">
									<template #suffix>
										<text>元</text>
									</template>
								</u-input>
							</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item prop="quantity">
					<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.quantity" @change="quantityInput"></u-input>
							</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item>
					<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.sort" @change="sortInput"></u-input>
							</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item prop="limitQuota">
					<view class="switch-wrap">
						<view class="top">
							<text class="t">每人限购</text>
							<u-switch v-model="isLimitQuota" :active-value="1" :inactive-value="0" @change="isLimitQuotaChange"></u-switch>
						</view>
						<view class="info" v-if="isLimitQuota == 1">
							<view class="ipt">
								<u-input placeholder="请输入限购数量" :maxlength="8" v-model="form.limitQuota" @change="limitQuotaInput"></u-input>
							</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item prop="limitQuota">
					<view class="switch-wrap">
						<view class="top">
							<text class="t">发放方式</text>
							<text class="intro">
								<template class="tips" v-if="includesString(form.goodsCategory, '优惠券')">系统发放</template>
								<template class="tips" v-if="includesString(form.goodsCategory, '其它商品')">需要用户到店内领取核销</template>
							</text>
						</view>
					</view>
				</u-form-item>
			</view>
			<view class="card" v-if="includesString(form.goodsCategory, '其它商品')">
				<view class="switch-wrap">
					<view class="top">
						<text class="t">商品图片</text>
					</view>
					<view class="info">
						<my-upload-imgs v-model="imgs"></my-upload-imgs>
					</view>
				</view>
			</view>
			<view class="card">
				<u-form-item prop="limitQuota">
					<view class="switch-wrap">
						<view class="top">
							<text class="t">是否上架</text>
							<u-switch v-model="form.status" :active-value="1" :inactive-value="0"></u-switch>
						</view>
					</view>
				</u-form-item>
			</view>
		</u-form>
		<my-footer-btn type="horizontal" showCancel @confirm="submitHandle" @cancel="backHandle"></my-footer-btn>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { pointsGoodsPost, pointsGoodsDetail } from '@/http/api/market/point.js';
import { includesString, filterNumberInput } from '@/utils/index.js';

const formRef = ref(null);
const isLimitQuota = ref(0);
const imgs = ref([]);
const form = ref({
	id: '',
	goodsCategory: '优惠券', // 商品类型 优惠券 其它商品
	couponId: '', // 优惠券id
	goodsName: '', // 商品名称/优惠券名称
	goodsImageUrl: '', // 商品图片URL
	requiredPoints: '', // 所需积分
	extraPrice: '', // 额外价格
	quantity: '', // 数量
	sort: 0,
	status: 1, // 是否上架 1-是 0-否
	receiveType: '', // 领取方式 店内自取、系统发放
	limitQuota: '', // 限购数量
	goodsDescription: '' // 商品详情
});

function backHandle() {
	uni.navigateBack();
}

function isLimitQuotaChange() {
	form.value.limitQuota = '';
}

const rules = ref({
	couponId: [
		{
			required: true,
			trigger: ['blur'],
			message: '请选择优惠券',
			validator: (rule, value, callback) => {
				if (form.value.couponId === '') {
					return false;
				} else {
					return true;
				}
			}
		}
	],
	goodsName: [
		{
			required: true,
			trigger: ['blur'],
			message: '请输入',
			validator: (rule, value, callback) => {
				if (form.value.goodsName === '') {
					return false;
				} else {
					return true;
				}
			}
		}
	],
	goodsImageUrl: [
		{
			required: true,
			trigger: ['change'],
			message: '请上传商品封面图',
			validator: (rule, value, callback) => {
				if (form.value.goodsImageUrl === '') {
					return false;
				} else {
					return true;
				}
			}
		}
	],
	requiredPoints: [
		{
			required: true,
			trigger: ['blur'],
			message: '请输入',
			validator: (rule, value, callback) => {
				if (form.value.requiredPoints < 0 || form.value.requiredPoints === '') {
					return false;
				} else {
					return true;
				}
			}
		}
	],
	quantity: [
		{
			required: true,
			trigger: ['blur'],
			message: '请输入',
			validator: (rule, value, callback) => {
				if (form.value.quantity < 0 || form.value.quantity === '') {
					return false;
				} else {
					return true;
				}
			}
		}
	],
	limitQuota: [
		{
			trigger: ['blur'],
			message: '请输入限购数量',
			validator: (rule, value, callback) => {
				if (isLimitQuota.value == 1 && form.value.limitQuota === '') {
					return false;
				} else {
					return true;
				}
			}
		}
	]
});

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

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

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

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

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

// 提交
function submitHandle() {
	formRef.value
		.validate()
		.then(async () => {
			try {
				uni.showLoading({
					title: '保存中...',
					mask: true
				});
				const data = { ...form.value };
				if (imgs.value.length > 0) {
					data.goodsDescription = JSON.stringify(imgs.value);
				}
				await pointsGoodsPost(data);
				setTimeout(() => {
					uni.showToast({
						title: '保存成功',
						icon: 'none'
					});
				}, 300);
				setTimeout(() => {
					uni.navigateBack();
				}, 1000);
			} catch (error) {
				console.log(error);
			}
			uni.hideLoading();
		})
		.catch(() => {});
}

// 积分:商品:详情
async function pointsGoodsDetailAjax() {
	try {
		uni.showLoading({
			title: '加载中...',
			mask: true
		});
		const obj = await pointsGoodsDetail(form.value.id);
		form.value = obj;
		if (obj.goodsDescription !== '') {
			imgs.value = JSON.parse(obj.goodsDescription);
		}
		if (obj.limitQuota !== '' && obj.limitQuota !== null) {
			isLimitQuota.value = 1;
		} else {
			isLimitQuota.value = 0;
		}
	} catch (error) {
		console.log(error);
	}
	uni.hideLoading();
}

onLoad((options) => {
	if (options.id) {
		form.value.id = options.id;
		uni.setNavigationBarTitle({
			title: '编辑商品'
		});
		pointsGoodsDetailAjax();
	}
});
</script>

<style>
page {
	background-color: #f8f8f8;
}
</style>
<style scoped lang="scss">
.container {
	padding: 28upx;
}
.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>
