
<template>
  <a-drawer
    :visible="eScorevisible"
    class="drawerStyle ExportScore"
    placement="right"
    width="700px"
    @after-visible-change="afterVisibleChange"
  >
    <div class="drawerMain">
      <div class="header">
        <div class="headerTitle">导入成绩</div>
        <img
          style="width: 29px; height: 29px; cursor: pointer"
          src="../../assets/images/basicinfo/close.png"
          @click="closeDrawer"
        />
      </div>
      <div class="main">
        <div class="minatitl">
          <div class="up1">请下载</div>
          <div class="up2" @click="downTemplate" style="cursor: pointer">
            模板
          </div>
          <div class="up1">，按要求填写数据并导入</div>
        </div>
        <div class="upload">
          <div class="text">上传：</div>
          <div class="right">
            <div style="height: 176px; margin-bottom: 20px">
              <a-upload-dragger
                v-model:fileList="fileList"
                :action="importHomeWork"
                name="uploadFile"
                :multiple="true"
                @change="handleChange"
                :showUploadList="false"
                :data="{
                  type: type,
                  targetId: Number(id),
                }"
              >
                <p class="ant-upload-drag-icon">
                  <inbox-outlined></inbox-outlined>
                </p>
                <p class="ant-upload-text">点击或将文件拖拽到此处上传</p>
                <p class="ant-upload-hint">支持扩展名：.xls/.xlsx</p>
              </a-upload-dragger>
            </div>
            <!-- <div class="load">
              <div class="cloud"></div>
              <div class="tip">点击或将文件拖拽到此处上传</div>
              <div class="tipz">支持扩展名：.xls/.xlsx</div>
            </div> -->
            <div class="loadstate">
              <div
                class="loadborder"
                v-if="uploadpercent < 100 && uploadpercent !== -1"
              >
                <div class="content">
                  <div class="img"></div>
                  <div class="timebox">
                    <div class="timetop">
                      <div class="tit">{{ fileName }}</div>
                      <div class="stateloading">正在上传</div>
                    </div>
                    <a-progress :percent="uploadpercent" />
                    <!-- <div class="prog">
                      <div class="inprogloading"></div>
                    </div> -->
                  </div>
                  <div class="curloading">
                    <!-- <div class="cur">55%</div> -->
                    <!-- <div class="cancel" style="margin-left: 20px">暂停</div>
                    <div class="cancel" style="margin-left: 15px">取消</div> -->
                  </div>
                </div>
              </div>
              <div class="loadborder" v-if="uploadErr">
                <div class="content">
                  <div class="img"></div>
                  <div class="timebox">
                    <div class="timetop">
                      <div class="tit">{{ fileName }}</div>
                      <div class="statedefeat">上传失败</div>
                    </div>
                    <a-progress :percent="uploadpercent" />
                    <!-- <div class="prog">
                      <div class="inprogdefeat"></div>
                    </div> -->
                  </div>

                  <div class="curloading">
                    <!-- <div class="cur">55%</div> -->
                    <div
                      style="color: #387df7; margin-left: 20px; cursor: pointer"
                    >
                      下载失败数据
                    </div>
                    <!-- <div class="cancel" style="margin-left: 20px">暂停</div>
                    <div class="cancel" style="margin-left: 15px">取消</div> -->
                  </div>
                  <div
                    class="defeat"
                    style="display: flex; align-items: center"
                  >
                    <div style="color: #ff7474">
                      {{ succNum }}条数据导入成功，{{ errNum }}条数据导入失败
                    </div>
                  </div>
                </div>
              </div>
              <!--  v-if="uploadpercent === 100" -->
              <div class="loadborder" v-if="uploadpercent === 100">
                <div class="content">
                  <div class="img"></div>
                  <div class="timebox">
                    <div class="timetop">
                      <div class="tit">{{ fileName }}</div>
                      <div class="statesucce">上传成功</div>
                    </div>
                    <a-progress :percent="uploadpercent" />
                    <!-- <div class="prog">
                      <div class="inprogsucce"></div>
                    </div> -->
                  </div>
                  <div class="curloading">
                    <!-- <div class="cur">100%</div> -->
                    <div
                      class="cancel"
                      style="margin-left: 20px; cursor: pointer"
                      @click="removeUpload"
                    >
                      删除
                    </div>
                  </div>
                </div>
                <div v-if="errNum">
                  <div class="downloadErr" @click="downloadEeeorData">
                    下载失败数据
                  </div>
                </div>
              </div>
              <div
                v-if="uploadpercent === 100"
                class="defeat"
                style="
                  display: flex;
                  align-items: center;
                  width: 500px;
                  height: 40px;
                "
                :style="{
                  background: errNum
                    ? 'rgba(255, 116, 116, 0.1)'
                    : 'rgba(53, 174, 105, 0.1)',
                  border: errNum ? '1px solid #ff7474' : '1px solid #35AE69',
                }"
              >
                <img
                  style="width: 14px; height: 14px; margin-left: 16px"
                  :src="
                    errNum
                      ? require('../../assets/images/err.png')
                      : require('../../assets/images/success.png')
                  "
                />
                <div
                  style="margin-left: 8px"
                  :style="{ color: errNum ? '#ff7474' : 'rgba(0,0,0,0.65)' }"
                >
                  {{ succNum }}条数据导入成功，{{ errNum }}条数据导入失败
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="btnn">
        <button class="btn1" @click="closeDrawer">取消</button>
        <button class="btn2" @click="closeDrawer">确定</button>
      </div>
    </div>
    <!--  加载动画 -->
    <div class="aeLoading" :style="{ display: addLoading ? 'flex' : 'none' }">
      <a-spin :spinning="addLoading" tip="" />
    </div>
  </a-drawer>
