<template>
	<Dialog title="人才对比" v-model="dialogVisible" class="!w-full !h-full">
		<!-- <div class="color-orange-400">
			提示：查询到当前导入的人才姓名与数据库中的记录重复，请选择处理方式
			<br />
			1、在下方数据库中查询出的姓名重复记录选中择一条进行合并
			<br />
			2、作为新记录提交
		</div> -->
		<el-row :gutter="10" class="mt-30px">
			<el-col :span="12">
				<el-card>
					<template #header>
						<CardTitle title="当前记录" />
					</template>
					<infoForm :data="currentData" />
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card style="position: relative;">
					<template #header>
						<CardTitle title="重复记录" />
					</template>
					<infoForm :data="activeThumbnail">
						<template #header>
							<el-button type="primary" size="small" style="margin-bottom: 10px;">点击合并到此记录</el-button>
						</template>
						<template #thumbnail>
							<div style="height: 140px;"></div>
						</template>
						<!-- 缩略图 -->
					</infoForm>
					<div class="thumbnail">
						<el-carousel :autoplay="false" :indicator-position="thumbnails?.length > 1 ? '' : 'none'" height="120px" :arrow="thumbnails?.length > 1 ? 'always' : 'none'" style="padding: 10px 80px;">
							<el-carousel-item v-for="(val, index) in thumbnails" :key="index+'carousel'">
								<div class="carouselContent">
									<div
										v-for="(item, index1) in val"
										:key="index1+'carousel'"
										class="carouselItem"
										:class="{'carouselItemAct': index*chunkSize + index1 === activeIndex}"
										@click="handleSwitch(item, index, index1)"
									>
										<div>{{ item?.title }}</div>
										<div>{{ item?.description }}</div>
										<div>{{ item?.shortDesc }}</div>
									</div>
								</div>
							</el-carousel-item>
						</el-carousel>
					</div>
				</el-card>
			</el-col>
		</el-row>

		<template #footer>
      <el-button @click="submitForm" type="primary" :disabled="newRecordLoading">新记录提交</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>

<script setup>
defineOptions({ name: 'TalentMapStoreMerge' })
import infoForm from './info.vue'

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const mergeLoading = ref(false)
const newRecordLoading = ref(false)
const dialogVisible = ref(false)
const list = ref([
	{
		id: 1,
		name: '张三',
		phone: '13800138000',
		email: 'zhangsan@example.com',
		sexStr: '男',
		avatar: 'https://minio.menduner.com/dev/person/1/img/933de4dc9eb28e2bdf79a1da518a8e1a0e14bf4b78358ea9452fb8e8fdd2f7f6.jpeg'
	},
	{
		id: 2,
		name: '张三',
		phone: '13800138001',
		email: 'lisi@example.com',
		sexStr: '女',
		avatar: 'https://minio.menduner.com/dev/person/1/img/933de4dc9eb28e2bdf79a1da518a8e1a0e14bf4b78358ea9452fb8e8fdd2f7f6.jpeg'
	}
])
const talentTags = ref([{talent: '1', tag:'新开酒店经验'}, {talent: '2', tag:'总经理'}])
const infoList = ref([
	{
		title: '姓名1',
		description: '暂无描述',
		shortDesc: '记录1暂无描述',
		talentTags: [{talent: '1', tag:'新开酒店经验'}, {talent: '2', tag:'总经理'}]
	},
	{
		title: '姓名2',
		description: '这是第二条记录的详细描述内容...',
		shortDesc: '记录2的简短描述'
	},
	{
		title: '姓名3',
		description: '这是第二条记录的详细描述内容...',
		shortDesc: '记录2的简短描述'
	},
	{
		title: '姓名4',
		description: '这是第二条记录的详细描述内容...',
		shortDesc: '记录2的简短描述'
	},
	{
		title: '姓名5',
		description: '这是第二条记录的详细描述内容...',
		shortDesc: '记录2的简短描述'
	},
	{
		title: '姓名2-1',
		description: '这是第一条记录的详细描述内容...',
		shortDesc: '记录1的简短描述'
	},
	{
		title: '姓名2-2',
		description: '这是第二条记录的详细描述内容...',
		shortDesc: '记录2的简短描述'
	},
	{
		title: '姓名2-3',
		description: '这是第二条记录的详细描述内容...',
		shortDesc: '记录2的简短描述'
	},
	{
		title: '姓名2-4',
		description: '这是第二条记录的详细描述内容...',
		shortDesc: '记录2的简短描述'
	},
	{
		title: '姓名2-5',
		description: '这是第二条记录的详细描述内容...',
		shortDesc: '记录2的简短描述'
	},
	{
		title: '姓名3-1',
		description: '这是第一条记录的详细描述内容...',
		shortDesc: '记录1的简短描述'
	},
	{
		title: '姓名3-2',
		description: '这是第二条记录的详细描述内容...',
		shortDesc: '记录2的简短描述'
	},
	{
		title: '姓名3-3',
		description: '这是第二条记录的详细描述内容...',
		shortDesc: '记录2的简短描述'
	},
	{
		title: '姓名3-4',
		description: '这是第二条记录的详细描述内容...',
		shortDesc: '记录2的简短描述'
	}
])

function chunkArray(array, chunkSize) {
  const result = [];
  for (let i = 0; i < array.length; i += chunkSize) {
    result.push(array.slice(i, i + chunkSize));
  }
  return result;
}

const chunkSize = 5 // 每组缩略图数量
const thumbnails = chunkArray(infoList.value, chunkSize)

const open = async (data) => {
  dialogVisible.value = true
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const activeIndex = ref(0)
const activeThumbnail = ref(infoList.value[0])
const currentData = ref(infoList.value[0])
// 切换重合记录
const handleSwitch = (item, index, index1) => {
	activeIndex.value = index*chunkSize + index1
	activeThumbnail.value = item
}

// 人才合并
const handleMerge = async (id) => {
	console.log(id, 'merge')
}

// 新记录提交
const submitForm = async () => {
	// newRecordLoading.value = true

	// try {
	// 	message.success('新记录提交成功')
	// } finally {
	// 	newRecordLoading.value = false
	// }
}
</script>

<style scoped>
/* .el-carousel__item h3 {
  margin: 0;
  text-align: center;
} */

/* .el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
} */

.module {
	margin-top: 20px;
}
.thumbnail {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 140px;
	width: 100%;
	background-color: #fff;
	overflow: hidden;
	border-top: 1px solid #eee;
	.carouselContent {
		display: flex;
		align-items: center;
		height: 100%;
		.carouselItem {
			width: 108px;
			height: 80px;
			border: 1px solid #80808057;
			border-radius: 5px;
			margin: 0 10px;
			padding: 10px;
			background-color: #fff;
			font-size: 12px;
			overflow: hidden;
			cursor: pointer;
		}
		.carouselItemAct {
			/* color: #67C23A; */
			border: 1px solid #62a4e698;
			background-color: #62a4e623;
		}
	}
}
</style>