<template>
	<div>
		<template v-if="state">
			<a-form :model="createForm" layout="vertical"  class="resume-form">
				<a-row :gutter="20">
					<a-col span="12">
						<a-form-item label="企业名称" name="full_name">
							<a-input v-model:value="createForm.full_name" placeholder="请输入企业名称" size="large" />
						</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="请输入注册号"
								size="large" />
						</a-form-item>
					</a-col>
					<a-col span="12">
						<a-form-item label="成立日期" name="establishment_date">
							<a-date-picker v-model:value="addOtherForm.chengli_date"
								@Change="establishmentDateChange" style="width: 100%;" size="large" :disabledDate="disabledDateFront"/>
						</a-form-item>
					</a-col>
					<a-col span="12">
						<a-form-item label="联系人" name="contact">
							<a-input v-model:value="createForm.contact" placeholder="请输入联系人" size="large" />
						</a-form-item>
					</a-col>
					<a-col span="12">
						<a-form-item label="联系固话" name="phone">
							<a-input v-model:value="createForm.phone" placeholder="请输入联系电话" size="large" />
						</a-form-item>
					</a-col>
					<a-col span="12">
						<a-form-item label="联系手机" name="mobile">
							<a-input v-model:value="createForm.mobile" placeholder="请输入联系手机" size="large" />
						</a-form-item>
					</a-col>
					<a-col span="12">
						<a-form-item label="所属行业">
							<a-jilian :dict="2000" @saveCascader="industrySave" placeholder="请选择所属行业"
								:cascader_content="addOtherForm.company_industry_cascader"></a-jilian>
						</a-form-item>
					</a-col>
					<a-col span="12">
						<a-form-item label="所在地区">
							<a-jilian :dict="2009" @saveCascader="compantAddressSave" placeholder="请选择公司地址"
								:cascader_content="addOtherForm.company_address_cascader"></a-jilian>
						</a-form-item>
					</a-col>
					<a-col span="12">
						<a-form-item label="联系邮箱" name="email">
							<a-input v-model:value="createForm.email" placeholder="请输入联系邮箱" size="large" />
						</a-form-item>
					</a-col>
					<a-col span="12">
						<a-form-item label="企业性质">
							<a-jilian :dict="2002" @saveCascader="natureSave" placeholder="请选择企业性质"
								:cascader_content="addOtherForm.company_nature_cascader"></a-jilian>
						</a-form-item>
					</a-col>
					<a-col span="12">
						<a-form-item label="企业规模">
							<a-xuanze :dict="2003" placeholder="请选择企业规模" @saveSelect="scaleSave"
								:select_content="addOtherForm.company_scale_cascader"></a-xuanze>
						</a-form-item>
					</a-col>
					<a-col span="12">
						<a-form-item label="企业传真" name="fax">
							<a-input v-model:value="createForm.fax" placeholder="请输入传真" size="large" />
						</a-form-item>
					</a-col>
			
					<a-col span="12">
						<a-form-item label="详细地址" name="address">
							<a-input v-model:value="createForm.address" placeholder="请输入详细地址" size="large" />
						</a-form-item>
					</a-col>
					<a-col span="12">
						<a-form-item label="企业官网" name="website">
							<a-input v-model:value="createForm.website" placeholder="请输入官网" size="large" />
						</a-form-item>
					</a-col>
					<a-col span="12">
						<a-form-item label="地图上选择经度">
							<a-input v-model:value="createForm.longitude" placeholder="选择经度" disabled/>
						</a-form-item>
					</a-col>
					<a-col span="12">
						<a-form-item label="地图上选择纬度">
							<a-input v-model:value="createForm.latitude" placeholder="选择纬度" disabled/>
						</a-form-item>
					</a-col>
					<a-col span="24">
						<a-form-item label="选择经纬度">
							<a-flex justify="center">
								<div style="width: 90%;">
									<a-switch v-model:checked="showMap"> </a-switch>
									<div v-if="showMap">
										<v-map @getLoc="getLoc"></v-map>
									</div>
								</div>
							</a-flex>
						</a-form-item>
					</a-col>
					<a-col span="24">
						<a-form-item label="企业介绍">
							<QuillEditor theme="snow" :options="richOption" toolbar="full"
								v-model:content="addOtherForm.content" @update:content="onEditorUpdate($event)"
								contentType="html" />
						</a-form-item>
					</a-col>
					
					<a-col span="24">
						<a-flex justify="flex-end">
							<a-space>
								<a-button  @click="resetForm" size="large">取消</a-button>
								<a-button type="primary" @click="sumbitForm" size="large">保存</a-button>
							</a-space>
						</a-flex>
					</a-col>
				</a-row>
			</a-form>
		</template>
		<template v-else>
			<a-descriptions :title="basic.full_name" :column="3"> </a-descriptions>
			<a-descriptions :column="3">
				<a-descriptions-item label="注册号">
					{{basic.registration_number ? basic.registration_number : '未知'}}
				</a-descriptions-item>
				<a-descriptions-item label="成立时间">{{basic.establishment_date }}</a-descriptions-item>
			</a-descriptions>
			<a-descriptions :column="3" title="公司概况">
				<a-descriptions-item label="所属行业">{{basic.industry_text}}/{{basic.industry2_text}}</a-descriptions-item>
				<a-descriptions-item label="公司性质">{{basic.nature_text}}</a-descriptions-item>
				<a-descriptions-item label="公司规模">{{basic.scale_text }}</a-descriptions-item>
			</a-descriptions>
			<a-descriptions :column="3" title="联系方式">
				<a-descriptions-item label="联系地址" span="2">{{basic.address}}</a-descriptions-item>
				<a-descriptions-item label="联系人">{{basic.contact}}</a-descriptions-item>
				<a-descriptions-item label="联系手机">{{basic.mobile}}</a-descriptions-item>
				<a-descriptions-item label="联系电话">{{basic.phone}}</a-descriptions-item>
				<a-descriptions-item label="Email">{{basic.email}}</a-descriptions-item>
				<a-descriptions-item label="传真">{{basic.fax}}</a-descriptions-item>
			</a-descriptions>
			<a-descriptions :column="3" title="企业介绍">
				<a-descriptions-item><div v-html="basic.introduction"></div></a-descriptions-item>
			</a-descriptions>
		</template>
	</div>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed, defineProps, watch, defineEmits, createVNode } from 'vue';
	import { PostCompanyDetailInfo, PostCompanyEdit } from '@/apis/models';
	import vMap from '@/components/map/map-iframe.vue'
	import { intersectionAlike } from '@/utils/dataHelper';
	import { warnToast, successToast } from '@/utils/toastHelper';
	import { dataForm, otherDataForm, reset } from '@/components/company/information/basic/data.ts';
	import { useCommon } from '@/hooks/useCommon';
	let { store, dayjs, richOption, ExclamationCircleOutlined, Modal, disabledDateFront } = useCommon();
	const dayjsRef = ref(dayjs);
	let props = defineProps(['form_state']);
	const emit = defineEmits();
	let state = ref<Boolean>(false)
	let basic = ref({})
	let createForm = ref<CompanyBasicType.BasicFormType>(dataForm)
	let addOtherForm = ref<CompanyBasicType.OtherFormType>(otherDataForm)

	onMounted(() => {
		getBasic()
	})
	
	const getBasic = () => {
		PostCompanyDetailInfo().then(res => {
			basic.value = res.data;
			createForm.value = intersectionAlike(createForm.value, res.data)
			addOtherForm.value = {
				chengli_date: res.data.establishment_date ? dayjsRef.value(res.data.establishment_date) : '',
				content: res.data.introduction,
				company_address_cascader: res.data.province ? [res.data.province, res.data.city, res.data.district, res.data.street] : [],
				company_industry_cascader: res.data.industry ? [res.data.industry, res.data.industry2] : [],
				company_nature_cascader: res.data.nature ? [res.data.nature] : 0,
				company_scale_cascader: res.data.scale,
			}
		})
	}
	
	// 成立日期
	const establishmentDateChange = (val) => {
		createForm.value.establishment_date = dayjsRef.value(val).format('YYYY-MM-DD');
	}
	
	// 所属行业 industrySave
	const industrySave = (data) => {
		createForm.value.industry = data.arr1[0] ? data.arr1[0] : 0;
		createForm.value.industry2 = data.arr1[1] ? data.arr1[1] : 0;
	}
	
	// 选择地址
	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;
	}
	
	// 企业性质
	const natureSave = (data) => {
		createForm.value.nature = data.arr1[1] ? data.arr1[1] : 0;
	}
	
	// 企业规模
	const scaleSave = (data) => {
		createForm.value.scale = data.val.key ? data.val.key : 0;
	}
	
	let showMap = ref<Boolean>(false);
	// 经纬度
	const getLoc = (mapData : Object) => {
		createForm.value.latitude = mapData.latlng.lat;
		createForm.value.longitude = mapData.latlng.lng;
		showMap.value = false;
	}
	
	// 富文本
	const onEditorUpdate = (data) => {
		createForm.value.introduction = data
	}
	
	const sumbitForm = () => {
		PostCompanyEdit(createForm.value).then(res => {
			successToast('保存成功');
			resetForm()
		}).catch(err => {
		})
	}
	
	const resetForm = () => {
		createForm.value = reset().dataForm as CompanyBasicType.BasicFormType;
		addOtherForm.value = reset().otherDataForm as CompanyBasicType.OtherFormType;
		state.value = false;
		getBasic();
		emit("quitEdit")
	}

	watch(() => [props.form_state], (newVal) => {
		state.value = newVal[0];
		getBasic();
	})
</script>

<style>
</style>
