<template>
	<a-row :gutter="[10,10]">
		<a-col span="8" v-for="(item, index) in jobList">
			<a-card hoverable style="width: 100%;background-color: #fff;border-radius: 10px;padding: 20px;"
				>
				<a-flex vertical style="width: 100%;background-color: #fff;border-radius: 10px;padding: 20px;">
					<a-space direction="vertical" :size="20">
						<a-flex justify="space-between" style="width: 100%;">
							<div style="font-size: 18px; font-weight: 600;" @click="toDetail(item.id, item.company_id)">{{item.name}}</div>
							<div style="color: #4FBE70;font-size: 18px;">{{item.pay_range_text}}</div>
						</a-flex>
						<a-flex style="width: 100%;">
							<a-tag>{{item.experience_text ? item.experience_text : '不限'}}</a-tag>
							<a-tag>{{item.certification_text ? item.certification_text : '不限'}}</a-tag>
							<a-tag>{{item.school_degree_text ? item.school_degree_text : '不限'}}</a-tag>
							<a-tag>{{item.profelevel_text ? item.profelevel_text : '不限'}}</a-tag>
						</a-flex>
					</a-space>
					<a-divider />
					<a-space direction="vertical">
						<a-flex justify="space-between" style="width: 100%;">
							<div style="font-weight: 600;" @click="toCompany(item.id, item.company_id)">{{item.full_name}}</div>
							<a-button type="primary" size="small" @click="toDetail(item.id, item.company_id)">查看详情</a-button>
						</a-flex>
						<a-flex style="width: 100%;color: #BEBEBE;">
							{{item.locations ? item.locations[0].name : '未知地址'}}
						</a-flex>
					</a-space>
				</a-flex>
			</a-card>
		</a-col>
	</a-row>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted, defineProps, watch } from 'vue';
	import { router } from '@/router';
	let props = defineProps(['list']);
	let jobList = ref<Object[]>([])

	const toCompany = (job_id : Number, company_id : Number) => {
		sessionStorage.setItem('job_id', job_id)
		sessionStorage.setItem('tab_key', 1)
		sessionStorage.setItem('pubilc_id', company_id)
		sessionStorage.setItem('mode', 'detail')
		router.push({
			path: '/personal'
		})
	}
	
	const toDetail = (job_id : Number, company_id : Number) => {
		sessionStorage.setItem('job_id', job_id)
		sessionStorage.setItem('tab_key', 2)
		sessionStorage.setItem('pubilc_id', company_id)
		sessionStorage.setItem('mode', 'detail')
		router.push({
			path: '/personal'
		})
	}
	watch(() => props.list, (newVal) => {
		jobList.value = newVal
	}, { immediate: true })
</script>


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

	:deep(.ant-card-body) {
		padding: 0 !important;
	}
</style>