下载文件

<template>
  <div>
    <main v-if="$store.state.asideType==4">
      <!-- 传输列表 -->
      <el-row>
        <el-col :span="4">
          <img
            @click="overDownload"
            class="Img"
            src="../../assets/icon_beginr_16.png"
            alt
            v-if="$store.state.isStartDown"
          />
          <img
            @click="startDownload(1)"
            class="Img"
            src="../../assets/icon_suspend_16.png"
            alt
            v-else
          />
          <el-button class="ic" type="text">
            <span
              @click="overDownload"
              ref="isxz"
              style="padding:0"
              v-if="$store.state.isStartDown"
            >取消下载</span>
            <span @click="startDownload(1)" ref="isxz" style="padding:0" v-else>开始下载</span>
          </el-button>
        </el-col>
        <el-col :span="4">
          <i class="el-icon-delete"></i>
          <p class="ic" @click="allO">
            <el-button :plain="true" type="text">清空列表</el-button>
          </p>
        </el-col>
        <el-col :span="7" :offset="9">
          <span class="total">共{{downloadList.length}}个文件</span>
        </el-col>
      </el-row>
      <el-row class="check" v-show="downloadList.length">
        <el-col :span="6">
          <p class="padLeft">文件名</p>
        </el-col>
        <el-col :span="4" :offset="2">
          <p class="margLeft">大小</p>
        </el-col>
        <el-col :span="4" :offset="2">
          <p class="margLeft">状态</p>
        </el-col>
        <el-col :span="6">
          <p class="margLeft">操作</p>
        </el-col>
      </el-row>
      <div class="bottom" v-show="downloadList.length">
        <el-row class="nn" v-for="(data,index) in downloadList" :key="index">
          <el-col :span="6">
            <!-- <img class="i" src="../../assets/icon_video_20.png" alt /> -->
            <img
              class="i"
              v-if="data.fileName.split('.')[data.fileName.split('.').length-1]=='wav'||data.fileName.split('.')[data.fileName.split('.').length-1]=='aac'"
              src="../../assets/icon_record_20.png"
              alt
            />
            <img
              class="i"
              v-else-if="data.fileName.split('.')[data.fileName.split('.').length-1]=='jpg'"
              src="../../assets/icon_img_20.png"
              alt
            />
            <img
              class="i"
              v-else-if="data.fileName.split('.')[data.fileName.split('.').length-1]=='txt'||data.fileName.split('.')[data.fileName.split('.').length-1]=='ocr'"
              src="../../assets/icon_ocr_20.png"
              alt
            />
            <img class="i" v-else src="../../assets/icon_video_20.png" alt />
            <span>{{data.fileName|actorFilter}}</span>
          </el-col>
          <el-col :span="4" :offset="2">
            <span>{{(!index&&$store.state.isStartDown)?loaded:'0KB'}} / {{data.projectSize?data.projectSize:'0KB'}}</span>
          </el-col>
          <el-col :span="4" :offset="2">
            <!-- <el-progress :percentage="11.11" :format="format"></el-progress> -->
            <el-progress
              :percentage="(data.progress&&$store.state.isStartDown)?data.progress:0"
              :format="format"
            ></el-progress>
            <p>{{($store.state.isStartDown&&downloadList[0].downloadShunxu==1&&index==0)?`已下载${downloadList[0].progress?downloadList[0].progress:0}%`:`等待下载`}}</p>
          </el-col>
          <el-col :span="6">
            <img
              @click="toTop(data,index)"
              class="img"
              src="../../assets/icon_uploading_16.png"
              alt
            />
            <img
              @click="deleteClick(data.pcId,index)"
              class="img"
              src="../../assets/icons_delete_16.png"
              alt
            />
          </el-col>
        </el-row>
      </div>
      <div class="vlog" ref="vlog">
        <div class="head">提示</div>
        <div class="mainer">
          <p>
            <i class="el-icon-warning-outline" style="font-size:30px;color:red"></i>
            传输列表仅支持添加50个文件，请缩减后下载
          </p>
          <input type="button" value="确定" @click="cancelButton" />
        </div>
      </div>
      <!-- 不要的 -->
      <div class="nocontent" v-show="!downloadList.length">
        <img src="../../assets/缺省／无记录.png" alt />
        <p>暂无下载内容</p>
        <!-- <span>暂无下载内容</span> -->
      </div>
    </main>
    <TransferReady v-if="$store.state.asideType==5"></TransferReady>
  </div>
