<template>
	<div class="content-padding-inline" style="margin: 30px 0;">
		<a-row :gutter="[20,20]" type="flex" justify="center">
			<a-col span="18">
				<div style="width: 100%; background-color: #fff;">
					<a-list item-layout="vertical">
						<a-list-item>
							<a-list-item-meta>
								<template #title>
									{{basic.seekername}}
									<a-button type="link" @click="toResume" class="main-color">
										<EditOutlined style="color: #4FBE70" />修改简历
									</a-button>
								</template>
								<template #description>
									会员编号：{{basic.id}}
								</template>
								<template #avatar>
									<a-avatar :src="'https://rcsc-test.jcjob.cn/img'+basic.photo" :size="96" />
								</template>
							</a-list-item-meta>
							<div style="margin-left: 108px;">
								<a-descriptions :column="3">
									<a-descriptions-item
										label="登录账号">{{basic.mobile ? basic.mobile : '未知'}}</a-descriptions-item>
									<a-descriptions-item><a-button type="link" class="main-color">
											<FileSearchOutlined style="color: #4FBE70" />预览简历
										</a-button></a-descriptions-item>
									<a-descriptions-item label="简历是否可见">
										<a-switch></a-switch>
									</a-descriptions-item>
									<a-descriptions-item label="QQ">
										{{basic.qq ? basic.qq : '未填写'}}
									</a-descriptions-item>
									<a-descriptions-item>
										<a-button type="link" class="main-color">
											<RedoOutlined style="color: #4FBE70" />预览简历
										</a-button>
									</a-descriptions-item>
									<a-descriptions-item label="简历是否在家政可见">
										<a-switch></a-switch>
									</a-descriptions-item>
									<a-descriptions-item label="电子邮箱">
										{{basic.email ? basic.email : '未填写'}}
									</a-descriptions-item>
									<a-descriptions-item label="简历被查看次数">
										{{seeLength}}次
									</a-descriptions-item>
									<a-descriptions-item label="是否接收面试邀请通知">
										<a-switch></a-switch>
									</a-descriptions-item>
								</a-descriptions>
							</div>
						</a-list-item>
					</a-list>
				</div>
			</a-col>
			<a-col span="18">
				<a-tabs v-model:activeKey="activeKey" @change="activeKeyChange">
					<a-tab-pane :key="1" tab="面试记录">
						<invite-interview></invite-interview>
					</a-tab-pane>
					<a-tab-pane :key="2" tab="投递记录" force-render>
						<invite-apply></invite-apply>
					</a-tab-pane>
					<a-tab-pane :key="3" tab="谁看过我">
						<invite-seeme></invite-seeme>
					</a-tab-pane>
					<a-tab-pane :key="4" tab="收藏的职位">
						<invite-collect></invite-collect>
					</a-tab-pane>
				</a-tabs>
			</a-col>
		</a-row>
	</div>

</template>

<script setup lang="ts">
	import { ref, computed, onMounted, createVNode } from 'vue';
	import InviteInterview from '@/components/jobseeker/invite/interview/index.vue'
	import InviteApply from '@/components/jobseeker/invite/apply/index.vue'
	import InviteSeeme from '@/components/jobseeker/invite/seeme/index.vue'
	import InviteCollect from '@/components/jobseeker/invite/collect/index.vue'
	import { GetJobseekerDetail, GetCompanyRecommentResume, GetViewHistoryList, GetPersonInterviewList } from '@/apis/models';
	import { EditOutlined, FileSearchOutlined, RedoOutlined } from '@ant-design/icons-vue';
	import { useCommon } from '@/hooks/useCommon';
	let { commomParams, ExclamationCircleOutlined, Modal, onMenu } = useCommon();
	let jobList = ref<object[]>([])
	let basic = ref<Object>({})
	let seeLength = ref<Number>(0)

	const toResume = () => {
		debugger
		onMenu('/jobseeker/resume')
	}
	onMounted(() => {
		GetJobseekerDetail({ customer_id: sessionStorage.getItem('id') }).then(res => {
			basic.value = res.data
		})

		GetViewHistoryList().then(res => {
			seeLength.value = res.data.viewhistorys ? res.data.viewhistorys.length : 0
		})

		GetPersonInterviewList({ status: 0 }).then(res => {
			if (res.data.list.length > 0) {
				Modal.confirm({
					title: `您有${res.data.list.length}条待查看面试邀请`,
					centered: true,
					icon: createVNode(ExclamationCircleOutlined),
					okText: '前往查看',
					cancelText: '关闭',
					onOk() {

					},
					onCancel() {

					},
				});
			}
		})

	})
</script>

<style scoped lang="less">
	.talent-box {
		border-radius: 8px;
		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>