<template>
  <div>
    <Form
      ref="formRef"
      :model="scriptForm"
      name="basic"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 16 }"
      autocomplete="off"
      style="margin-left: 2.4rem"
    >
      <Form.Item
        label="类型"
        :rules="[{ required: true, message: '请选择鉴权脚本' }]"
        :wrapper-col="{ span: 10 }"
      >
        <Select
          v-model:value="scriptForm.protocol"
          :options="typeOptions"
          :disabled="protocolStatus"
        />
      </Form.Item>
      <Form.Item
        v-if="
          scriptForm.protocol === TCPProtocolTypeEnum.CUSTOM && deviceTypeStr !== TypeEnum.SENSOR
        "
        label="鉴权脚本"
        name="authScriptId"
        :rules="[{ required: true, message: '请选择鉴权脚本' }]"
      >
        <ScriptSelectItem
          ref="scriptSelectItemAuthRef"
          v-model:value="scriptForm.authScriptId"
          :scriptType="ScriptTypeEnum.TRANSPORT_TCP_AUTH"
        />
      </Form.Item>
      <Form.Item
        v-if="scriptForm.protocol === TCPProtocolTypeEnum.CUSTOM"
        label="上行脚本"
        name="upScriptId"
        :rules="[{ required: true, message: '请选择上行脚本' }]"
      >
        <ScriptSelectItem
          ref="scriptSelectItemUpRef"
          v-model:value="scriptForm.upScriptId"
          :scriptType="ScriptTypeEnum.TRANSPORT_TCP_UP"
        />
      </Form.Item>
    </Form>
  </div>
</template>
<script lang="ts" setup name="index">
  import { reactive, ref } from 'vue';
  import { Form, Select } from 'ant-design-vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { ScriptSelectItem } from './components';
  import { ScriptTypeEnum } from '/@/views/rule/script/TcpConversionScript/config';
  import { TypeEnum } from '/@/views/device/list/config/data';
  import { TCPProtocolTypeEnum, TCPProtocolTypeNameEnum } from '/@/enums/deviceEnum';

  const props = defineProps({
    deviceTypeStr: { type: String, default: '' },
  });

  const typeOptions = Object.keys(TCPProtocolTypeEnum).map((key) => ({
    label: TCPProtocolTypeNameEnum[key],
    value: TCPProtocolTypeEnum[key],
  }));

  const scriptForm = reactive({
    authScriptId: '',
    upScriptId: '',
    protocol: TCPProtocolTypeEnum.MODBUS_RTU,
  });

  const { createMessage } = useMessage();

  const scriptSelectItemAuthRef = ref<InstanceType<typeof ScriptSelectItem>>();

  const scriptSelectItemUpRef = ref<InstanceType<typeof ScriptSelectItem>>();

  const getFormData = async () => {
    scriptForm.authScriptId = scriptSelectItemAuthRef.value?.getValue();
    scriptForm.upScriptId = scriptSelectItemUpRef.value?.getValue();
    //业务 网关子设备没有鉴权脚本
    if (scriptForm.protocol === TCPProtocolTypeEnum.CUSTOM) {
      if (props.deviceTypeStr === TypeEnum.SENSOR)
        Reflect.deleteProperty(scriptForm, 'authScriptId');
      if (Object.values(scriptForm).some((item) => !item)) {
        createMessage.error('请先选择对应脚本');
        throw new Error('请先选择对应脚本');
      }
    }

    return {
      ...scriptForm,
      type: 'TCP',
    };
  };

  const resetFormData = () => {};

  const setFormData = (data) => {
    scriptForm.protocol = data?.protocol;
    scriptForm.authScriptId = data?.authScriptId;
    scriptForm.upScriptId = data?.upScriptId;
    scriptSelectItemAuthRef.value?.setValue(data?.authScriptId);
    scriptSelectItemUpRef.value?.setValue(data?.upScriptId);
  };

  const protocolStatus = ref(false);

  const setProtocolStatus = (flag: boolean) => {
    protocolStatus.value = flag;
  };

  defineExpose({
    getFormData,
    resetFormData,
    setFormData,
    setProtocolStatus,
  });
</script>
<style lang="less" scoped></style>