import axios from 'axios';
import ElementUI from 'element-ui'
import Vue from 'vue'
import localForage from 'localforage'
import streamSaver from 'streamsaver';
import store from "@/store/index"
/**
 * localforage–是一個(gè)高效而強(qiáng)大的離線存儲(chǔ)方案。
 * 它封裝了IndexedDB, WebSQL, or localStorage，并且提供了一個(gè)簡(jiǎn)化的類似localStorage的API。
 * 在默認(rèn)情況下會(huì)優(yōu)先采用使用IndexDB、WebSQL、localStorage進(jìn)行后臺(tái)存儲(chǔ)，
 * 即瀏覽器不支持IndexDB時(shí)嘗試采用WebSQL，既不支持IndexDB又不支持WebSQL時(shí)采用
 * localStorage來(lái)進(jìn)行存儲(chǔ)。
 * 
 */
/**
 * @description 創(chuàng)建數(shù)據(jù)庫(kù)實(shí)例，創(chuàng)建并返回一個(gè) localForage 的新實(shí)例。每個(gè)實(shí)例對(duì)象都有獨(dú)立的數(shù)據(jù)庫(kù)，而不會(huì)影響到其他實(shí)例
 * @param {Object} dataBase 數(shù)據(jù)庫(kù)名
 * @return {Object} storeName 實(shí)例（倉(cāng)庫(kù)實(shí)例）
 */
function createInstance(dataBase){
  return localForage.createInstance({
    name: dataBase
  });
}

/**
 * @description 保存數(shù)據(jù)
 * @param {Object} name 鍵名
 * @param {Object} value 數(shù)據(jù)
 * @param {Object} storeName 倉(cāng)庫(kù)
 */
async function saveData(name, value, storeName){
  await storeName.setItem(name, value).then(() => {
    // 當(dāng)值被存儲(chǔ)后，可執(zhí)行其他操作
    console.log("save success");
  }).catch(err => {
    // 當(dāng)出錯(cuò)時(shí)，此處代碼運(yùn)行
    console.log(err)
  })
}

/**
 * @description 獲取保存的數(shù)據(jù)
 * @param {Object} name 鍵名
 * @param {Object} storeName 倉(cāng)庫(kù)
 */
async function getData(name, storeName, callback){
  await storeName.getItem(name).then((val) => {
    // 獲取到值后，可執(zhí)行其他操作
    callback(val);
  }).catch(err => {
    // 當(dāng)出錯(cuò)時(shí)，此處代碼運(yùn)行
    callback(false);
  })
}

/**
 * @description 移除保存的數(shù)據(jù)
 * @param {Object} name 鍵名
 * @param {Object} storeName 倉(cāng)庫(kù)
 */
async function removeData(name, storeName){
  await storeName.removeItem(name).then(() => {
    console.log('Key is cleared!');
  }).catch(err => {
    // 當(dāng)出錯(cuò)時(shí)，此處代碼運(yùn)行
    console.log(err);
  })
}

/**
 * @description 刪除數(shù)據(jù)倉(cāng)庫(kù)，將刪除指定的 “數(shù)據(jù)庫(kù)”（及其所有數(shù)據(jù)倉(cāng)庫(kù)）。
 * @param {Object} dataBase 數(shù)據(jù)庫(kù)名
 */
async function dropDataBase(dataBase){
  await localForage.dropInstance({
    name: dataBase
  }).then(() => {
     console.log('Dropped ' + dataBase + ' database');
  }).catch(err => {
    // 當(dāng)出錯(cuò)時(shí)，此處代碼運(yùn)行
    console.log(err);
  })
}

/**
 * @description 刪除數(shù)據(jù)倉(cāng)庫(kù)
 * @param {Object} dataBase 數(shù)據(jù)庫(kù)名
 * @param {Object} storeName 倉(cāng)庫(kù)名（實(shí)例）
 */
async function dropDataBaseNew(dataBase, storeName){
  await localForage.dropInstance({
    name: dataBase,
    storeName: storeName
  }).then(() => {
     console.log('Dropped',storeName)
  }).catch(err => {
    // 當(dāng)出錯(cuò)時(shí)，此處代碼運(yùn)行
    console.log(err);
  })
}

/**
 * @description 獲取下載列表
 * @param {String} page 頁(yè)面
 * @param {String} user 用戶
 */
