/*topic*/
<template>
  <DetailLayout :title="businessType == '1' ? '比赛题目领取' : '预演题目领取'">
    <div class="topic">
      <div class="content-top">
        <div class="top-left">
          <p><img src="@/assets/match/x.png" /> 请选择您的身份</p>
          <span>根据您所选择的身份匹配不同难度的题目</span>
        </div>
        <div class="top-right">
          <div
            class="right-btn"
            v-for="(item, index) in btnsel"
            :key="index"
            @click="togglebtn(index)"
            :class="{ activebtn: index == newindex }"
          >
            {{ item.name }}
          </div>
        </div>
      </div>

      <div v-if="listli.length == 0" class="tips">暂无数据</div>

      <div v-else class="content-bottom">
        <ul>
          <li v-for="(item, index) in listli" :key="index">
            <div class="desc">
              <h3>{{ item.title }}</h3>
              <div class="explain" @click="details(item.title)">
                说明：{{ item.content }}
              </div>
            </div>
            <div class="bottons" v-if="nowIndex == 0">
              <div
                class="botton"
                v-if="item.isJoin == '0'"
                @click="lingti(item.id)"
              >
                领取题目
              </div>
              <div
                class="botton white"
                v-else
                @click="intoprojec(item.projectId)"
              >
                进入项目
              </div>
            </div>
            <div class="bottons" v-else>
              <div
                class="botton"
                v-if="item.isJoin == '0'"
                @click="lingti(item.id)"
              >
                领取答题
              </div>
              <div
                class="botton white"
                v-else
                @click="intoprojec(item.projectId)"
              >
                进入项目
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </DetailLayout>
</template>

<script>
import DetailLayout from './components/DetailLayout'
import { request } from '@/utils/request'
import { Message } from 'element-ui' // 引入Message、MessageBox
export default {
  name: 'Topic',
  components: { DetailLayout },
  data() {
    return {
      nowIndex: '0',
      businessType: '',
      megagameId: '',
      newindex: 0,
      tabsParam: ['预演题目领取', '比赛题目领取'],
      megagameId: '',
      uid: '',
      btnsel: [
        { id: '1', name: '学生' },
        { id: '2', name: '专业' },
      ],
      listli: [],
    }
  },
  created() {
    this.megagameId = sessionStorage.getItem('megagameId')
    this.businessType = sessionStorage.getItem('businessType')
  },
  mounted() {
    // this.businessType=this.$route.query.id;
    // this.megagameId=this.$route.query.megagameId;
    this.listlt(this.businessType, '1')
  },
  methods: {
    back() {
      this.$router.replace('/matchLayout/timeline')
    },
    // 调用领题列表
    listlt(nowIndex, newindex) {
      let tonewindex = nowIndex + ''
      let tonowIndex = nowIndex + 1 + ''
      const params = {
        transCode: 'D00022',
        megaganmeId: this.megagameId,
        uid: this.$store.getters.userId,
        businessType: tonewindex,
        rank: newindex,
      }
      request(params)
        .then((res) => {
          this.listli = res.rows
        })
        .catch((err) => {})
    },

    togglebtn(index) {
      this.newindex = index
      this.listlt(this.businessType, this.newindex + 1 + '')
    },
    //领取题目
    lingti(id) {
      const loading = this.$loading({
        lock: true, //lock的修改符--默认是false
        text: 'Loading', //显示在加载图标下方的加载文案
        spinner: 'el-icon-loading', //自定义加载图标类名
        background: 'rgba(0, 0, 0, 0.7)', //遮罩层颜色
        target: document.querySelector('#table'), //loadin覆盖的dom元素节点
      })
      const params = {
        transCode: 'D00009',
        questionId: id, // 每个题目的数据id
        uid: this.$store.getters.userId,
      }
      request(params)
        .then((res) => {
          loading.close()
          this.$message.success('恭喜您，领取成功！')
          this.listlt(this.businessType, this.newindex + 1 + '')
        })
        .catch((err) => {
          loading.close()
        })
    },
    // 点击进入详情页面
    details(title) {
      let path = ''
      switch (title) {
        case '前沿-HCFDLab-风洞模型流场分析':
          path = 'topic/detailsxq'
          break
        case '前沿-HCFDLab-Agard Wing升阻力曲线分析':
          path = 'topic/detailaw'
          break
        case '前沿-Bladesign-X棱形截面悬臂梁的动态特性（模态、瞬态）分析':
          path = 'detailbzs1'
          break
        case '前沿-Bladesign-考虑初始形变（预弯/预扭）的梯形截面梁受力分析':
          path = 'detailbzs2'
          break
        case '前沿-Bladesign-具有渐变截面特性及复合材料铺层结构的简化机翼受力分析':
          path = 'detailbzs3'
          break
        case '前沿-Bladesign-弧形大梁简化机翼截面的多目标优化':
          path = 'detailbzs4'
          break

        case '前沿-Bladesign-矩形截面梁受力分析':
          path = 'topic/detailbyy'
          break
        case '前沿-HCFDLab-Mavric Wing升阻力曲线分析':
          path = 'topic/detailmw'
          break
        case '前沿-HCFDLab-AFA飞机模型流场分析':
          path = 'topic/detailafa'
          break
      }
      this.$router.push(path)
    },
    //点击进入项目
    intoprojec(projectId) {
      this.getDetails(projectId)
      this.$router.replace({
        path: '/userLayout/details',
        query: { projectId: projectId },
      })
    },
    getDetails(projectId) {
      const params = {
        transCode: 'C00031',
        projectId: projectId,
      }
      request(params)
        .then((res) => {
          this.data = res
        })
        .catch((err) => {})
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
.topic {
  @include w_h();
  font-size: 16px;
  color: $color_f;
  .content-top {
    @include flex();
    padding: 20px 0;
    .top-left {
      line-height: 1.5;
      color: #fde800;
      p {
        font-size: 20px;
      }
      span {
        padding-left: 22px;
      }
    }
    .top-right {
      @include w_h(220px);
      @include flex();
      text-align: center;
      .right-btn {
        @include w_h(100px, 40px);
        line-height: 40px;
        border: 1px solid $color_f;
        border-radius: 20px;
        overflow: hidden;
        transition: all 0.3s;
        &:hover {
          cursor: pointer;
          opacity: 0.8;
        }
      }
      .activebtn {
        background: #008dfa;
        border: #008dfa;
      }
    }
  }
  .tips {
    font-size: 28px;
    color: $color_f;
    text-align: center;
  }
  .content-bottom {
    padding: 10px 22px;
    background: rgba(255, 255, 255, 0.2);
    li {
      @include flex();
      padding: 20px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
      .desc {
        @include w_h(calc(100% - 100px));
        .h3 {
          font-size: 20px;
        }
        .explain {
          @include w_h();
          padding-top: 15px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          transition: all 0.3s;
          &:hover {
            cursor: pointer;
            opacity: 0.8;
          }
        }
      }
    }
    .bottons {
      @include w_h(100px);
      @include flex(flex-end);
      .botton {
        @include w_h(68px);
        color: #008dfa;
        transition: all 0.3s;
        &:hover {
          cursor: pointer;
          opacity: 0.8;
        }
      }
      .white {
        color: $color_f;
      }
    }
  }
}
</style>