<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,
    labelAlign: 'left',
    stepDescription: t('registerGateway.tip'),
  },
  {
    title: t('registerGateway.addInterface'),
    component: shallowRef(AddInterface),
    nextStepButtonDisabled: true,
    stepDescription: '文本描述',
  },
  {
    title: t('registerGateway.bindingAgreement'),
    component: shallowRef(BindProtocol),
    stepDescription: '文本描述',
  },
  {
    title: t('registerGateway.verificationAgreement'),
    component: shallowRef(VerifyProtocol),
    stepDescription: '文本描述',
    nextStepButtonText: t('common.finishSetup'),
    isLastStep: true,
  },
]);

const registerGatewayForm = reactive<RegisterGatewayForm>({
  snCode: '',
  password: '',
  modelId: 0,
  linkType: '',
  id: 0,
  interfaceId: undefined,
  protocolId: undefined,
  linkName: '',
  protocolName: '',
  state: 0,
  docUrl: '',
  iconUrl: '',
  interfaceNum: '',
  modelName: '',
  surfMode: '',
  surfModeEn: '',
  show: false,
  judgmentRegistration: false,
});

const rules = computed<FormRules<RegisterGatewayForm>>(() => {
  return {
    interfaceId: [
      {
        required: true,
        message: t('common.plzSelect', { name: t('registerGateway.interface') }),
        trigger: 'change',
      },
    ],
  };
});
</script>

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