<template>
	<div class="detail-header">
		<clock-circle-outlined />
		<span class="text">创建时间：{{ createTime }}</span>
		<info-circle-outlined />
		<span class="text">创建人：{{ creator }}</span>

		<clock-circle-outlined />
		<span class="text">更新时间：{{ modifyTime }}</span>
		<info-circle-outlined />
		<span class="text">更新人：{{ modifyer }}</span>
	</div>
</template>
<script lang="ts" setup>
import { ClockCircleOutlined, InfoCircleOutlined } from '@ant-design/icons-vue'
import { computed } from 'vue'
import { BusinessPO } from '../../entity/common/base'
import { formatByString } from '../../utils/datetime-util'

let props = defineProps<{ detail: BusinessPO }>()

// 创建时间
let createTime = computed(() => {
	if (props.detail.gmtCreate) return formatByString(props.detail.gmtCreate, 'YYYY年MM月DD日 HH:mm').text
	else return ''
})

// 修改时间
let modifyTime = computed(() => {
	if (props.detail.gmtModified) return formatByString(props.detail.gmtModified, 'YYYY年MM月DD日 HH:mm').text
	else return ''
})

// 创建人
let creator = computed(() => props.detail.createUserName ?? '')

// 修改人
let modifyer = computed(() => props.detail.updateUserName ?? '')
</script>
<script lang="ts">
export default {
	name: 'DrawerHeader'
}
</script>

<style scoped>
.detail-header {
	display: grid;
	grid-template-columns: 18px 280px 18px auto;
	align-content: center;
	align-items: center;
	grid-gap: 8px;
	user-select: none;
	border-bottom: 1px solid #cccccc;
	padding-bottom: 20px;
	margin-bottom: 20px;
}

.text {
	font-size: 14px;
	font-weight: 500;
	color: #666666;
	line-height: 20px;
}
</style>
