window.onload = function() {
  const Bucket = 'examplebucket-1250000000';  /* 瀛樺偍妗� */
  const Region = 'ap-beijing';  /* 瀛樺偍妗舵墍鍦ㄥ湴鍩燂紝蹇呴』瀛楁 */
  // SecretId 鍜� SecretKey璇风櫥褰� https://console.cloud.tencent.com/cam/capi 杩涜鏌ョ湅鍜岀鐞�
  const cos = new COS({
    SecretId: '',
    SecretKey: '',
  });

  /*
    瀹炵幇浜嗕互涓嬪姛鑳�
    - 鏂囦欢鍒楄〃
    - 涓婁紶鏂囦欢
    - 涓婁紶鏂囦欢澶�
    - 涓嬭浇鏂囦欢
    - 鍒犻櫎鏂囦欢
  */
  const vm = new Vue({
    el: '#app',
    data() {
      return {
        columns: [
          { label: '鍚嶇О', value: 'Key' },
          { label: '澶у皬', value: 'Size' },
          { label: '淇敼鏃堕棿', value: 'LastModified' },
          { label: '鎿嶄綔', value: 'action' }
        ],
        list: [],
        Prefix: '',
        Marker: '',
        hasMore: false,
      }
    },
    computed: {
      // 闈㈠寘灞戝鑸潯
      navList() {
        const prefixes = this.Prefix.split('/').filter(Boolean);
        const folders = prefixes.map((item, index) => {
          return {
            name: item,
            Prefix: prefixes.slice(0, index + 1).join('/') + '/',
          };
        });
        return [{ name: Bucket, Prefix: ''}].concat(folders);
      },
    },
    created() {
      this.getFileList();
    },
    methods: {
      // 鏌ヨ鏂囦欢鍒楄〃
      getFileList(loadMore) {
        const { Prefix, Marker } = this;
        cos.getBucket({
          Bucket, /* 蹇呴』 */
          Region,     /* 瀛樺偍妗舵墍鍦ㄥ湴鍩燂紝蹇呴』瀛楁 */
          Prefix,              /* 闈炲繀椤� */
          Marker,       /* 闈炲繀椤� */
          Delimiter: '/',            /* 闈炲繀椤� */
       }, (err, data) => {
          if(err) {
            console.log(err);
            return;
          }
          const folder = data.CommonPrefixes.map((item) => {
            return {
              Prefix: item.Prefix,
              name: item.Prefix.replace(Prefix, '').slice(0,-1),
              isDir: true,
            }
          });
          const files = data.Contents.filter((item) => !item.Key.endsWith('/'))
                        .map((item) => {
                          return {
                            ...item,
                            name: item.Key.replace(Prefix, ''),
                          }
                        });
          const list = folder.concat(files);
          this.hasMore = data.IsTruncated;
          this.Marker = data.NextMarker || '';
          if (loadMore) {
            this.list = [...this.list, ...list];
          } else {
            this.list = list;
          }
       });
      },
      // 鐐瑰嚮闈㈠寘灞�
      navClick(item) {
        this.openFolder(item.Prefix);
      },
      // 鎵撳紑鏂囦欢澶�
      openFolder(prefix) {
        this.Prefix = prefix;
        this.hasMore = false;
        this.Marker = '';
        this.getFileList();
      },
      // 涓婁紶鏂囦欢
      uploadFileClick() {
        document.querySelectorAll('.file-select')[0].click();
      },
      // 涓婁紶鏂囦欢澶�
      uploadFolderClick() {
        document.querySelectorAll('.folder-select')[0].click();
      },
      // 涓婁紶
      uploadChange(events) {
        const files = events.currentTarget.files;
        const uploadFileList = [...files].map((file) => {
          const path = file.webkitRelativePath || file.name;
          return {
            Bucket,
            Region,
            Key: this.Prefix + path,
            Body: file,
          }
        });
        cos.uploadFiles({
          files: uploadFileList,
          SliceSize: 1024 * 1024 * 10,    /* 璁剧疆澶т簬10MB閲囩敤鍒嗗潡涓婁紶 */
          onProgress: function (info) {
              var percent = parseInt(info.percent * 10000) / 100;
              var speed = parseInt(info.speed / 1024 / 1024 * 100) / 100;
              console.log('杩涘害锛�' + percent + '%; 閫熷害锛�' + speed + 'Mb/s;');
          },
          onFileFinish: function (err, data, options) {
              console.log(options.Key + '涓婁紶' + (err ? '澶辫触' : '瀹屾垚'));
          },
       }, (err, data) => {
          if (err) {
            console.log('涓婁紶澶辫触', err);
            return;
          }
          // 鍒锋柊鍒楄〃鍓嶅垵濮嬪寲
          this.hasMore = false;
          this.Marker = '';
          this.getFileList();
       });
      },
      // 鍔犺浇鏇村
      loadMore() {
        this.getFileList(true);
      },
      // 涓嬭浇
      downloadFile(file) {
        cos.getObjectUrl({
          Bucket, /* 蹇呴』 */
          Region,     /* 瀛樺偍妗舵墍鍦ㄥ湴鍩燂紝蹇呴』瀛楁 */
          Key: file.Key,              /* 蹇呴』 */
        }, function(err, data) {
          if (err) {
            console.log(err);
            return;
          }
          const url = data.Url + (data.Url.indexOf('?') > -1 ? '&' : '?') + 'response-content-disposition=attachment'; // 琛ュ厖寮哄埗涓嬭浇鐨勫弬鏁�
          // 浣跨敤iframe涓嬭浇
          const elemIF = document.createElement("iframe");
          elemIF.src = url;
          elemIF.style.display = "none";
          document.body.appendChild(elemIF);
        });
      },
      // 鍒犻櫎
      deleteFile(file) {
        cos.deleteObject({
          Bucket, /* 蹇呴』 */
          Region,     /* 瀛樺偍妗舵墍鍦ㄥ湴鍩燂紝蹇呴』瀛楁 */
          Key: file.Key        /* 蹇呴』 */
       }, (err, data) => {
          if (err) {
            console.log(err);
            return;
          }
          // 鍒锋柊鍒楄〃鍓嶅垵濮嬪寲
          this.hasMore = false;
          this.Marker = '';
          this.getFileList();
       });
      },
    },
  });
}