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

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

  const isOpenClose = ref<boolean>(true);

  const getDesign = computed(() => {
    const { persetOption = {}, option } = props.config;
    const {
      openColor: persetOpenColor,
      closeColor: persetCloseColor,
      showDeviceName: persetShowDeviceName,
    } = persetOption || {};
    const { componentInfo } = option;

    const { openColor, closeColor, showDeviceName } = componentInfo || {};
    return {
      openColor: openColor ?? persetOpenColor,
      closeColor: closeColor ?? persetCloseColor,
      showDeviceName: showDeviceName ?? persetShowDeviceName,
    };
  });

  const randomFn = () => {
    useIntervalFn(() => {
      isOpenClose.value = !unref(isOpenClose);
    }, 2000);
  };

  const updateFn: DataFetchUpdateFn = () => {};

  onMounted(() => {
    !props.config.option.uuid && randomFn();
  });

  useDataFetch(props, updateFn);

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

<template>
  <main :style="getScale" class="w-full h-full flex flex-col justify-center items-center">
    <DeviceName :config="config" class="text-center" />
    <div
      :style="{
        '--open-color': getDesign.openColor,
        '--close-color': getDesign.closeColor,
      }"
      :class="isOpenClose ? 'switch_open' : 'switch_close'"
    ></div>
  </main>
</template>
<style lang="less" scoped>
  .switch_open {
    background: var(--open-color);
    box-shadow: var(--open-color) 0 0 10px 3px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 10px 0;
  }

  .switch_close {
    background-color: var(--close-color);
    box-shadow: none;
    width: 42.023px;
    height: 42.023px;
    border-radius: 50%;
    margin: 10px 0;
  }
</style>