<template>
	<view>
		<kevyloading v-if="loading" type="bsm-loader" color="#618af8" transparent></kevyloading>

		<wd-form ref="form" :model="formData" :rules="formRules">
			<!-- 基础信息 -->
			<wd-cell-group title="基本信息" border>
				<wd-input label="券名称" v-model="formData.name" />
				<wd-input label="优惠券金额" v-model="formData.price" />
				<wd-input label="满减金额" v-model="formData.full_price" />
				<!-- 其他基本信息字段可以根据需要添加 -->
			</wd-cell-group>

			<wd-cell-group title="领取类型">
				<div class="bg-white rounded p-2">
					<wd-radio-group v-model="formData.send_type" shape="button" @change="change">
						<wd-radio :value="0">领取后过期</wd-radio>
						<wd-radio :value="1">定时过期</wd-radio>
					</wd-radio-group>
				</div>
				<wd-input v-if="formData.send_type == 0" label="过期时间" v-model="formData.day" />

				<div v-if="formData.send_type == 1" label="过期时间" style="display: flex;flex-direction: column;">
					<wd-datetime-picker v-model="formData.start_time" label="开始时间" />
					<wd-datetime-picker v-model="formData.end_time" label="结束时间" />
				</div>
			</wd-cell-group>

			<!-- 是否启用 -->
			<wd-cell-group title="领取中心显示" border>
				<view class="p-4">
					<wd-switch v-model="formData.is_show" :active-value="1" :inactive-value="0"></wd-switch>
				</view>
			</wd-cell-group>

			<!-- 是否启用 -->
			<wd-cell-group title="优惠券类型" border>
				<view class="p-4">
					<div class="mb-4">
						<wd-radio-group v-model="formData.coupon_type" shape="button">
							<wd-radio :value="1">商品</wd-radio>
							<wd-radio :value="2">分类</wd-radio>
							<wd-radio :value="3">当面付</wd-radio>
						</wd-radio-group>
					</div>

					<view v-if="formData.coupon_type == 1">
						<wd-form-item label="选择商品">
							<yGoods v-model="formData.coupon_deatil" :size="1"></yGoods>
						</wd-form-item>
					</view>

					<view v-if="formData.coupon_type == 2">
						<wd-select-picker type="checkbox" label="选择分类" v-model="formData.cats"
							:columns="classifyList"></wd-select-picker>
					</view>

				</view>
			</wd-cell-group>

			<wd-cell-group title="优惠券数量" border>
				<view class="p-4">
					<wd-input-number v-model="formData.stock" min="0" />
				</view>
			</wd-cell-group>

			<wd-cell-group title="领取限制" border>
				<view class="p-4">
					<div class="mb-4">
						<wd-radio-group v-model="formData.limit_type" shape="button">
							<wd-radio :value="1">不限</wd-radio>
							<wd-radio :value="2">每天一次</wd-radio>
							<wd-radio :value="3">每人一次</wd-radio>
						</wd-radio-group>
					</div>
				</view>
			</wd-cell-group>

			<!-- 提交按钮 -->
			<view class="mt-2 px-12 py-3 bg-slate-50">
				<wd-button type="primary" size="large" @click="handleSubmit" block>
					保存
				</wd-button>
			</view>
		</wd-form>


	</view>
</template>

<script>
import yUpload from "@/components/yUpload/index.vue";
import uniDataPicker from "@/components/uni-data-picker/components/uni-data-picker/uni-data-picker.vue";
import kevyloading from "@/components/kevy-loading/kevy-loading";
import utils from '@/utils/utils.js'
import coupon from '@/api/store/coupon.js';
import yGoods from "@/components/yGoods/index.vue";
import goods from '@/api/store/goods.js'

/**
 * 从本地存储中获取用户信息
 */
const user_info = uni.getStorageSync("user_info");

