<template>
	<a-row :gutter="[10,10]" type="flex" justify="space-between" v-if="detail">
		<a-col span="14">
			<a-row :gutter="[10,10]">
				<a-col span="24">
					<a-row :gutter="[10,20]" type="flex">
						<a-col>
							<div style="font-size: 20px; font-weight: 600;">{{detail.base.name}}</div>
						</a-col>
						<a-col>
							<div style="font-size: 16px;color: #4FBE70;">{{detail.base.pay_range_text}}</div>
						</a-col>
					</a-row>
				</a-col>
				<a-col span="24">
					<a-row :gutter="[10,10]" type="flex">
						<a-tag>{{detail.require.experience_text ? detail.require.experience_text : '不限'}}</a-tag>
						<a-tag>{{detail.require.certification_text ? detail.require.certification_text : '不限'}}</a-tag>
						<a-tag>{{detail.require.school_degree_text ? detail.require.school_degree_text : '不限'}}</a-tag>
						<a-tag>{{detail.require.profelevel_text ? detail.require.profelevel_text : '不限'}}</a-tag>
					</a-row>
				</a-col>
			</a-row>
		</a-col>
		<a-col span="10" v-if="role != 'company'">
			<a-flex justify="flex-end">
				<a-sapce v-if="token">
					<a-button v-if="detail.favorited == 0" detail.favorited @click="confirmCollect(detail.id)">
						<StarOutlined />
						收藏
					</a-button>
					<a-button v-if="detail.favorited != 0" type="primary" @click="cancelCollect(detail.id)">
						<StarOutlined />
						取消收藏
					</a-button>
					<a-button  @click="applyJob(detail.id)">
						投简历
					</a-button>
				</a-sapce>
				<a-space v-else>
					<a-button type="primary" @click="toLogin">
						立即登录
					</a-button>
				</a-space>
			</a-flex>
		</a-col>
	</a-row>
	<div style="margin-top: 30px;" v-if="detail">
		<a-descriptions :column="2" title="职位描述">
			<a-descriptions-item label="职位性质">{{detail.company.nature_text}}</a-descriptions-item>
			<a-descriptions-item label="招聘人数">{{detail.base.invite_count}}人</a-descriptions-item>
			<a-descriptions-item
				label="工作地区">{{detail.locations ? detail.locations[0].name : '未知地址'}}</a-descriptions-item>
			<a-descriptions-item label="月新范围">{{detail.base.pay_range_text}}</a-descriptions-item>
			<a-descriptions-item label="食宿条件">{{detail.base.shisu_text}}</a-descriptions-item>

			<a-descriptions-item label="节假日">{{detail.base.holidays_text}}</a-descriptions-item>
			<a-descriptions-item label="有效期">{{detail.base.disabled_date}}</a-descriptions-item>
			<a-descriptions-item label="有效期至"></a-descriptions-item>
			<a-descriptions-item label="联系人">{{detail.contact.contact}}</a-descriptions-item>
			<a-descriptions-item
				label="职业类别">{{detail.base.types ? detail.base.types[0].name : '未知'}}</a-descriptions-item>
			<a-descriptions-item label="联系电话">{{detail.contact.mobile}} <a-button size="small">
					查看
				</a-button></a-descriptions-item>
			<a-descriptions-item></a-descriptions-item>
			<a-descriptions-item  label="职业描述">
				<div v-html="detail.base.describe_text"></div>
			</a-descriptions-item>
		</a-descriptions>
	</div>
	<div style="margin-top: 30px;" >
		<a-descriptions :column="1" title="地图">
			<a-descriptions-item :span="24">
				<div ref="mapContainer" class="map-container"></div>
			</a-descriptions-item>
		</a-descriptions>
	</div>
	
	<a-login></a-login>

</template>

<script setup lang="ts">
	import { ref, computed, onMounted, defineProps, watch ,createVNode} from 'vue';
	import { GetJobDetail,PostJobseekAddfavorite, PostJobseekDelfavorite, PostJobseekAddapplication  } from '@/apis/models';
	import { useCommon } from '@/hooks/useCommon';
	import { warnToast, successToast } from '@/utils/toastHelper';
	let { store, commomParams, dayjs, richOption, ExclamationCircleOutlined, Modal, showOtherModal1 } = useCommon();
	let props = defineProps(['id']);
	let job_id = ref<Number>(0)
	let detail = ref<Object>(null)
	let token = ref(sessionStorage.getItem('token') ? sessionStorage.getItem('token') : '')
	let role = ref(sessionStorage.getItem('role') ? sessionStorage.getItem('role') : '')
	const mapContainer = ref(null);
	const getDetail = () => {
		GetJobDetail({ id: job_id.value }).then(res => {
			detail.value = res.data;
			detail.value.latitude = 39.984104
			detail.value.longitude = 116.307503
			if (mapContainer.value) {
				initMap()
			} else {
				console.error('地图容器元素未找到');
			}
		})
	}

	const initMap = () => {
		var center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标
		//初始化地图
		var map = new TMap.Map(mapContainer.value, {
			center: center
		});

		//创建并初始化MultiMarker
		var markerLayer = new TMap.MultiMarker({
			map: map,  //指定地图容器
			//样式定义
			styles: {
				//创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
				"myStyle": new TMap.MarkerStyle({
					"width": 25,  // 点标记样式宽度（像素）
					"height": 35, // 点标记样式高度（像素）
					"src": '../img/marker.png',  //图片路径
					//焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
					"anchor": { x: 16, y: 32 }
				})
			},
			//点标记数据数组 longitude
			geometries: [{
				"id": "1",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
				"styleId": 'myStyle',  //指定样式id
				"position": new TMap.LatLng(detail.value.latitude, detail.value.longitude),  //点标记坐标位置
				"properties": {//自定义属性
					"title": "marker1"
				}
			}
			]
		});
	}
	
	const toLogin = () => {
		showOtherModal1()
	}
	
	const confirmCollect = (job_id : Number) => {
		Modal.confirm({
			title: `是否要收藏该职位`,
			centered: true,
			icon: createVNode(ExclamationCircleOutlined),
			onOk() {
				PostJobseekAddfavorite({job_id: job_id }).then(res => {
					successToast('已收藏')
					getDetail();
				})
			},
			onCancel() {
	
			},
		});
	}
	
	const cancelCollect = (job_id : Number) => {
		Modal.confirm({
			title: `是否要取消收藏该职位`,
			centered: true,
			icon: createVNode(ExclamationCircleOutlined),
			onOk() {
				PostJobseekDelfavorite({job_id: job_id }).then(res => {
					successToast('已取消收藏')
					getDetail();
				})
			},
			onCancel() {
	
			},
		});
	}
	
	const applyJob = (job_id : Number) => {
		Modal.confirm({
			title: `是否要投递该职位`,
			centered: true,
			icon: createVNode(ExclamationCircleOutlined),
			onOk() {
				PostJobseekAddapplication({job_id: job_id }).then(res => {
					successToast('已投递')
					getDetail();
				})
			},
			onCancel() {
	
			},
		});
	}
	
	

	watch(() => props.id, (newVal) => {
		job_id.value = newVal
		if (job_id.value) {
			mapContainer.value = null
			getDetail()
		}
	}, { immediate: true })
</script>

<style scoped lang="less">
	:deep(.ant-btn) {
		border-radius: 0 !important;
	}
	
	.map-container {
		width: 100%;
		height: 400px;
	}
</style>