<template>
  <div class="step2-style">
    <div
      style="margin-top: 0.1vh; height: 15vh"
      :style="[
        isMqttType == 'MQTT'
          ? { minHeight: 45 + 'vh' }
          : isMqttType == 'COAP'
          ? { minHeight: 35 + 'vh' }
          : isMqttType == 'LWM2M'
          ? { minHeight: 55 + 'vh' }
          : isMqttType == 'SNMP'
          ? { minHeight: 60 + 'vh' }
          : { minHeight: 25 + 'vh' },
      ]"
    >
      <BasicForm :showResetButton="false" :showSubmitButton="false" @register="register" />
      <div style="margin-top: 5vh" v-if="isMqttType == 'MQTT'">
        <MqttCpns ref="mqttRef" />
      </div>
      <div style="margin-top: 5vh" v-else-if="isMqttType == 'COAP'">
        <CoapCpns ref="coapRef" />
      </div>
      <div style="margin-top: 1vh" v-else-if="isMqttType == 'LWM2M'">
        <Lwm2mCpns ref="lwm2mRef" />
      </div>
      <div style="margin-top: 5vh" v-else-if="isMqttType == 'SNMP'">
        <SnmpCpns ref="snmpRef" />
      </div>
      <div class="btn-style">
        <div style="display: flex; width: 4vw; height: 4vh; margin-top: 1.65vh">
          <Button type="default" style="border-radius: 2px" class="mt-5" @click="customResetFunc"
            >上一步</Button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref, onUnmounted, nextTick } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { step2Schemas } from './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';

  const emits = defineEmits(['prev']);
  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 isMqttType = ref('');
  let step2Data = reactive({
    transportConfiguration: {},
  });
  const [register, { validate, resetFields, setFieldsValue, updateSchema }] = useForm({
    labelWidth: 80,
    schemas: step2Schemas,
    actionColOptions: {
      span: 14,
    },
  });
  const setFormData = (v) => {
    setFieldsValue({
      transportType: v?.profileData?.transportConfiguration?.type,
    });
    isMqttType.value = v?.profileData?.transportConfiguration?.type;
    mqttRef.value?.setFormData(v?.profileData?.transportConfiguration);
    coapRef.value?.setFormData(v?.profileData?.transportConfiguration);
    lwm2mRef.value?.setFormData(v?.profileData?.transportConfiguration);
    snmpRef.value?.setFormData(v?.profileData?.transportConfiguration);
  };

  const resetFormData = () => {
    isMqttType.value = '';
    resetFields();
    nextTick(() => {
      mqttRef.value?.resetFormData();
      coapRef.value?.resetFormData();
      lwm2mRef.value?.resetFormData();
      snmpRef.value?.resetFormData();
    });
  };
  async function customResetFunc() {
    emits('prev');
  }
  nextTick(() => {
    updateSchema({
      field: 'transportType',
      componentProps() {
        return {
          options: [
            { label: '默认', value: 'DEFAULT' },
            { label: 'MQTT', value: 'MQTT' },
            { label: 'CoAP', value: 'COAP' },
            { label: 'LWM2M', value: 'LWM2M' },
            { label: 'SNMP', value: 'SNMP' },
          ],
          onChange(e) {
            isMqttType.value = e;
          },
        };
      },
    });
  });
  onUnmounted(() => {
    isMqttType.value = '';
  });
  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();
    step2Data.transportConfiguration = {
      ...getMqttVal,
      ...getCoapVal,
      ...getLwm2mVal,
      ...getSnmpVal,
      ...val,
    };
    return step2Data;
  };

  defineExpose({
    getFormData,
    resetFormData,
    setFormData,
  });
</script>
<style lang="less" scoped>
  @import url('./common/TransportConfigurationStep.less');
</style>