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

import UseGuidance from '@/layout/UseGuidance.vue';
import BasicInformation from '@/views/create-device/BasicInformation.vue';
import DetailedInformation from '@/views/create-device/DetailedInformation.vue';
import GatewayParameters from '@/views/create-device/GatewayParameters.vue';
import VerifyParameters from '@/views/create-device/VerifyParameters.vue';
import { t } from '@/i18n';

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

const equipmentInformationForm = reactive<EquipmentInformationForm>({
  groupId: 0,
  deviceData: [],
  deviceType: undefined,
  deviceName: '',
  brand: undefined,
  model: undefined,
  productionDate: undefined,
  chillerType: undefined,
  powerRating: '',
  refrigerantType: undefined,
  refrigerantDosage: undefined,
  nominalCoolingcapacity: undefined,
  nominalcalorificvalue: undefined,
  nominalCopRefrigeration: undefined,
  nominalCopHeating: undefined,
  chilledWaterRatedFlow: undefined,
  coolingWaterRatedFlow: undefined,
  motorCoolingMethod: undefined,
  copCorrectionFactor: undefined,
  numberUnitCircuits: undefined,
  singleLoopCompressor: undefined,
  frequencyConversion: undefined,
  ratedVoltage: undefined,
  inflowTemperature: undefined,
  waterOutletTemperature: undefined,
  relativeHumidityTemperature: undefined,
  fanNumber: undefined,
  waterFlowRate: undefined,
  coolingCapacity: undefined,
  inletPipeDiameter: undefined,
  outletPipeDiameter: undefined,
  ratedFlow: undefined,
  ratedHead: undefined,
  ratedCurrent: undefined,
  revolutions: undefined,
  status: '',
  remarks: '',
  devId: 0,
  imgUrl: '',
  id: undefined,
});

const rules = computed<FormRules<RegisterGatewayForm>>(() => {
  return {
    deviceData: [{ required: true, message: t('createDevice.pleaseEquipmentGroup'), trigger: 'change' }],
    deviceType: [{ required: true, message: t('createDevice.pleaseDeviceType'), trigger: 'change' }],
    deviceName: [{ required: true, message: t('createDevice.pleaseDeviceName'), trigger: 'change' }],
    brand: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
    model: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
    productionDate: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
    chillerType: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
    powerRating: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
    refrigerantType: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
    nominalCoolingcapacity: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
    nominalCopRefrigeration: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
    motorCoolingMethod: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
    numberUnitCircuits: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
    singleLoopCompressor: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
    frequencyConversion: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
    ratedVoltage: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
    inflowTemperature: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
    waterOutletTemperature: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
    relativeHumidityTemperature: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
    fanNumber: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
    waterFlowRate: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
    coolingCapacity: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
    inletPipeDiameter: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
    outletPipeDiameter: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
    ratedFlow: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
    ratedHead: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
    ratedCurrent: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
    revolutions: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
  };
});

const steps = ref<UseGuideStepItem[]>([
  {
    title: t('createDevice.basicInformation'),
    component: shallowRef(BasicInformation),
    stepDescription: '描述文本',
    labelAlign: 'left',
    labelCol: { span: 5 },
  },
  {
    title: t('createDevice.detailedInformation'),
    component: shallowRef(DetailedInformation),
    stepDescription: '描述文本',
    formLayout: 'vertical',
  },
  {
    title: t('createDevice.selectGatewayParameters'),
    component: shallowRef(GatewayParameters),
    stepDescription: '描述文本',
  },
  {
    title: t('createDevice.verifyData'),
    component: shallowRef(VerifyParameters),
    stepDescription: '描述文本',
    nextStepButtonText: t('common.finishSetup'),
    isLastStep: true,
  },
]);
</script>

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