<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>云盘</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" href="../../css/projeck.css">
    <style>
        /*title*/
        .title{
            padding: 10px;
            position: relative;
            font-size: 12px;
            color: #8a8a8a;
            display: flex;
            justify-content:flex-start;
            align-items: center;
            overflow: hidden;
        }
        .title:after{
            content: "";
            position: absolute;
            bottom: 0;
            left: 10px;
            width: 100%;
            height: 1px;
            background: #dbdbdb;
        }
        .title_icon{
            width: 15px;
            height: 15px;
            background: url("../../icon/file_icon.png") center no-repeat;
            background-size: cover;
            margin-right: 5px;
        }
        /*文件列表*/
        .cloud_list li{
            padding: 10px 14px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: nowrap;
            color: #2C3E50;
            position: relative;
        }
        .img_text{
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-wrap: nowrap;
          width: 86%;
        }
        .file_name_sizes{
          width: 82%;
        }
        .cloud_list li img{
            width: 40px;
            height: 40px;
            margin-right: 13px;
        }
        .file_name{
            font-size: 14px;
            margin-bottom: 3px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .file_size_time{
            color: #9C9FA5;
            font-size: 13px;
        }
        .file_tool{
            width: 15px;
            height: 15px;
            background: url("../../image/more.png") center no-repeat;
            background-size: cover;
            position: absolute;
            top: 27.5px;
            right: 14px;
        }
        .file_tool1{
          width: 25px;
          height: 25px;
          background: url("../../icon/tool.png") center no-repeat;
          background-size: cover;
          position: absolute;
          top: 17.5px;
          right: 14px;
        }
    </style>
</head>
<body>
    <div class="api_layout">
    <!-- 文件列表-->
        <div class="cloud_lists" id="cloud_lists"></div>
    </div>
    <!-- 下载 -->
    <a href="javascript:;" id="upload_file"></a>
</body>
</html>

<script type="text/template" id="templateSearch">
  <!-- title-->
      <div class="title">
          <i class="title_icon"></i>
          文件/文件夹
      </div>
  <!-- 文件列表-->
    {{~it:value:index}}
      <ul class="cloud_list">
        {{? value.filetype === '0'}}
          <li>
            <div class="img_text" onclick="openFolderContent('{{=value.filename}}','{{=value.id}}')">
              <img src="../../icon/file.png" alt="">
              <div class="file_name_sizes">
                  <p class="file_name">{{=value.filename}}</p>
                  <p class="file_size_time">{{=value.createtime}}</p>
              </div>
            </div>
            <i class="file_tool" onclick="openTool('{{=value.id}}','{{=value.filename}}')"></i>
          </li>
        {{??}}
          <li>
            <div class="img_text">
              <img src="{{=value.fileicon}}" alt="">
              <div class="file_name_sizes">
                  <p class="file_name">{{=value.filename}}</p>
                  <p class="file_size_time">{{=value.createtime}} {{=value.filesizename}}</p>
              </div>
            </div>
            <i class="file_tool1" onclick="openTool('{{=value.id}}','{{=value.filename}}','{{=value.filetype}}')"></i>
          </li>
        {{?}}
      </ul>
    {{~}}
</script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script src="../../script/config.js" charset="utf-8"></script>
<script type="text/javascript">
    var token ='',filenames= ''
    apiready = function() {
        token = api.pageParam.token
    }
    function searchFileList(filename) {
      filenames = filename
      var params = {
        filename,
        page: 1,
        limit: 1000,
        token
      }
      $http.requestShowProgress(UrlRouter.fileSearch,'post',params)
      .then(ret=>{
        if (ret.code === 0) {
          $apis.html(cloud_lists,'#templateSearch',ret.rows);
        }
      })
      .catch(err=>{})
    }
    // open文件夹
    function openFolderContent(name,id) {
        $event.openTabLayout('cloudDiskDe'+Math.random(),'cloudDiskDe',name,{id,token:token});
    }
    function openTool(id,name,type) {
      var Toolname = type == '0' ? ['重命名']:['下载','重命名']
      api.actionSheet({
          title: '操作',
          cancelTitle: '取消',
          destructiveTitle: '删除',
          buttons: Toolname
      }, function(ret, err) {
          var index = ret.buttonIndex;
          if (index === 1) {
            api.confirm({
                title: '确定删除文件？',
                msg: '',
                buttons: ['确定', '取消']
            }, function(ret, err) {
                if (ret.buttonIndex === 1) {
                  deleteFolder(id,name)
                }
            })
          }else if (index === 2) {
            if (type != 0) {
              mergeFilesNew(id,name)
            }else {
              renameFolder(id,name,type)
            }
          }
          else if (index === 3) {
            if (type != 0) {
              renameFolder(id,name,type)
            }
          }
      });
    }
    // 删除文件或文件夹
    function deleteFolder(id,name) {

      var params = {
        ids: [{id,name}],
        token:token
      }
      $http.requestShowProgress(UrlRouter.delete,'post',params)
      .then(ret=>{
        if (ret.code === 0) {
          api.toast({
              msg: '删除成功',
              duration: 2000,
              location: 'top'
          })
          searchFileList(filenames)
        }else {
          api.toast({
              msg: '删除失败',
              duration: 2000,
              location: 'top'
          })
        }
      })
      .catch(err=>{
        api.toast({
            msg: '网络错误，请检查网络!',
            duration: 2000,
            location: 'top'
        })
      })
    }
    // 下载文件 图片
    function mergeFilesNew(id) {
      var uploadFileElm= $('#upload_file')
      api.confirm({
          title: '提示',
          msg: '是否下载文件',
          buttons: ['确定', '取消']
      }, function(ret, err) {
          var index = ret.buttonIndex;
          if (index === 1) {
              uploadFileElm.attr('href',`${UrlRouter.download}fileid=${id}&token=${token}`)
              uploadFileElm.attr('download',`${UrlRouter.download}fileid=${id}&token=${token}`)
              uploadFileElm.click();
          }
      });
    }
    // 重命名
    function renameFolder(id,name,type) {
      var filename = name
      fileType = name.substring(name.lastIndexOf('.'))
      if (type != 0) {
        filename = name.substring(0,name.lastIndexOf('.'))
      }
      api.prompt({
          title: '修改文件名称',
          buttons: ['确定', '取消'],
          text: filename
      }, function(ret, err) {
          var text = ret.text;
          if (ret.buttonIndex === 1) {
            rename(id,ret.text,fileType)
          }

      });
    }
    function rename(id,filename,fileType) {
      var type = fileType
      if (fileType.indexOf('.') != 0 ) {
        type = ''
      }
      var params = {
        id,
        filename:filename+type,
        token,
      }
      $http.requestShowProgress(UrlRouter.rename,'post',params)
      .then(ret=>{
        if (ret.code === 0) {
          api.toast({
              msg: '修改成功',
              duration: 2000,
              location: 'top'
          })
          searchFileList(filenames)
        }else {
          api.toast({
              msg: '修改失败',
              duration: 2000,
              location: 'top'
          })
        }
      })
      .catch(err=>{
        api.toast({
            msg: '网络错误，请检查网络!',
            duration: 2000,
            location: 'top'
        })
      })
    }

</script>
