<template>

  <div>
    <el-card class="box-card noborder">
      <div class="cardtitles">资料文档</div>
      <div class="searchbtns">
        <div class="searchInput small">
          <div @mouseover="showSearchBox = true" @mouseleave="leaves" >
            <img class="ss" src="@/assets/images/enterprise/enterprise-search-icon.svg" alt="">
            <span class="cx" v-if="!showSearchBox">搜索</span>
            <el-input v-if="showSearchBox"  @keyup.enter.native="handleCurrentChange(1)" clearable @clear="handleCurrentChange(1)" v-model="param.keyword"
                      placeholder="输入关键词查询"></el-input>
          </div>
        </div>
        <!--<div class="btn btn_primary h32 b2" @click="getUP"  v-if="fileDatas.total>0"><div class="img img2"></div>上传</div>-->

        <div class="btn btn_primary h32 b2" v-if="fileDatas.total>0"><div class="img img2"></div><el-upload
          class="upload-demo"
          :action="action"
          :on-change="handleFileListChange"
          :multiple="false"
          ref="upload"
          :file-list="fileList"
          accept=".word,.pdf.excel,.xlsx,.doc,.docx"
          :headers="headers"
          :show-file-list="false"
          :on-success="onSuccess"
          :key='keys'>上传</el-upload></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,.doc,.docx"
            :headers="headers"
            :show-file-list="false"
            :on-success="onSuccess">
            <div class="wj wj1"></div>上传文件
          </el-upload>
        </div>
        <div style="display: none">
          <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">
        <skeleton v-if="isSkeleton" style="padding-top: 16px"></skeleton>
        <div class="empty" v-if="fileDatas.total==0">
          <img src="@/assets/images/project/empty.png">
          <div class="p1">抱歉，没找到相关数据</div>
          <div class="p2">建议调整关键词或筛选条件，重新搜索</div>
          <!--<div v-if="isDisableds==false" class="btn btn_primary h36 w102" @click="getUP">上传文档</div>-->
          <div v-if="isDisableds==false" class="btn btn_primary h36 w102">  <el-upload
            class="upload-demo"
            :action="action"
            :on-change="handleFileListChange"
            :multiple="false"
            ref="upload"
            :file-list="fileList"
            accept=".word,.pdf.excel,.xlsx,.doc,.docx"
            :headers="headers"
            :show-file-list="false"
            :on-success="onSuccess">
            上传文档
          </el-upload></div>
        </div>
        <el-table  v-else-if="!isSkeleton" class="fixed-table" max-height="640"
          :data="fileDatas.rows"
          style="width: 100%"
          :default-sort = "{prop: 'creatTime', order: 'descending'}"
        >
          <template slot="empty">
          </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" v-if="isDisableds == false" @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 class="delform" v-if="ondel != ''">
          <div class="words">是否将文档删除</div>
          <div>
            <div class="btnsmall btn_primary h28" @click="delQY()">确定</div>
            <div class="btnsmall btn_cancel h28" @click="ondel = ''">取消</div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import '@/assets/styles/project.scss'
  import { getToken } from '@/utils/auth'
  import { delZLWD, getZLWD } from '@/api/project/project'
  import skeleton from './skeleton'

  export default {
    components:{skeleton},
    name: 'zlwd',
    props: {
      detailId: { //从企业详情跳转过来ID
        type: Number,
        default: 0
      },
      isDisabled:false,
    },
    data(){
      return{
        isupload:false,
        textarea:"",
        //上传
        action:process.env.VUE_APP_BASE_API + '/business/file/upload',
        fileList: [],
        headers: {
          Authorization: "Bearer " + getToken(),
          filePath:this.detailId ? this.detailId : this.$route.query.id,
        },
        param:{
          pageNum:1,
          pagesize:20,
          filePath:this.detailId ? this.detailId : this.$route.query.id,
          keyword:'',
        },
        fileDatas:[],
        filename:'',
        ondel:"",
        isDisableds:this.isDisabled,
        keys:1,
        isSkeleton:true,
        showSearchBox:false,
      }
    },
    created(){
      this.getList()
      // console.log(this.$ref)
    },
    methods:{
      leaves(){
        if(this.searchParam.companyName == ""){
          this.showSearchBox = false
        }
      },
      getall(){
        this.param.filePath = this.detailId ? this.detailId : this.$route.query.id
        this.filename=''
        this.headers.filePath = this.detailId ? this.detailId : this.$route.query.id
        this.handleCurrentChange(1)
      },
      getList(){
        this.isSkeleton = true
        getZLWD(this.param).then(res => {
          this.isSkeleton = false
          if (res.code == 200) {
            this.fileDatas = res
            if (this.fileDatas.rows != null && this.fileDatas.rows.length > 0) {
              this.fileDatas.rows.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'
                if (item.type == 'xls' || item.type == 'xlsx') {
                  item.type = 'excel'
                }
                if (item.type == 'doc' || item.type == 'docx') {
                  item.type = 'word'
                }
              })
            }
          }else{
            this.fileDatas.total = 0
          }
        })
      },
      getFile(row){
        if(row.type == 'file'){
          this.filename = row.name
          this.headers.filePath = this.detailId ? this.detailId : this.$route.query.id+'/'+row.name
          this.param.filePath = row.filePath

          this.handleCurrentChange(1)
        }else{
          return false
        }
      },
      getUP(){
        if(this.isDisableds==true)
          return false
        this.isupload=true
        this.$nextTick(() => {
          this.$refs.uploadFile.$children[0].$refs.input.webkitdirectory = true
        })
      },
      downnlod(row){
        let param = {filePath:row.filePath}
        this.$download.exportByPost('/business/file/download',param);
      },

      delQY(){
        let param = {
          filePath:this.ondel
        }
        delZLWD(JSON.stringify(param)).then(res=>{
          if(res.code == 200){
            this.$message.success('删除成功！')
            this.handleCurrentChange(1)
            this.ondel = ''
          }
        })
      },
      del(path){
        this.ondel = path
      },
      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.$message.success('上传成功！')
            _this.isupload = false
            _this.keys++;
          },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=val
        this.getList()
      },
      cancel(){
        this.dialogVisible = false
      },
      //打开新建窗口
      opennew(){
        this.dialogVisible = true
      },
    }
  }
