<template>
  <div class="bck">
    <div class="box">
      <div class="box_L">
        <div class="L_top">
          <div class="pic">
            <img src="@/assets/rank/tx.png" />
          </div>
          <div class="font_box">
            <div class="font_name" @click="switchUser">
              {{ user.travelerName }}
              <img src="@/assets/rank/qh1.png" />
            </div>
            <div class="font_sch">{{ user.schoolName }}</div>
          </div>
        </div>
        <div class="L_mid">
          <div class="mid_item">
            <div>
              <span class="strong_font">{{ scoreObj.scoreTotal }}</span>
              <span>分</span>
            </div>
            <div class="grey_font">已完成题数</div>
          </div>
          <div class="mid_item">
            <div>
              <span class="strong_font">{{ scoreObj.rate }}</span>
              <span>%</span>
            </div>
            <div class="grey_font">正确率</div>
          </div>
        </div>
        <div class="yellowFont">*积分可用于兑换各种福利</div>
      </div>

      <div class="box_R">
        <div class="box_R_item" @click="toRank">
          <div class="title">
            <div>排行榜</div>
            <span>RANKS</span>
          </div>
          <div class="imgBox">
            <img src="@/assets/rank/jb.png" />
          </div>
        </div>
        <div class="box_R_item" @click="toRecord">
          <div class="title">
            <div>刷题记录</div>
            <span>RECORD</span>
          </div>
          <div class="imgBox">
            <img src="@/assets/rank/qz.png" />
          </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="picBox" @click="toYanxue">
        <img src="@/assets/rank/wxsn2.png" />
      </div>

      <div class="flexBox" v-for="(v, i) in libraryList" :key="i">
        <div class="tipPic">
          <!-- <img :src="v.imgUrl" /> -->
          <img v-if="v.type == 1" src="@/assets/rank/qt.png" />
          <img v-if="v.type == 2" src="@/assets/rank/hj.png" />
          <img v-if="v.type == 3" src="@/assets/rank/bj.png" />
        </div>
        <div class="context">
          <div class="context_title" v-if="v.type == 1">青铜级</div>
          <div class="context_title" v-if="v.type == 2">黄金级</div>
          <div class="context_title" v-if="v.type == 3">白金级</div>
          <div class="context_grey">{{ v.text }}</div>
        </div>
        <div class="btnBox">
          <div class="btn" @click="toAns(v)">开始答题</div>
        </div>
      </div>
    </div>
    <!-- <tabbar4 active="yanxue"></tabbar4> -->
  </div>
</template>

<script>
import Tabbar4 from '@/component/Tabbar4'
export default {
  components: {
    Tabbar4,
  },
  data() {
    return {
      libraryList: [
        {
          name: '青铜级',
          type: '1',
          text: '夯实基础，稳步前进',
          imgUrl: require('@/assets/rank/qt.png'),
        },
        {
          name: '黄金级',
          type: '2',
          text: '夯实基础，稳步前进',
          imgUrl: require('@/assets/rank/hj.png'),
        },
        {
          name: '白金级',
          type: '3',
          text: '夯实基础，稳步前进',
          imgUrl: require('@/assets/rank/bj.png'),
        },
      ],
      userInfo: {},
      user: {
        travelerName: '',
        travelerNum: 0,
        schoolName: '',
      },
      //答题人-正确率
      scoreObj: {
        rate: 0,
        scoreTotal: 0,
      },
    }
  },
  methods: {
    //获取用户信息
    getUser() {
      this.userInfo = JSON.parse(localStorage.getItem('userInfo'))

      if (!this.userInfo.subUsers || this.userInfo.subUsers.length == 0) {
        return this.$toast.fail('暂无绑定出行人')
      }

      //选择了用户
      if (this.$route.query.index) {
        let index = this.$route.query.index
        localStorage.setItem('travelerNum', this.userInfo.subUsers[index].travelerNum)
        this.user = {
          travelerNum: this.userInfo.subUsers[index].travelerNum,
          travelerName: this.userInfo.subUsers[index].travelerName,
          schoolName: this.userInfo.subUsers[index].schoolName,
        }
        this.getscoreInfo()
        return
      }
      //未选择用户 - 默认第一个

      localStorage.setItem('travelerNum', this.userInfo.subUsers[0].travelerNum)

      this.user = {
        travelerNum: this.userInfo.subUsers[0].travelerNum,
        travelerName: this.userInfo.subUsers[0].travelerName,
        schoolName: this.userInfo.subUsers[0].schoolName,
      }
      this.getscoreInfo()
    },
    //切换用户
    switchUser() {
      this.$router.push({
        name: 'switchUser',
      })
    },
    //进入题库
    toAns(val) {
      this.$router.push({
        name: 'category',
        query: {
          categoryId: val.itemCategoryId,
          index: this.$route.query.index,
          type: val.type,
        },
      })
    },
    //进入刷题记录
    toRecord() {
      this.$router.push({
        name: 'brush_questions',
        query: {
          index: this.$route.query.index,
        },
      })
    },
    //进入排行榜
    toRank() {
      this.$router.push({
        name: 'ans_rank',
        query: {
          index: this.$route.query.index,
        },
      })
    },
    //用户答题信息
    getscoreInfo() {
      this.yxAxios.get(`${this.kqUrl}/item/getTravelerScoreInfo?travelerNum=${localStorage.getItem('travelerNum')}`).then((res) => {
        if (res.data.code == 200) {
          this.scoreObj = res.data.data
        } else {
          this.$toast.fail(res.data.message)
        }
      })
    },
    toYanxue() {
      // this.$router.push({ name: 'YanxuePage' })
    },
  },
  mounted() {
    this.getUser()
    this.$zwlogPvGlobal({ loadTime: new Date() })
    this.$nextTick(() => {
      this.$zwlogPvGlobal({ responseTime: new Date() })
    })
  },
}
</script>

