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

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

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

  const { getDeviceProfileTslByIdWithIdentifier } = useDeviceProfileQueryContext();

  const getThingModelTsl = computed(() => {
    const { option } = props.config;

    const { deviceProfileId, attribute } = option;
    return getDeviceProfileTslByIdWithIdentifier?.(deviceProfileId, attribute);
  });

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

    const {
      fontColor: persetFontColor,
      fontSize: persetFontSize,
      valueSize: persetValueSize,
    } = persetOption;

    const { componentInfo, attribute, attributeRename } = option;

    const { fontColor, fontSize, valueSize } = componentInfo || {};
    return {
      fontColor: fontColor || persetFontColor,
      fontSize: fontSize || persetFontSize || 14,
      valueSize: valueSize || persetValueSize || 20,
      attribute: attributeRename || unref(getThingModelTsl)?.functionName || attribute,
    };
  });

  const updateFn: DataFetchUpdateFn = (message, attribute) => {
    const { data = {} } = message;
    const [latest] = data[attribute] || [];
    if (!latest.length) return;
    const [_, value] = latest;
    currentValue.value = useThingsModelValueTransform(
      value,
      unref(getThingModelTsl)?.specs?.dataType
    );
  };

  useDataFetch(props, updateFn);

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

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

    <h1
      class="my-4 font-bold !my-2 truncate w-full text-center"
      :style="{
        color: getDesign.fontColor,
        fontSize: (getRatio ? getRatio * getDesign.valueSize : getDesign.valueSize) + 'px',
      }"
    >
      {{ currentValue || 0 }}
    </h1>
    <div
      class="text-gray-500 truncate"
      :style="{ fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px' }"
    >
      {{ getDesign.attribute || '温度' }}
    </div>
  </main>
</template>