<script setup lang="ts">
import { NDivider, NDrawer, NDrawerContent, NFlex, NFormItem, NInputNumber } from 'naive-ui';
import ThemeSwitch from './theme-switch.vue';
import { useLayoutStore } from '@/stores/layout';
import { storeToRefs } from 'pinia';

const show = defineModel<boolean>('show');

const layoutStore = useLayoutStore();
const { stationLayoutGridCols } = storeToRefs(layoutStore);
</script>

<template>
  <NDrawer v-model:show="show" :width="330">
    <NDrawerContent closable title="系统设置" :native-scrollbar="false">
      <NFlex vertical justify="center">
        <NDivider>主题</NDivider>
        <ThemeSwitch />
        <NDivider>布局</NDivider>
        <NFormItem label="车站列数" label-placement="left">
          <NInputNumber v-model:value="stationLayoutGridCols" :min="1" :max="10" />
        </NFormItem>
      </NFlex>
    </NDrawerContent>
  </NDrawer>
</template>

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