export async function getDownloadList(page, user, callback){
  // const key = user + "_" + page + "_";
  // const key = user + "_";
  const key = "_"; // 因?yàn)橛脩魰?huì)過(guò)期 所以不保存用戶名  直接以頁(yè)面為鍵即可
  // 基礎(chǔ)數(shù)據(jù)庫(kù)
  const baseDataBase = createInstance(baseDataBaseName);
  await baseDataBase.keys().then(async function(keys) {
      // 包含所有 key 名的數(shù)組
      let fileList = [];
      for(let i = 0; i < keys.length; i++){
        if(keys[i].indexOf(key)>-1){
          // 獲取數(shù)據(jù)
          await getData(keys[i], baseDataBase, async (res) =>{
            fileList.push(
              {
                'fileName': res, // 文件名
                'dataInstance': keys[i] // 文件對(duì)應(yīng)數(shù)據(jù)庫(kù)實(shí)例名
              }
            );
          })
        }
      }
      // 獲取進(jìn)度
      for(let i = 0; i < fileList.length; i++){
        const dataBase = createInstance(fileList[i].dataInstance);
        await getData(progressKey, dataBase,  async (progress) => {
          if(progress){
            fileList[i].fileSize = progress.fileSize;
            fileList[i].progress = progress.progress ? progress.progress : 0;
            fileList[i].status = progress.status ? progress.status : "stopped";
            fileList[i].url = progress.url;
          }
        });
      }
      callback(fileList);
  }).catch(function(err) {
      // 當(dāng)出錯(cuò)時(shí)，此處代碼運(yùn)行
      callback(err);
  });
}

/**
 * 文件下載進(jìn)度監(jiān)聽
 */
const onDownloadProgres = (progress) =>{
  // progress對(duì)象中的loaded表示已經(jīng)下載的數(shù)量，total表示總數(shù)量，這里計(jì)算出百分比
  let downProgress = Math.round(100 * progress.loaded / progress.total); 
  store.commit('setProgress', {
      dataInstance: uniSign,
      fileName: data.downLoad,
      progress: downProgress,
      status: downProgress == 100 ? 'success' : 'downloading',
      cancel: cancel
  })
}

// 數(shù)據(jù)庫(kù)進(jìn)度數(shù)據(jù)主鍵
const progressKey = "progress";
/**
 * @description 狀態(tài)控制
 * @param {String} fileName 文件名
 * @param {String} type 下載方式 continue:續(xù)傳  again:重新下載  cancel:取消
 * @param {String} dataBaseName 數(shù)據(jù)庫(kù)名 每個(gè)文件唯一
 * 
 */
async function controlFile(fileName, type, dataBaseName){
  if(type == 'continue'){
    
  } else if(type == 'again'){
    // 刪除文件數(shù)據(jù)
    await dropDataBase(dataBaseName);
    // 基礎(chǔ)數(shù)據(jù)庫(kù)
    const baseDataBase = createInstance(baseDataBaseName);
    // 基礎(chǔ)數(shù)據(jù)庫(kù)刪除數(shù)據(jù)庫(kù)實(shí)例
    removeData(dataBaseName, baseDataBase);
  } else if(type == 'cancel'){
    // 刪除文件數(shù)據(jù)
    await dropDataBase(dataBaseName);
    // 基礎(chǔ)數(shù)據(jù)庫(kù)
    const baseDataBase = createInstance(baseDataBaseName);
    // 基礎(chǔ)數(shù)據(jù)庫(kù)刪除數(shù)據(jù)庫(kù)實(shí)例
    await removeData(dataBaseName, baseDataBase);
    store.commit('delProgress', {
        dataInstance: dataBaseName
    })
  } else if(type == 'stop'){
    store.commit('setProgress', {
        dataInstance: dataBaseName,
        status: 'stopped',
    })
  }
}

/**
 * @description 分片下載
 * @param {String} fileName 文件名
 * @param {String} url 下載地址
 * @param {String} dataBaseName 數(shù)據(jù)庫(kù)名 每個(gè)文件唯一
 * @param {Object} progress 下載進(jìn)度 type: continue:續(xù)傳  again:重新下載  cancel:取消
 * 
 */
