<template>
  <div>
    <div class="item"
      ><span class="item-label">{{ t('模板编号：') }}</span
      ><span>{{ item.code }}</span></div
    >
    <div class="item"
      ><span class="item-label">{{ t('模板名称：') }}</span
      ><span>{{ item.name }}</span></div
    >
    <div class="item"
      ><span class="item-label">{{ t('模板分类：') }}</span
      ><span>{{ item.categoryName }}</span></div
    >
    <div class="item"
      ><span class="item-label">{{ t('备注：') }}</span
      ><span>{{ item.remark }}</span></div
    >
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  withDefaults(
    defineProps<{
      item: { code: string; name: string; categoryName: string; remark: string };
    }>(),
    {
      item: () => {
        return { code: '', name: '', categoryName: '', remark: '' };
      },
    },
  );
</script>

<style lang="less" scoped>
  .item {
    .item-label {
      width: 80px;
      height: 30px;
      display: inline-flex;
      padding-left: 10px;
      line-height: 17px;
      padding-bottom: 16px;
      vertical-align: top;
    }

    span:last-child {
      width: calc(100% - 80px);
      text-align: right;
      display: inline-block;
      padding-right: 10px;
      line-height: 17px;
    }
  }
</style>
