<template>
  <!-- 成果展示 -->
  <div class="resultsShow">
    <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" placeholder="我的项目">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>

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

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

      <div class="selectsBlock">
        <span class="selectLabel">结题状态</span>
        <el-select v-model="pavalues.value4" placeholder="请选择">
          <el-option
            v-for="item in options4"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>

      <div class="selectsBlock">
        <span class="selectLabel">负责人</span>
        <el-select v-model="pavalues.value3" placeholder="请选择">
          <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      </div>
      <div class="ProjectManagementQuery">
        <el-input v-model="input" style="340px" placeholder="请输入内容"></el-input>
        <el-button type="primary" class="btn" 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">
          {{ item.finish }}
        </div>
        <img :src='item.pic' alt="">
        <div class="classBlock1">
            <div class="classBlock2">{{ item.projectName }}</div>
            <div class="classBlock3">
              <div>{{ item.person }}</div>
              <div>{{ item.school }}</div>
            </div>
            <div class="classBlock3 classBlock4">
              <div style="color:#9e9e9e">{{ item.blogs }}</div>
              <div>项目编号{{ item.num }}</div>
            </div>
        </div>
        <div >
              <el-button type="primary" class="bt1" size="mini" @click="rsBtn">项目成果展示</el-button>
        </div>
      </div>
    </div>
    <!-- 展示框列表结束 -->
    <div style="display: flex;width: 90%;justify-content: flex-end;margin-top: 30px;">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="1">
      </el-pagination>
    </div>
    

  </div>
</template>

<script>
    export default {
      data() {
        return {
          input:'',
          items:[
              {
                finish:'已结题',
                pic:require('@/assets/img/cocoClass.png'),
                projectName:'濠江可可派社团课',
                person:'刘丹璐',
                school:'深圳技师学院',
                blogs:'个人博客',
                num:'JK123245679'
              },
              {
                finish:'未结题',
                projectName:'流浪猫救助屋',
                person:'刘丹璐',
                pic:require('@/assets/img/catHome.png'),
                school:'深圳技师学院',
                blogs:'个人博客',
                num:'JK123245679'
              },
              {
                projectName:'人工智能领航班培训',
                finish:'已结题',
                pic:require('@/assets/img/AlCClass.jpg'),
                person:'赖甲坎',
                school:'深圳技师学院',
                blogs:'个人博客',
                num:'JK123245679'
              },
              {
                projectName:'1216演奏小星星的',
                finish:'已结题',
                pic:require('@/assets/img/color.png'),
                person:'郎朗',
                school:'深圳技师学院',
                blogs:'个人博客',
                num:'JK123245679'
              },
          ], //项目展示小方块
          options:[],
          options1:[],
          options2:[],
          options3:[],
          options4:[],
          pavalues:{
            value:'',
            value1:'',
            value2:'',
            value3:'',
            value4:'',
          }
        }
      },
      methods:{
        rsBtn(){
          this.$router.push('/resultShowDetail')
        }
     
      }
    }
</script>

<style lang="less">
.resultsShow{

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

    .classBlock{   //独立小框
      flex-shrink: 0;
      width: 310px;
      height: 300px;
      margin-right: 30px;
      margin-bottom: 15px;
      position: relative;
      overflow: hidden;
      background-color: rgb(255, 255, 255);
      box-shadow: 1px 2px 3px #ccc;
      border: 1px solid #ccc;
      border-radius: 5px;
      
      .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: 150px;
      }

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

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

    
  }
</style>