<script lang="ts" setup>
  import { computed } from 'vue';
  import { Statistic, Tooltip } from 'ant-design-vue';
  import {
    fontSize,
    RadioRecord,
    DEFAULT_RADIO_RECORD,
    DEFAULT_DATE_FORMAT,
  } from '../../detail/config/util';
  import type { TextComponentLayout, TextComponentValue } from './config';
  import { SvgIcon } from '/@/components/Icon';
  import { dateUtil } from '/@/utils/dateUtil';
  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">
      <Tooltip
        placement="topLeft"
        :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)"
      >
        <span>更新时间:</span>
        <span
          :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }) }"
          class="truncate"
        >
          {{ dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT) }}
        </span>
      </Tooltip>
    </div>
  </div>
</template>