export default {
	components: {
		yUpload, uniDataPicker, kevyloading, yGoods
	},
	data() {
		return {
			utils,
			user_info,
			// 表单数据
			formData: {
				"name": "",  // 设置为空字符串或默认名称
				"price": "",  // 设置为默认价格
				"full_price": "",  // 设置为默认满额价格
				"send_type": "",  // 设置为默认发货类型
				"day": "",  // 设置为默认天数
				"start_time": null,
				"end_time": null,
				"is_show": 1,  // 设置为默认显示状态
				"coupon_type": 1,  // 设置为默认优惠券类型
				"limit_type": 1,  // 设置为默认限制类型
				"stock": 0,  // 设置为默认库存值
				"coupon_deatil": [],
				"cats": []
			},
			// 表单验证规则
			formRules: {
				// 在这里添加其他字段的验证规则
			},
			// 地区选择器的数据
			addrList: [
				// 在这里添加省市区的数据
			],
			classifyList: [],
			loading: false
		};
	},
	async onLoad(e) {
		// this.getDistrict();

		if (e.id) {
			await this.getClassify()
			this.GetItem(e.id);
		}

		// this.formData = JSON.parse(e.edit)
	},
	methods: {
		async getClassify() {
			goods.classify.list().then(res => {
				this.classifyList = res.data.map(item => {
					return {
						label: item.name,
						value: item.id,
					}
				})
			})
		},

		/**
		 * 获取门店设置
		 */
		async GetItem(id) {
			this.loading = true;
			const res = await coupon.GetItem({ id });

			if (res.data.id) {
				this.formData = JSON.parse(JSON.stringify(res.data));

				this.formData.start_time = this.formData.start_time ? new Date(this.formData.start_time * 1000) : new Date()
				this.formData.end_time = new Date(this.formData.end_time * 1000)
				this.formData.cats = this.formData.cats || []

				this.formData.coupon_deatil = []
				if (this.formData.coupon_type == 1) {
					this.formData.coupon_deatil = res.data.coupon_deatil
				}
				if (this.formData.coupon_type == 2) {
					this.formData.cats = res.data.coupon_deatil?.map(item => item.id) || []
					setTimeout(() => {
						this.formData.cats = res.data.coupon_deatil?.map(item => item.id) || []
					}, 321);
				}

			}
			this.loading = false;
		},

		/**
		 * 处理省市区选择变化
		 * @param {Object} value - 选择的值
		 */
		areaChange(value) {
			// 处理省市区选择变化的逻辑
		},

		/**
		 * 处理省市区选择
		 * @param {Object} detail - 选择器详细信息
		 */
		select({ detail }) {
			if (detail.value.length) {
				const [province_id, city_id, district_id] = detail.value.map(
					(el) => el.value
				);

				this.formData.province_id = province_id;
				this.formData.city_id = city_id;
				this.formData.district_id = district_id;
				this.formData.district = [province_id, city_id, district_id];
			}
		},

		/**
		 * 处理表单提交
		 */
		async handleSubmit() {
			console.log(this.formData);

			try {

				let mix_id_list = []

				if (this.formData.coupon_type == 1) {
					mix_id_list = this.formData.coupon_deatil?.map(item => [item.id]) || []
				}

				if (this.formData.coupon_type == 2) {
					mix_id_list = this.formData.cats?.map(item => [item]) || []
				}


				// 处理表单提交的逻辑
				const res = await coupon.Create({
					...this.formData,
					start_time: this.formData.send_type == 1 ? utils.dateFormat(this.formData.start_time) : utils.dateFormat(new Date()),
					end_time: this.formData.send_type == 1 ? utils.dateFormat(this.formData.end_time) : utils.dateFormat(new Date()),
					mix_id_list: mix_id_list
				});

				if (res.code == 0) {
					setTimeout(() => {
						uni.showToast({
							title: '保存成功!',
							icon: 'success'
						});
					}, 100);
					uni.navigateBack()
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			} catch (error) {
				console.log(error);
				setTimeout(() => {
					uni.showToast({
						title: '请检查表单!',
						icon: 'none'
					});
				}, 100);
			}


		},
	},
};

</script>

<style>
/* 在这里添加样式，根据需要自定义表单样式 */
</style>
