<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/head.png'),
      studentInfo: '',
      courseList: [],//课程记录
      baseList: [],//基地记录
      signCheckCountInfo: '',//打卡和课程天数信息
      active: 0
    }
  },
  mounted () {
    let studentInfo = sessionStorage.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.mgop({
        api: 'mgop.sz.hswsy.CourseCheckDetail', // 必须
        host: 'https://mapi.zjzwfw.gov.cn/',
        dataType: 'JSON',
        type: 'POST',
        appKey: 'fuxgnukl+2001895516+edccpx', // 必须
        headers: {
          //   'isTestUrl': '1'
        },
        data: {
          "userId": this.studentInfo?.travelerNum,
          "pageIndex": 1,
          "pageSize": 999
        },
        onSuccess: 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)
          }
        },
        onFail: err => {
          console.log('err', err)
        }
      });
    },
    // 获取基地记录
    getBaseList () {
      this.mgop({
        api: 'mgop.sz.hswsy.SignDetail', // 必须
        host: 'https://mapi.zjzwfw.gov.cn/',
        dataType: 'JSON',
        type: 'POST',
        appKey: 'fuxgnukl+2001895516+edccpx', // 必须
        headers: {
          //   'isTestUrl': '1'
        },
        data: {
          "userId": this.studentInfo?.travelerNum,
          "pageIndex": 1,
          "pageSize": 999
        },
        onSuccess: 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)
          }
        },
        onFail: err => {
          console.log('err', err)
        }
      });
    },
    // 根据用户编号获取打卡和课程天数信息
    getSignCheckCountInfo () {
      this.mgop({
        api: 'mgop.sz.hswsy.SignCheckCountInfoByUserId', // 必须
        host: 'https://mapi.zjzwfw.gov.cn/',
        dataType: 'JSON',
        type: 'GET',
        appKey: 'fuxgnukl+2001895516+edccpx', // 必须
        headers: {
          //   'isTestUrl': '1'
        },
        data: {
          "userId": this.studentInfo?.travelerNum,
        },
        onSuccess: 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)
          }
        },
        onFail: err => {
          console.log('err', err)
        }
      });
    },
    // 研学码
    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.sessionStorage.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>
<style lang="scss">
.elder {
  .student_detail {
    .infomation {
      .top {
        .right {
          .name {
            font-size: 50px;
            span {
              font-size: 36px;
              line-height: 50px;
            }
          }
          .school_name {
            font-size: 36px;
          }
        }
      }
      .count_box .count_item {
        .count {
          font-size: 36px;
          span {
            font-size: 44px;
          }
        }
        .des {
          font-size: 40px;
        }
      }
      .icon_box .icon_item p {
        font-size: 40px;
      }
    }
    .list_box .list_item {
      .left{
        font-size: 40px;
        .minute{
          font-size: 36px;
        }
      }
      .right {
      button {
        font-size: 32px;
        padding: 0;
      }
      .item_title {
        font-size: 40px;
      }
    }
    }
  }
}
</style>