<script setup lang="ts">
import {
  CreateOutline,
  Add,
  Remove,
  EyeOutline,
  ReorderThreeOutline,
  FolderOpenOutline,
  BuildOutline,
  DocumentOutline,
  AddCircleOutline,
  ArrowUpOutline,
  ArrowDownOutline,
  ArrowBackOutline,
  ArrowForwardOutline,
  ArrowUpCircleOutline,
  ArrowDownCircleOutline,
} from '@vicons/ionicons5'

type TButtonInfo = {
  title: string
  icon: string
  align?: string
  disabled?: boolean
}

const props = defineProps({
  buttonList: {
    type: Array<TButtonInfo>,
    default: () => [],
  },
})

const emits = defineEmits(['buttonClick'])
const handleClick = (title: string) => {
  emits('buttonClick', title)
}

// 点击标题回到首页
const backToHome = () => {
  emits('titleClick')
}
</script>

<template>
  <header>
    <n-button
      quaternary
      class="text-white text-lg w-full h-20"
      @click="backToHome"
    >
      数字化定制后台管理系统
    </n-button>
  </header>
  <div class="flex flex-col">
    <n-space vertical>
      <n-button
        class="btn"
        :class="button.align === 'center' ? '' : 'justify-start'"
        v-for="button in props.buttonList"
        :key="button.title"
        @click="handleClick(button.title)"
      >
        <template #icon>
          <n-icon>
            <CreateOutline v-if="button.icon === 'CreateOutline'" />
            <DocumentOutline v-else-if="button.icon === 'DocumentOutline'" />
            <Add v-else-if="button.icon === 'Add'" />
            <FolderOpenOutline
              v-else-if="button.icon === 'FolderOpenOutline'"
            />
            <Remove v-else-if="button.icon === 'Remove'" />
            <EyeOutline v-else-if="button.icon === 'EyeOutline'" />
            <BuildOutline v-else-if="button.icon === 'BuildOutline'" />
            <ReorderThreeOutline
              v-else-if="button.icon === 'ReorderThreeOutline'"
            />

            <AddCircleOutline v-else-if="button.icon === 'AddCircleOutline'" />
            <ArrowUpOutline v-else-if="button.icon === 'ArrowUpOutline'" />
            <ArrowDownOutline v-else-if="button.icon === 'ArrowDownOutline'" />
            <ArrowBackOutline v-else-if="button.icon === 'ArrowBackOutline'" />
            <ArrowForwardOutline
              v-else-if="button.icon === 'ArrowForwardOutline'"
            />
            <ArrowUpCircleOutline
              v-else-if="button.icon === 'ArrowUpCircleOutline'"
            />
            <ArrowDownCircleOutline
              v-else-if="button.icon === 'ArrowDownCircleOutline'"
            />
          </n-icon>
        </template>
        {{ button.title }}
      </n-button>
    </n-space>
  </div>
</template>

<style scoped>
.btn {
  @apply text-white w-full h-10 text-16px tracking-widest;
}
</style>
