<script lang="ts" setup>
  import { option } from './config';
  // import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
  import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type';
  import { useMultipleDataFetch } from '/@/views/visual/packages/hook/useSocket';
  import { computed } from 'vue';
  import { ref } from 'vue';
  import { Progress } from 'ant-design-vue';
  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
  import { unref } from 'vue';
  import { onMounted } from 'vue';

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

  const percentList = ref<any[]>([
    {
      value: 20,
      fontColor: '#19eff',
      backgroundColor: '#19eff',
      color: '#000',
      fontSize: '16px',
      unit: '℃',
      id: 1,
    },
    {
      value: 66,
      fontColor: '#1E8667',
      backgroundColor: '#1E8667',
      color: '#000',
      fontSize: '16px',
      unit: '℃',
      id: 2,
    },
    {
      value: 49,
      fontColor: '#2196F3',
      backgroundColor: '#2196F3',
      color: '#000',
      fontSize: '16px',
      unit: '℃',
      id: 3,
    },
  ]);

  const getDesign = computed(() => {
    const { persetOption = {}, option } = props.config;
    const { dataSource = [] } = option || {};
    const {
      unit: presetUnit,
      fontColor: presetFontColor,
      backgroundColor: persetBackgroundColor,
    } = persetOption || {};
    return {
      dataSource: dataSource?.map((item) => {
        const { unit, fontColor, fontSize, backgroundColor } = item.componentInfo || {};
        const { attribute, attributeRename } = item;
        return {
          unit: unit ?? presetUnit,
          fontColor: fontColor ?? presetFontColor,
          fontSize,
          backgroundColor: backgroundColor ?? persetBackgroundColor,
          attribute,
          attributeRename,
        };
      }),
    };
  });

  const newPercentList = ref<any[]>([]);

  const updateFn: MultipleDataFetchUpdateFn = (message) => {
    const { data = {} } = message;
    const { dataSource } = unref(getDesign);
    newPercentList.value = dataSource.map((item) => {
      const { attribute, fontSize, attributeRename, fontColor, unit, backgroundColor } = item;

      const [latest] = data[attribute] || [];
      const [_timespan, value] = latest || [];
      return {
        value: Number(value),
        name: attributeRename ?? attribute,
        fontSize,
        unit,
        backgroundColor: backgroundColor,
        fontColor: fontColor,
      };
    });
    // console.log(numberList, 'numberList');
  };

  onMounted(() => {
    newPercentList.value = percentList.value;
    !props.config.option.uuid;
  });

  useMultipleDataFetch(props, updateFn);

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

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

    <div
      v-for="item in newPercentList"
      :key="item.id"
      class="flex flex-col ml-3 mr-3 items-stretch"
    >
      <div class="flex justify-between">
        <div class="text-gray-500 text-lg truncate">{{ item.name || '温度' }}</div>
        <span class="text-lg" :style="{ color: item.fontColor }"
          >{{ item.value }} {{ item.unit }}</span
        >
      </div>
      <div>
        <Progress :strokeColor="item.backgroundColor" :percent="item.value" :showInfo="false" />
      </div>
    </div>
  </main>
</template>
<style lang="less" scoped>
  // :deep(.ant-progress-success-bg, .ant-progress-bg) {
  //   background: '#2196F3' !important;
  // }
</style>