hvac-web/src/views/register-gateway/RegisterGateway.vue

<script setup lang="ts">
import { computed, reactive, ref, shallowRef } from 'vue';

import UseGuidance from '@/layout/UseGuidance.vue';
import AddInterface from '@/views/register-gateway/AddInterface.vue';
import BindProtocol from '@/views/register-gateway/BindProtocol.vue';
import VerifyDevice from '@/views/register-gateway/VerifyDevice.vue';
import VerifyProtocol from '@/views/register-gateway/VerifyProtocol.vue';
import { t } from '@/i18n';

import type { FormRules, RegisterGatewayForm, UseGuideStepItem } from '@/types';

const steps = ref<UseGuideStepItem[]>([
  {
    title: t('registerGateway.verificationEquipment'),
    component: shallowRef(VerifyDevice),
    nextStepButtonDisabled: true,
  },
  {
    title: t('registerGateway.addInterface'),
    component: shallowRef(AddInterface),
  },
  {
    title: t('registerGateway.bindingAgreement'),
    component: shallowRef(BindProtocol),
  },
  {
    title: t('registerGateway.verificationAgreement'),
    component: shallowRef(VerifyProtocol),
    contentOffset: 40,
  },
]);

const registerGatewayForm = reactive<RegisterGatewayForm>({
  snCode: '',
  password: '',
  modelId: 0,
  linkType: '',
  id: 0,
});

const rules = computed<FormRules<RegisterGatewayForm>>(() => {
  return {
    snCode: [
      {
        required: true,
        message: t('registerGateway.pleaseSnCode'),
        trigger: 'change',
      },
    ],
    password: [
      {
        required: true,
        message: t('registerGateway.pleasePassword'),
        trigger: 'change',
      },
    ],
    linkType: [
      {
        required: true,
        message: t('registerGateway.pleaseSelectInterface'),
        trigger: 'change',
      },
    ],
  };
});
</script>

<template>
  <UseGuidance
    :title="$t('registerGateway.registerGateway')"
    :steps="steps"
    :form="registerGatewayForm"
    :rules="rules"
  />
</template>