<script lang="ts" setup>
  import { SvgIcon } from '/@/components/Icon';
  import { Statistic } from 'ant-design-vue';

  const props = defineProps({
    icon: {
      type: String,
      default: 'wind-speed',
    },
    color: {
      type: String,
      default: 'blue',
    },
    updateTime: {
      type: String,
      default: '2022-08-26 11:11:23',
    },
  });
</script>

<template>
  <section class="flex flex-col h-full justify-center w-full p-2">
    <div class="flex items-center">
      <div class="flex flex-col justify-center items-center">
        <SvgIcon
          :style="{ color: props.color, width: '40%', height: '40%' }"
          :name="props.icon"
          prefix="iconfont"
        />
        <div class="text-sm my-2">温度</div>
      </div>
      <div class="text-center flex-auto">
        <Statistic
          value="123"
          :value-style="{ display: 'flex', fontSize: '20px', justifyContent: 'center' }"
          :suffix="'%'"
        />
      </div>
    </div>
    <div class="text-xs text-gray-500 text-center truncate" :title="props.updateTime">
      更新时间: {{ props.updateTime }}
    </div>
  </section>
</template>