// 查看项目
<template>
  <div class="resource">
    <div class="wo_padding">
      <div class="toubu">
      <div class="toptitle">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="学生" name="1"></el-tab-pane>
          <el-tab-pane label="专业" name="2"></el-tab-pane>
        </el-tabs>
      </div>
          <div class="search">
           <el-input v-model="projectName" size="small" placeholder="请输入学生名称">
          <i slot="prefix" @click="search()" class="el-icon-search slot" />
        </el-input>
        </div>
        </div>
      <!-- 题目 学生的题目-->
       <div class="timu">
        <div class="student" v-show="studentshow">
          <p class="wunull" v-if="arr==null||arr.length==0||arr==[]">暂无数据</p>
        <div  v-else>
          <ul class="tabs">
            <li
              class="timu_title"
              v-for="(item,index) in arr"
              :key="index"
              @click="toggleTabs(index,item.questionId,item.title)"
              :class="{active:index==nowIndex}"
            >{{item.title}}</li>
          </ul> 
        </div>
        
            <p class="wunull" v-show="zanwusj">暂无数据</p>
        <!-- 头部查询 -->
        <div style="padding-bottom: 10px;">
           <p class="zuopinpaix_left">
          <span v-if="activeName==1">学生</span>
          <span v-if="activeName==2">专业</span>-
          <span>{{titlenowIndex}}</span>
          所共{{paginationConfig.total}}个作品
        </p>
        <div class="zuopinpaix_right">
          <template>
            <el-select v-model="paixuvalue" placeholder="请选择" @change="paixu()">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </div>
        </div>
        <!-- 查询列表 -->
           <!-- 列表 -->
        <div v-if="paginationConfig.total == 0" class="tips">暂无数据</div>
        <div class="bob" v-else >
          <div class="content_list">
            <div class="list" v-for="(item, index) in latestList" :key="index">
              <div class="image">
                <img :src="item.url" />
              </div>
              <div class="list_bottom">
                <div class="baogaoxiaz">
                <p class="project-name">{{ item.megagameTitle }}  </p>
                <div class="xiazai"   >
                 <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-s-order"
                  plain
                  circle
                  @click="xiazai(item.reportfile,item.reportFileName)"
                ></el-button></div></div>
                <p>{{ item.uname }}</p>
                <p>{{item.questionTitle}}</p>
                <div class="chapingfen clearfix">
                  <el-button
                    type="primary"
                    class="btn"
                    plain
                    size="small"
                    round
                    @click="lookjq(item.projectId,item.questionSolverType )"
                  >查看项目</el-button>
                  <el-button
                    v-if="item.score=='null'"
                    type="primary"
                    class="btn"
                    plain
                    size="small"
                    round
                    @click="dafenvalue=true"
                  >去打分</el-button>
                 <span v-else class="pingfen" @click="xspingfen(item.misssionId)">当前评分：{{item.score}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="pagination">
            <Pagination :pagination-config="paginationConfig" @putPagination="getPagination"></Pagination>
          </div>
        </div>
        </div>
       <div>
       <!-- 专业的题目 -->
       <p class="wunull" v-show="zanwusj">暂无数据</p>
        <div class="student" v-show="zyeshow">
          <p class="wunull" v-if="arr2==null||arr2.length==0||arr2==[]">暂无数据</p>
        <div  v-else>
          <ul class="tabs">
            <li
              class="timu_title"
              v-for="(item,index) in arr2"
              :key="index"
              @click="toggleTabs(index,item.questionId,item.title)"
              :class="{active:index==nowIndex}"
            >{{item.title}}</li>
          </ul> 
        </div>
          <!-- 查询列表 -->
             <!-- 头部查询 -->
        <div style="padding-bottom: 10px;">
           <p class="zuopinpaix_left">
          <span v-if="activeName==1">学生</span>
          <span v-if="activeName==2">专业</span>-
          <span>{{titlenowIndex}}</span>
          所共{{paginationConfig.total}}个作品
        </p>
        <div class="zuopinpaix_right">
          <template>
            <el-select v-model="paixuvalue" placeholder="请选择" @change="paixu()">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </div>
        </div>
           <!-- 列表 -->
        <div v-if="paginationConfig.total == 0" class="tips">暂无数据</div>
        <div class="bob" v-else>
          <div class="content_list">
            <div class="list" v-for="(item, index) in latestList" :key="index">
              <div class="image">
                <img :src="item.url" />
              </div>
              <div class="list_bottom">
                <div class="baogaoxiaz">
                <p class="project-name">{{ item.megagameTitle }}  </p>
                <div class="xiazai"   >
                 <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-s-order"
                  plain
                  circle
                  @click="xiazai(item.reportfile,item.reportFileName)"
                ></el-button></div></div>
                <p>{{ item.uname }}</p>
                <p>{{item.questionTitle}}</p>
                <div class="chapingfen clearfix">
                  <el-button
                    type="primary"
                    class="btn"
                    plain
                    size="small"
                    round
                    @click="lookjq(item.projectId,item.questionSolverType )"
                  >查看项目</el-button>
                  <el-button
                    v-if="item.score=='null'"
                    type="primary"
                    class="btn"
                    plain
                    size="small"
                    round
                    @click="dafenvalue=true"
                  >去打分{{item.score}}</el-button>
                  <span v-else class="pingfen" @click="dafenvalue=true">当前评分：{{item.score}}</span>
                </div>
              </div>
            </div>
            
          </div>
          <div class="pagination">
            <Pagination :pagination-config="paginationConfig" @putPagination="getPagination"></Pagination>
          </div>
        </div>
        </div>
        </div>
        </div>
    <!-- 打分弹框 -->
    <el-dialog :close-on-click-modal="false" title="打分" :visible.sync="dafenvalue" width="23%">
      <el-form>
        <div>
          <span>请输入你打入的评分：</span>
          <el-input v-model="fenzhi"></el-input>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dafenvalue= false">Cancel</el-button>
        <el-button type="info" @click="dafen()">OK</el-button>
      </div>
    </el-dialog>
  </div>
  </div>
</template>
<script>
import { request, uploadFile, getImage } from '@/utils/request'
import Pagination from "@/components/Pagination";
import { formatType, formatStatus, parseTime } from "@/utils/index";
export default {
  name: "IndexLayout",
  components: {
    Pagination
  },
  data() {
    return {
      megagameId: "",
      questionId: "",
      dafenvalue: false,
      dasainame: "",
      dasaitype: "",
      misssionId:'',
      fenzhi: "",
      reportFile:'',
      projectName: "",
      reportFileName:'',
      tabname: "",
      studentshow: true,
      zyeshow:false,
      zanwusj: false,

      url: require("@/assets/mode/mode.jpg"),
      paginationConfig: {
        hideSinglePage: false,
        page: 1,
        size: 10,
        sizeList: [10, 15, 30, 50],
        layout: "total, sizes, prev, pager, next, jumper",
        total: 0
      },
      ranklist: [],
      titlelist: [],
      latestList2:[],
      arr: [],
      arr2: [],
      titlenowIndex: "",
      activeName: "1",
      dslist: [],
      tabsParam: ["tab1", "tab2"], //（这个也可以用对象key，value来实现）
      nowIndex: 0, //默认第一个tab为激活状态
      options: [
        {
          value: "1",
          label: "最新时间"
        },
        {
          value: "2",
          label: "评分最高"
        }
      ],
      paixuvalue: "1",
      latestList: []
    };
  },
  created() {
    this.megagameId = this.$route.query.megagameId;
    if (this.megagameId != null || this.megagameId != undefined) {
      this.timulist();
    }
  },
  mounted() {
    
  },

  methods: {
   // 搜索输入
    search() {
      let name = "uname" + "," + "questionId";
      let val = this.projectName + "," + this.questionId;
      this.getResource(name, val);
    },
    // 按时间chaxun
    paixu() {
      let name = "uname" + "," + "questionId";
      let val = this.projectName + "," + this.questionId;
      this.getResource(name,val);
    },
    //tab跳转
    handleClick(tab, event) {
        // this.questionId = this.arr[0].questionId;
        //   this.titlenowIndex = this.arr[0].title;
        this.nowIndex=0;
            this.dasainame =  "questionId";
           this.getResource(this.dasainame,this.questionId);
      if (tab.name == 1) { 
         if(this.arr.length==0){
          this.studentshow = false;
           this.zyeshow = false;
          this.zanwusj=true;
        }else{
         this.studentshow = true;
        this.zyeshow = false;
             this.zanwusj=false;
           this.questionId = this.arr[0].questionId;
          this.titlenowIndex = this.arr[0].title;
            this.dasainame =  "questionId";
           this.getResource(this.dasainame,this.questionId);
        }
      }else{
        if(this.arr2.length==0){
          this.studentshow = false;
           this.zyeshow = false;
            this.zanwusj=true;
        }else{
        this.questionId = this.arr2[0].questionId;
        this.titlenowIndex = this.arr2[0].title;
        this.dasainame =  "questionId";
          this.zanwusj=false;
        this.getResource(this.dasainame,this.questionId);
        this.studentshow = false;
        this.zyeshow = true;
        }
            

      }
   
    },

    toggleTabs(index, questionId, text) {
    this.nowIndex = index;
    this.questionId=questionId
      this.dasainame =  "questionId";
      this.titlenowIndex = text;
      this.getResource(this.dasainame,this.questionId);
    },
    // 分页查询
    getPagination(data) {
      this.paginationConfig = data;
    this.dasainame =  "questionId";
    this.getResource(this.dasainame,this.questionId);
    },
    //获取题目列表
    timulist() {
      // 查询题目列表
      const params = {
        transCode: "D00008",
        megaganmeId: this.megagameId
      };
      request(params)
        .then(res => {
          res.rows.forEach(list => {
              // this.questionId = res.rows[0].questionId;
              // this.titlenowIndex = res.rows[0].title;
            if (list.rank == "1") {
            let objarr={};
              objarr.title=list.title;
              objarr.questionId=list.questionId;
              this.arr.push(objarr);
              
            } else {
              let objarr2={};
              objarr2.title=list.title;
              objarr2.questionId=list.questionId;
              this.arr2.push(objarr2);
           
            
            }
          });
          this.questionId = this.arr[0].questionId;
          this.titlenowIndex = this.arr[0].title;
            this.dasainame =  "questionId";
           this.getResource(this.dasainame,this.questionId);
        })

        .catch(err => {});
    },
    //id查列表
      getResource(name, valuse) {
      const params = {
        transCode: "D00010",
        page: this.paginationConfig.page,
        count: this.paginationConfig.size,
        proNames: name,
        proValues: valuse,
        ordertype: this.paixuvalue
      };
      request(params)
        .then(res => {
          this.paginationConfig.total = res.total;
          res.rows.forEach(resrows => {
            resrows.url = this.url;
           
          });
         this.latestList= res.rows;
         
        })
        .catch(err => {});
    },
// 查看项目
 lookjq(projectId,projectType) {
         const params = {
        transCode: 'A00006',
      }
      request(params)
        .then((res) => {
          console.log(res)
 
          this.$message.success(' 即将进入求解器')
          console.log( res.authCode);
       setTimeout(() => {
        window.open(
          this.$store.getters.cfdUrl +
            "?authCode=" +
            res.authCode +
            "&projectId=" +
           projectId +
            "&projectType=" +
            projectType,
          "_blank"
        );
      }, 1000);
        })
        .catch((err) => {})
      // this.$message.success(" 即将进入求解器");
      // setTimeout(() => {
      //   window.open(
      //     this.$store.getters.cfdUrl +
      //       "?authCode=" +
      //       res.authCode +
      //       "&projectId=" +
      //      projectId +
      //       "&projectType=" +
      //       projectType,
      //     "_blank"
      //   );
      // }, 1000);
    },
    // 评分
    xspingfen(misssionId){
   this.dafenvalue = true;
  this.misssionId=misssionId;
    },
    dafen() {  
      const params = {
        transCode: 'D00029',
         score:this.fenzhi,
        misssionId:this.misssionId,
        
      }
      console.log(this.dafen);
      request(params)
        .then((res) => {
          let name =  "questionId";
          let val = this.questionId ;
          this.getResource(name, val);
             this.dafenvalue = false;
        })
        .catch((err) => {})
    },
    // 下载报告
     getImage(id, channelNo = 'service') {
      return getImage(id)
    },
    //下载
    xiazai(reportfile,reportFileName){
      
      this.reportfile=reportfile;
      this.reportFileName=reportFileName
      console.log(111)
   let k=getImage(this.reportfile,this.reportFileName);
     this.hrefneme=k;
    window.location.href = k; 
    console.log( window.location.href);

    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
@import "@/styles/mixin.scss";
.el-input--suffix .el-input__inner {
  padding-right: 30px;
  width: 122px;
  height: 35px;
}
.wunull {
  text-align: center;
  height: 38px;
  line-height: 38px;
  color: red;
}
.page-content {
  margin: 0 auto;
}

.tips {
  text-align: center;
  font-size: 20px;
}
.resource {
  @include w_h(100%, 100%);
  background: $color_f;
  .el-table {
    color: $color_9;
    .operation:hover {
      color: #2cae00;
      cursor: pointer;
    }
  }
  .pagination {
    @include flex();
    padding: 20px 10px;
    font-size: 12px;
    color: $color_9;
  }
  .wo_padding {
    padding: 20px 50px;
    .toptitle {
      width: 96px;
      margin: 0 auto;
      overflow: hidden;
    }
    .zuopinpaix_right {
      float: right;
      margin-top: 0px;
    }
    .zuopinpaix_left {
      display: inline-block;
      margin-top: 20px;
    }
    .timu {
      min-width: 800px;
      position: relative;
      margin-bottom: 30px;
      .tabs {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 90%;
        margin: 0 auto;

        .timu_title {
            width: 200px;
          height: 41px;
          text-align: center;
          background: #f4f4f4;
           margin-bottom: 5px;
          margin-left: 10px;
          padding: 10px 16px;
          cursor: pointer;
        }
        .active {
          color: #ff7200;
        }
      }
      .el-input--small {
        width: 200px;
        position: absolute;
        right: 0;
        top: 0;
        .slot {
          font-size: 17px;
          color: #333;
          line-height: 34px;
        }
      }
    }
    .content_list {
      width: 100%;
      height: 90%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      overflow-y: auto;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;

      .list {
        width: 263px;
        height: 444px;
        position: relative;
        margin: 5px;
        // padding: 10px;
        background: #fff;
        -webkit-box-shadow: 0px 1px 16px 0px rgba(4, 0, 0, 0.1);
        box-shadow: 0px 1px 16px 0px rgba(4, 0, 0, 0.1);
        // @include w_h(18.5%);
        // margin: 12px 8px;
        // text-align: center;
        // background: $color_f;
        // box-shadow: 0px 1px 16px 0px rgba(4, 0, 0, 0.1);
        // border-radius: 5px;
        // overflow: hidden;
        .image {
          @include w_h(100%, 264px);
          @include flex(center);
          margin: 0 auto;
          overflow: hidden;
          img {
            margin: 5px 0;
            @include w_h(100%);
            height: 264px;
            transition: all 0.3s;
          }
        }

        p {
          @include w_h(100%);
          font-size: 12px;
          color: $color_9;
          text-align: left;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          transition: all 0.3s;
        }
        .list_bottom {
          padding: 24px 20px;
        }
        .project-name {
          @include w_h(100%);
          font-size: 18px;
          line-height: 26px;
          color: $color_3;
        }
        &:hover {
          cursor: pointer;
          p {
            color: #ee6a74;
          }
          img {
            transform: scale(1.2);
          }
        }
        p {
          font-size: 16px;
          color: $color_9;
          line-height: 26px;
        }
        .chapingfen {
          .btn {
            float: left;
          }
          .pingfen {
            color: $color_3;
            font-size: 16px;
            font-weight: 600;
            line-height: 27px;
            float: right;
          }
        }
      }
    }
  }
}
.bob {
  width: 100%;
  height: 684px;
  overflow: hidden;
}
.toubu{
  position: relative;
  .search{
    width: 200px;
    position: absolute;
    right: 0;
    top:10px;
    .el-icon-search {
      margin-top: 5px;
    font-size: 20px;
    }
  }
}
.timu_title{
  // width: 74px;
  // height: 50px;
  overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

}
.resource .pagination{
  padding: 0;
}
.baogaoxiaz{
  position: relative;
  .xiazai{
    position: absolute;
    right: -16px;
    top: 0;
  }
}
</style>