<template>
  <BaseCard title="交易中心实时服务信息">
    <div class="service-grid">
      <div
        v-for="item in serviceData"
        :key="item.key"
        class="service-item"
      >
        <img
          class="service-item-bg"
          src="/images/实时信息背景.png"
          alt=""
        />
        <div class="service-left">
          <img
            class="service-icon"
            :src="item.icon"
            :alt="item.label"
          />
          <div class="service-info">
            <div class="service-label">{{ item.label }}</div>
            <div class="service-status" :class="item.statusClass">
              {{ item.status }}
            </div>
          </div>
        </div>
        <div class="service-value-wrap" :class="item.statusClass">
          <span class="service-value">{{ formatNumber(item.value) }}</span>
          <span class="service-unit">{{ item.unit }}</span>
        </div>
      </div>
    </div>
  </BaseCard>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import BaseCard from './BaseCard.vue'

const API_URL = '/api/dashboard/exchange-service-info'

const SERVICE_ITEMS = [
  {
    key: 'totalSupply',
    label: '牦牛供应总量',
    value: 0,
    unit: '头',
    icon: '/images/牦牛.png',
    status: '--',
    statusClass: 'normal'
  },
  {
    key: 'soldYaks',
    label: '已售牦牛',
    value: 0,
    unit: '头',
    icon: '/images/牦牛.png',
    status: '--',
    statusClass: 'normal'
  },
  {
    key: 'forSaleYaks',
    label: '待售牦牛',
    value: 0,
    unit: '头',
    icon: '/images/牦牛.png',
    status: '--',
    statusClass: 'normal'
  },
  {
    key: 'enteringVehicles',
    label: '进场车辆',
    value: 0,
    unit: '辆',
    icon: '/images/进场车辆.png',
    status: '--',
    statusClass: 'normal'
  },
  {
    key: 'remainingParking',
    label: '剩余车位',
    value: 0,
    unit: '个',
    icon: '/images/剩余车位.png',
    status: '--',
    statusClass: 'normal'
  },
  {
    key: 'supplierCount',
    label: '供应商数量',
    value: 0,
    unit: '家',
    icon: '/images/供应商数量.png',
    status: '--',
    statusClass: 'normal'
  }
]

const serviceData = ref(SERVICE_ITEMS.map((item) => ({ ...item })))

const formatNumber = (num) => {
  const value = Number(num) || 0
  return value.toLocaleString('zh-CN')
}

const resolveSupplyStatus = (value) => {
  if (value >= 1000) {
    return { status: '充足', statusClass: 'abundant' }
  }
  if (value >= 500) {
    return { status: '正常', statusClass: 'normal' }
  }
  return { status: '紧张', statusClass: 'tight' }
}

const resolveForSaleStatus = (value) => {
  if (value >= 800) {
    return { status: '充足', statusClass: 'abundant' }
  }
  if (value >= 400) {
    return { status: '正常', statusClass: 'normal' }
  }
  return { status: '紧张', statusClass: 'tight' }
}

const resolveParkingStatus = (value) => {
  if (value > 30) {
    return { status: '充足', statusClass: 'abundant' }
  }
  if (value > 15) {
    return { status: '正常', statusClass: 'normal' }
  }
  return { status: '紧张', statusClass: 'tight' }
}

const resolveSupplierStatus = (value) => {
  if (value > 100) {
    return { status: '活跃', statusClass: 'active' }
  }
  if (value > 50) {
    return { status: '正常', statusClass: 'normal' }
  }
  return { status: '较少', statusClass: 'tight' }
}

const tagToStatusClass = (tag) => {
  const text = String(tag || '').trim()
  const map = {
    充足: 'abundant',
    正常: 'normal',
    紧张: 'tight',
    活跃: 'active',
    较少: 'tight'
  }
  return map[text] || 'normal'
}

