<template>
	<div>
		<el-dialog
			v-model="show"
			:title="editorIndex ? '编辑充值面额' : '添加充值面额'"
			width="700"
			@closed="reset"
		>
			<el-form
				ref="formRef"
				:model="form"
				:rules="rules"
				label-width="120px"
				label-position="right"
			>
				<el-form-item label="充值面额" prop="amount">
					<el-input
						v-model="form.amount"
						placeholder="请输入充值面额"
						style="width: 270px"
						:maxlength="8"
						@input="amountInput"
					>
						<template #append>元</template>
					</el-input>
				</el-form-item>
				<el-form-item label="赠送金额">
					<el-input
						v-model="form.rewardAmount"
						placeholder="请输入赠送金额"
						style="width: 270px"
						:maxlength="8"
						@input="rewardAmountInput"
					>
						<template #append>元</template>
					</el-input>
				</el-form-item>
				<el-form-item label="赠送积分">
					<el-input
						v-model="form.rewardPoints"
						placeholder="请输入赠送积分"
						style="width: 270px"
						@input="rewardPointsInput"
					></el-input>
				</el-form-item>
				<el-form-item label="赠送优惠券" prop="couponInfoList">
					<div class="item">
						<div
							class="center"
							v-for="(item, index) in form.couponInfoList"
							:key="index"
						>
							<el-select v-model="item.id">
								<el-option
									v-for="val of props.couponList"
									:key="val.id"
									:value="val.id"
									:label="val.title"
								></el-option>
							</el-select>
							<el-input v-model="item.num" @input="numInput($event, index)">
								<template #append>数量</template>
							</el-input>
							<el-button
								type="danger"
								text
								@click="form.couponInfoList.splice(index, 1)"
							>
								删除
							</el-button>
						</div>
						<div class="center">
							<el-button type="primary" link icon="CirclePlus" @click="addItemHandle">
								新增券
							</el-button>
						</div>
					</div>
				</el-form-item>
				<el-form-item></el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="show = false">取 消</el-button>
					<el-button type="primary" @click="submitHandle">确 定</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import _, { cloneDeep } from "lodash";
import { onMounted } from "vue";
import { filterNumberInput } from "@/utils";

const show = ref(false);

const props = defineProps({
	couponList: {
		type: Array,
		default: [],
	},
});

const editorIndex = ref(null);
const resetForm = ref("");
const formRef = ref(null);
const form = ref({
	amount: "",
	rewardAmount: "",
	rewardPoints: "",
	couponInfoList: [],
});

const rules = ref({
	amount: [{ required: true, message: "请输入充值面额", trigger: "blur" }],
	couponInfoList: [
		{
			validator: (rule, value, callback) => {
				let flag = true;

				form.value.couponInfoList.map((item) => {
					if (!item.id) {
						flag = false;
					}
				});
				if (!flag) {
					callback(new Error("请选择优惠券"));
				} else {
					callback();
				}
			},
			trigger: "change",
		},
	],
});

// 增加优惠券信息
function addItemHandle() {
	form.value.couponInfoList.push({
		id: "",
		num: 1,
	});
}

// 添加面额
const emits = defineEmits(["success"]);
function submitHandle() {
	formRef.value.validate((valid) => {
		if (valid) {
			emits("success", {
				data: { ...form.value },
				index: editorIndex.value,
			});
			show.value = false;
		}
	});
}

const time = 500;
const amountInput = _.debounce(function (e) {
	form.value.amount = filterNumberInput(e);
}, time);

const rewardAmountInput = _.debounce(function (e) {
	form.value.rewardAmount = filterNumberInput(e);
}, time);

const rewardPointsInput = _.debounce(function (e) {
	form.value.rewardPoints = filterNumberInput(e, true);
}, time);

const numInput = _.debounce(function (e, index) {
	form.value.couponInfoList[index].num = filterNumberInput(e, true);
	if (form.value.couponInfoList[index].num < 1) {
		form.value.couponInfoList[index].num = 1;
	}
}, time);

function reset() {
	editorIndex.value = null;
	form.value = cloneDeep(resetForm.value);
	form.value.couponInfoList = [];
}

// 打开
function open(obj = null, index = null) {
	console.log(obj, index);
	if (obj && obj.amount) {
		form.value = cloneDeep(obj);
		editorIndex.value = index;
	}
	show.value = true;
}

defineExpose({
	open,
});

onMounted(() => {
	resetForm.value = { ...form.value };
});
</script>

<style scoped lang="scss">
.item {
	width: 100%;
	display: flex;
	gap: 14px;
	flex-direction: column;
}
.center {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 14px;
}
</style>
