<template>
  <!-- 成果展示 -->
  <div class="resultsShow" v-loading="loading">
    <div class="pAHeader">
      <div class="pAHeader1">成果展示</div>
    </div>
    <hr>
    
    <!-- 搜索栏开始 -->
    <div class="selectInp">
      <div class="manageSelects">
      <div class="selectsBlock">
        <span class="selectLabel">项目筛选</span>
        <el-select v-model="pavalues.value" @change="getData" placeholder="我的项目">
          <el-option label="所有项目" value=""/>
          <el-option
            v-for="item in options"
            :key="item.courseId"
            :label="item.title"
            :value="item.courseId">
          </el-option>
        </el-select>
      </div>

      <div class="selectsBlock">
        <span class="selectLabel">部门</span>
        <el-select v-model="pavalues.value1" @change="getData" placeholder="请选择">
          <el-option label="所有部门" value=""/>
          <el-option
            v-for="item in options1"
            :key="item.classid"
            :label="item.name"
            :value="item.classid">
          </el-option>
        </el-select>
      </div>

      <div class="selectsBlock">
        <span class="selectLabel">分类</span>
        <el-select v-model="pavalues.value2" @change="getData" placeholder="请选择">
          <el-option label="所有分类" value=""/>
          <el-option
            v-for="item in options2"
            :key="item.typeid"
            :label="item.name"
            :value="item.typeid">
          </el-option>
        </el-select>
      </div>

      <div class="selectsBlock">
        <span class="selectLabel">负责人</span>
        <el-select v-model="pavalues.value3" @change="getData" placeholder="请选择">
          <el-option label="所有负责人" value=""/>
          <el-option
            v-for="item in options3"
            :key="item.pro_leader"
            :label="item.pro_leader"
            :value="item.pro_leader">
          </el-option>
        </el-select>
      </div>
      <div class="selectsBlock">
        <span class="selectLabel">年份</span>
        <el-select v-model="pavalues.value4" @change="getData" placeholder="请选择">
          <el-option label="所有年份" value=""/>
          <el-option
            v-for="item in options4"
            :key="item.time"
            :label="item.time+'年'"
            :value="item.time">
          </el-option>
        </el-select>
      </div>
      </div>
      <div class="ProjectManagementQuery">
        <el-input v-model="input" @change="getData" style="width:240px" placeholder="请输入内容"></el-input>
        <el-button type="primary" class="btn" @click="getData" size="mini">查询</el-button>
      </div>
    </div>
    <!-- 搜索栏结束 -->
    
    
    <!-- 循环展示框列表开始 -->
    <div class="classBlocks core_dialogue">
      <div class="classBlock" v-for="(item,index) in items" :key="index">
        <div class="projectBlockPosition">
          已结题
        </div>
        <img :src='item.image' alt="">
        <div class="classBlock1">
            <div class="classBlock2">{{ item.title }}</div>
            <div class="classBlock3">
              <div>{{ item.pro_leader }}</div>
              <div>{{ item.name }}</div>
            </div>
            <div class="classBlock3 classBlock4">
              <div style="color:#9e9e9e">{{ item.typeName }}</div>
              <div>项目编号{{ index }}</div>
            </div>
        </div>
        <div style="">
              <el-button type="primary" class="bt1" size="mini" @click="rsBtn(item['courseId'],item['typeid'])">项目成果展示</el-button>
        </div>
      </div>
    </div>
    <!-- 展示框列表结束 -->






      <!-- 分页 -->
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page="Page.currentPage"
          :page-size="Page.lim"
          layout=" prev, pager, next"
          background
          class="paginations"
          :total="Page.total">
        </el-pagination>
      <!-- 分页结束 -->
    

  </div>
</template>

