<template>
  <div class="student_detail">
    <div class="infomation">
      <div class="top">
        <div>
          <img class="head" :src="defaultHead" alt="">
          <div class="right">
            <p class="name">{{studentInfo.travelerName}}<span v-if="studentInfo.enrollYear">{{studentInfo.enrollYear}}级</span></p>
            <p class="school_name">{{studentInfo.schoolName}}</p>
          </div>
        </div>
        <HomeScan></HomeScan>
      </div>
      <div class="count_box">
        <div class="count_item">
          <p class="count"><span>{{signCheckCountInfo.signCount}}</span>/次</p>
          <p class="des">基地打卡次数</p>
        </div>
        <div class="line"></div>
        <div class="count_item">
          <p class="count"><span>{{signCheckCountInfo.courseDays}}</span>/天</p>
          <p class="des">课程实践</p>
        </div>
      </div>
      <div class="icon_box">
        <div class="icon_item" @click="handleYanxue">
          <img src="@/assets/home/stu_icon1.png" alt="">
          <p>研学码</p>
        </div>
        <div class="icon_item" @click="contactService">
          <img src="@/assets/home/stu_icon2.png" alt="">
          <p>专属客服</p>
        </div>
        <div class="icon_item">
          <img src="@/assets/home/stu_icon3.png" alt="">
          <p>敬请期待</p>
        </div>
      </div>
    </div>
    <div class="list_box">
      <van-tabs v-model="active" color="#21A3FF">
        <van-tab title="基地记录">
          <div class="list_item" v-for="(item,index) in baseList" :key="index">
            <div class="left">
              <p class="day">{{item.day}}</p>
              <p class="minute">{{item.minute}}</p>
            </div>
            <div class="line"></div>
            <div class="right">
              <img :src="item.baseUrl" alt="">
              <p class="item_title">{{item.baseName}} </p>
              <button class="active" v-if="item.evaluationId==0" @click="evaluateBase(item)">去评价</button>
              <button v-else @click="evaluateBaseDetail(item)">查看评价</button>
            </div>
          </div>
          <van-empty v-if="baseList.length==0" description="暂无基地记录" />
        </van-tab>
        <van-tab title="课程记录">
           <div class="list_item" v-for="(item,index) in courseList" :key="index">
            <div class="left">
              <p class="day">{{item.day}}</p>
              <p class="minute">{{item.minute}}</p>
            </div>
            <div class="line"></div>
            <div class="right">
              <img :src="item.baseUrl" alt="">
              <p class="item_title">{{item.baseName}} </p>
              <button class="active" v-if="item.evaluationId==0" @click="evaluateCourse(item)">去评价</button>
              <button v-else @click="evaluateCourseDetail(item)">查看评价</button>
            </div>
          </div>
          <van-empty v-if="courseList.length==0" description="暂无课程记录" />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import HomeScan from '@/views/Home/component/HomeScan'
