<!-- 分销商用户导入弹窗 -->
<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">
          <cloud-upload-outlined />
        </p>
        <p class="ant-upload-hint">将文件拖到此处，或点击上传</p>
      </a-upload-dragger>
    </a-spin>
    <div class="ele-text-center">
      <span>只能上传xls、xlsx文件，导入模板和导出模板格式一致</span>
    </div>
    <div class="import-tips" style="margin-top: 16px;">
      <a-alert
        message="导入说明"
        type="info"
        show-icon
      >
        <template #description>
          <div>
            <p>1. 请按照导出的Excel格式准备数据</p>
            <p>2. 必填字段：用户ID、姓名、手机号</p>
            <p>3. 佣金字段请填写数字，不要包含货币符号</p>
            <p>4. 状态字段：正常 或 已删除</p>
            <p>5. 推荐人ID必须是已存在的用户ID</p>
          </div>
        </template>
      </a-alert>
    </div>
  </ele-modal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { message } from 'ant-design-vue/es';
  import { CloudUploadOutlined } from '@ant-design/icons-vue';
  import {importShopDealerUsers} from "@/api/shop/shopDealerUser";

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

  defineProps<{
    // 是否打开弹窗
    visible: boolean;
  }>();

  // 导入请求状态
  const loading = ref(false);

  /* 上传 */
  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;
    importShopDealerUsers(file)
      .then((msg) => {
        loading.value = false;
        message.success(msg);
        updateVisible(false);
        emit('done');
      })
      .catch((e) => {
        loading.value = false;
        message.error(e.message);
      });
    return false;
  };

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

<style lang="less" scoped>
.import-tips {
  :deep(.ant-alert-description) {
    p {
      margin: 4px 0;
      font-size: 13px;
    }
  }
}
</style>
