<template>

  <div>
    <el-card class="box-card noborder">
      <div class="cardtitles">资料文档</div>
      <div class="searchbtns">
        <div class="searchInput">
          <el-input type="text" placeholder="输入关键词查询"></el-input>
          <div class="btn" @click="handleCurrentChange(1)">搜索</div>
        </div>
        <div class="btn btn_primary h32 b2" @click="getUP"><div class="img img2"></div>上传</div>
      </div>
      <div class="filepath" v-if="filename"><font @click="getall">全部</font> / <span> <img class="img" src="@/assets/images/folder.png">{{filename}}</span></div>
      <div class="uploadbox" v-if="isupload">
        <div>
          <el-upload
            class="upload-demo"
            :action="action"
            :on-change="handleFileListChange"
            :multiple="false"
            ref="upload"
            :file-list="fileList"
            accept=".word,.pdf.excel,.xlsx"
            :headers="headers"
            :show-file-list="false"
            :on-success="onSuccess">
            <div class="wj wj1"></div>上传文件
          </el-upload>
        </div>
        <div>
          <el-upload
            class="upload-demo"
            :action="action"
            :on-change="handleFileListChange"
            :multiple="false"
            :on-success="onSuccess1"
            ref="uploadFile"
            :headers="headers"
            :show-file-list="false"
            :file-list="fileList">
          <div class="wj wj2"></div>上传文件夹
          </el-upload>
        </div>
      </div>
      <div class="document tables">
        <el-table
          :data="fileDatas.rows"
          style="width: 100%"
        >
          <template slot="empty">
            <div class="empty">
              <img src="@/assets/images/project/empty.png">
              <div class="p1">暂无数据展示</div>
              <div class="p2">抱歉，你还未添加相关数据，快去上传吧</div>
              <div class="btn btn_primary h36 w102" @click="getUP">上传文档</div>
            </div>
          </template>
          <el-table-column
            prop="name"
            label="文件名称"
            >
            <template slot-scope="scope">
              <div @click="getFile(scope.row)">
                <img v-if="scope.row.type == 'file'" class="img" src="@/assets/images/folder.png">
                <img v-if="scope.row.type == 'word'" class="img" src="@/assets/images/word.png">
                <img v-if="scope.row.type == 'pdf'" class="img" src="@/assets/images/pdf.png">
                <img v-if="scope.row.type == 'excel'" class="img" src="@/assets/images/excel_1.png">
                <span>{{scope.row.name}}</span>
              </div>
            </template>
          </el-table-column>
          <!--<el-table-column-->
            <!--prop="name"-->
            <!--label="创建人"-->
            <!--&gt;-->
          <!--</el-table-column>-->
          <el-table-column
            prop="creatTime"
            label="更新时间"
            sortable
            width="">
          </el-table-column>
          <el-table-column
            prop=""
            label=""
            align="right"
            width="">
            <template slot-scope="scope">
              <div class="hoverbtn">
              <div class="xz" @click="downnlod(scope.row)">下载</div>
              <div class="sc" @click="del(scope.row.filePath)">删除</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="tables" v-if="fileDatas.total>param.pagesize">
          <div class="bottems">
            <el-pagination
              background
              :page-size="param.pagesize"
              :current-page="param.pageNum"
              @current-change="handleCurrentChange"
              layout="prev, pager, next"
              :total="fileDatas.total">
            </el-pagination>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import "@/assets/styles/project.scss"
  import { getToken } from "@/utils/auth";
  import { getZLWD ,delZLWD} from "@/api/project/project";
  export default {
    name: 'zlwd',
    data(){
      return{
        isupload:false,
        textarea:"",
        //上传
        action:process.env.VUE_APP_BASE_API + '/business/file/upload',
        fileList: [],
        headers: {
          Authorization: "Bearer " + getToken(),
          filePath:this.$route.query.id,
        },
        param:{
          pageNum:1,
          pagesize:20,
          filePath:this.$route.query.id,
        },
        fileDatas:[],
        filename:'',
      }
    },
    created(){
      this.getList()
      // console.log(this.$ref)
    },
    methods:{
      getall(){
        this.param.filePath = this.$route.query.id
        this.filename=''
        this.headers.filePath = this.$route.query.id
        this.handleCurrentChange(1)
      },
      getList(){
        getZLWD(this.param).then(res=>{
          this.fileDatas = res
          if(this.fileDatas.rows!=null && this.fileDatas .length>0){
            this.fileDatas.forEach(item=>{
              let names = item.filePath.split('\\')
              item.name = names[names.length-1]
              let types = item.name.split('.')
              item.type = types.length>1?types[1]:'file'
            })
          }
        })
      },
      getFile(row){
        if(row.type == 'file'){
          this.filename = row.name
          this.headers.filePath = this.$route.query.id+'\\'+row.name
          this.param.filePath = row.filePath

          this.handleCurrentChange(1)
        }else{
          return false
        }
      },
      getUP(){
        this.isupload=true
        this.$nextTick(() => {
          this.$refs.uploadFile.$children[0].$refs.input.webkitdirectory = true
        })
      },
      downnlod(row){
        let a = document.createElement("a");
        a.setAttribute("href", row.filePath);
        a.setAttribute("download", row.name);
        document.body.appendChild(a);
        a.click();
      },
      del(path){
        delZLWD(path).then(res=>{
          if(res.code == 200){
            this.$message.success('删除成功！')
            this.handleCurrentChange(1)
          }
        })
      },
      handleFileListChange(file, fileList) {
        if (fileList.length > 0) {
          this.fileList = [fileList[fileList.length - 1]];
        }
      },
      onSuccess(res, file, fileList) {
        if(res.code == 200 ){
          this.$refs["upload"].submit();
          let _this = this
          setTimeout(function() {
            _this.getList()
            _this.isupload = false
          },3000)

        }
        else
          this.$message.error({message:res.msg,showClose:true})
      },
      onSuccess1(res, file, fileList) {
        if(res.code == 200 ){
          this.$refs["uploadFile"].submit();
          let _this = this
          setTimeout(function() {
            _this.getList()
            _this.isupload = false
          },3000)
        }
        else
          this.$message.error({message:res.msg,showClose:true})
      },

      //翻页
      handleCurrentChange(val) {
        this.param.pageNum(1)
        this.getList()
      },
      cancel(){
        this.dialogVisible = false
      },
      //打开新建窗口
      opennew(){
        this.dialogVisible = true
      },
    }
  }