export default {
  data () {
    return {
      defaultHead: require('@/assets/home/head.png'),
      studentInfo: '',
      courseList: [],//课程记录
      baseList: [],//基地记录
      signCheckCountInfo:'',//打卡和课程天数信息
      active: 0
    }
  },
  mounted () {
    let studentInfo = localStorage.getItem('StudentDetialInfo')
    this.studentInfo = JSON.parse(studentInfo)
    this.$nextTick(() => {
      if (!this.studentInfo?.travelerNum) {
        this.$toast.fail('学生信息缺失，请返回首页重试')
        return;
      }
      this.$toast.loading({
        message: '加载中...',
        duration: 0,
        forbidClick: true
      })
      this.getCourseList()
      this.getBaseList()
      this.getSignCheckCountInfo()
    })
  },
  methods: {
    // 获取课程记录
    getCourseList () {

      this.yxAxios.post(`${this.yanxueUrl}/api/StudiesWap/CourseCheckDetail/List`, {
        "userId": this.studentInfo?.travelerNum,
        "pageIndex": 1,
        "pageSize": 999
      }).then((res) => {
        this.$toast.clear()
        console.log('课程记录：', res.data)
        if (res.data.status == 1) {
          let courseList = res.data.data.data
          for(let i in courseList){
            courseList[i].day = this.Moment(new Date(courseList[i].time)).format('MM-DD')
            courseList[i].minute = this.Moment(new Date(courseList[i].time)).format('HH:mm')
          }
          this.courseList  = courseList 
          console.log(this.courseList)
        } else {
          this.$toast.fail(res.data.message)
        }
      })
    },
    // 获取基地记录
    getBaseList () {
      this.yxAxios.post(`${this.yanxueUrl}/api/StudiesWap/SignDetail/List`, {
        "userId": this.studentInfo?.travelerNum,
        "pageIndex": 1,
        "pageSize": 999
      }).then((res) => {
        this.$toast.clear()
        console.log('基地记录：', res.data)
        if (res.data.status == 1) {
          let baseList = res.data.data.data
          for(let i in baseList){
            baseList[i].day = this.Moment(new Date(baseList[i].time)).format('MM-DD')
            baseList[i].minute = this.Moment(new Date(baseList[i].time)).format('HH:mm')
          }
          console.log(baseList)
          this.baseList  = baseList 
        } else {
          this.$toast.fail(res.data.message)
        }
      })
    },
    // 根据用户编号获取打卡和课程天数信息
    getSignCheckCountInfo () {
      this.yxAxios.get(`${this.yanxueUrl}/api/StudiesWap/SignCheckCountInfo/ByUserId?userId=${this.studentInfo?.travelerNum}`).then((res) => {
        this.$toast.clear()
        console.log('天数：', res.data)
        if (res.data.status == 1) {
          this.signCheckCountInfo = res.data.data
        } else {
          this.$toast.fail(res.data.message)
        }
      })
    },
    // 研学码
    handleYanxue () {
      this.$router.push({ name: 'YanxueCode' })
    },
    // 联系客服
    contactService () {
      // if (this.detailData.mobiles) {
      //   location.href = "tel://" + this.detailData.mobiles.split(",")[0];
      // }
    },
    // 基地评价
    evaluateBase(item){
      this.$router.push({ name: 'evaluateBase',query:{baseId:item.baseId,signId:item.signId}})
    },
    // 课程评价
    evaluateCourse(item){
      let courseInfo = item;
      courseInfo.id = courseInfo.orderId
      window.localStorage.setItem('courseInfo', JSON.stringify(courseInfo))
      this.$router.push({ name: 'evaluateCourse'})
    },
    // 基地评价详情
    evaluateBaseDetail(item){
      this.$router.push({ name: 'evaluateDetail',query:{evaluationId:item.evaluationId,baseId:item.baseId}})
    },
    // 课程评价详情
    evaluateCourseDetail(item){
      this.$router.push({ name: 'evaluateDetail',query:{evaluationId:item.evaluationId}})
    }
  },
  components: {
    HomeScan
  },
}
</script>
<style lang="scss" scoped>
.student_detail {
  height: 100%;
  background: rgb(247, 247, 251);
  .infomation {
    width: 100%;
    height: 852px;
    background: url("~@/assets/home/bg_stu.png");
    background-size: 100%;
    background-position: center;
    .top {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      padding: 40px 28px;
      > div {
        display: flex;
      }
      .head {
        width: 96px;
        height: 96px;
        border-radius: 50%;
        overflow: hidden;
      }
      .right {
        width: 450px;
        height: 96px;
        margin-left: 24px;
        display: flex;
        align-content: space-around;
        flex-wrap: wrap;
        color: #fff;
        .name {
          font-size: 34px;
          font-weight: bold;
          width: 100%;
          span{
            display: inline-block;
            padding: 0 14px;
            margin-left: 14px;
            line-height: 34px;
            border-radius: 17px;
            font-size: 22px;
            background: #2D90D2;
            vertical-align: middle;
          }
        }
        .school_name {
          font-size: 26px;
        }
      }
    }
    .count_box {
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 0 24px;
      margin-top: 30px;
      .count_item {
        color: #fff;
        text-align: center;
        .count {
          font-size: 24px;
          span {
            font-size: 38px;
            font-weight: bold;
            margin-right: 6px;
          }
        }
        .des {
          margin-top: 14px;
          font-size: 28px;
        }
      }
      .line {
        width: 4px;
        height: 48px;
        background: #fff;
      }
    }
    .icon_box {
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 702px;
      height: 158px;
      background: #ffffff;
      border-radius: 16px;
      margin: 0 auto;
      margin-top: 30px;
      .icon_item {
        text-align: center;
        img {
          width: 70px;
        }
        p {
          font-size: 26px;
        }
      }
      .line {
        width: 4px;
        height: 48px;
        background: #fff;
      }
    }
  }
  .list_box {
    width: 702px;
    margin: 0 auto;
    margin-top: -300px;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    .list_item {
      position: relative;
      display: flex;
      align-items: center;
      &:first-of-type {
        margin-top: 20px;
      }
      .left {
        width: 110px;
        padding-right: 30px;
        text-align: right;
        font-size: 34px;
        .day{
          
        }
        .minute{
          font-size: 30px;
          color: #999;
        }
      }
      .line {
        width: 2px;
        height: 188px;
        background: #e5e5e5;
        border-radius: 1px;
      }
      .right {
        margin-left: 30px;
        img {
          display: inline-block;
          width: 128px;
          height: 128px;
          border-radius: 16px;
        }
        .item_title {
          display: inline-block;
          width: 360px;
          margin-left: 22px;
          font-size: 30px;
          vertical-align: top;
        }
        button {
          position: absolute;
          bottom: 30px;
          right: 20px;
          width: 144px;
          line-height: 44px;
          background: #fff;
          color: #21a3ff;
          border-radius: 8px;
          border: 2px solid #21a3ff;
          font-size: 26px;
          &.active {
            background: #21a3ff;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>