export async function downloadByBlock(fileName, url, dataBaseName, progress) {
  //調(diào)整下載狀態(tài)
  if(progress.type){
    await controlFile(fileName, progress.type, dataBaseName);
  }
  
  // 判斷是否超過(guò)最大下載數(shù)量
  let downloadNum = store.state.progressList;
  if(downloadNum){
    if(!progress.type && downloadNum.length == downloadMaxNum){
      ElementUI.Message.error("已超過(guò)最大下載量，請(qǐng)等待其他文件下載完再嘗試!");
      return;
    }
  }
  
  // 基礎(chǔ)數(shù)據(jù)庫(kù)
  const baseDataBase = createInstance(baseDataBaseName);
  // 判斷數(shù)據(jù)庫(kù)中是否已存在該文件的下載任務(wù)
  let isError = false;
  await getData(dataBaseName, baseDataBase, async (res) =>{
    if(res && !progress.type){
      ElementUI.Message.error("該文件已在下載任務(wù)列表，無(wú)需重新下載!");
      isError = true;
    }
  });
  if(isError){
    return;
  }
  
  // 儲(chǔ)存數(shù)據(jù)的數(shù)據(jù)庫(kù)
  const dataBase = createInstance(dataBaseName);
  
  // 獲取文件大小
  const response = await axios.head(url);
  // 文件大小
  const fileSize = +response.headers['content-length'];
  // 分片大小
  const chunkSize = +response.headers['buffer-size'];
  // 開始節(jié)點(diǎn)
  let start = 0;
  // 結(jié)束節(jié)點(diǎn)
  let end = chunkSize - 1;
  if (fileSize < chunkSize) {
    end = fileSize - 1;
  }
  // 所有分片
  let ranges = [];
  // 計(jì)算需要分多少次下載
  const numChunks = Math.ceil(fileSize / chunkSize);
  // 回寫文件大小
  progress.fileSize = fileSize;
  progress.url = url;
  
  // 保存數(shù)據(jù)庫(kù)實(shí)例
  await saveData(dataBaseName, fileName, baseDataBase);
  if(!progress.progress){
    // 保存進(jìn)度數(shù)據(jù)
    await saveData(progressKey, progress, dataBase);
  }
  // 保存下載狀態(tài)至localstorage  如果頁(yè)面刷新 可重新讀取狀態(tài) 判斷是否需要繼續(xù)下載
  sessionStorage.setItem(dataBaseName,"downloading");
  
  // 組轉(zhuǎn)參數(shù)
  for (let i = 0; i < numChunks; i++) {
    // 創(chuàng)建請(qǐng)求控制器 
    const controller = new AbortController();
    
    const range = `bytes=${start}-${end}`;
    // 如果是續(xù)傳 先判斷是否已下載
    if(progress.type == 'continue'){
      // 先修改狀態(tài)
      store.commit('setProgress', {
          dataInstance: dataBaseName,
          status: 'downloading'
      })
      let isContinue = false;
      await getData(range, dataBase, async function(res){ if(res) isContinue = true});
      if(isContinue){
        ranges.push(range);
        // 重置開始節(jié)點(diǎn)
        start = end + 1;
        // 重置結(jié)束節(jié)點(diǎn)
        end = Math.min(end + chunkSize, fileSize - 1);
        continue;
      }
    }

    let cancel;
    const config = {
      headers: {
        Range: range
      },
      responseType: 'arraybuffer',
      // 綁定取消請(qǐng)求的信號(hào)量
      signal: controller.signal, 
      // 文件下載進(jìn)度監(jiān)聽
      onDownloadProgress: function (pro){
        if(progress.type == 'stop' || progress.type == 'cancel'){
           // 終止請(qǐng)求
          controller.abort();
        }
        
        // 已加載大小
        // progress對(duì)象中的loaded表示已經(jīng)下載的數(shù)量，total表示總數(shù)量，這里計(jì)算出百分比
        let downProgress = (pro.loaded / pro.total); 
        downProgress = Math.round( (i / numChunks) * 100 + downProgress  / numChunks * 100);
        progress.progress = downProgress;
        // 設(shè)置為異常  如果是正常下載完 這個(gè)記錄會(huì)被刪除 如果合并失敗  則會(huì)顯示異常
        progress.status = downProgress == 100 ? 'error' : 'stopped';
        store.commit('setProgress', {
            dataInstance: dataBaseName,
            fileName: fileName,
            progress: downProgress,
            status: 'downloading',
            cancel: cancel,
            url: url,
            dataBaseName: dataBaseName
        })
      }
    };
    try {
      // 開始分片下載
      const response = await axios.get(url, config);
      // 保存分片數(shù)據(jù)
      await saveData(range, response.data, dataBase);
        
      ranges.push(range);
      // 重置開始節(jié)點(diǎn)
      start = end + 1;
      // 重置結(jié)束節(jié)點(diǎn)
      end = Math.min(end + chunkSize, fileSize - 1);
        
    } catch (error) {
      console.log("終止請(qǐng)求時(shí)catch的error---", error);
      // 判斷是否為取消上傳
      if (error.message == "canceled"){
          // 進(jìn)行后續(xù)處理
          if(progress.type == 'stop'){
            // 暫停
            await controlFile(fileName, progress.type, dataBaseName);
            sessionStorage.setItem(dataBaseName,"stop");
             // 終止請(qǐng)求
            console.log("stopped");
            return;
          } else if(progress.type == 'cancel'){
            // 取消
            await controlFile(fileName, progress.type, dataBaseName);
            sessionStorage.removeItem(dataBaseName);
            // 終止請(qǐng)求
            console.log("canceled");
            return;
          }
      };
    }
  }

  console.log("開始合入");
  // 流操作
  const fileStream = streamSaver.createWriteStream(fileName, {size: fileSize});
  const writer = fileStream.getWriter();
  // 合并數(shù)據(jù)
  // 循環(huán)取出數(shù)據(jù)合并
  for (let i=0; i < ranges.length; i++) {
    var range = ranges[i];
    // 從數(shù)據(jù)庫(kù)獲取分段數(shù)據(jù)
    await getData(range, dataBase, async function(res){
      if(res){
        // 讀取流
        const reader = new Blob([res]).stream().getReader();
        while (true) {
          const { done, value } = await reader.read();
          if (done) break;
          // 寫入流
          writer.write(value)
        }
        // 結(jié)束寫入
        if(i==ranges.length-1){
          writer.close();
          // 清空數(shù)據(jù)庫(kù)
          dropDataBase(dataBaseName);
          // 基礎(chǔ)數(shù)據(jù)庫(kù)刪除數(shù)據(jù)庫(kù)實(shí)例
          removeData(dataBaseName, baseDataBase);
          // 清除store
          store.commit('delProgress', {
            dataInstance: dataBaseName
          })
        } 
      }
    }); 
  }
}

