<template>
	<dc-drawer-header :detail="detail" />

	<div class="detail">
		<dc-drawer-item v-for="item in detailFields" :key="item.type + item.name" :data="detail" v-bind="item"></dc-drawer-item>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from 'vue'
import requestUser from '../../../api/account/user'
import { AccountUserInfo } from '../../../entity/account/account-user'
import { detailFields } from './detail-fields'

// 获取父组件参数
const props = defineProps<{ id: string }>()

// 详情
const detail = reactive<AccountUserInfo>({} as AccountUserInfo)

onMounted(async () => {
	// 详情
	const { data } = await requestUser.getById(props.id)
	Object.assign(detail, { ...data.userInfo, ...data })

	// 上级部门
	if (data.orgList) {
		detail.orgIdList = data.orgList.map(value => value.orgName)
	}

	// 部门
	if (data.deptList) {
		detail.deptIdList = data.deptList.map(value => value.deptName || '')
	}

	// 角色
	if (data.roleList) {
		detail.roleIdList = data.roleList.map(value => value.roleName)
	}
})
</script>

<style scoped>
.detail {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: min-content;
	/*grid-auto-flow: row dense;*/
	grid-row-gap: 16px;
}
</style>
