<script lang="ts" setup>
  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
  import { option } from './config';
  import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
  import { computed } from 'vue';
  import { ref } from 'vue';
  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';

  const props = defineProps<{
    config: ComponentPropsConfigType<typeof option>;
  }>();

  const currentValue = ref<string | number>(123);
  const time = ref<Nullable<number>>(null);

  const getDesign = computed(() => {
    const { persetOption = {}, option } = props.config;

    const { fontColor: persetFontColor } = persetOption;

    const { componentInfo, attribute, attributeName, attributeRename } = option;

    const { fontColor } = componentInfo || {};

    return {
      fontColor: fontColor || persetFontColor,
      attribute: attributeRename || attributeName || attribute,
    };
  });

  const updateFn: DataFetchUpdateFn = (message, attribute) => {
    const { data = {} } = message;
    const [info] = data[attribute] || [];
    const [timespan, value] = info;
    currentValue.value = value;
    time.value = timespan;
  };

  useDataFetch(props, updateFn);

  const { getScale } = useComponentScale(props);
</script>

<template>
  <main class="w-full h-full flex flex-col justify-center items-center">
    <DeviceName :config="config" />

    <div class="flex-1 flex justify-center items-center flex-col" :style="getScale">
      <h1 class="my-4 font-bold text-xl !my-2 truncate" :style="{ color: getDesign.fontColor }">
        {{ currentValue || 0 }}
      </h1>
      <div class="text-gray-500 text-sm truncate">{{ getDesign.attribute || '温度' }}</div>
    </div>
    <UpdateTime :time="time" />
  </main>
</template>