const buildServiceItem = (template, data) => {
  const item = { ...template }
  const value = Number(data[item.key]) || 0
  item.value = value

  const tag = data[`${item.key}Tag`]
  const unit = data[`${item.key}Unit`]
  if (unit) {
    item.unit = unit
  }

  if (tag) {
    item.status = String(tag).trim()
    item.statusClass = tagToStatusClass(item.status)
    return item
  }

  if (item.key === 'totalSupply') {
    Object.assign(item, resolveSupplyStatus(value))
    return item
  }
  if (item.key === 'forSaleYaks') {
    Object.assign(item, resolveForSaleStatus(value))
    return item
  }
  if (item.key === 'remainingParking') {
    Object.assign(item, resolveParkingStatus(value))
    return item
  }
  if (item.key === 'supplierCount') {
    Object.assign(item, resolveSupplierStatus(value))
    return item
  }

  item.status = '正常'
  item.statusClass = 'normal'
  return item
}

const loadData = async () => {
  try {
    const response = await fetch(API_URL)
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`)
    }

    const result = await response.json()
    if (result.code !== undefined && result.code !== 1) {
      throw new Error(result.message || '接口返回异常')
    }
    const payload = result.data ?? result

    serviceData.value = SERVICE_ITEMS.map((template) => buildServiceItem(template, payload))
  } catch (error) {
    console.error('加载交易中心实时服务信息失败:', error)
  }
}

onMounted(async () => {
  await loadData()
  window.addEventListener('dataReloaded', loadData)
})

onUnmounted(() => {
  window.removeEventListener('dataReloaded', loadData)
})
</script>

<style scoped>
.service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  gap: 16px 10px;
  flex: 1;
  min-height: 0;
  padding: 4px 8px 8px 4px;
  align-content: center;
  overflow: visible;
}

.service-item {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  aspect-ratio: 624 / 126;
  height: auto;
  padding: 8px 16px 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  overflow: visible;
  border: none;
  background: transparent;
  box-shadow: none;
}

.service-item-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.service-left,
.service-value-wrap {
  position: relative;
  z-index: 1;
}

.service-item:nth-child(even) {
  padding-right: 18px;
}

.service-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.service-icon {
  display: block;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.service-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.service-label {
  font-family: 'Microsoft YaHei', sans-serif;
  font-size: 16px;
  color: #ffffff;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.service-status {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-family: 'Microsoft YaHei', sans-serif;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 2px;
  border: 1px solid transparent;
  line-height: 1.2;
  font-weight: 500;
}

.service-status.abundant,
.service-value-wrap.abundant .service-value {
  color: #1afc7a;
}

.service-status.abundant {
  border-color: rgba(26, 252, 122, 0.55);
  background: rgba(26, 252, 122, 0.08);
}

.service-value-wrap.abundant .service-value {
  text-shadow: 0 0 8px rgba(26, 252, 122, 0.45);
}

.service-status.normal,
.service-value-wrap.normal .service-value {
  color: #0385f2;
}

.service-status.normal {
  border-color: rgba(3, 133, 242, 0.55);
  background: rgba(3, 133, 242, 0.08);
}

.service-value-wrap.normal .service-value {
  text-shadow: 0 0 8px rgba(3, 133, 242, 0.45);
}

.service-status.tight,
.service-value-wrap.tight .service-value {
  color: #fe4a46;
}

.service-status.tight {
  border-color: rgba(254, 74, 70, 0.55);
  background: rgba(254, 74, 70, 0.08);
}

.service-value-wrap.tight .service-value {
  text-shadow: 0 0 8px rgba(254, 74, 70, 0.45);
}

.service-status.active,
.service-value-wrap.active .service-value {
  color: #09fef7;
}

.service-status.active {
  border-color: rgba(9, 254, 247, 0.55);
  background: rgba(9, 254, 247, 0.08);
}

.service-value-wrap.active .service-value {
  text-shadow: 0 0 8px rgba(9, 254, 247, 0.45);
}

.service-value-wrap {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  padding-right: 2px;
  overflow: visible;
}

.service-value {
  display: inline-block;
  font-family: 'Arial Black', 'Microsoft YaHei', sans-serif;
  font-size: 24px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  letter-spacing: 0;
  padding-right: 4px;
  box-sizing: content-box;
}

.service-unit {
  margin-left: 6px;
  font-family: 'Microsoft YaHei', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  color: #d9f1ff;
}
</style>
