<script setup lang="ts">
import { ref } from 'vue'
import KbxButton from './KbxButton.vue'

const props = withDefaults(defineProps<{
  canImport?: boolean
  canExport?: boolean
}>(), { canImport: true, canExport: true })

const emit = defineEmits<{
  export: []
  template: []
  import: []
  paste: []
  history: []
}>()

const open = ref(false)
function choose(action: 'export' | 'template' | 'import' | 'paste' | 'history') {
  open.value = false
  emit(action)
}
</script>

<template>
  <div class="kbx-excel-menu">
    <KbxButton label="엑셀" variant="secondary" @click="open = !open" />
    <div v-if="open" class="kbx-excel-menu__popup" role="menu">
      <button v-if="props.canExport" type="button" @click="choose('export')">현재 조회결과 다운로드</button>
      <button v-if="props.canImport" type="button" @click="choose('template')">업로드 양식 다운로드</button>
      <button v-if="props.canImport" type="button" @click="choose('import')">엑셀 업로드</button>
      <button v-if="props.canImport" type="button" @click="choose('paste')">Excel에서 붙여넣기</button>
      <button v-if="props.canImport" type="button" @click="choose('history')">최근 업로드 결과</button>
    </div>
  </div>
</template>

<style scoped>
.kbx-excel-menu { position:relative; display:inline-block; }
.kbx-excel-menu__popup { position:absolute; right:0; top:calc(100% + 4px); min-width:220px; padding:4px; background:var(--kbx-color-surface); border:1px solid var(--kbx-color-border); border-radius:var(--kbx-radius-sm); box-shadow:0 6px 18px rgb(0 0 0 / 12%); z-index:50; }
.kbx-excel-menu__popup button { display:block; width:100%; height:34px; padding:0 10px; text-align:left; border:0; background:transparent; color:var(--kbx-color-text); border-radius:4px; }
.kbx-excel-menu__popup button:hover { background:var(--kbx-color-surface-muted); }
</style>
