<template>
	<template v-if="detail">
		<a-page-header>
			<template #title>
				<a-button @click="back" type="link">
					<ArrowLeftOutlined />返回招聘会列表
				</a-button>
			</template>
			<a-card style="width: 100%">
				<a-card-meta :title="detail.title" >
					<template #description>
						<div>
							发布时间： {{detail.created_at}}
						</div>
						<div>
							招聘会地点： {{detail.address}}
						</div>
					</template>
				</a-card-meta>
				<a-divider />
				<div v-html="detail.content"></div>
			</a-card>
			<div class="company-box">
				<a-typography>
					<a-typography-title :level="5">参与的企业</a-typography-title>
					<a-typography-paragraph>
						<a-row :gutter="[10,10]" v-if="companyList && companyList.length > 0">
							<a-col v-for="(item, index) in companyList">
								<div style="color: #808080" @click="toCompanyDetail(item.company_id)">{{item.company_name}}</div>
							</a-col>
						</a-row>
						<div style="color: #808080" v-else>暂无企业</div>
					</a-typography-paragraph>
				</a-typography>
			
			</div>
		</a-page-header>
	</template>
	<template v-else>
		<a-list item-layout="horizontal" :data-source="recruitmentList" style="cursor: pointer;">
			<template #renderItem="{ item }">
				<a-list-item @click="toDetail(item)">
					<a-list-item-meta :title="item.title">
						<template #description>
							<a-space direction="vertical">
								<div>
									发布时间： {{item.created_at}}
								</div>
								<div>
									招聘会地点： {{item.address}}
								</div>
							</a-space>
						</template>
					</a-list-item-meta>
				</a-list-item>
			</template>
		</a-list>
		<a-flex align="center" justify="center">
			<a-pagination hideOnSinglePage v-model:current="current" :total="total" @change="pageChange" />
		</a-flex>
	</template>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted ,defineEmits} from 'vue';
	import he from 'he'; 
	import { PostRecruitmentList, PostRecruitmentBookcompany } from '@/apis/models';
	import { ArrowLeftOutlined } from '@ant-design/icons-vue';
	import { router } from '@/router';
	const emit = defineEmits();
	let recruitmentList = ref<object[]>([])
	let detail = ref<Object>(null)
	let current = ref<Number>(1)
	let total = ref<Number>(0)
	let companyList = ref<Object>([])

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

	const getRecruitmentList = (page) => {
		PostRecruitmentList({ page: current.value }).then(res => {
			recruitmentList.value = res.data.recruitments;
			total.value = res.data.total;
		})
	}

	onMounted(() => {
		getRecruitmentList()
	})

	const toDetail = (data) => {
		detail.value = data
		detail.value.content = he.decode(detail.value.content)
		PostRecruitmentBookcompany({ pagesize: 100, recruitment_id: data.id }).then(res => {
			companyList.value = res.data.recruitmentbooks
		})
	}
	
	const toCompanyDetail = (val : Number) => {
		sessionStorage.setItem('tab_key', 1)
		sessionStorage.setItem('pubilc_id', val)
		sessionStorage.setItem('mode', 'detail')
		router.push({
			path: '/personal'
		})
	}

	const back = (data) => {
		detail.value = null
	}
</script>

<style lang="less" scoped>
	.company-box {
		width: 100%;
		padding: 20px;
		margin: 20px 0;
		cursor: pointer;
		border: 1px solid #f0f0f0;
		border-radius: 8px;
	}
</style>