<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-steps :current="current" :items="steps"></a-steps>
			<div class="steps-content">
				<div v-show="current == 0">
					<a-row gutter="20">
						<a-col span="12">
							<a-form-item required label="企业名称" name="full_name">
								<a-input v-model:value="createForm.full_name" placeholder="请输入企业名称" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="注册号" name="registration_number">
								<a-input v-model:value="createForm.registration_number" placeholder="请输入注册号" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item required label="成立日期" name="establishment_date">
								<a-date-picker v-model:value="addOtherForm.chengli_date" :disabled-date="disabledDateFront"
									@Change="establishmentDateChange" style="width: 100%;" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item required label="联系人" name="contact">
								<a-input v-model:value="createForm.contact" placeholder="请输入联系人" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item required label="联系电话" name="phone">
								<a-input v-model:value="createForm.phone" placeholder="请输入联系电话" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item  required label="联系手机" name="mobile">
								<a-input v-model:value="createForm.mobile" placeholder="请输入联系手机" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="联系邮箱" name="email">
								<a-input v-model:value="createForm.email" placeholder="请输入联系邮箱" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="传真" name="fax">
								<a-input v-model:value="createForm.fax" placeholder="请输入传真" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="官网" name="website">
								<a-input v-model:value="createForm.website" placeholder="请输入官网" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="公司地址">
								<a-c-cascader :dict="2009" @saveCascader="compantAddressSave" placeholder="请选择公司地址"
									:cascader_content="addOtherForm.company_address_cascader"></a-c-cascader>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item required label="选择经度">
								<a-input v-model:value="createForm.longitude" placeholder="选择经度" disabled/>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item required label="选择纬度">
								<a-input v-model:value="createForm.latitude" placeholder="选择纬度" disabled/>
							</a-form-item>
						</a-col>
						<a-col span="24">
							<a-form-item required label="选择经纬度">
								<a-switch v-model:checked="showMap"> </a-switch>
								<div v-if="showMap">
									<v-map @getLoc="getLoc"></v-map>
								</div>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item required label="详细地址" name="address">
								<a-input v-model:value="createForm.address" placeholder="请输入详细地址" />
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="所属行业">
								<a-c-cascader :dict="2004" @saveCascader="industrySave" placeholder="请选择所属行业"
									:cascader_content="addOtherForm.company_industry_cascader"></a-c-cascader>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="企业性质">
								<a-c-cascader :dict="2002" @saveCascader="natureSave" placeholder="请选择企业性质"
									:cascader_content="addOtherForm.company_nature_cascader"></a-c-cascader>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="企业规模">
								<a-xuanze :dict="2003" placeholder="请选择企业规模" @saveSelect="scaleSave"
									:select_content="createForm.scale"></a-xuanze>
							</a-form-item>
						</a-col>
						<a-col span="24">
							<a-form-item label="企业简介"  >
								<QuillEditor theme="snow" :options="options" toolbar="full"
									v-model:content="addOtherForm.content" @update:content="onEditorUpdate($event)"
									contentType="html" />
							</a-form-item>
						</a-col>
					</a-row>
				</div>
				<div v-show="current == 1">
					<a-row gutter="20">
						<a-col span="12">
							<a-form-item label="企业照片">
								<upload-one upload_txt="上传企业照片" @uploadSuccess="uploadPhotoSuccess"
									:success_image="addOtherForm.photo_img" :images_length="1"
									:image_type="3"></upload-one>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="企业照片状态">
								<a-radio-group v-model:value="createForm.photo_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-col span="12">
							<a-form-item label="营业执照">
								<upload-one upload_txt="上传营业执照" @uploadSuccess="uploadLicenseSuccess"
									:success_image="addOtherForm.license_img" images_length="1"
									:image_type="4"></upload-one>
							</a-form-item>
						</a-col>
						<a-col span="12">
							<a-form-item label="营业执照状态">
								<a-radio-group v-model:value="createForm.license_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-col span="24">
							<a-form-item required label="企业相册"  >
								<upload-one upload_txt="上传企业相册" @uploadSuccess="uploadSuccess"
									:success_image="addOtherForm.company_photo_img" images_length="5" :image_type="3"
									:images_list="addOtherForm.company_photos"
									@delImageAfter="delImageAfter"></upload-one>
							</a-form-item>
						</a-col>
					</a-row>
				</div>
				<div v-show="current == 2">
					<a-row gutter="20">
						<!-- <a-col span="12">
							<a-form-item required label="登录名">
								<a-input v-model:value="createForm.login_name" placeholder="请输入登录名" />
							</a-form-item>
						</a-col> -->
						<a-col span="12">
							<a-form-item required label="登录密码">
								<a-input-password v-model:value="createForm.login_pwd" placeholder="请输入登录密码">
									<template #iconRender="v">
										<EyeTwoTone v-if="v"></EyeTwoTone>
										<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
									</template>
								</a-input-password>

							</a-form-item>
						</a-col>
					</a-row>
				</div>
			</div>
			<div class="steps-action">
				<a-button v-if="current > 0" @click="prev">上一步</a-button>
				<a-button v-if="current < steps.length - 1" type="primary" style="margin-left: 8px"
					@click="next">下一步</a-button>
			</div>
		</a-form>
	</a-modal>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed, defineProps, watch, defineEmits } from 'vue';
	import { addCompany, PostCompanyEdit, GetCompanyInfo } from '@/apis/models';
	import vMap from '@/components/map/map-iframe.vue'
	import UploadOne from '@/components/upload/one.vue';
	import { EyeTwoTone, EyeInvisibleOutlined } from '@ant-design/icons-vue';
	import { steps, dataForm, otherDataForm, reset } from '@/views/company/list/add/data.js';
	import { useCommon } from '@/hooks/useCommon';
	let { store, openAddModel, hideModal, dayjs, disabledDateFront, richOption, message, imageprefix } = useCommon();
	const dayjsRef = ref(dayjs);
	const emit = defineEmits();
	let props = defineProps(['edit_record']);
	const options = ref(richOption)
	const current = ref<number>(0);
	const next = () => {
		current.value++;
	};
	const prev = () => {
		current.value--;
	};

	let createForm = ref<CompanyListType.addFormType>(dataForm)
	let addOtherForm = ref<CompanyListType.addOtherFormType>(otherDataForm)

	// 上传图片
	// 企业照片
	const uploadPhotoSuccess = (data : Object) => {
		addOtherForm.value.photo_img = imageprefix + data
		createForm.value.photo = data
	}

	// 营业执照
	const uploadLicenseSuccess = (data : Object) => {
		addOtherForm.value.license_img = imageprefix + data
		createForm.value.license_path = data
	}
	// 企业相册
	const uploadSuccess = (data : Object) => {
		addOtherForm.value.company_photo_img.push(`imageprefix + data`)
		createForm.value.company_photos.push({ photo: data })
	}
	const delImageAfter = (data : Object[]) => {
		createForm.value.company_photos = data
	}

	// 成立日期
	const establishmentDateChange = (val) => {
		createForm.value.establishment_date = dayjsRef.value(val).format('YYYY-MM-DD');
	}


	// 选择地址
	const compantAddressSave = (data) => {
		createForm.value.province = data.arr1[0] ? data.arr1[0] : 0;
		createForm.value.city = data.arr1[1] ? data.arr1[1] : 0;
		createForm.value.district = data.arr1[2] ? data.arr1[2] : 0;
		createForm.value.street = data.arr1[3] ? data.arr1[3] : 0;
	}
	
	let showMap = ref<Boolean>(false);
	// 经纬度
	const getLoc = (mapData : Object) => {
		createForm.value.address = mapData.poiaddress;
		createForm.value.longitude = mapData.latlng.lng;
		createForm.value.latitude = mapData.latlng.lat;
		showMap.value = false;
	}

	// 所属行业 industrySave
	const industrySave = (data) => {
		createForm.value.industry = data.arr1[1] ? data.arr1[1] : 0;
	}

	// 企业性质
	const natureSave = (data) => {
		createForm.value.nature = data.arr1[1] ? data.arr1[1] : 0;
	}

	// 企业规模
	const scaleSave = (data) => {
		console.log(data)
		createForm.value.scale = data.val.key ? data.val.key : 0;
	}

	// 富文本
	const onEditorUpdate = (data) => {
		createForm.value.introduction = data
	}

	const sumbitForm = () => {
		if (createForm.value.full_name) {
			if (!createForm.value.id) {
				addCompany(createForm.value).then(res => {
					message.success('新增企业成功');
					hideModal();
					resetForm();
					emit('successAdd');
				})
			} else {
				PostCompanyEdit(createForm.value).then(res => {
					message.success('修改企业信息成功');
					hideModal();
					resetForm();
					emit('successAdd');
				})
			}

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

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


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

	watch(() => props.edit_record, (newVal1) => {
		if (newVal1) {
			GetCompanyInfo({ id: newVal1.id }).then(res => {
				addOtherForm.value.company_photos = []
				if (res.data.company_photos) {
					res.data.company_photos.map(item => {
						addOtherForm.value.company_photos.push(item.photo)
					})
				}
				let newVal = res.data;
				addOtherForm.value = {
					chengli_date: newVal.establishment_date ? dayjsRef.value(newVal.establishment_date) : '',
					content: newVal.introduction,
					photo_img: imageprefix + newVal.photo,
					license_img: imageprefix + newVal.photo,
					company_photos: addOtherForm.value.company_photos,
					company_address_cascader: newVal.province_name ? [newVal.province , newVal.city , newVal.district , newVal.street] : [], 
					company_industry_cascader: newVal.industry_text,
					company_nature_cascader: newVal.nature_text,
				}
				createForm.value = {
					id: newVal.id,
					full_name: newVal.full_name,
					registration_number: newVal.registration_number,
					establishment_date: newVal.establishment_date,
					contact: newVal.contact,
					phone: newVal.phone,
					mobile: newVal.mobile,
					email: newVal.email,
					fax: newVal.fax,
					website: newVal.website,
					province: newVal.province,
					city: newVal.city,
					district: newVal.district,
					street: newVal.street,
					address: newVal.address,
					industry: newVal.industry,
					nature: newVal.nature,
					scale: newVal.scale,
					introduction: newVal.introduction,
					photo: newVal.photo,
					photo_status: newVal.photo_status,
					license_path: newVal.license_path,
					license_status: newVal.license_status,
					login_pwd: newVal.login_pwd,
					company_photos: newVal.company_photos ? newVal.company_photos : [],
					latitude: newVal.latitude,
					longitude: newVal.longitude
				}
			})
		}
	})
</script>

<style scoped>
	.steps-content {
		margin-top: 16px;
		border: 1px dashed #e9e9e9;
		border-radius: 6px;
		background-color: #fafafa;
		min-height: 200px;
		padding: 20px;
	}

	.steps-action {
		margin-top: 12px;
	}
</style>