</template>
<script>
import {reactive, toRefs} from "vue";
import { message } from "ant-design-vue";
import * as api from "../../api/index1";
import { BATCH_IMPORT_SCORE } from "@/api/config";
export default {
  name: "EScore",
  props: {
    eScorevisible: {
      type: Boolean,
      default: false,
    },
    //type=3:面授课
    type: {
      type: String,
      default: null,
    },
    id: {
      type: Number,
      default: null,
    },
    pid: {
      type: Number,
      default: null,
    },
    searchTaskList: {
      type: Function,
      default: null,
    },
  },
  setup(props, ctx) {
    const state = reactive({
      fileType: ["xls", "xlsx"],
      importHomeWork:
        process.env.VUE_APP_BASE_API + "/admin/student/importHomeWork",
      uploadpercent: -1,
      uploadErr: false, //上传失败
      addLoading: false,
      fileList: [],
      succNum: 0, //成功数据数
      errNum: 0, //失败数据数
      downloadErrUrl: null, //下载失败数据
      fileName: "",
    });
    const closeDrawer = () => {
      ctx.emit("update:eScorevisible", false);
      state.fileList = [];
      state.uploadpercent = -1;
      state.uploadErr = false; //上传失败
    };

    const afterVisibleChange = (bool) => {
      console.log("state", bool);
    };

    //上传文件
    const handleChange = (info) => {
      if (info) {
        var FileExt = info.file.name.replace(/.+\./, "");
        if (["xls", "xlsx"].indexOf(FileExt.toLowerCase()) === -1) {
          state.fileList = [];
          state.uploadpercent = -1;
          message.destroy();
          message.error("请上传正确的文件格式");
          return;
        }
      }

      state.addLoading = true;
      state.uploadpercent = parseInt(info.file.percent);
      console.log("我是文件上传的进度---------->", info.file.percent);
      const status = info.file.status;
      if (status !== "uploading") {
        // console.log(info.file, info.fileList);
      }
      if (status === "done") {
        state.fileName = info.file.name;
        let i = 0;
        let timer = setInterval(() => {
          let uid = info.file.response.data;
          api
            .getImportStatus(uid)
            .then((res) => {
              console.log("查询导入状态", res);
              if (res.data.code === 200) {
                if (res.data.data.status !== "START") {
                  i++;
                  if (i === 1) {
                    message.destroy();
                    message.success(`${info.file.name}上传成功`);
                    state.addLoading = false;
                    props.searchTaskList && props.searchTaskList();
                  }
                  state.succNum = res.data.data.successNum;
                  state.errNum = res.data.data.failedNum;
                  state.downloadErrUrl = res.data.data.url;
                  console.log("props.getStudent", props.getStudent);
                  clearInterval(timer);
                }
              }
            })
            .catch((err) => {
              state.addLoading = false;
              clearInterval(timer);
              console.log("查询导入状态失败", err);
            });
        }, 500);
      } else if (status === "error") {
        state.uploadErr = true;
        message.error(`${info.file.name}上传失败`);
      }
    };
    const beforeUpload = (file) => {
      return new Promise((resolve, reject) => {
        // const isJpgOrPng =
        //   file.name.indexOf(".xlsx") !== "-1" ||
        //   file.name.indexOf(".xls") !== "-1";

        // if (!isJpgOrPng) {
        //   message.destroy();
        //   message.error("仅支持xls、xlsx格式!");
        //   return reject(false);
        // }
        const formData = new FormData();
        formData.append("uploadFile", file);
        // let progress = { percent: 1 };

        // const intervalId = setInterval(() => {
        //   if (progress.percent < 100) {
        //     progress.percent++;
        //     file.onProgress(progress);
        //   } else {
        //     clearInterval(intervalId);
        //   }
        // }, 100);
        api.batchImportScore(formData).then((res) => {
          if (res.data.code === 200) {
            console.log("上传成功", res);
            return reject(true);
          }
        });
        return reject(false);
      });
    };
    const handleUpload = (e) => {
      console.log("handleUpload", e);
    };

    //删除
    const removeUpload = () => {
      state.fileList = [];
      state.uploadpercent = -1;
      state.uploadErr = false; //上传失败
      state.succNum = 0;
      state.errNum = 0;
      state.downloadErrUrl = null;
      state.addLoading = false;
    };
    // 下载失败数据
    const downloadEeeorData = () => {
      if (state.downloadErrUrl !== "") {
        window.open(process.env.VUE_APP_FILE_PATH + state.downloadErrUrl);
      }
    };
    function downTemplate() {
      window.open(`${process.env.VUE_APP_BASE_API}/admin/student/exportHomeWorkTemplate?taskId=${props.id || ''}&type=${props.type || ''}&pid=${props.pid || ''}&thirdType=3`);
    }

    return {
      ...toRefs(state),
      afterVisibleChange,
      closeDrawer,
      handleChange,
      downTemplate,
      BATCH_IMPORT_SCORE,
      beforeUpload,
      handleUpload,
      removeUpload,
      downloadEeeorData,
    };
  },
};
</script>
  
