<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 { TextComponentDefaultConfig, 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: () =>
        ({ ...TextComponentDefaultConfig, 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 || TextComponentDefaultConfig.icon!"
              prefix="iconfont"
              :style="{
                color: props.value.iconColor,
                width: fontSize({ radio: getRadio, basic: 50, min: 16 }),
                height: fontSize({ radio: getRadio, basic: 50, min: 16 }),
              }"
            />
          </div>
          <div class="flex justify-center">
            <Statistic
              :value="props.value.value || 0"
              class="truncate"
              :suffix="getShowUnit ? props.value.unit : ''"
              :value-style="{
                fontSize: fontSize({ radio: getRadio, basic: 24, min: 16 }),
                color: props.value.fontColor,
              }"
            />
          </div>
          <div :style="{ color: '#666', fontSize: fontSize({ radio: getRadio, basic: 16 }) }">
            <!-- {{ getShowUnit ? props.value.unit : '' }} -->
            {{ props.value.name }}
          </div>
          <!-- <div class="truncate" :style="{ fontSize: fontSize({ radio: getRadio, basic: 16 }) }">
            {{ props.value.name }}
          </div> -->
        </div>
      </div>
    </div>
    <Tooltip
      v-if="getShowUpdate"
      placement="top"
      :title="
        props.value?.updateTime
          ? dateUtil(props?.value?.updateTime).format(DEFAULT_DATE_FORMAT)
          : '暂无更新时间'
      "
    >
      <div class="text-center text-xs truncate p-5" style="color: #999">
        <div
          :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 12 }) }"
          class="truncate"
        >
          <span class="mr-1">更新时间:</span>
          <span class="truncate">
            {{
              props.value?.updateTime
                ? dateUtil(props?.value?.updateTime).format(DEFAULT_DATE_FORMAT)
                : '暂无更新时间'
            }}
          </span>
        </div>
      </div>
    </Tooltip>
  </div>
</template>