<template>
  <m-card title="核心指标" :width="398" :height="height">
    <div class="core-stats">
      <div v-for="item in items" :key="item.key || item.name" class="core-stats-item">
        <div class="core-value">
          <span v-if="loading">--</span>
          <span v-else-if="item.value === undefined || item.value === null">--</span>
          <m-count-to
            v-else
            :startVal="0"
            :endVal="Number(item.value)"
            :decimals="Number.isInteger(Number(item.value)) ? 0 : 2"
            :duration="1200"
            separator=""
            :autoplay="true"
          />
          <em>{{ item.unit }}</em>
        </div>
        <div class="core-name">{{ item.name }}</div>
      </div>
      <div class="core-state" :class="{ 'is-error': status === 'error' }">
        {{ statusText }}
      </div>
    </div>
  </m-card>
</template>

<script setup>
import { computed } from "vue"
import mCard from "@/components/mCard/index.vue"
import mCountTo from "@/components/mCountTo/index.js"

const props = defineProps({
  items: {
    type: Array,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
  status: {
    type: String,
    default: "idle",
  },
  height: {
    type: Number,
    default: 278,
  },
})

const statusText = computed(() => {
  if (props.loading) return "正在读取 openApi 核心指标"
  if (props.status === "error") return "openApi 暂不可用，已保留指标位"
  return "数据来源：openApi"
})
</script>

<style lang="scss">
.core-stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  height: 100%;
  padding: 30px 20px 48px;
  box-sizing: border-box;

  &-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    border: 1px solid rgba(48, 220, 255, 0.2);
    background: radial-gradient(circle at 50% 20%, rgba(48, 220, 255, 0.16), rgba(5, 18, 30, 0.58) 66%);
    text-align: center;
  }

  .core-value {
    color: #1afcff;
    font-family: D-DIN, Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    white-space: nowrap;

    em {
      margin-left: 4px;
      color: rgba(255, 255, 255, 0.6);
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
    }
  }

  .core-name {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
  }

  .core-state {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 16px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    text-align: center;

    &.is-error {
      color: rgba(255, 194, 92, 0.85);
    }
  }
}
</style>
