<template>
	<a-row :gutter="[10,10]">
		<a-col span="12" v-for="(item, index) in list">
			<div class="talent-box">
				<a-list>
					<a-list-item>
						<template #actions>
							<a-button>
								<StarOutlined />
								收藏
							</a-button>
							<a-button>
								邀请面试
							</a-button>
						</template>
						<a-list-item-meta>
							<template #title>
								{{item.seekername}}
							</template>
							<template #description>
								<div>
									{{item.gender}}
									<a-divider type="vertical" />
									{{item.education_text}}
									<a-divider type="vertical" />
									{{item.now_level1_text}}{{item.now_level2_text}}
								</div>
								<div style="margin-top: 10px; overflow: hidden;
								display: -webkit-box;
								-webkit-line-clamp: 1;
								-webkit-box-orient: vertical;
								text-overflow: ellipsis;">
									<div v-html="item.introduction"></div>
								</div>
							</template>
							<template #avatar>
								<a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
									:size="48" />
							</template>
						</a-list-item-meta>
					</a-list-item>
				</a-list>
				<!-- <a-list item-layout="horizontal" :split="false" position="bottom" v-for="(item, index) in list">
					<a-list-item>
						<template #actions>
							<a-button>
								<StarOutlined />
								收藏
							</a-button>
							<a-button>
								投简历
							</a-button>
						</template>
						<a-list-item-meta>
							<template #title>
								{{item.seekername}}
							</template>
							<template #description>
								<div>
									Text
									<a-divider type="vertical" />
									<a href="#">Link</a>
									<a-divider type="vertical" />
									<a href="#">Link</a>
									<div>{{item.introduction}}</div>
								</div>
							</template>
							<template #avatar>
								<a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" :size="48" />
							</template>
						</a-list-item-meta>
						<div style="width: 30%;">
							<a-row>
								<a-col span="24">
									地点：广东省，中山市
								</a-col>
								<a-col span="24">
									期望：环境更加环境更加环境更加环境更
								</a-col>
								<a-col span="24">
									时间：2023-12-19
								</a-col>
							</a-row>
							
						</div>
					</a-list-item>
				</a-list> -->
			</div>
		</a-col>
		<a-col span="24">
			<div style="display: flex;align-items: center;justify-content: center;padding: 30px;font-size: 24px;">查看更多
			</div>
		</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[]>([])
	watch(() => [props.list], (newVal) => {
		console.log(newVal[0])
		list.value = newVal[0]
	})
</script>

<style scoped lang="less">
	.talent-box {
		background-color: #fff;
	}

	.applyRouteStyles(@routeName) {
		& when (@routeName =company) {
			:deep(.ant-list-item-meta) {
				flex: none !important;
				width: 40% !important;
			}

			:deep(.ant-list-item-action) {
				margin-inline-start: 0 !important;
			}
		}
	}

	// :deep(.ant-list-item-meta) {
	// 	flex: none !important;
	// 	width: 40% !important;
	// }

	// :deep(.ant-list-item-action) {
	// 	margin-inline-start: 0 !important;
	// }
</style>