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

import UseGuidance from '@/layout/UseGuidance.vue';
import CreateAccount from '@/views/create-customer/CreateAccount.vue';
import CreateCharacter from '@/views/create-customer/CreateCharacter.vue';
import EstablishOrganization from '@/views/create-customer/EstablishOrganization.vue';
import { t } from '@/i18n';

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

const useForm = reactive<CreateCustomer>({
  orgName: '',
  logo: '',
  themeColor: '#32bac0',
  id: undefined,
  imageUrl: '',
  selectedColor: '#e2550d',
  leaseTerm: [dayjs(), dayjs()],
  stationsNumber: 0,
  dataValidityPeriod: '',
});

const rules = computed<FormRules<RegisterGatewayForm>>(() => {
  return {
    orgName: [
      {
        required: true,
        message: '不能为空',
        trigger: 'change',
      },
    ],
    leaseTerm: [
      {
        required: true,
        message: '不能为空',
        trigger: 'change',
      },
    ],
    stationsNumber: [
      {
        required: true,
        message: '不能为空',
        trigger: 'change',
      },
    ],
    dataValidityPeriod: [
      {
        required: true,
        message: '不能为空',
        trigger: 'change',
      },
    ],
  };
});

const steps = ref<UseGuideStepItem[]>([
  {
    title: t('createCustomer.establishOrganization'),
    component: shallowRef(EstablishOrganization),
    stepDescription: '可以自定义二级域名、Logo及主题色，以后可随时修改',
    labelAlign: 'left',
    labelCol: { span: 2 },
  },
  {
    title: t('createCustomer.createCharacter'),
    component: shallowRef(CreateCharacter),
    stepDescription: '可以直接使用默认角色，也可以自定义角色，权限后续可随时编辑',
  },
  {
    title: t('createCustomer.createAccount'),
    component: shallowRef(CreateAccount),
    stepDescription: '创建账号，并为账号选择角色类型',
    nextStepButtonText: t('common.finishSetup'),
    isLastStep: true,
  },
]);
</script>

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