<template>
  <div class="detail-container">
    <a-descriptions :column="2" bordered>
      <a-descriptions-item label="ID">{{ record.id }}</a-descriptions-item>
      <a-descriptions-item label="名称">{{ record.name }}</a-descriptions-item>
      <a-descriptions-item label="描述" :span="2">{{ record.description || '-' }}</a-descriptions-item>
      <a-descriptions-item label="启用状态">
        <a-tag :color="record.enabled ? 'green' : 'gray'">
          {{ record.enabled ? '已启用' : '已禁用' }}
        </a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="创建时间">{{ formatTime(record.created_at) }}</a-descriptions-item>
      <a-descriptions-item label="更新时间">{{ formatTime(record.updated_at) }}</a-descriptions-item>
    </a-descriptions>

    <div class="actions">
      <a-space>
        <a-button type="primary" @click="handleEdit">
          <template #icon>
            <icon-edit />
          </template>
          编辑
        </a-button>
        <a-button status="danger" @click="handleDelete">
          <template #icon>
            <icon-delete />
          </template>
          删除
        </a-button>
      </a-space>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { IconEdit, IconDelete } from '@arco-design/web-vue/es/icon'
import type { {{Module}}Item } from '@/api/ops/{{module}}'

const props = defineProps<{
  record: {{Module}}Item
}>()

const emit = defineEmits<{
  (e: 'edit'): void
  (e: 'delete'): void
}>()

const formatTime = (time?: string) => {
  if (!time) return '-'
  const date = new Date(time)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

const handleEdit = () => {
  emit('edit')
}

const handleDelete = () => {
  emit('delete')
}
</script>

<style scoped lang="less">
.detail-container {
  .actions {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
  }
}
</style>
