<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <el-card shadow="never">
        <el-button type="primary" icon="Upload" v-hasPermi="['bfs:manualvoucher:import']" @click="handleImport">手工凭证上传</el-button>

        <el-dialog v-model="upload.open" :title="upload.title" width="400px" append-to-body>
          <el-upload
            ref="uploadRef"
            :limit="1"
            accept=".xlsx, .xls"
            :headers="upload.headers"
            :action="upload.url"
            :disabled="upload.isUploading"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :auto-upload="false"
            drag
          >
            <el-icon class="el-icon--upload">
              <i-ep-upload-filled />
            </el-icon>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <template #tip>
              <div class="text-center el-upload__tip">
                <span>仅允许导入xls、xlsx格式文件。</span>
                <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate"
                  >下载模板</el-link
                >
              </div>
            </template>
          </el-upload>
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="submitFileForm">确 定</el-button>
              <el-button @click="upload.open = false">取 消</el-button>
            </div>
          </template>
        </el-dialog>
      </el-card>
    </transition>
  </div>
</template>
<script setup lang="ts">
import {globalHeaders, globalUploadHeaders} from '@/utils/request';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const uploadRef = ref<ElUploadInstance>();
/*** 用户导入参数 */
const upload = reactive<ImportOption>({
  // 是否显示弹出层（用户导入）
  open: false,
  // 弹出层标题（用户导入）
  title: '',
  // 是否禁用上传
  isUploading: false,
  // 是否更新已经存在的用户数据
  updateSupport: 0,
  // 设置上传的请求头部
  headers: globalUploadHeaders(),
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_API + '/bfs/manualVoucher/importData'
});

/** 导入按钮操作 */
const handleImport = () => {
  upload.title = '导入';
  upload.open = true;
};

/** 下载模板操作 */
const importTemplate = () => {
  proxy?.download('bfs/manualVoucher/importTemplate', {}, `manualVoucher_${new Date().getTime()}.xlsx`);
};

</script>

<style scoped lang="scss"></style>
