<template>
	<!-- <job-search></job-search>
	<job-list></job-list>
	<job-internship></job-internship>
	<job-detail></job-detail> -->
	<div>
		<a-list item-layout="vertical">
			<a-list-item>
				<a-list-item-meta>
					<template #title>
						{{companyDetail.full_name}}
					</template>
					<template #description>
						<div>
							企业编号：{{companyDetail.id}}
						</div>
					</template>
				</a-list-item-meta>
			</a-list-item>
		</a-list>

		<a-tabs v-model:activeKey="activeKey">
			<a-tab-pane key="1" tab="企业信息">
				<div style="margin: 20px 0; padding: 20px;background-color: #ffffff;">
					<div v-html="companyDetail.introduction"></div>
				</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;">
					<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>
			</a-tab-pane>
			<a-tab-pane key="2" tab="招聘职位" force-render>
				<a-row :gutter="10">
					<a-col span="6">
						<a-row :gutter="[10,10]">
							<a-col span="24" v-for="(item, index) in companyList">
								<job-card :list="jobList"></job-card>
							</a-col>
							<a-col span="24">
								<a-pagination simple v-model:current="current" :total="50" />
							</a-col>
						</a-row>
					</a-col>
					<a-col span="18">
						<div style="padding: 20px;background-color: #ffffff;">
							<job-detail></job-detail>
						</div>
					</a-col>
				</a-row>
			</a-tab-pane>
		</a-tabs>
	</div>

</template>

<script setup lang="ts">
	import { ref, onMounted, computed, watch } from 'vue';
	import JobDetail from '@/components/job/detail/index.vue'
	import JobCard from '@/components/job/card/index.vue'
	import { PostCompanyInfo, PostCompanyJobList } from '@/apis/models';
	let companyDetail = ref<object>({})
	let jobList = ref<object[]>([])

	onMounted(() => {
		PostCompanyInfo({ id: sessionStorage.getItem('id') }).then(res => {
			companyDetail.value = res.data
		})

		PostCompanyJobList().then(res => {
			if (res.data.list.length > 3) {
				jobList.value = res.data.list.slice(0, 3)
			} else {
				jobList.value = res.data.list
			}
		})
	})
</script>

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