<script lang="ts" setup>/**
 * @Name: ShowEnumDrawer.vue
 * @Description: 属性枚举-详情抽屉
 * @Author: xinyan
 */
import * as api from '../api';
import { useResponse } from '/@/utils/useResponse';
import { Warning } from '@element-plus/icons-vue';


const showEnumDrawer = <Ref>useTemplateRef('showEnumDrawer');
const viewOpen = defineModel({ default: false });

const props = defineProps({
	editData: <any>Object,
});
const { editData } = props;

const deptData = ref([]);

async function fetchAllDept() {
	const  resp = await useResponse(api.getAllDept)
	deptData.value = resp.data;
}

function getDeptName(id) {
	const department = deptData.value.find(dept => dept.id === Number(id)); // 确保 id 是数字
	return department ? department.name : id;
}

onMounted(() => {
	fetchAllDept();
});


</script>

<template>
	<div class="drawer-container">
		<el-drawer ref="showEnumDrawer" v-model="viewOpen" style="width: 40%" >
			<template #title>
				<div>
					<span style="font-size: 16px; font-weight: bold">查看:</span>
					<el-check-tag checked style="pointer-events: none;margin-left: 5px">{{ editData.label }}</el-check-tag>
				</div>
			</template>
			<div class="p-5">
				<el-descriptions :column="1" border>
					<el-descriptions-item label="名称">
						{{ editData.label }}
					</el-descriptions-item>
					<el-descriptions-item label="数据值">
						{{ editData.value }}
					</el-descriptions-item>
					<el-descriptions-item label="状态">
						<el-tag v-if="editData.status == true" type="success">启用</el-tag>
						<el-tag v-else type="danger">禁用</el-tag>
					</el-descriptions-item>
					<el-descriptions-item label="创建人">
						{{ editData.creator_name }}
					</el-descriptions-item>
					<el-descriptions-item label="所属部门">
						<template #label>
							<div style="display: flex;align-items: center">
								所属部门
								<el-tooltip effect="dark" content="默认不填则为当前创建用户的部门ID" placement="top">
									<el-icon>
										<Warning />
									</el-icon>
								</el-tooltip>
							</div>
						</template>
						{{ getDeptName(editData.dept_belong_id) }}
					</el-descriptions-item>
					<el-descriptions-item label="更新时间">
						{{ editData.update_datetime }}
					</el-descriptions-item>
					<el-descriptions-item label="创建时间">
						{{ editData.create_datetime }}
					</el-descriptions-item>
				</el-descriptions>
			</div>
		</el-drawer>
	</div>
</template>

<style scoped>
.drawer-container :deep(.el-drawer__header) {
	border-bottom: none;
	/* font-weight: 500; */
}

:deep(.my-label) {
	background: #f5f5f5 !important;
}

.my-value {
	font-weight: 500;
	font-size: 13px;
}
</style>