</template>
<script>
import http from "../../util/http";
import TransferReady from "../TransferReady/TransferReady";
export default {
  name: "transferList",
  components: {
    TransferReady
  },
  props: ["downDatalist"],
  data() {
    return {
      loaded: "0KB", //下载多少了
      addDoloadNum: 0,
      progress: 0,
      downloadList: [],
      ready: [],
      dialogVisible: true
    };
  },
  methods: {
    cancelButton() {
      this.$refs.vlog.style.display = "none";
    },
    //下载
    async d(url, data, sumSize, index) {
      // data.sumSize = sumSize;
      console.log(url, data, sumSize, "看看下载");
      var linshiurl = url;
      linshiurl =
        linshiurl.substring(0, 4) + linshiurl.substring(5, linshiurl.length);
      console.log(window.preload, linshiurl);
      var defaultDownload = window.preload.path.join(
        this.$store.state.isDownloadWhere[0]
          ? this.$store.state.isDownloadWhere[0]
          : window.preload.path.join(
              window.preload.electron.remote.app.getPath("appData"),
              "lybyj",
              "downloads"
            ),
        this.downloadList[0].fileName.split(".")[0]
      );
      // console.log("改了");
      //先读取文件
      // window.preload.fs.readFile( window.preload.path.join(
      //   $store.state.isDownloadWhere,
      //   this.downloadList[0].fileName.split(".")[0],
      //   this.downloadList[0].fileName
      // ), function(error, data) {
      //   if (error) {
      //     console.log(error);
      //     return false;
      //   }
      //console.log(data); //data是读取的十六进制的数据。 也可以在参数中加入编码格式"utf8"来解决十六进制的问题;
      //   console.log(data.toString()); //读取出所有行的信息
      // });
      var that = this;
      // var timestamp = new Date().getTime();
      // var timestamp = parseInt(Math.random() * 1000) + 1;
      // var lsdata = data.fileName;
      // data.fileName =
      //   data.fileName.slice(0, data.fileName.slice.length - 6) +
      //   "(" +
      //   timestamp +
      //   ")." +
      //   lsdata.split(".")[lsdata.split(".").length - 1];
      // console.log(data.progress, data.fileName, "是否改名了", data);
      data.baocunwhere = defaultDownload;
      const dest = window.preload.path.join(defaultDownload, data.fileName);
      // 你可能需要自行确保该路径存在
      const file = window.preload.fs.createWriteStream(dest);
      window.preload.http.get(linshiurl, res => {
        let receivedBytes = 0;
        if (res.statusCode !== 200) {
          cb(response.statusCode);
          return;
        }
        // console.log(receivedBytes == this.receivedBytes,'双倍是什么原因');
        // console.log(res.headers["content-length"]);
        res.on("data", chunk => {
          // 更新下载的文件块字节大小
          receivedBytes += chunk.length;
          // this.receivedBytes += chunk.length;
          this.loaded =
            receivedBytes / 1024 / 1024 < 1
              ? (receivedBytes / 1024).toFixed(1) + "KB"
              : (receivedBytes / 1024 / 1024).toFixed(1) + "M";
          //这是下载的进度(res.headers["content-length"] - 0);
          // console.log(receivedBytes, receivedBytes, "为什么会执行两边啊");
          this.downloadList[0].progress = parseInt(
            (receivedBytes / sumSize) * 100
          );
          if (
            receivedBytes / (res.headers["content-length"] - 0) == 1 &&
            index
          ) {
            // this.receivedBytes = 0;
            var ready = localStorage.getItem("ready")
              ? JSON.parse(localStorage.getItem("ready"))
              : [];
            localStorage.setItem("ready", JSON.stringify([data, ...ready]));
            that.downloadList.shift();
            localStorage.setItem("download", JSON.stringify(that.downloadList));
            localStorage.setItem(
              "downloadUrl",
              JSON.stringify(defaultDownload)
            );
          }
        });
        res.on("end", () => {
          this.loaded = "0KB";
          console.log("finish download");
          //重新赋值第一个下载
          console.log(that.downloadList, "第一个下载完成后");
          that.downloadList = that.downloadList.map((item, index) => {
            item.downloadShunxu = index + 1;
            item.projectSize =
              typeof item.projectSize == "number"
                ? item.projectSizeceivedBytes / 1024 / 1024 < 1
                  ? (item.projectSize / 1024).toFixed(1) + "KB"
                  : (item.projectSize / 1024 / 1024).toFixed(1) + "M"
                : item.projectSize;
            return item;
          });
        });
        // 进度、超时等
        file
          .on("finish", () => {
            file.close();
          })
          .on("error", err => {
            window.location.fs.unlink(dest);
          });
        res.pipe(file);
      });
    },
    //开始下载按钮
    startDownload(n) {
      var that = this;
      console.log(
        this.$store.state.isDowning,
        this.downloadList.length,
        "点击开始按钮咯" + n + n
      );
      if (this.downloadList.length && n) {
        this.$store.commit("startDown");
      }
      if (this.downloadList.length) {
        console.log(
          this.$store.state.isDowning,
          this.downloadList.length,
          "太难了把baby"
        );
        if (this.$store.state.isDowning == 1 && this.downloadList.length) {
          console.log(
            "顶顶顶顶顶好好干顶顶顶顶顶你个非顶顶顶顶顶顶",
            this.$store.state.isDowning
          );
          http
            .request({
              method: "POST",
              url: "/CloudSpaceIyujiController/getProjectInfo",
              data: {
                id: this.downloadList[0].pcId
              }
            })
            .then(res => {
              if (res.data.code == "000000") {
                var morenurl = this.$store.state.isDownloadWhere[0]
                  ? this.$store.state.isDownloadWhere[0]
                  : window.preload.path.join(
                      window.preload.electron.remote.app.getPath("appData"),
                      "lybyj",
                      "downloads"
                    );
                console.log(res.data, that.downloadList[0]);
                console.log(that.downloadList[0], "index");
                if (that.downloadList[0].downloadType - 0 == -1) {
                  console.log(
                    "我是下载其中不是文档的那个",
                    that.downloadList[0].downloadType
                  );
                  var defaultDownload = window.preload.path.join(
                    morenurl,
                    that.downloadList[0].fileName.split(".")[0]
                  );
                  window.preload.fs.mkdir(defaultDownload, function(error) {
                    if (error) {
                      console.log(error);
                      return false;
                    }
                    console.log("创建目录成功");
                  });
                  // res.data.biz.list = res.data.biz.list.map((item, index) => {
                  res.data.biz.list.map((item, index) => {
                    if (item.extensionType == "1") {
                      console.log(item.extensionType);
                      that.d(item.accessUrl, item, item.fileSize, 1);
                      return;
                    }
                    if (item.extensionType == "4") {
                      console.log(item.extensionType);
                      that.d(item.accessUrl, item, item.fileSize, 1);
                      return;
                    }
                    if (item.extensionType == "3") {
                      console.log(item.extensionType);
                      that.d(item.accessUrl, item, item.fileSize, 1);
                      return;
                    }
                  });
                }
                if (that.downloadList[0].downloadType == undefined) {
                  console.log(
                    "我是所有下载",
                    that.downloadList[0].downloadType
                  );
                  var defaultDownload = window.preload.path.join(
                    morenurl,
                    that.downloadList[0].fileName.split(".")[0]
                  );
                  window.preload.fs.mkdir(defaultDownload, function(error) {
                    if (error) {
                      console.log(error);
                      return false;
                    }
                    console.log("创建目录成功");
                  });
                  //所有文件的总大小;
                  var sumSize = 0;
                  for (var i = 0; i < res.data.biz.list.length; i++) {
                    sumSize += res.data.biz.list[i].fileSize;
                  }
                  console.log(sumSize + "综合室多少啊");
                  var lsList = localStorage.getItem("download")
                    ? JSON.parse(localStorage.getItem("download"))
                    : [];
                  res.data.biz.list.map((item, index) => {
                    // lsList.unshift(item);--
                    that.d(
                      item.accessUrl,
                      item,
                      sumSize,
                      index == res.data.biz.list.length - 1 ? 1 : 0
                    );
                  });
                  // localStorage.setItem("download", JSON.stringify(lsList));
                  // that.d(
                  //   res.data.biz.list[0].accessUrl,
                  //   res.data.biz.list[0],
                  //   res.data.biz.list[0].fileSize,
                  //   1
                  // );
                }
                if (that.downloadList[0].downloadType - 0 == 1) {
                  console.log(
                    "我是音频下载",
                    that.downloadList[0].downloadType
                  );
                  var defaultDownload = window.preload.path.join(
                    morenurl,
                    that.downloadList[0].fileName.split(".")[0]
                  );
                  window.preload.fs.mkdir(defaultDownload, function(error) {
                    if (error) {
                      console.log(error);
                      return false;
                    }
                    console.log("创建目录成功");
                  });
                  var down = res.data.biz.list.filter((item, index) => {
                    return item.extensionType == 1;
                  });
                  that.d(down[0].accessUrl, down[0], down[0].fileSize, 1);
                }
                if (that.downloadList[0].downloadType - 0 == 2) {
                  console.log(
                    "我是文档下载",
                    that.downloadList[0].downloadType
                  );
                  var defaultDownload = window.preload.path.join(
                    morenurl,
                    that.downloadList[0].fileName.split(".")[0]
                  );
                  window.preload.fs.mkdir(defaultDownload, function(error) {
                    if (error) {
                      console.log(error);
                      return false;
                    }
                    console.log("创建目录成功");
                  });
                  var down = res.data.biz.list.filter((item, index) => {
                    return item.extensionType == 2;
                  });
                  that.d(down[0].accessUrl, down[0], down[0].fileSize, 1);
                }
                if (that.downloadList[0].downloadType - 0 == 3) {
                  var defaultDownload = window.preload.path.join(
                    morenurl,
                    that.downloadList[0].fileName.split(".")[0]
                  );
                  window.preload.fs.mkdir(defaultDownload, function(error) {
                    if (error) {
                      console.log(error);
                      return false;
                    }
                    console.log("创建目录成功");
                  });
                  console.log(
                    "我是图片下载",
                    that.downloadList[0].downloadType
                  );
                  var down = res.data.biz.list.filter((item, index) => {
                    return item.extensionType == 3;
                  });
                  that.d(down[0].accessUrl, down[0], down[0].fileSize, 1);
                }
                if (that.downloadList[0].downloadType - 0 == 4) {
                  var defaultDownload = window.preload.path.join(
                    morenurl,
                    that.downloadList[0].fileName.split(".")[0]
                  );
                  window.preload.fs.mkdir(defaultDownload, function(error) {
                    if (error) {
                      console.log(error);
                      return false;
                    }
                    console.log("创建目录成功");
                  });
                  console.log(
                    "我是视频下载",
                    that.downloadList[0].downloadType
                  );
                  var down = res.data.biz.list.filter((item, index) => {
                    return item.extensionType == 4;
                  });
                  console.log(down[0].accessUrl);
                  that.d(down[0].accessUrl, down[0], down[0].fileSize, 1);
                }
              }
            });

          // console.log(this.downloadList[0].pcId, "有没有");
        }
      }
    },
    //取消下载按钮
    overDownload() {
      this.$store.commit("overDown");
      if (this.downloadList.length) {
        var first = this.downloadList[0];
        first.progress = 0;
        var nofirst = this.downloadList.filter((item, index) => {
          return index != 0;
        });
        // localStorage.setItem("download", JSON.stringify(nofirst));
        this.downloadList.shift();
        this.downloadList.unshift(first);

        localStorage.setItem("download", JSON.stringify(nofirst));
        // console.log("设置了一个删除第一条");
        // localStorage.setItem("download", JSON.stringify([first, ...nofirst]));
        // console.log("把第一条添加回去ne");
        // this.downloadList = localStorage.getItem("download")
        //   ? JSON.parse(localStorage.getItem("download"))
        //   : [];
        //   console.log(first, nofirst, localStorage.getItem("download"));
        this.downloadList = this.downloadList.map((item, index) => {
          item.downloadShunxu = index + 1;
          return item;
        });
      }
    },
    //清空列表
    allO() {
      if (this.downloadList.length) {
        this.$confirm(
          `确定要全部清空文件列表的记录吗？`,
          "确定删除全部传输记录？",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            center: true
          }
        )
          .then(() => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.downloadList = [];
            localStorage.removeItem("download");
          })
          .catch(() => {
            // this.$message({
            //   type: "success",
            //   message: "已取消删除"
            // });
          });
      }
    },
    format(percentage) {
      return percentage === 100 ? "" : "";
    },
    //置顶效果
    toTop(data, index) {
      data.downloadShunxu = 0;
      //先排序在重新赋值index用于排序;
      this.downloadList = this.downloadList.sort((a, b) => {
        return a.downloadShunxu - b.downloadShunxu;
      });
      console.log(this.downloadList, "置顶");
      this.downloadList = this.downloadList.map((item, index) => {
        item.progress = 0;
        item.downloadShunxu = index + 1;
        item.projectSize =
          typeof item.projectSize == "number"
            ? item.projectSizeceivedBytes / 1024 / 1024 < 1
              ? (item.projectSize / 1024).toFixed(1) + "KB"
              : (item.projectSize / 1024 / 1024).toFixed(1) + "M"
            : item.projectSize;
        return item;
      });
      localStorage.setItem("download", JSON.stringify(this.downloadList));
      console.log(this.downloadList);
    },
    //删除操作
    async deleteClick(pcId, index) {
      var ls = this.downloadList.filter((item, i) => {
        return pcId == item.pcId;
      });
      this.$confirm(
        `确定要将“${ls[0].fileName}”从列表删除吗？`,
        "确定删除传输记录?",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true
        }
      )
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.downloadList = this.downloadList.filter((item, i) => {
            return pcId != item.pcId || index != i;
          });
          localStorage.setItem("download", JSON.stringify(this.downloadList));
          this.downloadList[0].progress = 0;
        })
        .catch(() => {});
    }
  },
  mounted() {
    //传输数目图标
      this.$store.commit('jsdownNum',this.downloadList.length)
    //创建两个默认的下载位置
    console.log(this.downloadList, "曹西杨");
    window.preload.fs.mkdir(
      window.preload.path.join(
        window.preload.electron.remote.app.getPath("appData"),
        "lybyj"
      ),
      function(error) {
        if (error) {
          console.log(error);
          return false;
        }
        console.log("创建目录成功");
      }
    );
    window.preload.fs.mkdir(
      window.preload.path.join(
        window.preload.electron.remote.app.getPath("appData"),
        "lybyj",
        "downloads"
      ),
      function(error) {
        if (error) {
          console.log(error);
          return false;
        }
        console.log("创建目录成功");
      }
    );
    //第一个
    this.downloadList = localStorage.getItem("download")
      ? JSON.parse(localStorage.getItem("download"))
      : [];
    console.log(this.downloadList, "这是mounted中");
    //给置顶点击排序到第一个
    console.log(this.downloadList, "给指定");
    this.downloadList = this.downloadList.map((item, index) => {
      item.downloadShunxu = index + 1;
      item.projectSize =
        typeof item.projectSize == "number"
          ? item.projectSizeceivedBytes / 1024 / 1024 < 1
            ? (item.projectSize / 1024).toFixed(1) + "KB"
            : (item.projectSize / 1024 / 1024).toFixed(1) + "M"
          : item.projectSize;
      return item;
    });
  },
  updated() {
    if (JSON.parse(localStorage.getItem("download")) != null) {
      if (JSON.parse(localStorage.getItem("download")).length > 50) {
        this.$refs.vlog.style.display = "block";
      }
    }
  },
  computed: {
    isStart() {
      console.log("这里是isStart的改变");
      this.downloadList = localStorage.getItem("download")
        ? JSON.parse(localStorage.getItem("download"))
        : [];
      this.downloadList = this.downloadList.map((item, index) => {
        item.downloadShunxu = index + 1;
        item.projectSize =
          typeof item.projectSize == "number"
            ? item.projectSizeceivedBytes / 1024 / 1024 < 1
              ? (item.projectSize / 1024).toFixed(1) + "KB"
              : (item.projectSize / 1024 / 1024).toFixed(1) + "M"
            : item.projectSize;
        return item;
      });
      return this.$store.state.isStartDown;
    }
  },
  watch: {
    downDatalist() {
      this.downloadList = [...this.downDatalist];
      this.downloadList = this.downloadList.map((item, index) => {
        item.downloadShunxu = index + 1;
        item.projectSize =
          typeof item.projectSize == "number"
            ? item.projectSizeceivedBytes / 1024 / 1024 < 1
              ? (item.projectSize / 1024).toFixed(1) + "KB"
              : (item.projectSize / 1024 / 1024).toFixed(1) + "M"
            : item.projectSize;
        return item;
      });
      console.log(
        "能不能检测到downDatalist的值",
        this.downDatalist,
        this.downloadList
      );
      return this.downloadList;
    },
    // isStart() {
    //   this.downloadList = localStorage.getItem("download")
    //     ? JSON.parse(localStorage.getItem("download"))
    //     : [];
    //   this.downloadList = this.downloadList.map((item, index) => {
    //     item.downloadShunxu = index + 1;
    //     if(!index){
    //       item.start = this.isStart;
    //     }
    //     return item;
    //   });
    // },
    downloadList() {
            //传输数目图标
      this.$store.commit('jsdownNum',this.downloadList.length)
      var that = this;
      if (this.downloadList.length && this.$store.state.isStartDown) {
        this.startDownload();
      }
      console.log("老子改了 你还想咋地");
      // if ( this.$store.state.isDowning == 1 && this.downloadList.length) {
      //   console.log(
      //     "顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶",
      //     this.$store.state.isDowning
      //   );
      //   http
      //     .request({
      //       method: "POST",
      //       url: "/CloudSpaceIyujiController/getProjectInfo",
      //       data: {
      //         id: this.downloadList[0].pcId
      //       }
      //     })
      //     .then(res => {
      //       if (res.data.code == "000000") {
      //         var morenurl = this.$store.state.isDownloadWhere[0]
      //           ? this.$store.state.isDownloadWhere[0]
      //           : window.preload.path.join(
      //               window.preload.electron.remote.app.getPath("appData"),
      //               "lybyj",
      //               "downloads"
      //             );
      //         console.log(res.data, that.downloadList[0]);
      //         console.log(that.downloadList[0], "index");
      //         if (that.downloadList[0].downloadType - 0 == -1) {
      //           console.log(
      //             "我是下载其中不是文档的那个",
      //             that.downloadList[0].downloadType
      //           );
      //           var defaultDownload = window.preload.path.join(
      //             morenurl,
      //             that.downloadList[0].fileName.split(".")[0]
      //           );
      //           window.preload.fs.mkdir(defaultDownload, function(error) {
      //             if (error) {
      //               console.log(error);
      //               return false;
      //             }
      //             console.log("创建目录成功");
      //           });
      //           // res.data.biz.list = res.data.biz.list.map((item, index) => {
      //           res.data.biz.list.map((item, index) => {
      //             if (item.extensionType == "1") {
      //               console.log(item.extensionType);
      //               that.d(item.accessUrl, item, item.fileSize, 1);
      //               return;
      //             }
      //             if (item.extensionType == "4") {
      //               console.log(item.extensionType);
      //               that.d(item.accessUrl, item, item.fileSize, 1);
      //               return;
      //             }
      //             if (item.extensionType == "3") {
      //               console.log(item.extensionType);
      //               that.d(item.accessUrl, item, item.fileSize, 1);
      //               return;
      //             }
      //           });
      //         }
      //         if (that.downloadList[0].downloadType == undefined) {
      //           console.log("我是所有下载", that.downloadList[0].downloadType);
      //           var defaultDownload = window.preload.path.join(
      //             morenurl,
      //             that.downloadList[0].fileName.split(".")[0]
      //           );
      //           window.preload.fs.mkdir(defaultDownload, function(error) {
      //             if (error) {
      //               console.log(error);
      //               return false;
      //             }
      //             console.log("创建目录成功");
      //           });
      //           //所有文件的总大小;
      //           var sumSize = 0;
      //           for (var i = 0; i < res.data.biz.list.length; i++) {
      //             sumSize += res.data.biz.list[i].fileSize;
      //           }
      //           res.data.biz.list.map((item, index) => {

      //             that.d(
      //               item.accessUrl,
      //               item,
      //               sumSize,
      //               index == res.data.biz.list.length - 1 ? 1 : 0
      //             );
      //           });
      //         }
      //         if (that.downloadList[0].downloadType - 0 == 2) {
      //           console.log("我是文档下载", that.downloadList[0].downloadType);
      //           var defaultDownload = window.preload.path.join(
      //             morenurl,
      //             that.downloadList[0].fileName.split(".")[0]
      //           );
      //           window.preload.fs.mkdir(defaultDownload, function(error) {
      //             if (error) {
      //               console.log(error);
      //               return false;
      //             }
      //             console.log("创建目录成功");
      //           });
      //           var down = res.data.biz.list.filter((item, index) => {
      //             return item.extensionType == 2;
      //           });
      //           that.d(down[0].accessUrl, down[0], down[0].fileSize, 1);
      //         }
      //         if (that.downloadList[0].downloadType - 0 == 3) {
      //           var defaultDownload = window.preload.path.join(
      //             morenurl,
      //             that.downloadList[0].fileName.split(".")[0]
      //           );
      //           window.preload.fs.mkdir(defaultDownload, function(error) {
      //             if (error) {
      //               console.log(error);
      //               return false;
      //             }
      //             console.log("创建目录成功");
      //           });
      //           console.log("我是图片下载", that.downloadList[0].downloadType);
      //           var down = res.data.biz.list.filter((item, index) => {
      //             return item.extensionType == 3;
      //           });
      //           that.d(down[0].accessUrl, down[0], down[0].fileSize, 1);
      //         }
      //         if (that.downloadList[0].downloadType - 0 == 4) {
      //           var defaultDownload = window.preload.path.join(
      //             morenurl,
      //             that.downloadList[0].fileName.split(".")[0]
      //           );
      //           window.preload.fs.mkdir(defaultDownload, function(error) {
      //             if (error) {
      //               console.log(error);
      //               return false;
      //             }
      //             console.log("创建目录成功");
      //           });
      //           console.log("我是视频下载", that.downloadList[0].downloadType);
      //           var down = res.data.biz.list.filter((item, index) => {
      //             return item.extensionType == 4;
      //           });
      //           console.log(down[0].accessUrl);
      //           that.d(down[0].accessUrl, down[0], down[0].fileSize, 1);
      //         }
      //       }
      //     });

      //   console.log(this.downloadList[0].pcId, "有没有");
      // }

      //停止下载
      if (this.downloadList.length == 0) {
        console.log("不能在点击咯");
        this.$store.commit("overDown");
        console.log(this.$store.state.isDowning);
      }
    }
  }
};
</script>

