<script lang="ts" setup>
  import { computed } from '@vue/reactivity';
  import { Statistic } from 'ant-design-vue';
  import type { TextComponentLayout, TextComponentValue } from './config';
  import { SvgIcon } from '/@/components/Icon';
  const props = defineProps({
    layout: {
      type: Object as PropType<TextComponentLayout>,
      default: () => ({ base: true } as TextComponentLayout),
    },
    value: {
      type: Object as PropType<TextComponentValue>,
      default: () => ({ name: '温度', value: 123 } as TextComponentValue),
    },
  });

  const getIsColumnLayout = computed(() => {
    const { base } = props.layout;
    return base;
  });

  const getShowIcon = computed(() => {
    const { showIcon, base } = props.layout;
    return base ? false : showIcon;
  });

  const getShowUpdate = computed(() => {
    const { showUpdate, base } = props.layout;
    return base ? false : showUpdate;
  });

  const getShowUnit = computed(() => {
    const { showUnit, base } = props.layout;
    return base ? false : showUnit;
  });
</script>

<template>
  <div class="w-full h-full flex flex-col">
    <div
      class="flex justify-center items-center w-full text-center flex-auto"
      :style="{ flexDirection: getIsColumnLayout ? 'column' : 'row' }"
    >
      <div class="w-1/2">
        <div>
          <div v-if="getShowIcon">
            <SvgIcon name="CO2" prefix="iconfont" class="!w-1/2 !h-[2em]" />
          </div>
          <div>{{ props.value.name }}</div>
        </div>
      </div>
      <div class="w-1/2 flex justify-center">
        <Statistic
          value="123"
          :suffix="getShowUnit ? props.value.unit : ''"
          :value-style="{ fontSize: '1.3em' }"
        />
      </div>
    </div>
    <div v-if="getShowUpdate" class="h-6 text-center text-xs text-gray-400">
      <span> 更新时间: {{ props.value.updateTime }}</span>
    </div>
  </div>
</template>