</script>

<style lang="scss" scoped>


  .searchInput .el-input{
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 0;
    z-index: 0;
    ::v-deep .el-input__inner{
      background: #F4F6F9 !important;
      padding-left: 36px !important;
      padding-right: 35px !important;
    }
  }
  .searchInput.small{
    /*width: 257px;*/
    border: 0;
    border-radius: 4px !important;
    .ss{
      position: absolute;
      z-index: 1;
      left: 13px;
      top: 9px;
      width: 13px;
    }
    .cx{
      color: #232323;
      opacity: 0.8;
      font-size: 14px;
      margin-left: 36px;
      line-height: 32px;
    }
    input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      color: #232323;
      opacity: 0.4;
    }
    input::-moz-placeholder { /* Firefox 19+ */
      color: #232323;
      opacity: 0.4;
    }
    input:-ms-input-placeholder { /* IE 10+ */
      color: #232323;
      opacity: 0.4;
    }
    input:-moz-placeholder { /* Firefox 18- */
      color: #232323;
      opacity: 0.4;
    }
  }
  v-deep.el-upload:focus{
    color: #FFFFFF !important;
  }
  .delform{
    position: fixed; left:50%; top:50%; transform:translate(-50%,-50%)
  }
  .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;
    background-size: 100%;
  }
  .box-card{
    position: relative;
  }
  .uploadbox{
    position: absolute;
    width: 124px;
    height: 36px;
    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>
