<template>
  <div class="device-basic-info">
    <section class="basic-section basic-section--manufacture">
      <div class="basic-section__header">
        <span class="section-icon section-icon--blue">
          <Icon icon="ep:office-building" />
        </span>
        <div>
          <h3>制造信息</h3>
          <p>设备生产、供应及质保信息</p>
        </div>
      </div>
      <div class="basic-grid basic-grid--manufacture">
        <div v-for="field in manufactureFields" :key="field.label" class="basic-item">
          <span>{{ field.label }}</span>
          <strong>{{ field.value }}</strong>
        </div>
      </div>
    </section>

    <section class="basic-section basic-section--finance">
      <div class="basic-section__header">
        <span class="section-icon section-icon--orange">
          <Icon icon="ep:coin" />
        </span>
        <div>
          <h3>资产折旧</h3>
          <p>采购成本及折旧执行信息</p>
        </div>
      </div>
      <div class="basic-grid">
        <div v-for="field in financeFields" :key="field.label" class="basic-item">
          <span>{{ field.label }}</span>
          <strong>{{ field.value }}</strong>
        </div>
      </div>
    </section>

    <section v-if="normalizedTemplateFields.length" class="basic-section basic-section--extend">
      <div class="basic-section__header">
        <span class="section-icon section-icon--green">
          <Icon icon="ep:grid" />
        </span>
        <div>
          <h3>扩展属性</h3>
          <p>设备分类模板补充信息</p>
        </div>
      </div>
      <div class="basic-grid">
        <div v-for="field in normalizedTemplateFields" :key="field.key" class="basic-item">
          <span>{{ field.label }}</span>
          <strong>{{ field.value }}</strong>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { formatDate } from '@/utils/formatTime'

interface DeviceBasicInfoData {
  zzName?: string
  manufacturerName?: string
  manDate?: number | string | Date
  supplierName?: string
  expires?: number | string | Date
  nameplate?: string
  plPrice?: number | string
  plDate?: number | string | Date
  plYear?: number | string
  plStartDate?: number | string | Date
  plMonthed?: number | string
  plAmounted?: number | string
  remainAmount?: number | string
  monthAmount?: number | string
  totalMonth?: number | string
  currency?: string
}

interface TemplateField {
  sort?: number
  name?: string
  value?: string | number | null
  identifier?: string
}

interface DisplayField {
  label: string
  value: string
}

const props = defineProps<{
  device: DeviceBasicInfoData
  templateFields?: TemplateField[]
}>()

const displayValue = (value?: string | number | null) => {
  return value || value === 0 ? String(value) : '-'
}

const displayDate = (value?: number | string | Date) => {
  return value ? formatDate(value as Date, 'YYYY-MM-DD') : '-'
}

const manufactureFields = computed<DisplayField[]>(() => [
  {
    label: '制造商',
    value: displayValue(props.device.zzName || props.device.manufacturerName)
  },
  {
    label: '生产日期',
    value: displayDate(props.device.manDate)
  },
  {
    label: '供应商',
    value: displayValue(props.device.supplierName)
  },
  {
    label: '铭牌信息',
    value: displayValue(props.device.nameplate)
  },
  {
    label: '质保到期',
    value: displayDate(props.device.expires)
  }
])

const financeFields = computed<DisplayField[]>(() => [
  {
    label: '采购价格',
    value: displayValue(props.device.plPrice)
  },
  {
    label: '采购日期',
    value: displayDate(props.device.plDate)
  },
  {
    label: '折旧年限',
    value: displayValue(props.device.plYear)
  },
  {
    label: '折旧开始日期',
    value: displayDate(props.device.plStartDate)
  },
  {
    label: '已提折旧月数',
    value: displayValue(props.device.plMonthed)
  },
  {
    label: '已提折旧金额',
    value: displayValue(props.device.plAmounted)
  },
  {
    label: '剩余金额',
    value: displayValue(props.device.remainAmount)
  },
  {
    label: '每月折旧金额',
    value: displayValue(props.device.monthAmount)
  },
  {
    label: '总折旧月份',
    value: displayValue(props.device.totalMonth)
  },
  {
    label: '币种',
    value: displayValue(props.device.currency)
  }
])

const normalizedTemplateFields = computed(() => {
  return (props.templateFields || []).map((field, index) => ({
    key: field.identifier || field.name || String(field.sort ?? index),
    label: field.name || '-',
    value: displayValue(field.value)
  }))
})
</script>

<style scoped lang="scss">
.device-basic-info {
  display: grid;
  gap: 16px;
}

.basic-section {
  overflow: hidden;
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 10px;
}

.basic-section__header {
  display: flex;
  gap: 12px;
  min-height: 64px;
  padding: 14px 18px;
  background: linear-gradient(90deg, #f7faff 0%, var(--el-bg-color) 78%);
  border-bottom: 1px solid var(--el-border-color-lighter);
  align-items: center;

  h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 22px;
    color: var(--el-text-color-primary);
  }

  p {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 18px;
    color: var(--el-text-color-secondary);
  }
}

.section-icon {
  display: flex;
  width: 36px;
  height: 36px;
  font-size: 18px;
  border-radius: 9px;
  align-items: center;
  justify-content: center;
}

.section-icon--blue {
  color: #3478f6;
  background: #eaf2ff;
}

.section-icon--orange {
  color: #e78324;
  background: #fff2e3;
}

.section-icon--green {
  color: #20a36a;
  background: #e7f8f0;
}

.basic-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.basic-grid--manufacture {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.basic-item {
  display: flex;
  min-width: 0;
  min-height: 74px;
  padding: 15px 18px;
  border-right: 1px solid var(--el-border-color-lighter);
  border-bottom: 1px solid var(--el-border-color-lighter);
  flex-direction: column;
  justify-content: center;

  &:nth-child(4n) {
    border-right: 0;
  }

  span {
    font-size: 12px;
    line-height: 18px;
    color: var(--el-text-color-secondary);
  }

  strong {
    margin-top: 7px;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    color: var(--el-text-color-primary);
    word-break: break-word;
  }
}

.basic-grid--manufacture {
  .basic-item {
    &:nth-child(4n) {
      border-right: 1px solid var(--el-border-color-lighter);
    }

    &:nth-child(3n) {
      border-right: 0;
    }

    &:nth-child(4) {
      grid-column: span 2;
    }
  }
}

@media (width <= 1399px) {
  .basic-grid,
  .basic-grid--manufacture {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .basic-item {
    &:nth-child(4n) {
      border-right: 1px solid var(--el-border-color-lighter);
    }

    &:nth-child(3n) {
      border-right: 0;
    }
  }
}

@media (width <= 991px) {
  .basic-grid,
  .basic-grid--manufacture {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .basic-item {
    &:nth-child(3n) {
      border-right: 1px solid var(--el-border-color-lighter);
    }

    &:nth-child(2n) {
      border-right: 0;
    }
  }

  .basic-grid--manufacture {
    .basic-item:nth-child(4) {
      grid-column: span 1;
    }
  }
}

@media (width <= 575px) {
  .basic-grid,
  .basic-grid--manufacture {
    grid-template-columns: 1fr;
  }

  .basic-item {
    border-right: 0;

    &:nth-child(3n),
    &:nth-child(4n) {
      border-right: 0;
    }
  }
}
</style>
