<script lang="ts" setup>
/**
 * @Name: InfoCard.vue
 * @Description:
 * @Author: xinyan
 */
import { useRouter } from 'vue-router';
import { ref } from 'vue';
import { usePagination } from '/@/utils/usePagination';
import { useTableData } from '/@/utils/useTableData';
import { Picture as IconPicture, Plus, Search } from '@element-plus/icons-vue';
import * as api from '/@/views/employee-information/api';
import CreateEmployee from '/@/views/employee-information/components/CreateEmployee.vue';
import { ElCol } from 'element-plus';

const router = useRouter();
// const loading = ref(false);

const searchName = ref([]);
const employeeOptions = ref([]);
const searchDepartment = ref('');

// 创建弹窗
const showDialog = ref(false);
// const isDrawerVisible = ref(false);

const employeeInfo = ref([]);
const { tableOptions, handlePageChange } = usePagination(fetchCardData);
tableOptions.value.limit = 12;

async function fetchCardData() {
	const query = {
		page: tableOptions.value.page,
		limit: tableOptions.value.limit,
		name: Array.isArray(searchName.value) ? searchName.value.join(',') : searchName.value,
		department: searchDepartment.value,
	};
	await useTableData(api.getCardData, query, tableOptions);
}

async function addEmployee() {
	showDialog.value = true;
}

const checkItem = (item) => {
	router.push({
		path: '/employee/detail',
		query: {
			id: item.id,
		},
	});
};

const getImageUrl = (images) => {
	// 如果有图片，返回第一个图片的 image_url，否则返回占位图
	return images.length > 0 ? images[0].image_url : '';
};

async function fetchUsersSelect() {
	try {
		const resp = await api.getEmployeeList();
		employeeOptions.value = resp.data.map((item: any) => {
			return { value: item.id, label: item.name };
		});
	} catch (e) {
		console.error('Failed to fetch operation select:', e);
	}
}

onMounted(() => {
	fetchUsersSelect();
	fetchCardData();
});
</script>

<template>
	<!-- 标题区域 -->
	<el-card class="mb-5" style="border: none">
		<div class="flex justify-between items-baseline">
			<div>
				<span class="font-bold text-xl">人员信息概览</span>
				<el-divider class="text-3xl" direction="vertical" />
				<el-select
					v-model="searchName"
					clearable
					collapse-tags
					collapse-tags-tooltip
					filterable
					multiple
          placeholder="姓名"
					style="width: 200px;padding-right: 10px;"
					@change="fetchCardData"
				>
					<el-option v-for="item in employeeOptions" :key="item.label" :label="item.label" :value="item.label" />
				</el-select>
				<el-input v-model="searchDepartment" clearable placeholder="部门" style="width: 200px" @change="fetchCardData"></el-input>
			</div>
			<span>
				<el-button :icon="Plus" bg text type="primary" @click="addEmployee">添 加</el-button>
			</span>
		</div>
	</el-card>
	<!-- 卡片展示区域 -->
	<el-card :body-style="{ padding: '0px' }" class="flex-grow" style="border: none">
		<el-card v-loading="tableOptions.loading" class="card-container" shadow="never" style="border: none">
			<el-row :gutter="20">
				<el-col v-for="(item, index) in tableOptions.data" :key="index" :lg="4" :md="6" :sm="8" :xl="4" :xs="12" class="my-2.5">
					<el-card :body-style="{ padding: '20px 20px 5px 20px' }" class="item-card" shadow="hover">
						<div class="image-wrapper">
							<el-image :src="getImageUrl(item.images)" alt="电脑图片" class="card-image">
								<template #error>
									<el-icon class="card-image" style="font-size: 4rem">
										<icon-picture />
									</el-icon>
								</template>
							</el-image>
						</div>
						<hr style="box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)" />
						<div class="card-content">
							<div class="text-wrapper">
								<span style="color: #808d97; font-weight: 500">姓名: </span>
								<span style="font-weight: 500">{{ item.name }}</span>
							</div>
							<div class="text-wrapper">
								<span style="color: #808d97; font-weight: 500">部门: </span>
								<span style="font-weight: 500">{{ item.department }}</span>
							</div>
						</div>
						<template #footer>
							<div style="text-align: center; padding: 0 10px">
								<!--<el-button :icon="Search" bg circle text type="primary" @click="checkItem(item)" />-->
								<!--<el-button :icon="EditPen" bg circle text type="warning" @click="editItem(item)" />-->
								<el-button :icon="Search" plain round style="width: 100%" type="primary" @click="checkItem(item)"> 查看详情 </el-button>
							</div>
						</template>
					</el-card>
				</el-col>
			</el-row>
		</el-card>
		<div class="pagination-container">
			<el-pagination
				v-model:current-page="tableOptions.page"
				v-model:page-size="tableOptions.limit"
				:page-sizes="[6, 12, 24, 36, 48, 60]"
				:total="tableOptions.total"
				background
				layout="sizes, prev, pager, next, total, jumper"
				@change="handlePageChange"
			/>
		</div>
	</el-card>
	<!-- 新增 Dialog -->
	<CreateEmployee v-model="showDialog" @refresh="fetchCardData" />
	<!-- 编辑 Drawer -->
	<!--<EditEmployeeInfo v-if="isDrawerVisible" v-model="isDrawerVisible" :employeeInfo :name="employeeInfo.name" @refresh="fetchCardData" />-->
</template>

<style lang="scss" scoped>
.card-container {
	margin-bottom: 30px;
	padding: 0;
}

.item-card {
	border-radius: 10px;
	overflow: hidden;
	position: relative;
}

.card-image {
	width: 100%;
	height: 150px;
	object-fit: cover;
	padding-bottom: 10px;
}

.card-content {
	padding-top: 10px;
	font-size: 14px;
	max-height: 60px; /* 根据需要设置最大高度 */
	overflow: hidden; /* 隐藏超出部分 */
	text-overflow: ellipsis; /* 省略号效果 */
	display: -webkit-box; /* 适用于多行文本处理 */
	-webkit-box-orient: vertical; /* 垂直排列 */
}

.text-wrapper {
	white-space: nowrap; /* 不换行 */
	overflow: hidden; /* 隐藏超出部分 */
	text-overflow: ellipsis; /* 省略号效果 */
}

.image-wrapper {
	width: 150px; /* 设置固定宽度 */
	height: 150px; /* 设置固定高度 */
	padding-bottom: 10px;
	margin: 0 auto; /* 横向居中 */
	overflow: hidden; /* 隐藏溢出部分 */
}

.card-footer {
	display: flex;
	justify-content: flex-end;
	// padding: 10px;
}

.pagination-container {
	display: flex;
	// justify-content: flex-end;
	// margin-bottom: 20px;
	position: absolute;
	right: 30px;
	bottom: 35px;
}

:deep(.el-card__footer) {
	border-top: none;
	padding: 0 0 10px 0;
}
</style>
