<template>
  <div>
    <back-box>
      <template slot="title">
        <span>数据同步</span>
      </template>
    </back-box>
    <div class="page-content">
      <div class="down-item">
        <p class="h-title">从U盘上传</p>
        <p class="txt">
          本功能帮助无法上网的授课端软件，将本地数据同步到云平台。
        </p>
        <el-upload
          class="upload-demo"
          ref="upload"
          :action="url"
          :multiple="false"
          :with-credentials="true"
          :limit="1"
          :on-change="change"
          :on-success="upSuccess"
          :on-error="upError"
        >
          <div class="btn-box">
            <i class="fa fa-cloud-upload"></i>
            <el-button type="primary" round>选择文件</el-button>
          </div>
        </el-upload>
      </div>

      <div class="down-item">
        <p class="h-title">数据导出至U盘</p>
        <p class="txt">本功能将云平台的数据导出到U盘。</p>
        <div class="btn-box btn-box2" v-loading="downLoading">
          <i class="fa fa-cloud-download" @click="downloadFile"></i>
          <el-button type="primary" round @click="downloadFile"
            >文件下载</el-button
          >
        </div>
      </div>
    </div>
    <el-dialog :append-to-body="true" :close-on-click-modal="false" title="" :visible.sync="dialogVisible" width="300" center>
      <el-result icon="success" title="上传成功"> </el-result>
      <el-descriptions title="" :column="1">
        <el-descriptions-item label="导入答题卡数量">{{tipData.paperNum}}</el-descriptions-item>
        <el-descriptions-item label="导入随堂问报表数量">{{tipData.periodNum}}</el-descriptions-item>
        <el-descriptions-item label="导入即时测报表数量">{{tipData.examNum}}</el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { formatDate } from "@/utils";
export default {
  data() {
    return {
      downLoading: false,
      url: "/api_html/personal/importData",
      file: {},
      dialogVisible: false,
      tipData: {
        paperNum: 0,
        periodNum: 0,
        examNum: 0,
      },
    };
  },
  methods: {
    async downloadFile() {
      if (this.downLoading) return;
      this.downLoading = true;
      const data = await this.$request.pExportData();
      this.downLoading = false;
      if (data) {
        let blob = new Blob([data], { type: "application/octet-stream" });
        const url = URL.createObjectURL(blob);
        const link = document.createElement("a");
        document.body.appendChild(link);
        link.download =
          this.$store.getters.info.name +
          formatDate(new Date(), "yyyy_MM_dd_hh_mm_ss") +
          "文件.json";
        link.href = url;
        link.click();
        document.body.removeChild(link);
        URL.revokeObjectURL(url);
      } else {
        this.$message.error("下载失败，请重试");
      }
    },
    async submitUpload() {
      this.$refs.upload.submit();

      // const formData = new FormData()
      // formData.append('id',this.componentId)
      // formData.append('file',new File(this.file.raw))
      // let {status,info} = await uploadExcel(formData);
      // if(status===0){
      //   this.$message.success(info);
      //   this.$emit("upSuccess")
      // } else {
      //   this.$message.error(info);
      // }
    },
    upSuccess(res) {
      if (res && res.status == 0) {
        this.tipData = res.data
        this.dialogVisible = true
      } else {
        this.$message.error(res.info);
      }
    },
    upError(res) {
      debugger;
      if (res && res.status == 0) {
        this.$message.error("上传失败");
      } else {
        this.$message.error(res.message);
      }
    },
    change(file) {
      this.file = file;
    },
  },
};
</script>

<style lang="scss" scoped>
.page-content {
  padding: 50px;
  display: flex;
  justify-content: center;
  .down-item {
    width: 400px;
    height:330px;
    border-radius: 20px;
    margin: 20px;
    background: #f8f8f8;
    box-shadow: 2px 2px 5px #ccc;
    .h-title {
      font-size: 16px;
      color: #667ffd;
      padding: 16px 0 16px 12px;
    }
    .txt {
      height: 80px;
      padding: 0 20px;
      font-size: 16px;
      color: #7f7f7f;
      line-height: 24px;
      text-align: center;
    }
  }
  .upload-demo {
    padding:0 20px 20px;
    :deep(.el-upload--text){
      display: block;
    }
  }
  :deep(.el-upload) {
    margin: 0 auto;
  }
  .btn-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 10px;
    .fa {
      font-size: 80px;
      color: #aeaeae;
      padding-bottom: 10px;
      cursor: pointer;
    }
  }
  .btn-box {
    width: 100%;
  }
}
</style>