<script>
    export default {
      data() {
        return {
          input:'',
          items:[], //项目展示小方块
          options:[],
          options1:[],
          options2:[],
          options3:[],
          options4:[],
          loading:false,
          pavalues:{
            value:'',
            value1:'',
            value2:'',
            value3:'',
            value4:new Date().getFullYear().toString(),
          },
          Page:{
            currentPage:1,
            total:0,
            lim:8
          }
        }
      },
      methods:{
        handleCurrentChange(val) {   //当页数发生改变的时候调用获取列表数据请求
          // console.log(`当前页: ${val}`);
          this.Page.currentPage=val
          this.getData()
        },
        rsBtn(pid,tid){
          // console.log(pid,tid)
          window.open(`/resultShowDetail?pid=${pid}&tid=${tid}`)
        },
        getData(){        //获取渲染数据
          this.loading = true;
          let param={
            uid:this.$store.state.userInfo.userid,  //当前账号id
            pid:this.pavalues.value,  //项目筛选
            did:this.pavalues.value1,  //部门
            tid:this.pavalues.value2,    //分类
            leader:this.pavalues.value3,  //负责人
            year:this.pavalues.value4,
            textInp:this.input,
            page:this.Page.currentPage,  //当前页
            lim:this.Page.lim,  //限制获取几条数据
          }
          this.ajax    
            .get(this.$store.state.api+'/GetProjectIsConclusion',param)
              .then(res=>{
                let data = res.data;

                console.log(data)
                if (data[0].length==0 && data[5][0]['total'] != 0&&this.Page.currentPage!=1) {
                  this.Page.currentPage=1
                  return this.getData()
                }
                this.items = data[0];
                this.options = data[1];
                this.options1 = data[2];
                this.options2 = data[3];
                this.options3 = data[4];
                this.options4 = data[6];
                if(this.options4.filter(item=>item['time']==new Date().getFullYear().toString()).length==0){
                  this.options4.push({time:new Date().getFullYear().toString()})
                }
                this.Page.total = data[5][0]['total']

                this.loading = false;
              },err=>{
                console.log(err);
              })  
        }
     
      },
      watch:{
          input:{
              handler(){
                immediate:true
                deep:true
                this.getData()
              }
          }
      },
      mounted(){
        this.getData();
      }
    }
</script>

<style lang="less">
.resultsShow{

  .pagination{
    float: right;
    margin: 0px 85px 10px;
  }

  .classBlocks{   //循环列表大框
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    overflow:auto;

    .classBlock{   //独立小框
          flex-shrink: 0;
          overflow: hidden;
          position: relative;
          margin-right: 20px;
          margin-bottom: 5px;
          width: 320px;height: 260px;
          background-color: rgb(255, 255, 255);
          box-shadow: 1px 2px 3px #ccc;
          border: 1px solid #ccc;
          border-radius: 5px;
          display: flex;
          flex-direction: column;
      .projectBlockPosition{    //完成状态
          border-radius: 30px;
          position: absolute;
          top: 5px;
          left: 5px;
          width: 80px;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #000;
          opacity: 0.7;
          font-size: 16px;
          color:#fff;
      }
      img{
        width: 100%;height: 120px;
        object-fit: cover;
      }

      .classBlock1{   //中间栏
        margin-bottom: 10px;
        box-sizing: border-box;
        padding: 0 5px;
        margin-top: 5px;

        .classBlock2{   //项目名称
              margin-left: 5px;
              margin-bottom: 4px;
              margin-top: 4px;
              text-align: left;
              font-size: 18px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
        }
        .classBlock3{   //名字、学院
      
          box-sizing: border-box;
              padding: 0 5px;
              font-size: 16px;
              width: 100%;
              margin-top: 4px;
              display: flex;
              justify-content: space-between;
        }
        .classBlock4{
          margin-top: 4px;
        }
      }
      .bt1{   //项目成果展示按钮
        width: 95%;
        background: #5190fd;
        height: 40px;
        margin-left: 8px;
        font-size: 14px;
      }
    }
  }
  
   

    
  }
</style>