<template>
  <div class="step2-style">
    <div style="margin-top: 0.1vh; overflow: scroll">
      <BasicForm :showResetButton="false" :showSubmitButton="false" @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 == 'SNMP1'">
        <SnmpCpns ref="snmpRef" />
      </div>
      <div
        style="
          display: flex;
          width: 11vw;
          height: 8vh;
          flex-direction: row;
          justify-content: space-between;
          margin-left: 19vw;
          margin-top: -0.35vh;
        "
      >
        <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">
  import { defineComponent, reactive, ref, getCurrentInstance, onUnmounted, nextTick } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { step2Schemas } from './data';
  import { Alert, Divider, Descriptions } from 'ant-design-vue';
  import { Button } from '/@/components/Button';
  import MqttCpns from '../step/cpns/mqtt/Mqtt.vue';
  import CoapCpns from '../step/cpns/coap/Coap.vue';
  import Lwm2mCpns from '../step/cpns/lwm2m/index.vue';
  import SnmpCpns from '../step/cpns/snmp/index.vue';

  export default defineComponent({
    components: {
      BasicForm,
      [Alert.name]: Alert,
      [Divider.name]: Divider,
      [Descriptions.name]: Descriptions,
      [Descriptions.Item.name]: Descriptions.Item,
      Button,
      MqttCpns,
      CoapCpns,
      Lwm2mCpns,
      SnmpCpns,
    },
    emits: ['next', 'prev', 'register'],
    setup(_, { emit }) {
      const { proxy } = getCurrentInstance() as any;
      const mqttRef = ref(null);
      const coapRef = ref(null);
      const lwm2mRef = ref(null);
      const snmpRef = ref(null);
      const isMqttType = ref('');
      let step2Data = reactive({
        transportConfiguration: {},
      });
      const [register, { validate, resetFields, setFieldsValue, updateSchema }] = useForm({
        labelWidth: 80,
        schemas: step2Schemas,
        actionColOptions: {
          span: 14,
        },
      });
      const setStepTwoFieldsValueFunc = (v) => {
        setFieldsValue({
          transportType: v?.profileData?.transportConfiguration?.type,
        });
        isMqttType.value = v?.profileData?.transportConfiguration?.type;
        setTimeout(() => {
          proxy.$refs.mqttRef?.setStepFieldsValueFunc(v?.profileData?.transportConfiguration);
          proxy.$refs.coapRef?.setStepFieldsValueFunc(v?.profileData?.transportConfiguration);
          proxy.$refs.lwm2mRef?.setStepFieldsValueFunc(v?.profileData?.transportConfiguration);
        }, 100);
      };

      const customClearStepTwoValueFunc = () => {
        isMqttType.value = '';
        resetFields();
        nextTick(() => {
          proxy.$refs.mqttRef?.resetStepFieldsValueFunc();
          proxy.$refs.coapRef?.resetStepFieldsValueFunc();
          proxy.$refs.lwm2mRef?.resetStepFieldsValueFunc();
        });
      };
      async function customResetFunc() {
        emit('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 getStep2DataFunc = async () => {
        const val = await validate();
        if (!val) return;
        const getMqttVal = await proxy.$refs.mqttRef?.getDataFunc();
        const getCoapVal = await proxy.$refs.coapRef?.getDataFunc();
        const getLwm2mVal = await proxy.$refs.lwm2mRef?.getDataFunc();
        step2Data.transportConfiguration = {
          ...getMqttVal,
          ...getCoapVal,
          ...getLwm2mVal,
          ...val,
        };
        return step2Data;
      };
      return {
        customResetFunc,
        register,
        setStepTwoFieldsValueFunc,
        customClearStepTwoValueFunc,
        getStep2DataFunc,
        isMqttType,
        mqttRef,
        coapRef,
        lwm2mRef,
        snmpRef,
      };
    },
  });
</script>
<style lang="less" scoped>
  .step2-style {
    margin: 0vh 0.6vw;
    border-radius: 4px;
  }

  ::-webkit-scrollbar {
    display: none;
  }
</style>