<style lang="scss" scoped>
.bck {
  position: absolute;
  width: 100vw;
  height: 30vh;
  background-image: url('../../assets/rank/wx_back.png');
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;

  .box {
    display: flex;
    justify-content: space-between;
    margin: 5vw 3vw 8vw;

    .box_L {
      width: 45vw;
      height: 360px;
      background-color: #fff;
      border-radius: 30px;
      padding: 3vw 2vw;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
      border: 1px solid #ff6868;

      .L_top {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .pic {
          display: flex;
          align-items: center;

          img {
            width: 13vw;
            height: 13vw;
          }
        }
        .font_box {
          width: 25vw;
          display: flex;
          align-content: space-between;
          flex-wrap: wrap;

          .font_name {
            font-size: 30px;
            color: #333333;

            img {
              margin-top: 5px;
              width: 30px;
              height: 25px;
            }
          }
          .font_sch {
            font-size: 27px;
            color: #999;
            white-space: nowrap; //文本强制不换行；
            text-overflow: ellipsis; //文本溢出显示省略号；
            overflow: hidden; //溢出的部分隐藏；
          }
        }
      }

      .L_mid {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .mid_item {
          width: 100%;
          text-align: center;
          font-size: 25px;

          .grey_font {
            color: #999;
            font-size: 25px;
            margin-top: 5px;
          }

          .strong_font {
            font-size: 50px;
            font-weight: bold;
          }
        }
      }

      .yellowFont {
        width: 100%;
        font-size: 24px;
        color: #ff7a1c;
        text-align: center;
      }
    }
    .box_R {
      width: 45vw;
      height: 360px;
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;

      .box_R_item {
        width: 100%;
        height: 165px;
        border-radius: 30px;
        display: flex;
        justify-content: space-between;
        padding: 20px 30px;
        box-sizing: border-box;
        background-color: #fff;

        .title {
          font-size: 30px;
          color: #000000;

          span {
            color: #999999;
            font-size: 22px;
          }
        }

        .imgBox {
          display: flex;
          align-items: center;

          img {
            width: 110px;
            height: 110px;
          }
        }
      }
    }
  }

  .card {
    width: 100%;
    min-height: 800px;
    background-color: #fff;
    border-radius: 30px;
    padding: 5vw 3vw;
    box-sizing: border-box;

    .picBox {
      width: 100%;
      margin-bottom: 30px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .flexBox {
      display: flex;
      justify-content: space-between;
      padding: 5vw 3vw;
      box-sizing: border-box;
      border-bottom: 1px solid #f1f1f1;

      .tipPic {
        width: 15vw;
        img {
          width: 16vw;
          height: 16vw;
        }
      }
      .context {
        display: flex;
        align-content: space-between;
        flex-wrap: wrap;
        padding: 5px 0;
        box-sizing: border-box;
        margin-left: 5vw;

        .context_title {
          width: 100%;
          font-size: 36px;
          color: #333333;
        }
        .context_grey {
          font-size: 30px;
          color: #999999;
        }
      }
      .btnBox {
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .btn {
          width: 180px;
          height: 70px;
          background-color: #fff2f2;
          color: #ff6868;
          padding: 10px 30px;
          box-sizing: border-box;
          font-size: 28px;
          border-radius: 30px;
          text-align: center;
        }
      }
    }
  }
}
</style>
