<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">
          本功能帮助无法上网的授课端软件，将本地数据同步到云平台，需要先在数据包放到U盘。
        </p>
        <el-upload
          class="upload-demo"
          ref="upload"
          :action="url"
          :multiple="false"
          :data="{ id: id }"
          :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盘。待导出数据包括4套答题卡。
        </p>
        <div class="btn-box btn-box2">
          <i class="fa fa-cloud-download" @click="getAppDownloadUrl"></i>
          <el-button type="primary" round>发卡软件下载</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: "xxx",
      id: "",
    };
  },
  methods: {
    async getAppDownloadUrl() {
      const { data, status, info } = await this.$request.getAppDownloadUrl();
      if (status == 0) {
        // this.tableData = [...data.list] || [];
        const a = document.createElement("a");
        a.href = data.downloadUrl;
        document.body.appendChild(a);
        a.click();
        a.remove();
      } else {
        this.$message.error(info);
      }
    },
    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.code == 0 && res.success) {
        this.$message.success("上传成功");
        this.$emit("upSuccess");
      } else {
        this.$message.error(res.message);
      }
    },
    upError(res) {
      if (res && res.status == 0) {
        this.$message.success("上传成功");
        this.$emit("upSuccess");
      } 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;
    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{
    display: flex;
    justify-content: center;
  }
  :deep(.el-upload) {
    margin:0 auto;
  }
  .btn-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 40px;
    .fa {
      font-size: 80px;
      color: #aeaeae;
      padding-bottom: 10px;
      cursor: pointer;
    }
  }
  .btn-box {
    width: 100%;
  }
}
</style>