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

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

  const time = ref<Nullable<number>>(null);
  const isOpenClose = ref<boolean>(true);

  const getDesign = computed(() => {
    const { persetOption = {}, option } = props.config;
    const {
      iconColor: persetIconColor,
      unit: perseUnit,
      icon: persetIcon,
      fontColor: persetFontColor,
      iconClose: persetIconCLose,
      iconColorClose: persetIconColorClose,
      showTime: persetShowTime,
    } = persetOption;

    const { componentInfo, attributeRename } = option;

    const { icon, iconColor, fontColor, unit, iconClose, iconColorClose, attributeName, showTime } =
      componentInfo || {};
    return {
      iconColor: iconColor || persetIconColor,
      unit: unit ?? perseUnit,
      icon: icon || persetIcon,
      fontColor: fontColor || persetFontColor,
      attribute: attributeRename || attributeName,
      iconClose: iconClose || persetIconCLose,
      iconColorClose: iconColorClose || persetIconColorClose,
      showTime: showTime ?? persetShowTime,
    };
  });

  const { getNumberValue } = useReceiveValue();

  const updateFn: DataFetchUpdateFn = (message, attribute) => {
    const { data = {} } = message;
    const [latest] = data[attribute] || [];
    const [timespan, value] = latest;
    time.value = timespan;
    isOpenClose.value = Boolean(getNumberValue(value));
  };

  useDataFetch(props, updateFn);
</script>

<template>
  <main class="w-full h-full flex flex-col justify-center items-center">
    <DeviceName :config="config" />
    <div class="flex flex-1 flex-col justify-center items-center">
      <SvgIcon
        :name="isOpenClose ? getDesign.icon : getDesign.iconClose"
        prefix="iconfont"
        :size="60"
        :style="{ color: isOpenClose ? getDesign.iconColor : getDesign.iconColorClose }"
      />
      <div class="text-gray-500 text-sm truncate m-2">{{ getDesign.attribute || '温度' }}</div>
    </div>
    <UpdateTime v-show="getDesign.showTime" :time="time" />
  </main>
</template>