<template>
	<view class="container">
		<u-form label-position="top" labelWidth="100" :model="form" :rules="rules" ref="formRef">
			<view class="card">
				<u-form-item label="活动名称" prop="title">
					<u-input placeholder="请输入活动名称" v-model="form.title" border="bottom" :customStyle="inputStyle"></u-input>
				</u-form-item>
				<u-form-item label="可用门店" prop="useShops">
					<my-shop-select-w v-model:useType="form.useShopType" v-model:selShops="form.useShops"></my-shop-select-w>
				</u-form-item>
			</view>
			<view class="card">
				<u-form-item label="活动日期" prop="validStartTime"></u-form-item>
			</view>
		</u-form>
		<my-footer-btn confirmText="保存" @confirm="submitHandle"></my-footer-btn>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import FooterBtn from '../components/FooterBtn.vue';

const inputStyle = ref({
	paddingLeft: 0
});

const formRef = ref(null);

const form = ref({
	id: '',
	shopId: '',
	title: '', // 活动名称
	useShopType: 'only', // only-仅本店 all全部 /custom 指定
	useShops: '', // 可用门店
	validStartTime: '', // 有效期开始时间
	validEndTime: '', // 有效期结束时间
	useDays: '', // 周一,周二,周三,周四,周五,周六,周日
	useTimeType: '', // all-全时段，custom-指定时段
	useStartTime: '', // 可用开始时间
	useEndTime: '', // 可用结束时间
	useType: '', // 堂食 dine-in 外带 take-out 外卖 take-away 配送 post
	discountRate: '', // 折扣% 范围1-99
	sort: '', // 数字越小级别越高
	discountPriority: '', // 折扣优先级 限时折扣优先limit-time/会员价优先vip-price
	foodType: '', // 1全部 2部分
	foods: '', // 参与商品
	status: '' // 1未开始，2进行中，3已结束 -1当前时间不可用
});

const rules = ref({
	title: {
		type: 'string',
		required: true,
		message: '请输入活动名称',
		trigger: ['blur']
	}
});

function submitHandle() {
	formRef.value
		.validate()
		.then((res) => {
			console.log('通过了', res);
		})
		.catch((err) => {});
}
</script>

<style>
page {
	background-color: #f7f7f7;
}
</style>

<style scoped lang="scss">
.container {
	padding: 28upx;
}
.card {
	background-color: #fff;
	border-radius: 20upx;
	padding: 0 28upx 14upx;
}
</style>
