<template>
  <ContentWrap>
    <div class="box flex items-center justify-center decoration-column transition-duration-500" :class="{ active: isSearch }">
      <div class="!w-75%">
        <el-input
          v-model.trim="searchValue"
          size="large"
					clearable
          placeholder="请输入您的描述信息定位人才"
          @keydown.enter="handleSearch"
					@clear="handleSearch('clear')"
        >
					<template #append>
						<el-button :icon="Search" @click="handleSearch" />
					</template>
				</el-input>
      </div>
    </div>
  </ContentWrap>
	
  <ContentWrap v-if="isSearch">
    <el-table
      v-loading="loading"
      :data="list"
      :stripe="true"
      row-key="id"
    >
      <el-table-column label="中文名" align="left" prop="name_zh" />
      <el-table-column label="英文名" align="left" prop="name_en" />
      <el-table-column label="联系电话" align="center" prop="mobile" />
      <el-table-column label="电子邮箱" align="center" prop="email" />
      <el-table-column label="更新时间" align="center" prop="updated_at" />
      <el-table-column label="操作" align="left">
        <template #default="scope">
          <el-button link type="primary" @click="handleDetails(scope.row.pg_id)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </ContentWrap>

	<el-drawer
		v-model="drawer"
		class="!w-50vw"
		:with-header="false"
	>
		<div v-loading="detailsLoading">
			<div v-if="detail && Object.keys(detail).length > 0">
				<div class="mb-30px" v-if="previewUrl">
					<div class="el-descriptions__header el-descriptions__title">名片</div>
					<div class="text-center w-100% cursor-pointer">
						<el-image :src="previewUrl" class="w-300px h-500px" :preview-src-list="[previewUrl]" />
					</div>
				</div>

				<el-descriptions title="基本信息" :column="1" border>
					<el-descriptions-item label="中文名">{{ detail.name_zh }}</el-descriptions-item>
					<el-descriptions-item label="英文名">{{ detail.name_en }}</el-descriptions-item>
					<el-descriptions-item label="职位/头衔(中)">{{ detail.title_zh }}</el-descriptions-item>
					<el-descriptions-item label="职位/头衔(英)">{{ detail.title_en }}</el-descriptions-item>
					<el-descriptions-item label="手机号码">{{ detail.mobile }}</el-descriptions-item>
					<el-descriptions-item label="电子邮箱">{{ detail.email }}</el-descriptions-item>
					<el-descriptions-item label="酒店/公司名称(中)">{{ detail.hotel_zh }}</el-descriptions-item>
					<el-descriptions-item label="酒店/公司名称(英)">{{ detail.hotel_eh }}</el-descriptions-item>
					<el-descriptions-item label="地址(中)">{{ detail.address_zh }}</el-descriptions-item>
					<el-descriptions-item label="地址(英)">{{ detail.address_en }}</el-descriptions-item>
					<el-descriptions-item label="邮政编码(中)">{{ detail.postal_code_zh }}</el-descriptions-item>
					<el-descriptions-item label="邮政编码(英)">{{ detail.postal_code_en }}</el-descriptions-item>
					<el-descriptions-item label="品牌名称(中)">{{ detail.brand_zh }}</el-descriptions-item>
					<el-descriptions-item label="品牌名称(英)">{{ detail.brand_en }}</el-descriptions-item>
					<el-descriptions-item label="隶属关系(中)">{{ detail.affiliation_zh }}</el-descriptions-item>
					<el-descriptions-item label="隶属关系(英)">{{ detail.affiliation_en }}</el-descriptions-item>
					<el-descriptions-item label="品牌组合">{{ detail.brand_group }}</el-descriptions-item>
					<el-descriptions-item label="固定电话">{{ detail.phone }}</el-descriptions-item>
					<el-descriptions-item label="创建时间">{{ detail.created_at }}</el-descriptions-item>
					<el-descriptions-item label="更新时间">{{ detail.updated_at }}</el-descriptions-item>
					<el-descriptions-item label="状态">
						<el-tag :type="detail.status === 'active' ? 'primary' : 'danger'">
							{{ detail.status === 'active' ? '已启用' : '已禁用' }}
						</el-tag>
					</el-descriptions-item>
				</el-descriptions>

				<div class="mt-30px career">
					<div class="el-descriptions__header el-descriptions__title">职业轨迹</div>
					<el-table :data="detail.career_path" border>
						<el-table-column prop="company_name" label="酒店名称" />
						<el-table-column prop="position" label="职位名称" />
						<el-table-column prop="address" label="日期" />
					</el-table>
				</div>
			</div>
			<el-empty v-else description="暂无详细信息，去查看其他人的信息吧~" />
		</div>
	</el-drawer>

</template>

<script setup>
import { ref, computed } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { talentSearchApi } from '@/api/menduner/system/talentMap/search'
import { talentLabelingApi } from '@/api/menduner/system/talentMap/labeling'

const message = useMessage() // 消息弹窗
const searchValue = ref(null)
const formRef = ref()
const loading = ref(false)
const list = ref([])
const abortController = ref(null)

const drawer = ref(false)
const detailsLoading = ref(false)
const detail = ref({})
const previewUrl = ref(null)
const handleDetails = async (id) => {
	if (!id) return

	drawer.value = true
	detailsLoading.value = true
	try {
    const result = await talentSearchApi.getBusinessCardDetails(id)
    detail.value = result || {}

    // 获取名片预览
    if (result?.image_path) {
      const data = await talentLabelingApi.getTalentCardByImagePath(result.image_path)
      previewUrl.value = URL.createObjectURL(data)
    }
  } finally {
		detailsLoading.value = false
	}
}

const getList = async () => {
	loading.value = true
	try {
		abortController.value = new AbortController()
		const signal = abortController.value.signal
		const data = await talentSearchApi.getTalentList({ query_requirement: searchValue.value }, signal)
		if (!data || !data.length) {
			message.warning('暂无数据，请更换查询条件后再试')
			list.value = []
			isSearch.value = false
			return
		}
		list.value = data
	} finally {
		loading.value = false
	}
}

const isSearch = ref(false)
const handleSearch = (type='search') => {
	if (type === 'clear') {
		list.value = []
		isSearch.value = false
		if (abortController.value) {
      abortController.value.abort() 
      abortController.value = null
    }
		return
	}
	isSearch.value = true
	if (!searchValue.value) return message.warning('请输入查询条件')
	getList()
}
</script>

<style scoped lang="scss">
.box {
  min-height: 500px;
  &.active {
    min-height: unset;
  }
}
:deep {
	.career {
		.el-table th.el-table__cell {
			background-color: #f5f7fa;
		}
	}
}
</style>