<template>
	<Dialog title="人才重复记录对比" v-model="dialogVisible" class="!w-95%">
		<el-row :gutter="10">
			<el-col :span="12">
				<el-card class="!h-100%">
					<template #header>
						<CardTitle title="当前记录" />
					</template>
					<div class="text-right" v-if="!readOnly">
						<el-button type="primary" size="small" class="mb-10px" @click="submitForm('keep_main')">保留此记录</el-button>
					</div>
					<infoForm :data="currentData" />
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card class="position-relative !h-100%">
					<template #header>
						<CardTitle title="重复记录" />
					</template>
					<infoForm :data="activeThumbnail" :class="{'mb-140px': thumbnails && thumbnails.length && thumbnails[0].length > 1 }">
						<template #header v-if="!readOnly">
							<el-button type="primary" size="small" class="mb-10px" @click="submitForm('merge_to_suspected')">合并到此记录</el-button>
						</template>
					</infoForm>
					<!-- 缩略图 -->
					<div class="thumbnail" v-if="thumbnails && thumbnails.length && thumbnails[0].length > 1">
						<el-carousel :autoplay="false" :pause-on-hover="false" :loop="false" height="120px" class="px-80px py-10px" :arrow="thumbnails?.length > 1 ? 'always' : 'none'">
							<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?.name_zh }}
											<span v-if="item?.name_en">（{{ item?.name_en }}）</span>
										</div>
										<div>{{ item?.mobile }}</div>
										<div>{{ item?.hotel_zh }} - {{ item?.title_zh }}</div>
									</div>
								</div>
							</el-carousel-item>
						</el-carousel>
					</div>
				</el-card>
			</el-col>
		</el-row>

		<template #footer>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>

<script setup>
defineOptions({ name: 'TalentMapStoreMerge' })
import infoForm from './info.vue'
import { talentDuplicateApi } from '@/api/menduner/system/talentMap/duplicate'

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const emit = defineEmits(['refresh'])

const mergeLoading = ref(false)
const dialogVisible = ref(false)
const list = ref([])
const talentTags = ref([])
const infoList = ref([])

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 = 3 // 每组缩略图数量
const thumbnails = ref([])

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

// 打开弹窗
const readOnly = ref(false)
const open = async (id, isDetail) => {
	if (!id) return message.warning('缺少数据ID')

	readOnly.value = isDetail

	const data = await talentDuplicateApi.getDuplicateDetail(id)

	currentData.value = data?.main_card // 当前记录
	activeThumbnail.value = data?.suspected_duplicates_details[0] // 默认展示第一个缩略图信息
	thumbnails.value = chunkArray(data?.suspected_duplicates_details, chunkSize) // 重复数据缩略图
  dialogVisible.value = true
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

// 处理
const submitForm = async (action) => {
	const query = {
		action
	}
	// 选择合并到重复数据中的某条数据时，需要传递选中的id
	if (action === 'merge_to_suspected') query.selected_duplicate_id = activeThumbnail.value?.id

	try {
		await talentDuplicateApi.processDuplicateRecord(currentData.value.id, query)
		message.success('操作成功')

		dialogVisible.value = false

		emit('refresh') // 刷新列表
	} catch {
	}
}
</script>

<style scoped lang="scss">
.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: 33.3%;
			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>