<script lang="ts">
  export default {
    inheritAttrs: false,
  };
</script>
<script lang="ts" setup>
  import { computed } from 'vue';
  import { Statistic, Tooltip } from 'ant-design-vue';
  import {
    getUpdateTime,
    fontSize,
    RadioRecord,
    DEFAULT_RADIO_RECORD,
  } from '../../detail/config/util';
  import { TextComponentDefaultConfig, 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: () =>
        ({ ...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(() => {
    return props.radio || DEFAULT_RADIO_RECORD;
  });
</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({ radioRecord: getRadio, basic: 50, min: 16 }),
                height: fontSize({ radioRecord: 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({ radioRecord: getRadio, basic: 24, min: 16 }),
                color: props.value.fontColor,
              }"
            />
          </div>
          <div :style="{ color: '#666', fontSize: fontSize({ radioRecord: getRadio, basic: 16 }) }">
            {{ props.value.name }}
          </div>
        </div>
      </div>
    </div>

    <div class="text-center text-xs truncate p-5" style="color: #999">
      <Tooltip v-if="getShowUpdate" placement="top" :title="getUpdateTime(props.value?.updateTime)">
        <div
          :style="{ fontSize: fontSize({ radioRecord: getRadio, basic: 12, max: 12 }) }"
          class="truncate"
        >
          <span class="mr-1">更新时间:</span>
          <span class="truncate">
            {{ getUpdateTime(props.value?.updateTime) }}
          </span>
        </div>
      </Tooltip>
    </div>
  </div>
</template>