<style scoped lang='scss'>
main {
  height: calc(100vh - 7vh);
  overflow: hidden;
  font-size: 12px;
  background-color: #f6f7f9;
  .el-row:first-child {
    .Img {
      color: #262626;
    }
    .ic {
      margin: 0 0 0 1.2vw;
      display: inline-block;
      font-size: 12px;
      color: #262626;
      .el-button {
        font-size: 12px;
        color: #262626;
      }
    }
  }
  .el-row:first-child {
    .Img {
      margin-left: 1vw;
      width: 12px;
    }
  }
  .el-row:nth-child(2) {
    color: #595959;
  }
  .bottom {
    // height: calc(100vh - 7vh - 80px);
    height: 400px;
    overflow: auto;
    overflow: overlay;
    cursor: pointer;
    .el-row {
      .el-col {
        color: rgba(38, 38, 38, 1) !important;
      }
      .el-col:nth-child(3) {
        p {
          margin: 0 0 0 1vw;
          line-height: 24px;
          font-size: 12px;
        }
      }
      .el-col:last-child {
        display: flex;
        // justify-content: center;
        align-items: center;
        //置顶删除按钮样式
        .img {
          margin: 0 1vw;
        }
      }
    }
  }

  .el-row {
    .el-col:first-child {
      display: flex;
      align-items: center;
    }
    .i {
      margin: 0 0 0 1vw;
      vertical-align: middle;
    }

    .el-col {
      height: 40px;
      line-height: 40px;
      .margLeft {
        padding-left: 1vw;
      }
      .padLeft {
        line-height: 40px;
        margin: 0;
        color: rgba(89, 89, 89, 1);
        padding: 0 0 0 1vw;
      }
      .margLeft {
        border-left: 1px solid #e4e7ed;
        margin: 0;
      }
      .total {
        float: right;
        margin-right: 1vw;
        color: #8c8c8c;
      }
      span {
        padding-left: 1vw;
      }
    }
  }
  .el-row:nth-child(2n) {
    background-color: #fafafa;
  }
  .el-row:nth-child(2n + 1) {
    background-color: #fff;
  }
}
// 无内容
.nocontent {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  height: 180px;
  width: 180px;
  text-align: center;
}

