<template>
  <div
    class="step2-style"
    :style="[
      isMqttType == 'DEFAULT' || isMqttType == 'GB/T28181'
        ? { 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 :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 style="margin-top: 5vh; margin-left: -102px" v-else-if="isMqttType == 'TCP'">
        <TcpCpns :deviceTypeStr="deviceTypeStr" ref="tcpRef" />
      </div>
      <div v-if="ifShowBtn" class="btn-style">
        <div style="display: flex; width: 4vw; height: 4vh; margin-top: 1.65vh; margin-left: 44px">
          <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 '../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';

  const emits = defineEmits(['prev']);
  const props = 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: 80,
    schemas: step2Schemas,
    actionColOptions: {
      span: 14,
    },
    showResetButton: false,
    submitOnReset: false,
    showActionButtonGroup: props.ifShowBtn ? true : 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: '默认', 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,
    };
    return step2Data;
  };

  const editOrAddTransportTypeStatus = (status: boolean) => {
    const options = [
      { label: '默认', value: 'DEFAULT' },
      { label: 'MQTT', value: 'MQTT' },
      { label: 'CoAP', value: 'COAP' },
      // { label: 'LWM2M', value: 'LWM2M' },
      // { label: 'SNMP', value: 'SNMP' },
      { label: 'TCP/UDP', value: 'TCP' },
    ];
    // if (deviceType == 'DIRECT_CONNECTION') {
    // options.push({ label: 'GB/T 28181', value: 'GB/T28181' });//暂时隐藏 GBT 28181写完放出来
    // }
    // if (deviceType != 'DIRECT_CONNECTION' && isMqttType.value == 'GB/T28181') {
    //   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>