<template>
	<div v-if="mode== 'detail'">
		<a-page-header>
			<template #title>
				<a-button @click="back" type="link">
					<ArrowLeftOutlined />前往更多求职
				</a-button>
			</template>
			<a-list item-layout="vertical">
				<a-list-item>
					<a-list-item-meta>
						<template #title>
							<div style="font-size: 24px; font-family: bold;">{{companyDetail.full_name}}</div>

						</template>
						<template #description>
							<div>
								企业编号：{{companyDetail.id}}
							</div>
						</template>
					</a-list-item-meta>
				</a-list-item>
			</a-list>

			<a-tabs v-model:activeKey="activeKey" type="card">
				<a-tab-pane :key="1" tab="企业信息">
					<div style="margin: 20px 0; padding: 20px;background-color: #ffffff;border-radius: 8px;">
						<a-descriptions title="公司介绍" layout="vertical">
							<a-descriptions-item>
								<div v-html="companyDetail.introduction"></div>
							</a-descriptions-item>
						</a-descriptions>
					</div>
					<div style="margin: 20px 0; padding: 20px;background-color: #ffffff;">
						<a-descriptions :column="7" title="公司概况" layout="vertical">
							<a-descriptions-item label="所属行业" span="2"
								v-if="companyDetail.situation">{{companyDetail.situation.industry_text}}/{{companyDetail.situation.industry2_text}}</a-descriptions-item>
							<a-descriptions-item label="公司性质"
								v-if="companyDetail.situation">{{companyDetail.situation.nature_text}}</a-descriptions-item>
							<a-descriptions-item label="公司规模"
								v-if="companyDetail.situation">{{companyDetail.situation.scale_text }}</a-descriptions-item>
							<a-descriptions-item label="成立时间"
								v-if="companyDetail.situation">{{companyDetail.situation.establishment_date }}</a-descriptions-item>
						</a-descriptions>
					</div>
					<div style="margin: 20px 0; padding: 20px;background-color: #ffffff;border-radius: 8px;">
						<a-descriptions :column="7" title="联系方式" layout="vertical">
							<a-descriptions-item label="联系地址"
								span="2">{{companyDetail.detail_address}}</a-descriptions-item>
							<a-descriptions-item label="联系人">{{companyDetail.contact}}</a-descriptions-item>
							<a-descriptions-item label="联系手机">{{companyDetail.mobile}}</a-descriptions-item>
							<a-descriptions-item label="联系电话">{{companyDetail.phone}}</a-descriptions-item>
							<a-descriptions-item label="Email">{{companyDetail.email}}</a-descriptions-item>
							<a-descriptions-item label="传真">{{companyDetail.fax}}</a-descriptions-item>
						</a-descriptions>
					</div>
					<div style="margin: 20px 0; padding: 20px;background-color: #ffffff;border-radius: 8px;">
						<a-descriptions :column="7" title="企业相册" layout="vertical">
							<a-descriptions-item><image-container
									:imgObj="{src: imageprefix + companyDetail.photo,width: '153px',height:'50px'}"></image-container></a-descriptions-item>
						</a-descriptions>
					</div>
					<div style="margin: 20px 0; padding: 20px;background-color: #ffffff;border-radius: 8px;">
						<a-descriptions :column="1" title="地图位置" layout="vertical">
							<a-descriptions-item span="24">
								<div ref="mapContainer" class="map-container"></div>
							</a-descriptions-item>
						</a-descriptions>
					</div>
				</a-tab-pane>
				<a-tab-pane :key="2" tab="招聘职位" force-render>
					<template v-if="!jobList || jobList.length == 0">
						<a-empty style="height: 100vh;">
							<template #description>
								本企业未有招聘信息
							</template>
						</a-empty>
					</template>
					<template v-else>
						<a-row :gutter="10">
							<a-col span="6">
								<div style="background-color: #ffffff;padding-bottom: 20px; border-radius: 8px;">
									<job-card :list="jobList" @detail="toDetail"></job-card>
									<a-flex justify="center">
										<a-space>
											<a-pagination simple  v-model:current="current"
												:total="total" @change="pageChange" />
										</a-space>
									</a-flex>
									<!-- <a-card hoverable :bordered="false" style="width: 100%">
										<template #cover>
											<job-card :list="jobList" @detail="toDetail"></job-card>
										</template>
										<template #actions>
											<a-col span="24">
												
											</a-col>
										</template>
									</a-card> -->
								</div>
								
							</a-col>
							<a-col span="18">
								<div v-if="job_id"
									style="padding: 20px;background-color: #ffffff;border-radius: 8px;">
									<job-detail :id="job_id"></job-detail>
								</div>
							</a-col>
						</a-row>
					</template>
				</a-tab-pane>
			</a-tabs>
		</a-page-header>
	</div>
	<div v-else>
		<job-list @detail="showDetail"></job-list>
		<job-internship @detail="showDetail"></job-internship>
		<!-- <job-detail></job-detail> -->
	</div>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed, watch, onBeforeUnmount } from 'vue';
	import JobDetail from '@/components/job/detail/index.vue'
	import JobCard from '@/components/job/card/index.vue'
	import JobList from '@/components/job/list/index.vue'
	import JobInternship from '@/components/job/internship/index.vue'
	import vMap from '@/components/map/map-iframe.vue'
	import { PostCompanyInfo, GetJobCompanyjobs } from '@/apis/models';
	import { ArrowLeftOutlined } from '@ant-design/icons-vue';
	import { router } from '@/router';
	import { useCommon } from '@/hooks/useCommon';
	let { imageprefix } = useCommon();
	let activeKey = ref<Number>(sessionStorage.getItem('tab_key') ? Number(sessionStorage.getItem('tab_key')) : 1)
	let companyDetail = ref<object>({})
	let jobList = ref<object[]>([])
	let pubilc_id = ref<Number>(0)
	let current = ref<Number>(1)
	let total = ref<Number>(0)
	let job_id = ref<Number>(0)
	let mode = ref<String>(sessionStorage.getItem('mode'))
	const mapContainer = ref(null);

	const toDetail = (data) => {
		job_id.value = data.id;

	}

	const pageChange = (page) => {
		current.value = page
		getJobCompanyjobs(page)
	}

	const getJobCompanyjobs = (page) => {
		GetJobCompanyjobs({ company_id: pubilc_id.value ? pubilc_id.value : sessionStorage.getItem('id'), page: page, pagesize: 3 }).then(res => {
			total.value = res.data.total;
			if (res.data.jobs.length > 3) {
				jobList.value = res.data.jobs.slice(0, 3)
			} else {
				jobList.value = res.data.jobs
			}
		})
	}



	const back = (page) => {
		sessionStorage.removeItem('pubilc_id')
		sessionStorage.removeItem('mode')
		sessionStorage.removeItem('tab_key')
		sessionStorage.removeItem('job_id')
		mode.value = sessionStorage.getItem('mode')
	}

	const showDetail = (page) => {
		mode.value = sessionStorage.getItem('mode')
		activeKey.value = sessionStorage.getItem('tab_key') ? Number(sessionStorage.getItem('tab_key')) : 1
		job_id.value = sessionStorage.getItem('job_id') ? Number(sessionStorage.getItem('job_id')) : 0;
		pubilc_id.value = sessionStorage.getItem('pubilc_id') ? Number(sessionStorage.getItem('pubilc_id')) : pubilc_id.value;
		if (sessionStorage.getItem('pubilc_id') != 0 || sessionStorage.getItem('id') != 0) {
			PostCompanyInfo({ id: pubilc_id.value ? pubilc_id.value : sessionStorage.getItem('id') }).then(res => {
				companyDetail.value = res.data
			})
			getJobCompanyjobs(current.value)
		}
	}
	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(companyDetail.value.latitude, companyDetail.value.longitude),  //点标记坐标位置
				"properties": {//自定义属性
					"title": "marker1"
				}
			}
			]
		});


	}



	onMounted(() => {
		if (mode.value == 'detail') {
			job_id.value = sessionStorage.getItem('job_id') ? Number(sessionStorage.getItem('job_id')) : 0;
			pubilc_id.value = sessionStorage.getItem('pubilc_id') ? Number(sessionStorage.getItem('pubilc_id')) : pubilc_id.value;
			if (sessionStorage.getItem('pubilc_id') != 0 || sessionStorage.getItem('id') != 0) {
				PostCompanyInfo({ id: pubilc_id.value ? pubilc_id.value : sessionStorage.getItem('id') }).then(res => {
					companyDetail.value = res.data;
					companyDetail.value.latitude = 39.984104
					companyDetail.value.longitude = 116.307503
					if (mapContainer.value) {
						initMap()
					} else {
						console.error('地图容器元素未找到');
					}
				})
				getJobCompanyjobs(current.value)
			}
		}
	})

	onBeforeUnmount(() => {
		sessionStorage.removeItem('pubilc_id')
		sessionStorage.removeItem('mode')
		sessionStorage.removeItem('tab_key')
		sessionStorage.removeItem('job_id')
	})
</script>

<style scoped lang="less">
	:deep(.ant-list-item) {
		padding: 0 !important;
	}

	.map-container {
		width: 100%;
		height: 400px;
	}
</style>