<script>
import { downloadByBlock } from "上面的js";
export default {
  name: "suspension",
  data() {
    return {
      // 下載列表
      downloadDialog: false,
      fileStatus: {}
    };
  },
  watch: {
    "$store.state.progressList": function() {
      this.$nextTick(function() {
        let progressList = this.$store.state.progressList;
        progressList.forEach(item => {
          // 獲取之前下載狀態(tài) 還原操作
          const status = sessionStorage.getItem(item.dataInstance);
          if (status == "downloading" && item.status != status) {
            this.startDownload(item);
          }
        });
      });
    }
  },
  methods: {
    /**
     * @description 重試
     * @param {Object} row
     */
    retryDownload(row) {
      this.startDownload(row);
    },
    /**
     * @description 開始下載
     * @param {Object} row
     */
    startDownload(row) {
      this.fileStatus[row.dataInstance] = {
        type: "continue",
        progress: row.progress
      };
      downloadByBlock(
        row.fileName,
        row.url,
        row.dataInstance,
        this.fileStatus[row.dataInstance]
      );
    },
    /**
     * @description 暫停下載
     * @param {Object} row
     */
    stopDownload(row) {
      this.$set(this.fileStatus[row.dataInstance], "type", "stop");
    },
    /**
     * @description 刪除下載
     * @param {Object} row
     */
    delDownload(row) {
      if (this.fileStatus[row.dataInstance] && row.status != "stopped") {
        this.$set(this.fileStatus[row.dataInstance], "type", "cancel");
      } else {
        this.fileStatus[row.dataInstance] = { type: "cancel" };
        downloadByBlock(
          row.fileName,
          row.url,
          row.dataInstance,
          this.fileStatus[row.dataInstance]
        );
      }
    },
    /**
     * @description 分片下載文件
     */
    downloadByBlock(fileName, url, dataBaseName, type) {
      this.fileStatus[dataBaseName] = { type: type };
      downloadByBlock(
        fileName,
        url,
        dataBaseName,
        this.fileStatus[dataBaseName]
      );
      this.btnDownload();
    },
    /**
     * @description 下載列表
     */
    btnDownload() {
      // 通過(guò)路由信息判斷當(dāng)前處于哪一個(gè)頁(yè)面
      const page = this.$route.name;
      this.downloadDialog = true;
    },



    /**
     * @description 取消彈窗
     */
    downloadBtnCancel() {
      this.downloadDialog = false;
    }
  }
};
</script>