<script setup>
import Device from '@/pages/settings/Device.vue'
import RIIC from '@/pages/settings/RIIC.vue'
import Email from '@/pages/settings/Email.vue'
import SKLand from '@/pages/settings/SKLand.vue'
import AutoFight from '@/pages/settings/AutoFight.vue'
import Appearance from '@/pages/settings/Appearance.vue'
import DailyMission from '@/pages/settings/DailyMission.vue'
import Recruit from '@/pages/settings/Recruit.vue'
import Depotswitch from '@/pages/settings/Depotswitch.vue'
import Regular from '@/pages/settings/Regular.vue'
import Clue from '@/pages/settings/Clue.vue'
import WeeklyPlan from '@/pages/settings/WeeklyPlan.vue'
import LongTasks from '@/pages/settings/LongTasks.vue'

const settings = inject('settings')
const tab = ref('device')
</script>

<template>
  <n-modal v-model:show="settings" transform-origin="center" preset="card" class="settings-card">
    <template #header><div class="header">mower-ng 设置</div></template>
    <n-tabs placement="left" type="card" v-model:value="tab">
      <n-tab-pane name="device" tab="设备与游戏">
        <n-scrollbar style="height: 640px" trigger="none">
          <Device />
        </n-scrollbar>
      </n-tab-pane>
      <n-tab-pane name="riic" tab="基建设置">
        <n-scrollbar style="height: 640px" trigger="none">
          <RIIC />
        </n-scrollbar>
      </n-tab-pane>
      <n-tab-pane name="email" tab="邮件提醒">
        <n-scrollbar style="height: 640px" trigger="none">
          <Email />
        </n-scrollbar>
      </n-tab-pane>
      <n-tab-pane name="skland" tab="森空岛账号">
        <n-scrollbar style="height: 640px" trigger="none">
          <SKLand />
        </n-scrollbar>
      </n-tab-pane>
      <n-tab-pane name="auto_fight" tab="自动战斗设置">
        <n-scrollbar style="height: 640px" trigger="none">
          <AutoFight />
        </n-scrollbar>
      </n-tab-pane>
      <n-tab-pane name="appearance" tab="外观、性能与其它">
        <n-scrollbar style="height: 640px" trigger="none">
          <Appearance />
        </n-scrollbar>
      </n-tab-pane>
      <n-tab-pane name="daily" tab="每日任务">
        <n-scrollbar style="height: 640px" trigger="none">
          <DailyMission />
        </n-scrollbar>
      </n-tab-pane>
      <n-tab-pane name="recruit" tab="公开招募">
        <n-scrollbar style="height: 640px" trigger="none">
          <Recruit />
        </n-scrollbar>
      </n-tab-pane>
      <n-tab-pane name="depot" tab="仓库物品混合读取">
        <n-scrollbar style="height: 640px" trigger="none">
          <Depotswitch />
        </n-scrollbar>
      </n-tab-pane>
      <n-tab-pane name="regular" tab="日常任务">
        <n-scrollbar style="height: 640px" trigger="none">
          <Regular />
        </n-scrollbar>
      </n-tab-pane>
      <n-tab-pane name="clue" tab="线索收集与信用">
        <n-scrollbar style="height: 640px" trigger="none">
          <Clue />
        </n-scrollbar>
      </n-tab-pane>
      <n-tab-pane name="weekly" tab="刷理智周计划">
        <n-scrollbar style="height: 640px" trigger="none">
          <WeeklyPlan />
        </n-scrollbar>
      </n-tab-pane>
      <n-tab-pane name="long_task" tab="大型任务">
        <n-scrollbar style="height: 640px" trigger="none">
          <LongTasks />
        </n-scrollbar>
      </n-tab-pane>
    </n-tabs>
  </n-modal>
</template>

<style>
.n-divider:not(.n-divider--vertical) {
  margin: 14px 0 8px;
}

.settings-card {
  width: 840px;
}
</style>

<style scoped>
.header {
  flex: 1;
  text-align: center;
  margin-left: 26px;
}
</style>