//删除二字提示样式
.el-button {
  color: #8c8c8c;
  margin: 0;
  padding: 0;
  transition: 0.1s;
  border: 0;
}
.vlog {
  display: none;
  z-index: 999;
  position: fixed;
  left: 30%;
  top: 30%;
  width: 40%;
  height: 36%;
  border: 1px solid #ccc;
  .head {
    width: 100%;
    height: 20%;
    background-color: #ccc;
    border: 1px solid #ccc;
    font-size: 18px;
    line-height: 40px;
    text-align: center;
  }
  .mainer {
    height: 80%;
    background-color: rgba(246, 247, 249, 1);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
    border: 1px solid rgba(246, 247, 249, 1);
    border-bottom: 1px solid #ccc;
    input {
      border: none;
      border-radius: 4px;
      color: white;
      background-color: gray;
      //  display:block;
      width: 80px;
      height: 30px;
    }
  }
}
</style>
<style >
/*  */
/* .el-message-box--center .el-message-box__title {
  justify-content: left !important;
  font-size: 18px;
}
.el-message-box__message p {
  font-size: 12px;
  color: #8c8c8c;
}
.el-message-box__btns {
  text-align: right !important;
}
.el-button--small,
.el-button--small.is-round {
  padding: 9px 20px !important;
}
.el-message-box__btns button:nth-child(2) {
  margin-left: 20px !important;
} */

/* 全局进度条距离 */
.el-progress-bar {
  padding-left: 1vw;
  margin-top: 10px;
}
</style>