<script setup lang="ts">
import { NButton, NIcon, NPopover, NCheckbox } from 'naive-ui'
import { SettingsOutline } from '@vicons/ionicons5'
import { useDisplaySettings } from '../../composables/useDisplaySettings'

const displaySettings = useDisplaySettings()
</script>

<template>
  <NPopover trigger="click" placement="bottom-end" :width="200">
    <template #trigger>
      <NButton size="tiny" quaternary title="显示设置"><template #icon><NIcon size="14"><SettingsOutline /></NIcon></template></NButton>
    </template>
    <div style="font-size:13px;font-weight:600;margin-bottom:8px">显示设置</div>
    <div style="display:flex;flex-direction:column;gap:4px;font-size:13px">
      <NCheckbox v-model:checked="displaySettings.showAuthors">作者</NCheckbox>
      <NCheckbox v-model:checked="displaySettings.showAffiliation">机构</NCheckbox>
      <NCheckbox v-model:checked="displaySettings.showJournal">期刊+分区</NCheckbox>
      <NCheckbox v-model:checked="displaySettings.showPmid">PMID</NCheckbox>
      <NCheckbox v-model:checked="displaySettings.showDoi">DOI</NCheckbox>
      <NCheckbox v-model:checked="displaySettings.showStudyTypes">研究类型+OA+NCT</NCheckbox>
      <NCheckbox v-model:checked="displaySettings.showTags">MeSH 标签</NCheckbox>
      <NCheckbox v-model:checked="displaySettings.showCitedBy">被引次数</NCheckbox>
      <NCheckbox v-model:checked="displaySettings.showAiSummary">AI 摘要</NCheckbox>
      <NCheckbox v-model:checked="displaySettings.showBadges">徽章</NCheckbox>
      <NCheckbox v-model:checked="displaySettings.showActions">操作按钮</NCheckbox>
    </div>
  </NPopover>
</template>