</script>

<style lang="scss" scoped>
  .filepath{
    font-size: 12px;
    height: 30px;
    line-height: 16px;
    padding-left: 24px;
    >font{
      opacity: 0.4;
    }
    >span{
      position: relative;
      padding-left: 23px;
    }
    .img{
      position: absolute;
      top: -3px;
      width: 20px;
      left: 0;
    }
  }
  .w102{
    width: 102px;
  }

  .img.img2{
    margin-right: 4px;
    transform: rotateX(180deg);
    background: url('../../../../../src/assets/images/import.png')no-repeat center center;
  }
  .box-card{
    position: relative;
  }
  .uploadbox{
    position: absolute;
    width: 124px;
    height: 73px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.08);
    border-radius: 2px;
    border: 1px solid #F0F0F0;
    right: 16px;
    top: 53px;
    z-index: 2;
    >div{
      line-height: 35px;
      height: 36px;
      color: rgba(35, 35, 35, 0.80);
      font-size: 14px;
      .wj{
        float: left;
        margin: 10px 4px 10px 16px;
        width: 16px;
        height: 16px;
        &.wj1{
          background: url("../../../../assets/images/project/wj_1.png") top center;
          background-size: 100%;
        }
        &.wj2{
          background: url("../../../../assets/images/project/wj_3.png") top center;
          background-size: 100%;
        }
      }
      &:hover{
        color: #0081FF;
        background: #F4F6F9;
        .wj1{
          background: url("../../../../assets/images/project/wj_2.png") top center;
          background-size: 100%;
        }
        .wj2{
          background: url("../../../../assets/images/project/wj_4.png") top center;
          background-size: 100%;
        }
      }
    }
  }
</style>
