<template>
  <DesktopLayout>
    <template #head>
      <DesignHead :title="t('新增桌面设计')">
        <template #buttons>
          <div class="design-button">
            <a-button :disabled="current == 0" class="common-button" @click="prev">{{
              t('上一步')
            }}</a-button>
            <a-button :disabled="current == steps.length - 1" class="common-button" @click="next">{{
              t('下一步')
            }}</a-button>
            <a-button class="common-button" @click="$emit('hold')">{{ t('暂存') }}</a-button>
            <a-button
              type="primary"
              :disabled="current == 0"
              class="common-button"
              @click="$emit('save')"
              >{{ t('保存') }}</a-button
            >
            <a-button type="primary" class="clean-icon" @click="$emit('close')">{{
              t('关闭')
            }}</a-button>
          </div></template
        >
      </DesignHead></template
    >
    <template #steps>
      <DesignStepBox>
        <a-steps :current="current">
          <a-step v-for="item in steps" :key="item.title" :title="item.title" />
        </a-steps>
      </DesignStepBox>
    </template>
    <Basic v-if="current == 0" />
    <Design v-if="current == 1" />
  </DesktopLayout>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { DesktopLayout, DesignHead, DesignStepBox } from '/@/components/Desktop';
  import Design from './Design.vue';
  import Basic from './Basic.vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  defineEmits(['save', 'close', 'hold']);
  const steps = [
    {
      title: t('基本配置'),
      content: t('基本配置'),
    },
    {
      title: t('桌面设计'),
      content: t('桌面设计'),
    },
  ];
  const current = ref<number>(0);
  const next = () => {
    current.value++;
  };
  const prev = () => {
    current.value--;
  };
</script>

<style lang="less" scoped></style>
