<script lang="ts" setup>
  import { computed } from '@vue/reactivity';
  import { Statistic } from 'ant-design-vue';
  import { fontSize, RadioRecord, DEFAULT_RADIO_RECORD } from '../../detail/config/util';
  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),
    },
    radio: {
      type: Object as PropType<RadioRecord>,
      default: () => DEFAULT_RADIO_RECORD as RadioRecord,
    },
  });

  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;
  });

  const getRadio = computed(() => {
    const { radio } = props.radio;
    return radio;
  });
</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="props.value.icon || 'CO2'"
              prefix="iconfont"
              :style="{
                color: props.value.iconColor,
                width: fontSize({ radio: getRadio, basic: 40 }),
                height: fontSize({ radio: getRadio, basic: 40 }),
              }"
            />
          </div>
          <div class="truncate" :style="{ fontSize: fontSize({ radio: getRadio, basic: 16 }) }">{{
            props.value.name
          }}</div>
        </div>
      </div>
      <div class="w-1/2 flex justify-center">
        <Statistic
          :value="props.value.value || '123'"
          :suffix="getShowUnit ? props.value.unit : ''"
          class="truncate"
          :value-style="{
            fontSize: fontSize({ radio: getRadio, basic: 16 }),
            color: props.value.fontColor,
          }"
        />
      </div>
    </div>
    <div v-if="getShowUpdate" class="text-center text-xs text-gray-400 truncate">
      <span
        :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }) }"
        class="truncate"
      >
        更新时间: {{ props.value.updateTime }}</span
      >
    </div>
  </div>
</template>