<template>
    <collapse-item :name="t('information.pageConfig')" :expanded="true">
      <setting-item-box :alone="false" :name="t('information.pageSetting')">
        <setting-item  :name="t('information.defaultPage')" :alone="true">
          <n-input-number v-model:value="optionData.pageValue" size="small" :placeholder="t('common.fontSizeText')"></n-input-number>
        </setting-item>
        <setting-item  :name="t('information.pageConfig')" :alone="true">
          <n-select v-model:value="optionData.pageSize" size="small"
                    :options="page" />
        </setting-item>
        <setting-item  :name="t('information.numberOfPage')" :alone="true">
          <n-input-number v-model:value="optionData.dataset" size="small" :placeholder="t('common.fontSizeText')"></n-input-number>
        </setting-item>
      </setting-item-box>
    </collapse-item>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import {CollapseItem, SettingItem, SettingItemBox} from '@/components/Pages/ChartItemSetting'
import { option } from './config'

const page = [
  {label:'2',value:2},
  {label:'4',value:4},
  {label:'8',value:8},
  {label:'10',value:10},
  {label:'20',value:20}
]
defineProps({
  optionData: {
    type: Object as PropType<typeof option>,
    required: true
  }
})
const t = window['$t']
</script>