<template>
  <div class="exportBox">
    <el-dialog v-model="props.show" title="导入文件" width="400px" :show-close="true" :center="true" :before-close="handleClose">
      <div class="uplodBox">
        <el-upload action="#" drag :on-success="handleSuccess" :on-change="handleChange" :show-file-list="true"
          :file-list="fileDate" accept=".xls,.xlsx" :auto-upload="false">
          <el-icon class="el-icon-upload" size="100"><upload-filled /></el-icon>
          <div class="el-upload-text">
            拖动或者点击上传或者<span @click.stop="downloadModel" class="model">下载模板</span>
          </div>
          <div>仅支持扩展名：.xls , xlsx</div>
        </el-upload>
      </div>
      <div class="check">
        <el-checkbox true-label="true" false-label="false" v-model="isSelect">是否替换已存在的数据</el-checkbox>
      </div>
      <div class="foot">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="onComfirm">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import request from "@/utils/request";
import { ElMessage } from "element-plus";
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
import { useStore } from "vuex";
import { ref, defineProps, defineEmits, watch } from "vue";
const store = useStore();
const props = defineProps({
  show: { type: Boolean, default: false },
  lx: { type: String, default: 'policeF' }
});
const headers = ref({
  Authorization: "Bearer " + store.getters.token
});
const isSelect = ref(false);
const emits = defineEmits(["closeImport", "handleImport"]);
const fileDate = ref([]);
const filesList = ref({});
const baseUrl = ref('')//上传地址
const modelUrl = ref('')//下载模板地址
watch(() => props.lx, (val) => {
  let url = ''
  let moyRL = ''
  switch (val) {
    case 'policeF':
      baseUrl.value = '/mosty-api/mosty-jcgl/tbJcglXfll/importData'
      modelUrl.value = '/mosty-api/mosty-jcgl/tbJcglXfll/importTemplate'
      break;
    case 'car':
      baseUrl.value = '/mosty-api/mosty-jcgl/tpJcglXfcl/importData'
      modelUrl.value = '/mosty-api/mosty-jcgl/tpJcglXfcl/importTemplate'
      break;
    case 'jyqx':
      baseUrl.value = '/mosty-api/mosty-jcgl/tpJcglJyqx/importData'
      modelUrl.value = '/mosty-api/mosty-jcgl/tpJcglJyqx/importTemplate'
      break;
    case 'znzb':
      baseUrl.value = '/mosty-api/mosty-jcgl/tpjcglZnzb/importData'
      modelUrl.value = '/mosty-api/mosty-jcgl/tpjcglZnzb/importTemplate'
      break;
    case 'rcrwb':
      baseUrl.value = '/mosty-api/mosty-yjzl/tbZdxlFgxlrw/importListByMb'
      // modelUrl.value = '/mosty-api/mosty-jcgl/tpjcglZnzb/importTemplate'
      break;
    case 'zdyrcrwb':
      baseUrl.value = '/mosty-api/mosty-yjzl/tbZdxlFgxlrw/importListByMbZdy'
      // modelUrl.value = '/mosty-api/mosty-jcgl/tpjcglZnzb/importTemplate'
      break;
    default:
      break;
  }

}, {
  immediate: true
})

// 关闭
function handleClose() {
  fileDate.value = [];
  filesList.value = {};
  emits("closeImport");
}

// 覆盖前一个文件
function handleChange(file, fileList) {
  const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
  let whiteList = ["xls", "xlsx"];
  if (!whiteList.includes(fileSuffix)) {
    fileList.splice(0, 1);
    filesList.value = {};
    ElMessage.warning("上传只能是.xls、.xlsx 格式,请重新上传");
    return false;
  } else {
    if (fileList.length > 1) {
      fileList.splice(0, 1);
    }
    filesList.value = file;
  }
}
// 上传成功
function handleSuccess(row) { }
// 下载模板
function downloadModel() {
  window.open(modelUrl.value, "_self");
}

const upload = (data) => {
  return request({
    url: baseUrl.value,
    method: "POST",
    headers: { "Content-type": "multipart/form-data" },
    data: data,
  })
}
// 确定上传
function onComfirm() {
  if (filesList.value.length <= 0) {
    ElMessage.warning("请上传文件");
  } else {
    let file = filesList.value.raw;
    let formData = new FormData();
    formData.append("file", file);
    formData.append("updateSupport", isSelect.value);
    upload(formData)
      .then((res) => {
        if (res.status == 200 || res) {
          if (!res?.data) {
            if (!res) ElMessage({ type: 'warning', message: message, dangerouslyUseHTMLString: true });
            if (res) ElMessage({ type: 'success', message: '导入成功', dangerouslyUseHTMLString: true });

            emits("handleImport");
            handleClose();
            return
          }
          let { data, message, code } = res?.data;
          if (code == -1) ElMessage({ type: 'warning', message: message, dangerouslyUseHTMLString: true });
          if (code == 10000) ElMessage({ type: 'success', message: data, dangerouslyUseHTMLString: true });
          emits("handleImport");
          handleClose();
        } else {
          ElMessage.warning("文件上传失败");
        }
      });
  }
}
</script>

<style lang="scss" scoped>
.exportBox {
  .uplodBox {
    width: 100%;

    .el-icon {
      font-size: 64px;
      color: #505050;
    }

    .el-icon-upload {
      top: 33px;
    }

    ::v-deep .el-upload-dragger {
      line-height: 50px;
    }

    .el-upload-text {
      color: #505050;

      >.model {
        color: #409eff;
      }
    }
  }

  .foot {
    text-align: center;
    margin: 10px 0;
  }

  .check {
    height: 20px;
  }
}
</style>
<style>
.el-upload-list__item-name {
  color: #fff;
}
</style>
