<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';

  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 } = persetOption || {};
    const { icon, iconColor } = componentInfo || {};

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

  const { sendCommand, loading } = useSendCommand();

  const handleChange = async () => {
    const { option } = props.config || {};

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

    // const { values, sendValue, isModbusCommand } = getSendValues(
    //   values,
    //   unref(getDesign),
    //   unref(checked)
    // );
    // const isModbusCommand = ref<boolean>(false); //判断是否是TCP设备-> 且设备标识符是modeBUs，切选择是下发命令类型是属性
    // const { extensionDesc, commandType, codeType, deviceCode, customCommand } =
    //   unref(getDesign) || {};
    // const { registerAddress, actionType } = extensionDesc || {};
    // const { openCommand, closeCommand, transportType } = customCommand || {};
    // const modBUS = ref<any>({});
    // const sendValue = ref();
    // console.log(transportType, 'transportType', codeType, 'codeType');
    // //判断是不是TCP类型设备
    // if (transportType === TransportTypeEnum.TCP) {
    //   if (
    //     //判断TCP下发类型是否是自定义还是服务
    //     commandType === CommandTypeEnum.CUSTOM.toString() ||
    //     commandType == CommandTypeEnum.SERVICE.toString()
    //   ) {
    //     values.customCommand.command = unref(checked) ? openCommand : closeCommand;
    //   }
    //   if (
    //     //判断命令下发类型是不是属性
    //     commandType === CommandTypeEnum.ATTRIBUTE.toString() &&
    //     codeType === TaskTypeEnum.MODBUS_RTU
    //   ) {
    //     isModbusCommand.value = true;
    //     modBUS.value = {
    //       crc: 'CRC_16_LOWER',
    //       deviceCode: deviceCode,
    //       method: actionType == '16' ? '10' : actionType,
    //       registerAddress,
    //       registerNumber: 1,
    //       registerValues: [Number(unref(checked))],
    //     };
    //     sendValue.value = await genModbusCommand(unref(modBUS));
    //   }
    // }

    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 } = useComponentScale(props);
</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-center items-center" :style="getScale">
      <div class="flex flex-col justify-center items-center mr-20">
        <SvgIcon
          :name="getDesign.icon"
          prefix="iconfont"
          :style="{ color: getDesign.iconColor }"
          :size="50"
        />
        <span class="mt-3 truncate text-gray-500 text-xs text-center">
          {{ getDesign.attribute || '属性' }}
        </span>
      </div>
      <Switch v-model:checked="checked" :loading="loading" @change="handleChange" />
    </main>
  </main>
</template>