<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="area_id">
						<search-select placeholder="请搜索选择投放的位置" :list="area_list" :select_value="addOtherForm.full_name"
							@searchData="areaSearch" @getSelectValue="getAreaValue"></search-select>
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="广告标题" name="title">
						<a-input v-model:value="createForm.title" placeholder="请输入广告标题" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="广告图" name="image_url">
						<upload-one upload_txt="上传封面图" @uploadSuccess="uploadSuccess" :success_image="success_img"
							images_length="1"></upload-one>
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="说明" name="ad_description">
						<a-input v-model:value="createForm.ad_description" placeholder="请输入说明" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item label="跳转网址" name="target_url">
						<a-input v-model:value="createForm.target_url" placeholder="请输入跳转网址" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="此广告展示顺序" name="show_order">
						<a-input v-model:value="createForm.show_order" placeholder="请输入此广告展示顺序,请输入优先级的数字" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="有效期至">
						<a-date-picker  v-model:value="dataForm.valid_date" @Change="validDateChange" :disabled-date="disabledDate"
							style="width: 100%;" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="是否隐藏广告" name="hide_ad">
						<a-radio-group v-model:value="createForm.hide_ad" 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 label="选择企业" name="company_id">
						<search-select placeholder="请搜索选择企业" :list="company_list" :select_value="addOtherForm.company_name"
							@searchData="companySearch" @getSelectValue="getCompanyValue" ></search-select>
					</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 { GetAdvertareaList, getCompanyList, PostAdvertscheduleAdd, PostAdvertscheduleUpdate } from '@/apis/models';
	import { dataForm, otherDataForm, reset } from '@/views/advertisement/putin/add/data.ts';
	import { useCommon } from '@/hooks/useCommon';
	let { store, openAddModel, hideModal, message, dayjs, disabledDate, imageprefix } = useCommon();
	const dayjsRef = ref(dayjs);
	const emit = defineEmits();
	let props = defineProps(['edit_record']);
	let success_img = ref<String>('')

	let createForm = ref(dataForm)
	let addOtherForm = ref(otherDataForm)


	onMounted(() => {
		areaSearch({ page: 1, pagesize: 1000 })
		companySearch({ page: 1, pagesize: 10 })
	})

	// 选择投放区域
	let area_list = ref<Object[]>([])
	const areaSearch = (val : Object) => {
		GetAdvertareaList(val).then((res : object) => {
			const data = res.data.advertareas.map((item : object) => ({
				label: item.name,
				value: item.id,
			}));
			area_list.value = data;
		})
	}
	const getAreaValue = (val : Object) => {
		createForm.value.area_id = val.key;
	}


	// 广告图
	// 上传图片
	const uploadSuccess = (data : Object) => {
		createForm.value.image_url = data;
		addOtherForm.value.image_url = imageprefix + data;
	}


	// 到期日期
	const validDateChange = (val) => {
		createForm.value.valid_date = dayjsRef.value(val).format('YYYY-MM-DD');
	}

	// 选择企业
	let company_list = ref<Object[]>([])
	const companySearch = (val : Object) => {
		getCompanyList(val).then((res : object) => {
			const data = res.data.list.map((item : object) => ({
				label: item.full_name,
				value: item.id,
			}));
			company_list.value = data;
		})
	}
	const getCompanyValue = (val : Object) => {
		createForm.value.company_id = val.key;
	}


	const sumbitForm = () => {
		console.log(createForm.value)
		createForm.value.show_order = Number(createForm.value.show_order)
		if (createForm.value.area_id && createForm.value.title && createForm.value.image_url && createForm.value.ad_description && createForm.value.valid_date && createForm.value.hide_ad) {
			if (!createForm.value.id) {
				PostAdvertscheduleAdd(createForm.value).then(res => {
					message.success('投放广告成功');
					hideModal();
					resetForm();
					emit('successAdd');
				}).catch(err => {
				})
			} else {
				PostAdvertscheduleUpdate(createForm.value).then(res => {
					message.success('修改投放广告信息成功');
					hideModal();
					resetForm();
					emit('successAdd');
				}).catch(err => {
				})
			}

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

	}

	const resetForm = () => {
		addOtherForm.value = reset().otherDataForm;
		createForm.value = reset().dataForm;
	}
	const cancelModal = () => {
		emit('closeAdd');
		resetForm();
		hideModal();
	}


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

	watch(() => props.edit_record, (newVal) => {
		if (newVal) {
			createForm.value = {
				id: newVal.id,
				area_id: newVal.area_id,
				title: newVal.title,
				image_url: newVal.image_url,
				ad_description: newVal.ad_description,
				target_url: newVal.target_url,
				show_order: newVal.show_order,
				valid_date: newVal.valid_dateimage_url ? dayjsRef.value(newVal.valid_dateimage_url) : '' ,
				hide_ad: newVal.hide_ad,
				company_id: newVal.company_id,
			}
			addOtherForm.value = {
				area_name: newVal.area_name,
				image_url: imageprefix + newVal.image_url,
				company_name: newVal.company_name
			}
		}
	})
</script>

<style>

</style>