<template>
	<a-modal v-model:visible="openAddModel" title="新增广告位置" ok-text="提交" cancel-text="取消" @ok="sumbitForm"
		@cancel="cancelModal" width="50%">
		<a-form :model="createForm" layout="vertical">
			<a-row gutter="20">
				<a-col span="24">
					<a-form-item required label="广告类别名称" name="name">
						<a-input v-model:value="createForm.name" placeholder="请输入广告类别名称" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="广告类别代码" name="code">
						<a-input v-model:value="createForm.code" placeholder="请输入企业名称" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="限制显示广告数" name="ad_num">
						<a-input-number :min="0" type="number" v-model:value="createForm.ad_num" placeholder="限制显示广告数"
							style="width: 100%;" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="显示列数" name="cols">
						<a-input-number :min="0" type="number" v-model:value="createForm.cols" placeholder="显示列数"
							style="width: 100%;" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="广告显示宽度" name="width">
						<a-input-number :min="0" type="number" v-model:value="createForm.width" placeholder="广告显示宽度"
							style="width: 100%;" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="广告显示高度" name="height">
						<a-input-number :min="0" type="number" v-model:value="createForm.height" placeholder="广告显示高度"
							style="width: 100%;" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="列间距" name="col_padding">
						<a-input-number :min="0" type="number" v-model:value="createForm.col_padding" placeholder="列间距"
							style="width: 100%;" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="行间距" name="row_padding">
						<a-input-number :min="0" type="number" v-model:value="createForm.row_padding" placeholder="行间距"
							style="width: 100%;" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="随机显示" name="random_show">
						<a-radio-group v-model:value="createForm.random_show" button-style="solid">
							<a-radio-button :value="1">随机</a-radio-button>
							<a-radio-button :value="2">不随机</a-radio-button>
						</a-radio-group>
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="禁用状态" name="disabled_status">
						<a-radio-group v-model:value="createForm.disabled_status" button-style="solid">
							<a-radio-button :value="1">正常</a-radio-button>
							<a-radio-button :value="2">禁用</a-radio-button>
						</a-radio-group>
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
	</a-modal>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed, defineProps, watch, defineEmits } from 'vue';
	import { PostAdvertareaAdd, PostAdvertareaUpdate } from '@/apis/models';
	import { message } from 'ant-design-vue';
	import { useCommon } from '@/hooks/useCommon';
	let { store, openAddModel, hideModal } = useCommon();
	const emit = defineEmits();
	let props = defineProps(['edit_record']);


	openAddModel = computed(() => {
		return store.state.openAddModel;
	})

	watch(() => props.edit_record, (newVal) => {
		if (newVal) {
			console.log(newVal)
			createForm.value = {
				id: newVal.id,
				code: newVal.code,
				name: newVal.name,
				ad_num: newVal.ad_num,
				cols: newVal.cols,
				width: newVal.width,
				height: newVal.height,
				col_padding: newVal.col_padding,
				row_padding: newVal.row_padding,
				random_show: newVal.random_show,
				disabled_status: newVal.disabled_status,
			}
		}
	})

	let createForm : companyListType.addrFormType = ref({
		code: '',
		name: '',
		ad_num: 0,
		cols: 0,
		width: 0,
		height: 0,
		col_padding: 0,
		row_padding: 0,
		random_show: 0,
		disabled_status: 0,
	})




	onMounted(async () => {
		// let res = await listSection({ page: 1, pagesize: 10, sort: 'id', sortby: "asc", keyword: "" });
		// section_list.value = res.data.sections;
	})


	const sumbitForm = () => {
		console.log(createForm.value)
		if (createForm.value.code && createForm.value.name && createForm.value.ad_num && createForm.value.cols  && createForm.value.col_padding && createForm.value.row_padding && createForm.value.random_show && createForm.value.disabled_status) {
			if (!createForm.value.id) {
				PostAdvertareaAdd(createForm.value).then(res => {
					message.success('新增广告位置成功');
					hideModal();
					resetForm();
					emit('successAdd');
				}).catch(err => {
				})
			} else {
				PostAdvertareaUpdate(createForm.value).then(res => {
					message.success('修改广告位置信息成功');
					hideModal();
					resetForm();
					emit('successAdd');
				}).catch(err => {
				})
			}

		} else {
			message.warning('请补充完整信息');
		}

	}

	const resetForm = () => {
		createForm.value = {
			code: '',
			name: '',
			ad_num: 0,
			cols: 0,
			width: 0,
			height: 0,
			col_padding: 0,
			row_padding: 0,
			random_show: 0,
			disabled_status: 0,
		}
	}

	const cancelModal = () => {
		emit('closeAdd');
		resetForm();
		hideModal();
	}
</script>

<style>
</style>