<template>
  <!-- 项目管理 项目附件 -->
    <div class="ProjectManagement4">
      <div class="vfpHeader">
      <!-- 详情页 -->
        <div class="titleOne">项目管理</div>
        <div class="smallTitle" style="left: 100px;">项目详情</div>
        <el-button type="primary" @click="back">返回</el-button>
    </div>
      <hr>
       <!-- 跳转导航开始 -->
       <div class="AppBar">
         <div @click="content" >项目基本内容</div>
          <div @click="remark">项目详情</div>
          <div @click="remark2" class="AppBarActive">项目附件</div>
          <div @click="remark4" >项目结题附件</div>
          <div @click="remark5">结项评语</div>
      </div>
      <!-- 跳转导航结束 -->
      <div class="pmInp">
          <!-- <el-button type="primary" class="btn"  size="mini">上传文件</el-button> -->
          <!-- <beUpload @getFile="getFile"  :navName="'上传文件'" :accept="accept"></beUpload> -->

        </div>
        <!-- 表格开始 -->
        <el-table
        :data="tableData"
        tooltip-effect="dark"
        stripe
        class="fontSize"
        :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
        >
       

        <!-- <el-table-column
          prop="title"
          label="活动名称"
          align="center"
          >
        </el-table-column> -->

        <el-table-column
          prop="fileName"
          label="活动中期报告"
          align="center"
          >
        </el-table-column>
        
        <el-table-column
          prop="size"
          label="大小"
          align="center"
          >
        </el-table-column>
       
        <el-table-column
          prop="uploadTime"
          label="时间"
          align="center"
          >
        </el-table-column>

        <el-table-column
          prop="operation"
          align="center"

          label="操作"
          >
          <template #default="scope">
              <div class="operations">
                      <el-button type="primary" class="bt1" size="mini" @click="checkFile(scope.row.url)" style="background: #477edd">详情查看</el-button>
              </div>
          </template>
        </el-table-column>
        </el-table>
        <!-- 表格结束 -->
      <!-- 展示文档开始 -->
      <el-dialog
            title="展示文件"
            :visible.sync="showFile"
            width="80vw"
            class="addDialog showDialog"
          >
      <div class="addDialogLogo">LOGO</div>
      <div class="showFileArea">
        <!-- <vpdf v-if="/^\s*$/g.test(showFileUrl)&&showFileUrl.split('.')[showFileUrl.split('.').length-1]=='pdf'" :pdfUrl="showFileUrl"></vpdf> -->
        <vword v-if="showFileType == 0" :pdfUrl="showFileUrl"></vword>
        <vpdf v-else :pdfUrl="showFileUrl"></vpdf>
      </div>
    </el-dialog>
    <!-- 展示文档结束 -->
        <!-- 分页 -->
        <!-- <el-pagination
            @current-change="handleCurrentChange"
            :current-page="table.currentPage"
            :page-size="table.packageSize"
            layout=" prev, pager, next"
            background
            class="paginations"
            :total="table.total">
          </el-pagination> -->
        <!-- 分页结束 -->
    </div>
  </template>
  
  <script>
  import beUpload from '../../components/tool/beUpload'
  import vpdf from "@/components/vpdf.vue";
  import vword from "@/components/vword.vue";
      export default {
        components: { beUpload, vpdf, vword },
        data() {
          return {
          accept:".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document",
            table:{         // 分页数据
              total:0,
              packageSize:8,
              currentPage:1
            }, 
            showFile:false,
            showFileType: 0,
            showFileUrl: "",
            tableData:[],
          }
        },
        methods:{
          //展示文件
          checkFile(url) {
            console.log(url);
            if (
              url.split(".")[url.split(".").length - 1].toLocaleUpperCase() == "PDF"
            ) {
              this.showFileUrl = url;
              this.showFileType = 1;
            } else {
              this.showFileUrl =
                "https://view.officeapps.live.com/op/view.aspx?src=" + url;
              this.showFileType = 0;
            }
            this.showFile = true;
          },
          getFile(val) {    //上传文件
            this.file = val;
            let oldData = [];
            this.tableData.forEach(item=>oldData.push(item))
            oldData.push(val)
          
            let param={
                uid:this.$store.state.userInfo.userid,
                cid:JSON.parse(localStorage.getItem('pid')),
                projectFile:JSON.stringify(oldData)
            }
            this.ajax
                  .post(this.$store.state.api+'/AddProjectFile',param)
                  .then(res=>{
                    // console.log(res);
                    if (res.data==1) {
                      this.$message.success('上传成功')
                      this.getData()
                    }else{
                      this.$message.error('上传失败')
                    }
                    
                  },err=>{
                    console.log(err);
                  })
          },
          handleCurrentChange(val) {   //当页数发生改变的时候调用获取列表数据请求
          // console.log(`当前页: ${val}`);
          this.table.currentPage=val
          this.getData()
        },
          getData(){       //获取基础信息
              let param={
                uid:this.$store.state.userInfo.userid,
                pid:JSON.parse(localStorage.getItem('pid')),
                // page:this.table.currentPage,
                // lim:this.table.packageSize
              }
              // console.log(param);
              this.ajax
                    .get(this.$store.state.api+'/SelectProjectFile',param)
                    .then(res=>{
                      let k=[]
                      res.data[0].forEach((e,i) => {
                        let { projectFile: l } = e;
                        k=JSON.parse(l)
                      });
                      this.tableData=k
                    },err=>{
                      console.log(err);
                    })
          },
          content(){
              this.$router.push('/projectSettlement1')
            },
            remark(){
              this.$router.push('/projectSettlement2')
            },
            remark2(){
              this.$router.push('/projectSettlement3')
            },
            remark4(){
              this.$router.push('/projectSettlement4')
            },
            remark5(){
              this.$router.push('/projectSettlement5')
            },
         
            back(){
            this.$router.push('/projectSettlement')
          },
        },
        mounted(){
          this.getData()
        }
      }
  </script>
  
  <style lang="less">
  .ProjectManagement4{
    .pagination{
      float: right;
      margin: 20px 55px 10px;
    }
    .addDialog {
        font-size: 18px;
        .el-dialog {
          border-radius: 5px;
          overflow: hidden;
        }
        .deleteContent {
          width: 100%;
          margin: 30px 0;
          font-size: 22px;
          color: #000;
        }
        .addDialogLogo {
          width: 60px;
          height: 30px;
          display: flex;
          justify-content: center;
          line-height: 30px;
          border-radius: 5px;
          background: #f2f2f2;
          position: absolute;
          left: 20px; top: 15px; 
        }
        .el-dialog__header {
          display: flex;
          justify-content: center;
          background: #32455b;
        }
        .el-dialog__title {
          color:#fff;
        display: flex;
        justify-content: center;
        font-size: 18px;
        position: relative;
        top: -2px;
        }
        .addDialogMid {
          box-sizing: border-box;
          padding: 0 60px 0 10px;
          .addDialogTit {
            display: flex;
            span {
              width: 80px;
              font-size: 16px;
              line-height: 40px;
              text-align: left;
            }
          }
          .addDialogTit1 {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
          }
          .addDialogTit2 {
            margin-top: 10px;
            font-size: 16px;
            color: #000;
            text-indent: 2em;
          }
          .addDialogCon {
            margin-top: 20px;
          }
        }
        .dialog-footer {
          display: flex;
          justify-content: center;
          box-sizing: border-box;
          // .btn5 {
          //   font-size: 16px;
          // }
        }
      }
   

   

    .pmInp{
      width: 100%;
      display: flex;
      margin: 10px 0 10px 0;
      justify-content: flex-end;
      .btn{
        height: 30px;
        width: 100px;
        font-size: 16px !important;
        background: #477edd;
        margin-left: 10px;
      }
    }
    
  }
   
  </style>