<script lang="ts" setup>
  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
  import { option } from './config';
  import { SvgIcon } from '/@/components/Icon';
  import { Switch } from 'ant-design-vue';
  import { computed, ref } from 'vue';
  import { useComponentScale } from '../../../hook/useComponentScale';
  import { useSendCommand } from '../../../hook/useSendCommand';
  import { unref } from 'vue';
  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
  import { useDataFetch } from '../../../hook/socket/useSocket';
  import { getSendValues } from '../config';
  import { useModal } from '/@/components/Modal';
  import PasswordModal from '../component/PasswordModal.vue';

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

  const checked = ref(false);

  const getDesign = computed(() => {
    const { option, persetOption } = props.config;
    const {
      componentInfo,
      attribute,
      attributeRename,
      attributeName,
      commandType,
      extensionDesc,
      codeType,
      deviceCode,
      customCommand,
    } = option;
    const {
      icon: presetIcon,
      iconColor: presetIconColor,
      fontSize: persetFontSize,
      password: persetPassword,
    } = persetOption || {};
    const { icon, iconColor, fontSize, password } = componentInfo || {};

    return {
      icon: icon ?? presetIcon,
      iconColor: iconColor || presetIconColor,
      attribute: attributeRename || attributeName || attribute,
      extensionDesc: extensionDesc ? JSON.parse(extensionDesc) : {},
      fontSize: fontSize || persetFontSize || 14,
      password: password || persetPassword,
      commandType,
      codeType,
      deviceCode,
      customCommand,
    };
  });

  const { sendCommand, loading } = useSendCommand();

  const handleChange = async () => {
    if (unref(getDesign).password) {
      openModal(true, { password: unref(getDesign).password });
      checked.value = !unref(checked);
      return;
    }
    const { option } = props.config || {};

    const { values, isModbusCommand, sendValue } =
      (await getSendValues(option, unref(getDesign), unref(checked))) || {};

    const flag = await sendCommand(
      values,
      isModbusCommand ? sendValue : unref(checked),
      isModbusCommand
    );
    if (!flag) checked.value = !unref(checked);
  };

  const handleSendCommand = async () => {
    const { option } = props.config || {};
    checked.value = !unref(checked);

    const { values, isModbusCommand, sendValue } =
      (await getSendValues(option, unref(getDesign), unref(checked))) || {};

    const flag = await sendCommand(
      values,
      isModbusCommand ? sendValue : unref(checked),
      isModbusCommand
    );
    if (!flag) checked.value = !unref(checked);
  };

  const updateFn: DataFetchUpdateFn = (message, attribute) => {
    const { data = {} } = message;
    const [latest] = data[attribute] || [];
    const [_, value] = latest;
    checked.value = isNaN(value as unknown as number) ? false : !!Number(value);
  };

  useDataFetch(props, updateFn);
  const { getScale, getRatio } = useComponentScale(props);

  const [registerModal, { openModal }] = useModal();
</script>

<template>
  <main class="w-full h-full flex flex-col justify-center">
    <DeviceName :config="config" class="text-center" />
    <main class="w-full h-full flex justify-around items-center" :style="getScale">
      <div class="flex flex-col justify-center items-center">
        <SvgIcon
          :name="getDesign.icon"
          prefix="iconfont"
          :style="{ color: getDesign.iconColor }"
          :size="getRatio ? getRatio * 60 : 60"
        />
        <span
          class="mt-3 truncate text-gray-500 text-center"
          :style="{
            fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px',
          }"
        >
          {{ getDesign.attribute || '属性' }}
        </span>
      </div>
      <Switch
        :style="{ transform: ` scale(${getRatio})` }"
        v-model:checked="checked"
        :loading="loading"
        @change="handleChange"
      />
    </main>
    <PasswordModal @register="registerModal" @success="handleSendCommand" />
  </main>
</template>