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

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

  const sliderValue = ref<number>(33);
  const sMin = ref<number>(0);
  const sMax = ref<number>(100);

  const getDesign = computed(() => {
    const { option, persetOption } = props.config;
    const { componentInfo, attribute, attributeRename } = option;
    const { controlBarColor: persetControlBarColor, fonColor: persetFontColor } =
      persetOption || {};
    const { controlBarColor, fontColor } = componentInfo || {};
    return {
      attribute: attributeRename || attribute,
      controlBarColor: controlBarColor ?? persetControlBarColor,
      fontColor: fontColor ?? persetFontColor,
    };
  });

  const handleChange = async () => {};

  const updateFn: DataFetchUpdateFn = () => {
    // console.log(message, 'message', attribute, 'attribute');
  };

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

<template>
  <main class="w-full h-full flex flex-col justify-center">
    <DeviceName :config="config" class="text-center" />
    <main :style="getScale">
      <div class="flex flex-col ml-11 mr-11">
        <span
          :style="{ color: getDesign.fontColor }"
          class="font-bold text-xl mt-3 truncate text-center"
          >{{ sliderValue }}</span
        >
        <Slider
          :style="{ '--slider-color': getDesign.controlBarColor }"
          class="no-drag"
          v-model:value="sliderValue"
          :min="sMin"
          :max="sMax"
          @change="handleChange"
        />

        <span
          :style="{ color: getDesign.fontColor }"
          class="mt-3 truncate font-bold text-xs text-center"
        >
          {{ getDesign.attribute || '设备1' }}
        </span>
      </div>
    </main>
  </main>
</template>
<style lang="less" scoped>
  :deep(.ant-slider-track) {
    background: var(--slider-color) !important;
  }
</style>