<template>
	<a-spin :spinning="spinning">
		<template v-if="detail">
			<a-card :title="detail.base.name" style="width: 700px;height: 80vh;overflow: auto;" :bordered="false">
				<template #extra>{{detail.base.pay_range_text}}</template>
				<a-descriptions :column="1" title="职位描述" style="width: 100%;">
					<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="有效期至">{{detail.base.name}}</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>
				<a-descriptions :column="1" title="岗位要求" style="width: 100%;">
					<a-descriptions-item >
						<div v-html="detail.base.describe_text"></div>
					</a-descriptions-item>
				</a-descriptions>
			</a-card>
		</template>
	</a-spin>
</template>

<script setup lang="ts">
	import { ref, onMounted, defineProps, computed, watch, defineEmits } from 'vue';
	import { GetJobDetail } from '@/apis/models';
	import { message } from 'ant-design-vue';
	import { useCommon } from '@/hooks/useCommon';
	let { store, commomParams, hideOtherModal1, openOtherModel_1 } = useCommon();
	const emit = defineEmits();
	let props = defineProps(['detail_record']);
	let detail = ref<Object>(null)
	let spinning = ref<Boolean>(false); // 加载中

	openOtherModel_1 = computed(() => {
		return store.state.openOtherModel_1;
	})


	watch(() => [props.detail_record], (newVal) => {
		if (newVal[0]) {
			spinning.value = false
			GetJobDetail({ id: props.detail_record }).then(res => {
				detail.value = res.data
				console.log(detail.value)
			})
		}
	}, { immediate: true })

	const cancelModal = () => {
		hideOtherModal1()
	}
</script>

<style lang="less" scoped>
	.a-row:first-child {
		border-bottom: none;
		border-radius: 10px 10px 0 0;
	}

	.a-row:last-child {
		border-radius: 0 0 10px 10px;
	}

	.a-row {
		padding: 6px;
		border: 1px #f0f0f0 solid;

		.a-col:first-child {}
	}

	.a-col {
		padding: 6px;
		// padding-top: 6px;
	}
</style>