<template>
		<a-row :gutter="[10,20]">
			<a-col span="24" v-for="(item, index) in list">
				<a-flex vertical style="width: 100%;border-radius: 10px;padding: 20px 20px 0;">
					<a-space direction="vertical" :size="20">
						<a-flex justify="space-between" style="width: 100%;">
							<div style="font-size: 18px; font-weight: 600;width: 70%;">{{item.name}}</div>
							<div style="color: #4FBE70;">{{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-flex justify="flex-end">
							<a-space>
								<a-button type="primary"  size="small" @click="toDetail(item.id)">查看详情</a-button>
							</a-space>
						</a-flex>
					</a-space>
					<a-divider />
					<!-- <a-space direction="vertical">
						<a-flex justify="space-between" style="width: 100%;">
							<div>{{item.full_name}}</div>
							<a-button type="primary" ghost size="small" @click="toDetail(item.id)">查看详情</a-button>
						</a-flex>
						<a-flex style="width: 100%;">
							{{item.locations ? item.locations[0].name : '未知地址'}}
						</a-flex>
					</a-space> -->
				</a-flex>
			</a-col>
		</a-row>
</template>

<script setup lang="ts">
	import { ref, onMounted, watch, computed } from 'vue';
	import { useCommon } from '@/hooks/useCommon';
	import { StarOutlined } from '@ant-design/icons-vue';
	let { commomParams } = useCommon();
	let props = defineProps(['list']);
	const emit = defineEmits();
	let list = ref<Object[]>([])
	const toDetail = (val) => {
		emit('detail', {id: val})
	}
	watch(() => [props.list], (newVal) => {
		console.log(newVal[0])
		list.value = newVal[0]
	},{immediate: true})
	
	
	
</script>

<style lang="less" scoped>
	.job-box {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		// align-items: center;
		width: 100%;

		.job-title {
			padding: 20px;
			background-color: #ffffff;

			.aaaa {
				display: flex;
				justify-content: space-between;
			}
		}

		.job-company {
			padding: 20px;
			background-color: #cccccc;

			.aaaa {
				display: flex;
				justify-content: space-between;
			}
		}

	}

	.mt10 {
		margin-bottom: 10px;
	}
</style>