<style scoped>

:deep(.el-upload .el-upload--text) {
  width: 100% !important;
}
</style>
<template>
    <span style="margin: 0 10px;">
        <el-button plain @click="state.showUpload=true" type="info" size="default" :loading="state.showUpload">
           <SvgIcon name="ele-BottomRight"/>
            {{ state.labelTitle }}
          </el-button>

        <el-dialog
            draggable
            destroy-on-close
            ref="importDialog"
            v-model="state.showUpload"
            width="475"
            :close-on-click-modal="false"
            align-center
            title="导入文件">
                <el-upload
                    type="drag"
                    :show-upload-list="false"
                    :before-upload="beforeUpload"
                    :on-success="handleUploadSuccess"
                    :max-size="20480"
                    :on-format-error="handleUploadFormatError"
                    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                    :on-exceeded-size="handleUploadMaxSize"
                    :action="state.uploadUrl">
                  <el-card shadow="always" style="text-align: center;margin-left: 25px">
                    <div class="flex flex-center flex-align-items-center w100">
                       <SvgIcon size="36" name="ele-Upload" color="'var(--el-color-primary-light-5)'"/>
                        <p style="color:#3399ff">
                        点击或拖拽文件到此处上传,仅支持XLS、XLSX格式文件
                        </p>
                      </div>
                  </el-card>

                  <template #tip v-if="tips">
                    <el-alert :title="tips" type="success"></el-alert>
                  </template>
                </el-upload>

          <template #footer>
            <el-row justify="space-around">
              <el-col :span="12" style="text-align: left">
                <el-link type="primary" v-if="templateUrl" style="padding-top: 10px;" :href="u.fmt.fmtServerUrl(templateUrl)">下载模板</el-link>
              </el-col>
              <el-col :span="12">
                   <el-button type="primary" @click="confirm" size="default">确认</el-button>
              </el-col>
            </el-row>
			</template>
        </el-dialog>
    </span>
</template>
<script lang="ts" setup name="ExtImport">

import {ref, nextTick,onMounted} from 'vue';
import u from "/@/utils/u";
import {Msg} from "/@/utils/message";

const emit = defineEmits(['update:value', 'finish']);

const props = defineProps({
  importUrl: {
    type: String
  },
  label: {
    type: String
  },
  tips: {
    type: String
  },
  templateUrl: {
    type: String
  },
})

const state = ref({
  uuid: null,
  labelTitle: props.label || "导入",
  showUpload: false,
  uploadUrl:''
})
onMounted(()=>{
  state.value.uploadUrl = u.fmt.fmtServerUrl(props.importUrl)
})

const beforeUpload = () => {
  Msg.showLoading("导入中...");
}
const handleUploadMaxSize = () => {
  Msg.message("文件超出20M大小限制", 'error')
  Msg.hideLoading();
}
const handleUploadFormatError = () => {
  Msg.message('请选择Excel文件导入上传', 'error');
  Msg.hideLoading();
}

const handleUploadSuccess = (obj: any) => {
  Msg.hideLoading();
  if (!obj || obj.code === 200) {
    Msg.message("导入成功", 'success');
  }
}

const confirm = () => {
  nextTick(() => {
    state.value.showUpload = false;
    emit("finish");
  })
}

</script>
