<script lang="ts" setup>
  import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type';

  import { option } from './config';
  import { useMultipleDataFetch } from '/@/views/visual/packages/hook/useSocket';
  import { ref, unref } from 'vue';
  import { SvgIcon } from '/@/components/Icon';
  import { computed } from 'vue';
  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
  import { useReceiveMessage } from '../../../hook/useReceiveMessage';
  import { useReceiveValue } from '../../../hook/useReceiveValue';

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

  const getDesign = computed(() => {
    const { persetOption = {}, option } = props.config;
    const { dataSource = [] } = option || {};
    const {
      unit: persetUnit,
      fontColor: persetFontColor,
      icon: persetIcon,
      iconColor: persetIconColor,
    } = persetOption || {};
    return {
      dataSource: dataSource.map((item) => {
        const { fontColor, icon, iconColor, unit } = item.componentInfo;
        const { attribute, attributeRename, deviceName, deviceRename, deviceId } = item;

        return {
          unit: unit ?? persetUnit,
          fontColor: fontColor ?? persetFontColor,
          icon: icon ?? persetIcon,
          iconColor: iconColor ?? persetIconColor,
          attribute: attribute || attributeRename,
          attributeRename,
          deviceName,
          deviceRename,
          id: deviceId,
        };
        // return {
        //   unit: unit ?? persetUnit,
        //   fontColor: fontColor ?? persetFontColor,
        //   icon: icon ?? persetIcon,
        //   iconColor: iconColor ?? persetIconColor,
        //   attribute: attribute || attributeRename,
        //   attributeRename,
        // };
      }),
    };
  });
  const defaultSvgList = ref<any>([
    {
      value: 26.2,
      name: 'wendu',
      icon: 'zongfushe',
      unit: 'kw',
      iconColor: '#367BFF',
      fontColor: '#357CFB',
    },
    {
      value: 53.7,
      name: 'shidu',
      icon: 'guangzhaoqiangdu',
      unit: '℃',
      iconColor: '#FFA000',
      fontColor: '#FFA000',
    },
  ]);

  const { forEachGroupMessage } = useReceiveMessage();
  const { getNumberValue } = useReceiveValue();

  const updateSvgList = ref(
    props.config.option.dataSource ? unref(getDesign).dataSource : defaultSvgList
  );

  const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
    // console.log(unref(getDesign).dataSource, 'dataSource');
    forEachGroupMessage(message, deviceId, attribute, (attribute, value) => {
      // unref(getDesign).dataSource.forEach((item) => {
      // if (item.id === deviceId && item.attribute === attribute) {
      //   svgList.value = unref(getDesign).dataSource.map((item) => {
      //     return {
      //       value: getNumberValue(value),
      //       name: item.deviceRename || item.deviceName,
      //       icon: item.icon,
      //       unit: item.unit,
      //       fontColor: item.fontColor,
      //       iconColor: item.iconColor,
      //     };
      //   });
      // }
      updateSvgList.value.forEach((item) => {
        if (item.id === deviceId && item.attribute === attribute) {
          item.value = getNumberValue(value);
        }
      });
      // });
    });
    // console.log(unref(svgList), 'svglist');
    // const { data = {} } = message;
    // const { dataSource } = unref(getDesign);
    // svgList.value.length = 0;
    // svgList.value = dataSource.map((item) => {
    //   const { icon, iconColor, unit, fontColor, attribute } = item || {};
    //   const [latest] = data[attribute] || [];
    //   const [_timespan, value] = latest || [];
    //   return {
    //     value: Number(value),
    //     name: attribute,
    //     icon,
    //     unit,
    //     iconColor,
    //     fontColor,
    //   };
    // });
  };

  useMultipleDataFetch(props, updateFn);
</script>

<template>
  <main class="w-full h-full flex flex-col justify-evenly items-center">
    <DeviceName :config="config" />
    <div
      style="width: 86%"
      v-for="item in updateSvgList"
      :key="item.id"
      class="flex justify-between items-center"
    >
      <div class="flex items-center">
        <SvgIcon
          :name="item.icon!"
          prefix="iconfont"
          :size="45"
          :style="{ color: item.iconColor }"
        />

        <div class="text-gray-500 text-lg truncate ml-6">{{
          item.deviceRename || item.deviceName || '温度'
        }}</div>
      </div>

      <h1 class="font-bold text-xl m-2 truncate" :style="{ color: item.fontColor }">
        <span> {{ item.value || 0 }}</span>
        <span>{{ item.unit }} </span>
      </h1>
    </div>
  </main>
</template>