<template>
  <ele-modal
    :width="520"
    :footer="null"
    title="商品详情批量导入"
    :visible="visible"
    @update:visible="updateVisible"
  >
    <a-spin :spinning="loading">
      <a-upload-dragger
        accept=".xls,.xlsx"
        :show-upload-list="false"
        :customRequest="doUpload"
        style="padding: 24px 0; margin-bottom: 16px"
      >
        <p class="ant-upload-drag-icon">
          <CloudUploadOutlined />
        </p>
        <p class="ant-upload-hint">将文件拖到此处，或点击上传</p>
      </a-upload-dragger>
    </a-spin>
    <div class="ele-text-center">
      <span>只能上传 xls、xlsx 文件，</span>
      <a :href="templateUrl" download="商品详情导入模板.xlsx">下载导入模板</a>
    </div>

    <!-- 使用说明 -->
    <a-alert type="info" show-icon :style="{ marginTop: '16px' }">
      <template #message>
        <div class="import-tips">
          <div class="import-tips-title">使用说明：</div>
          <ul class="import-tips-list">
            <li>Excel 中每行对应一个商品的详情内容</li>
            <li>图片按<strong>文件夹</strong>组织，<strong>文件夹名称为商品编号</strong></li>
            <li>文件夹内的图片按<strong>数字序号</strong>命名排序（如 1.jpg、2.png、3.jpg …）</li>
            <li>图片序号对应 Excel 中的图片展示顺序</li>
          </ul>
        </div>
      </template>
    </a-alert>
  </ele-modal>
</template>

<style lang="less" scoped>
  .import-tips {
    font-size: 13px;
    line-height: 1.8;
    color: #555;
  }
  .import-tips-title {
    font-weight: 600;
    margin-bottom: 4px;
    color: #333;
  }
  .import-tips-list {
    margin: 0;
    padding-left: 20px;
    li {
      margin-bottom: 2px;
    }
  }
</style>

<script lang="ts" setup>
  import { ref, computed } from 'vue';
  import { message } from 'ant-design-vue/es';
  import { CloudUploadOutlined } from '@ant-design/icons-vue';
  import { importShopGoodsDetails } from '@/api/shop/shopGoods';
  import { MODULES_API_URL } from '@/config/setting';

  defineProps<{
    visible: boolean;
  }>();

  const emit = defineEmits<{
    (e: 'done'): void;
    (e: 'update:visible', visible: boolean): void;
  }>();

  const loading = ref(false);

  const templateUrl = computed(() => {
    return MODULES_API_URL + '/shop/shop-goods/import/details/template';
  });

  const doUpload = ({ file }) => {
    if (
      ![
        'application/vnd.ms-excel',
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      ].includes(file.type)
    ) {
      message.error('只能选择 excel 文件');
      return false;
    }
    if (file.size / 1024 / 1024 > 10) {
      message.error('大小不能超过 10MB');
      return false;
    }
    loading.value = true;
    importShopGoodsDetails(file)
      .then((msg) => {
        loading.value = false;
        message.success(msg);
        updateVisible(false);
        emit('done');
      })
      .catch((e) => {
        loading.value = false;
        message.error(e.message);
      });
    return false;
  };

  const updateVisible = (value: boolean) => {
    emit('update:visible', value);
  };
</script>
