<template>
  <div
    :style="[
      isMqttType == 'DEFAULT' || isMqttType == 'GBT28181'
        ? { minHeight: 0 + 'px' }
        : { minHeight: 800 + 'px' },
    ]"
  >
    <div
      :style="[
        isMqttType == 'MQTT'
          ? { minHeight: 45 + 'vh' }
          : isMqttType == 'COAP'
          ? { minHeight: 35 + 'vh' }
          : isMqttType == 'LWM2M'
          ? { minHeight: 55 + 'vh' }
          : isMqttType == 'SNMP'
          ? { minHeight: 60 + 'vh' }
          : isMqttType == 'TCP/UDP'
          ? { minHeight: 15 + 'vh' }
          : { minHeight: 25 + 'vh' },
      ]"
    >
      <BasicForm class="w-1/2" @register="register" />
      <div v-if="isMqttType == 'MQTT'">
        <MqttCpns ref="mqttRef" />
      </div>
      <div v-else-if="isMqttType == 'COAP'">
        <CoapCpns ref="coapRef" />
      </div>
      <div v-else-if="isMqttType == 'LWM2M'">
        <Lwm2mCpns ref="lwm2mRef" />
      </div>
      <div v-else-if="isMqttType == 'SNMP'">
        <SnmpCpns ref="snmpRef" />
      </div>
      <div v-else-if="isMqttType == 'TCP'">
        <TcpCpns :deviceTypeStr="deviceTypeStr" ref="tcpRef" />
      </div>
      <div v-if="ifShowBtn" class="w-full flex items-center justify-center mt-4">
        <Button type="default" @click="customResetFunc"> {{ t('common.lastStepText') }}</Button>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref, onUnmounted, nextTick } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { step2Schemas } from '../device.profile.data';
  import { Button } from '/@/components/Button';
  import MqttCpns from './cpns/mqtt/Mqtt.vue';
  import CoapCpns from './cpns/coap/Coap.vue';
  import Lwm2mCpns from './cpns/lwm2m/index.vue';
  import SnmpCpns from './cpns/snmp/index.vue';
  import TcpCpns from './cpns/tcp/index.vue';
  import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();

  const emits = defineEmits(['prev']);
  defineProps({
    ifShowBtn: { type: Boolean, default: true },
    deviceTypeStr: { type: String, default: '' },
  });
  const mqttRef = ref<InstanceType<typeof MqttCpns>>();
  const coapRef = ref<InstanceType<typeof CoapCpns>>();
  const lwm2mRef = ref<InstanceType<typeof Lwm2mCpns>>();
  const snmpRef = ref<InstanceType<typeof SnmpCpns>>();
  const tcpRef = ref<InstanceType<typeof TcpCpns>>();
  const isMqttType = ref('DEFAULT');
  let step2Data = reactive({
    transportConfiguration: {},
  });
  const [register, { validate, resetFields, setFieldsValue, updateSchema }] = useForm({
    labelWidth: 140,
    schemas: step2Schemas,

    showResetButton: false,
    submitOnReset: false,
    // showActionButtonGroup: props.ifShowBtn ? true : false,
    showActionButtonGroup: false,
  });
  const setFormData = async (v) => {
    setFieldsValue({
      transportType: v?.profileData?.transportConfiguration?.type,
    });
    isMqttType.value = v?.profileData?.transportConfiguration?.type;
    await nextTick();
    mqttRef.value?.setFormData(v?.profileData?.transportConfiguration);
    coapRef.value?.setFormData(v?.profileData?.transportConfiguration);
    lwm2mRef.value?.setFormData(v?.profileData?.transportConfiguration);
    snmpRef.value?.setFormData(v?.profileData?.transportConfiguration);
    tcpRef.value?.setFormData(v?.profileData?.transportConfiguration);
  };

  const resetFormData = () => {
    isMqttType.value = 'DEFAULT';
    resetFields();
    nextTick(() => {
      mqttRef.value?.resetFormData();
      coapRef.value?.resetFormData();
      lwm2mRef.value?.resetFormData();
      snmpRef.value?.resetFormData();
      tcpRef.value?.resetFormData();
    });
  };
  async function customResetFunc() {
    emits('prev');
  }
  nextTick(() => {
    updateSchema({
      field: 'transportType',
      componentProps() {
        return {
          options: [
            { label: t('deviceManagement.product.defaultText'), value: 'DEFAULT' },
            { label: 'MQTT', value: 'MQTT' },
            { label: 'CoAP', value: 'COAP' },
            // { label: 'LWM2M', value: 'LWM2M' },
            // { label: 'SNMP', value: 'SNMP' },
            { label: 'TCP/UDP', value: 'TCP' },
          ],
          onChange(e) {
            isMqttType.value = e;
          },
        };
      },
    });
  });
  onUnmounted(() => {
    isMqttType.value = 'DEFAULT';
  });
  const getFormData = async () => {
    const val = await validate();
    if (!val) return;
    const getMqttVal = await mqttRef.value?.getFormData();
    const getCoapVal = await coapRef.value?.getFormData();
    const getLwm2mVal = await lwm2mRef.value?.getFormData();
    const getSnmpVal = await snmpRef.value?.getFormData();
    const getTcpVal = await tcpRef.value?.getFormData();
    step2Data.transportConfiguration = {
      // type: isMqttType.value,
      ...getMqttVal,
      ...getCoapVal,
      ...getLwm2mVal,
      ...getSnmpVal,
      ...getTcpVal,
      ...val,
    };

    if (val?.transportType === 'GBT28181') {
      step2Data.transportConfiguration = { type: val?.transportType };
    }
    return step2Data;
  };

  const editOrAddTransportTypeStatus = (status: boolean, deviceType: DeviceTypeEnum) => {
    const options = [
      { label: t('deviceManagement.product.defaultText'), value: 'DEFAULT' },
      { label: 'MQTT', value: 'MQTT' },
      { label: 'CoAP', value: 'COAP' },
      // { label: 'LWM2M', value: 'LWM2M' },
      // { label: 'SNMP', value: 'SNMP' },
      { label: 'TCP/UDP', value: 'TCP' },
    ];
    deviceType && tcpRef.value && tcpRef.value?.setServiceType(deviceType);
    if (deviceType == DeviceTypeEnum.DIRECT_CONNECTION) {
      options.push({ label: 'GBT28181', value: 'GBT28181' }); //暂时隐藏 GBT 28181写完放出来
    }
    if (deviceType != 'DIRECT_CONNECTION' && isMqttType.value == 'GBT28181') {
      setFieldsValue({ transportType: null });
    }
    updateSchema({
      field: 'transportType',
      componentProps: {
        disabled: status,
        options,
        onChange(e) {
          isMqttType.value = e;
        },
      },
    });
  };
  const updateDisabled = async () => {
    await nextTick();
  };
  defineExpose({
    getFormData,
    resetFormData,
    setFormData,
    editOrAddTransportTypeStatus,
    updateDisabled,
  });
</script>
<style lang="less" scoped>
  @import url('./common/TransportConfigurationStep.less');
</style>