<style lang="scss">
.ExportScore {
  .drawerMain {
    min-width: 600px;
    margin: 0px 32px 0px 32px;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    .header {
      height: 73px;
      border-bottom: 1px solid #e8e8e8;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // background-color: red;
      margin-bottom: 20px;
      flex-shrink: 0;
      .headerTitle {
        font-size: 18px;
        font-weight: 600;
        color: #333333;
        line-height: 25px;
        // margin-left: 24px;
      }
    }
    .main {
      overflow-y: auto;
      .minatitl {
        display: flex;
        .up1 {
          font-size: 16px;
          font-weight: 400;
          color: #333333;
        }
        .up2 {
          font-size: 16px;
          font-weight: 400;
          color: #4ea6ff;
          margin-left: 4px;
        }
      }
      .upload {
        margin-top: 32px;
        display: flex;
        .text {
          font-size: 14px;
          font-weight: 400;
          color: #333333;
        }
        .right {
          margin-left: 6px;
          .load {
            width: 500px;
            height: 176px;
            background: #f5f9fd;
            border-radius: 4px;
            // opacity: 0.3;
            border: 1px dashed #caddfd;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 20px;
            .cloud {
              margin-top: 52px;
              width: 28px;
              height: 28px;
              background-image: url(../../assets/images/basicinfo/cloud.png);
            }
            .tip {
              font-size: 14px;
              font-weight: 400;
              color: #4ea6ff;
              margin-top: 15px;
              cursor: pointer;
            }
            .tipz {
              font-size: 14px;
              font-weight: 400;
              color: #999999;
              margin-top: 10px;
            }
          }
          .loadstate {
            width: 500px;
            margin-bottom: 100px;

            .loadborder {
              width: 500px;
              height: 173px;
              border-radius: 4px;
              border: 1px dashed #eaeaea;
              margin-bottom: 30px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              position: relative;
              .content {
                display: flex;
                margin-left: 20px;
                position: relative;
                .defeat {
                  width: 400px;
                  position: absolute;
                  left: 46px;
                  top: 38px;
                  font-size: 14px;
                  font-weight: 500;
                  justify-content: space-between;
                }
                .img {
                  width: 30px;
                  height: 34px;
                  background-image: url(../../assets/images/basicinfo/exl.png);
                }
                .timebox {
                  margin-left: 15px;
                  margin-top: -5px;
                  .timetop {
                    display: flex;
                    width: 262px;
                    justify-content: space-between;
                    // margin-bottom: 8px;
                    .tit {
                      font-size: 14px;
                      font-weight: 400;
                      color: #333333;
                    }
                    .stateloading {
                      font-size: 14px;
                      font-weight: 400;
                      color: #4ea6ff;
                    }
                    .statedefeat {
                      font-size: 14px;
                      font-weight: 400;
                      color: #ff7474;
                    }
                    .statesucce {
                      font-size: 14px;
                      font-weight: 400;
                      color: #35ae69;
                    }
                  }
                  .prog {
                    width: 262px;
                    height: 5px;
                    background: #eaf1fe;
                    border-radius: 4px;
                    .inprogloading {
                      width: 55%;
                      height: 5px;
                      border-radius: 4px;

                      background: #4ea6ff;
                    }
                    //下载失败条
                    .inprogdefeat {
                      width: 55%;
                      height: 5px;
                      border-radius: 4px;

                      background: #ff7474;
                    }
                    //下载成功条
                    .inprogsucce {
                      width: 100%;
                      height: 5px;
                      border-radius: 4px;

                      background: #57c887;
                    }
                  }
                }
                .curloading {
                  margin-left: 15px;
                  margin-top: 15px;
                  display: flex;
                  .cur {
                    font-size: 14px;
                    font-weight: 400;
                    color: #333333;
                  }
                  .cancel {
                    font-size: 14px;
                    font-weight: 400;
                    color: #387df7;
                  }
                }
              }
              .downloadErr {
                width: 120px;
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 2px;
                border: 1px solid #387df7;
                font-size: 14px;
                font-weight: 400;
                color: #387df7;
                line-height: 20px;
                cursor: pointer;
                margin-left: 66px;
                margin-top: 16px;
                position: absolute;
                bottom: 28;
              }
            }
          }
        }
      }
    }
    .btnn {
      height: 72px;
      width: 100%;
      position: absolute;
      background-color: #fff;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
      .btn1 {
        width: 100px;
        height: 40px;
        border: 1px solid #4ea6ff;
        border-radius: 8px;
        color: #4ea6ff;
        background-color: #fff;
        cursor: pointer;
      }
      .btn2 {
        cursor: pointer;
        width: 100px;
        height: 40px;
        background: #4ea6ff;
        border-radius: 8px;
        border: 0;
        margin-left: 15px;
        color: #fff;
      }
    }
  }
}
</style>
  