<script setup lang="ts">
import type { UploadProps } from 'ant-design-vue';

import { Button, Select, Space, Upload } from 'ant-design-vue';

interface Props {
  categoryOptions: Array<{ label: string; value: string }>;
  embedded?: boolean;
  exportCategoryIds: string[];
  exportScopeType: 'all' | 'category';
  open: boolean;
  selectedFileName: string;
  submitting: boolean;
}

interface Emits {
  (event: 'close'): void;
  (event: 'downloadTemplate'): void;
  (event: 'selectFile', file: File): void;
  (event: 'submitExport'): void;
  (event: 'submitImport'): void;
  (event: 'update:exportCategoryIds', value: string[]): void;
  (event: 'update:exportScopeType', value: 'all' | 'category'): void;
}

const props = withDefaults(defineProps<Props>(), {
  embedded: false,
});
const emit = defineEmits<Emits>();

const beforeUpload: UploadProps['beforeUpload'] = (file) => {
  emit('selectFile', file as File);
  return false;
};

function setExportCategoryIds(value: unknown) {
  if (!Array.isArray(value)) {
    emit('update:exportCategoryIds', []);
    return;
  }

  emit('update:exportCategoryIds', value.map(String));
}
</script>

<template>
  <section
    v-if="props.open"
    class="pbt-panel"
    :class="{ 'pbt-panel-embedded': props.embedded }"
  >
    <header v-if="!props.embedded" class="pbt-panel-hd">
      <h3>导入导出</h3>
      <button type="button" class="pbt-close" @click="emit('close')">×</button>
    </header>

    <div class="pbt-sub-cards">
      <article class="pbt-sub-card">
        <h4>导入商品</h4>
        <Upload.Dragger
          :show-upload-list="false"
          accept=".xlsx"
          :before-upload="beforeUpload"
        >
          <p class="pbt-upload-icon">XLSX</p>
          <p class="pbt-upload-title">点击或拖拽 Excel 文件到此处上传</p>
          <p class="pbt-upload-tip">仅支持 .xlsx，建议不超过 10MB</p>
        </Upload.Dragger>
        <div class="pbt-upload-file" v-if="props.selectedFileName">
          已选择：{{ props.selectedFileName }}
        </div>
        <Space class="pbt-upload-actions">
          <Button :loading="props.submitting" @click="emit('downloadTemplate')">
            下载导入模板
          </Button>
          <Button
            type="primary"
            :loading="props.submitting"
            @click="emit('submitImport')"
          >
            开始导入
          </Button>
        </Space>
      </article>

      <article class="pbt-sub-card">
        <h4>导出商品</h4>
        <div class="pbt-step">
          <div class="pbt-pills">
            <button
              type="button"
              class="pbt-pill"
              :class="{ active: props.exportScopeType === 'all' }"
              @click="emit('update:exportScopeType', 'all')"
            >
              全部
            </button>
            <button
              type="button"
              class="pbt-pill"
              :class="{ active: props.exportScopeType === 'category' }"
              @click="emit('update:exportScopeType', 'category')"
            >
              按分类
            </button>
          </div>

          <Select
            v-if="props.exportScopeType === 'category'"
            mode="multiple"
            class="pbt-select-wide"
            :value="props.exportCategoryIds"
            :options="props.categoryOptions"
            placeholder="选择导出分类"
            @update:value="setExportCategoryIds"
          />
        </div>

        <Button
          type="primary"
          :loading="props.submitting"
          @click="emit('submitExport')"
        >
          导出 Excel
        </Button>
      </article>
    </div>

    <footer class="pbt-actions">
      <Button @click="emit('close')">关闭</Button>
    </footer>
  </section>
</template>
