<template>
  <div class="courseDetail">
    <div class="header">
      <van-swipe class="my-swipe" indicator-color="white" v-if="detailData.coverList && detailData.coverList.length > 0">
        <van-swipe-item v-for="(n, i) in detailData.coverList" :key="i">
          <video
            v-if="n.cover_url.indexOf('.mp4') > -1"
            id="video"
            :src="n.cover_url"
            poster=""
            controls="controls"
            windowlessvideo="true"
            playsinline="true"
            webkit-playsinline="true"
            x5-playsinline="true"
            x-webkit-airplay="allow"
            width="100%"
            height="260px"
            type="video/mp4"
          ></video>
          <img v-if="n.cover_url.indexOf('.mp4') == -1" :src="n.cover_url" />
        </van-swipe-item>
      </van-swipe>
      <img v-else src="../assets/defCoure.jpg" alt="" />
    </div>
    <div class="content">
      <div class="title">
        <h3>{{ detailData.course_name }}</h3>
        <div class="rightCorse">
          <p>
            <b>{{ detailData.courseScore == 0 ? '0.0' : detailData.courseScore }}</b
            ><b>分</b>
          </p>
          <p><van-rate v-model="detailData.courseScore" readonly allow-half void-icon="star" void-color="#eee" /></p>
        </div>
      </div>
      <div class="courseInfo">“{{ detailData.course_info }}”</div>
      <div class="labels oh">
        <div class="fl">
          <template v-for="(n, i) in detailData.course_labels">
            <span v-if="n" :key="i">{{ n }}</span>
          </template>
        </div>
      </div>
      <div class="popularity">
        <van-icon name="medal" />
        <span>课程人气榜第{{ detailData.rank }}名</span>
        <van-icon name="arrow" />
      </div>
      <div class="area">
        <van-icon name="location" />
        <span>{{ detailData.address }}</span>
        <van-icon name="arrow" />
      </div>
      <div class="phone">
        <van-icon name="phone" />
        <template v-for="(n, i) in detailData.mobiles">
          <span v-if="n" :key="i"
            ><a :href="'tel:' + n">{{ n }}</a></span
          >
        </template>
      </div>
      <hr />
      <div class="days">
        <h3>预约排期</h3>
        <ul>
          <template v-for="(n, i) in detailData.courseTimeList">
            <li v-if="n.day" class="" :key="i">
              <span>{{ n.day + ' ' + n.time }}</span>
            </li>
          </template>
        </ul>
        <p>课程日期仅供参考,详情咨询基地</p>
      </div>
      <hr />
      <div ref="pronbit" :class="tabTop ? 'tabTop' : ''">
        <van-tabs v-model="tabActive" @click="tabClick">
          <van-tab title="课程目标" name="kcjs"></van-tab>
          <van-tab title="课程表" name="kcb"></van-tab>
          <van-tab title="课程内容" name="kcnr"></van-tab>
          <van-tab title="课程须知" name="kcxz"></van-tab>
        </van-tabs>
      </div>
      <h3 class="positionTitle" id="kcjs"><b>课程目标</b><u></u></h3>
      <div class="courseCont" v-html="detailData.introduction"></div>
      <hr />
      <h3 class="positionTitle" id="kcb"><b>课程表</b><u></u></h3>
      <div class="courseCard">
        <div class="cardTitle">
          <span
            @click="clickCardDay(i)"
            :class="cardActive == i ? 'active' : ''"
            v-for="(n, i) in detailData.courseScheduleList"
            :key="n.day"
            >第{{ n.day }}天</span
          >
        </div>
        <div class="cardCont">
          <table cellspacing="0" cellpadding="10">
            <tbody ref="courseCard"></tbody>
          </table>
        </div>
      </div>
      <hr />
      <h3 class="positionTitle" id="kcnr"><b>课程内容</b><u></u></h3>
      <ul class="courseContent">
        <li v-for="(n, i) in detailData.courseContentList" :key="n.id">
          <span class="left">{{ n.title }}</span>
          <h3>{{ n.content }}</h3>
          <div class="item" v-for="(k, j) in n.courseFileList" :key="i + '' + j">
            <div>
              <video
                v-if="k.url && k.url.indexOf('.mp4') > -1"
                id="video"
                :src="k.url"
                poster=""
                controls="controls"
                windowlessvideo="true"
                playsinline="true"
                webkit-playsinline="true"
                x5-playsinline="true"
                x-webkit-airplay="allow"
                width="100%"
                height="260px"
                type="video/mp4"
              ></video>
            </div>
            <div>
              <img v-if="k.url && k.url.indexOf('.mp4') == -1" :src="k.url" />
            </div>
            <!-- <p><b>{{(j+1)+'.'+k.name}}</b><span>{{getFileFormat(k.name)+getFileSize(k.size)}}</span></p>
						<p>{{n.teacherName}} | {{k.lookCount}}预览</p> -->
          </div>
        </li>
      </ul>
      <hr />
      <h3 class="positionTitle" id="kcxz"><b>课程须知</b><u></u></h3>
      <div class="courseNotice" v-html="detailData.notice"></div>
      <hr />
      <div class="evaluate">
        <h3>大家的评价</h3>
        <div class="spans">
          <span @click="evaluateTab(0)">全部</span>
          <span @click="evaluateTab(1)">最新</span>
        </div>
        <ul class="move">
          <li v-for="(n, i) in EvaluationList" :key="i">
            <div class="head">
              <img :src="n.faceUrl ? n.faceUrl : require('../assets/boy.png')" alt="" />
              <div class="name">
                <h5>{{ n.name }}</h5>
                <p>{{ n.intime.substring(0, 10) }}</p>
              </div>
            </div>
            <div class="contBox">
              {{ n.evaluation }}
            </div>
            <div class="imgs">
              <img v-for="(k, j) in n.imgList" :key="j" :src="n" alt="" />
            </div>
          </li>
          <p v-if="EvaluationList.length === EvaluationCount && EvaluationList.length > 0" class="noMove">没有更多了</p>
          <van-empty
            class="custom-image"
            image="https://img.yzcdn.cn/vant/custom-empty-image.png"
            description="暂无评价"
            v-if="EvaluationList.length == 0"
          />
        </ul>
        <div class="appendMore" v-if="EvaluationList.length < EvaluationCount" @click="evaluationMore()">查看更多</div>
      </div>
      <hr />
      <AllLoveGo></AllLoveGo>
    </div>
    <div class="Collection oh" v-if="isWeb">
      <div class="box">
        <div class="icon" @click="goBaseDetail(detailData.baseId)">
          <p><van-icon name="wap-home-o" /></p>
          <p>基地</p>
        </div>
        <div class="icon">
          <p><van-icon name="service-o" /></p>
          <p>电话咨询</p>
        </div>
      </div>
      <div class="box">
        <span v-if="userInfo" @click="AddMyWish"
          ><van-icon :name="detailData.isWish == 0 ? 'like-o' : 'like'" /><b>{{ detailData.isWish == 0 ? '预约' : '已预约' }}</b></span
        >
        <span v-else
          ><router-link to="/LoginPublic"><b>去登录</b></router-link></span
        >
      </div>
    </div>
  </div>
</template>

<script>
import AllLoveGo from '../components/AllLoveGo.vue'
export default {
  components: {
    AllLoveGo,
  },
  data() {
    return {
      userInfo: '',
      courseId: 0,
      cardActive: 0,
      starsValue: 3.5,
      tabActive: 0,
      detailData: '',
      tabTop: false,
      tabWeek: [],
      WeekCard: [],
      EvaluationCount: '',
      EvaluationList: [],
      EvaluationPage: 1,
      isWeb: true,
      evaluateType: 0,
    }
  },
  created() {
    if (window.innerWidth > 900) {
      this.isWeb = false
    }
    var userInfo = localStorage.getItem('userInfo')
    if (userInfo) {
      this.userInfo = JSON.parse(userInfo)
    }
    this.courseId = this.$route.query.id
    this.GetCourseDetail(this.courseId)
    this.GetCourseEvaluationList(this.courseId, 1)
  },
  // mounted() {
  // 	window.addEventListener('scroll',this.handleScrollx)
  // },
  // destroyed() {
  // 	window.removeEventListener("scroll",  this.handleScrollx);
  // },
  methods: {
    goBaseDetail(id) {
      this.$router.push({ path: '/BaseDetail', query: { id: id } })
    },
    getFileFormat(name) {
      var t = ''
      if (name) {
        t = name.split('.')[1]
        t = t.toLowerCase()
        if (t == 'doc' || t == 'docx' || t == 'xls' || t == 'xlsx' || t == 'ppt' || t == 'pptx' || t == 'txt') {
          t = '文档'
        } else if (t == 'mp4') {
          t = '视频'
        }
      }
      return t
    },
    getFileSize(size) {
      var s = size / 1048576
      return s.toFixed(1)
    },
    handleScrollx() {
      var top = this.$refs.pronbit.getBoundingClientRect().top
      if (top < 0) {
        this.tabTop = true
      } else {
        this.tabTop = false
      }
    },
    AddMyWish() {
      if (this.detailData.isWish == 0) {
        var that = this
        this.$toast.loading({
          message: '请求中...',
        })
        this.http
          .AddMyWish({
            courseId: this.detailData.id,
            userId: this.userInfo.centerNo,
          })
          .then(function (res) {
            that.$toast.clear()
            if (res.status == 1) {
              that.$toast.success('加入成功')
              that.detailData.isWish = 1
            }
          })
      }
    },
    tabClick(name, title) {
      // 找到锚点
      let anchorElement = document.getElementById(name)
      // 如果对应id的锚点存在，就跳转到锚点
      if (anchorElement) {
        anchorElement.scrollIntoView()
      }
    },
    evaluateTab(type) {
      this.evaluateType = type
      this.EvaluationPage = 1
      this.EvaluationList = []
      this.GetCourseEvaluationList(this.courseId, this.EvaluationPage)
    },
    evaluationMore() {
      this.EvaluationPage++
      this.GetCourseEvaluationList(this.courseId, this.EvaluationPage)
    },
    GetCourseEvaluationList(id, page) {
      var that = this
      this.http
        .GetCourseEvaluationList({
          courseId: id,
          pageIndex: page,
          isToday: this.evaluateType,
          pageSize: 5,
        })
        .then(function (res) {
          if (res.status == 1) {
            that.EvaluationCount = res.data.count
            that.EvaluationList = that.EvaluationList.concat(res.data.items)
          }
        })
    },
    GetCourseDetail(id) {
      var that = this
      this.http
        .GetCourseDetail({
          id: id,
          userId: 0,
cs: this.projectCity,
        })
        .then(function (res) {
          if (res.status == 1) {
            var mobiles = res.data.mobiles
            if (mobiles) {
              mobiles = mobiles.split(',')
              res.data.mobiles = mobiles
            } else {
              res.data.mobiles = []
            }
            var baseLabels = res.data.course_labels
            if (baseLabels) {
              baseLabels = baseLabels.split(',')
              res.data.course_labels = baseLabels
            } else {
              res.data.course_labels = []
            }
            that.detailData = res.data
            that.getWeekCard(0)
          }
        })
    },
    clickCardDay(index) {
      this.cardActive = index
      this.getWeekCard()
    },
    getWeekCard() {
      var data = this.detailData.courseScheduleList[this.cardActive].courseScheduleList
      var morning = []
      var afternoon = []
      var night = []
      data.forEach(function (k, j) {
        if (k.type == 1) {
          morning.push(k)
        } else if (k.type == 2) {
          afternoon.push(k)
        } else {
          night.push(k)
        }
      })
      var strMorning = '',
        strAfternoon = '',
        strNight = ''
      if (morning.length > 0) {
        strMorning = `<tr>
								<td rowspan="${morning.length}">上午</td>
								<td style="text-align: left;">${morning[0].content ? morning[0].content : '无安排'}</td>
							</tr>`
        morning.forEach(function (k, j) {
          if (j > 0) {
            strMorning += `<tr>
								<td style="text-align: left;">${k.content ? k.content : '无安排'}</td>
							</tr>`
          }
        })
      }
      if (afternoon.length > 0) {
        strAfternoon = `<tr>
								<td rowspan="${afternoon.length}">下午</td>
								<td style="text-align: left;">${afternoon[0].content ? afternoon[0].content : '无安排'}</td>
							</tr>`
        afternoon.forEach(function (k, j) {
          if (j > 0) {
            strAfternoon += `<tr>
								<td style="text-align: left;">${k.content ? k.content : '无安排'}</td>
							</tr>`
          }
        })
      }
      if (night.length > 0) {
        strNight = `<tr>
								<td rowspan="${night.length}">晚上</td>
								<td style="text-align: left;">${night[0].content ? night[0].content : '无安排'}</td>
							</tr>`
        night.forEach(function (k, j) {
          if (j > 0) {
            strNight += `<tr>
								<td style="text-align: left;">${k.content ? k.content : '无安排'}</td>
							</tr>`
          }
        })
      }
      this.$refs.courseCard.innerHTML = strMorning + strAfternoon + strNight
    },
    getNull(t) {
      return t ? t : ''
    },
  },
}
</script>

<style lang="stylus" scoped>
.header {
  img {
    width: 100%;
  }
}

.content {
  .noMove {
    text-align: center;
    padding: 20px 0;
    color: #ccc;
  }

  .appendMore {
    background-color: #F7F7F7;
    border-radius: 10px;
    text-align: center;
    padding: 30px 0;
    color: #64B1FF;
    font-size: 1.2rem;
    margin-bottom: 20px;
  }

  .courseInfo {
    color: #20D28D;
    padding: 10px 0;
  }

  .tabTop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: white;
  }

  padding: 40px;
  box-sizing: border-box;

  .title {
    padding-right: 160px;
    box-sizing: border-box;
    position: relative;

    h3 {
      font-size: 2rem;
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      margin: 0;
      min-height: 90px;
    }

    .rightCorse {
      position: absolute;
      text-align: center;
      right: 0;
      top: 0;

      p {
        margin: 0;
      }

      p:first-child {
        color: #0EDBA1;
        font-size: 1.8rem;

        b {
          display: inline-block;
          vertical-align: middle;
        }

        b:first-child {
          font-size: 2.4rem;
        }
      }

      p:last-child {
        font-size: 1.2rem;
      }
    }
  }

  .labels {
    margin-top: 20px;

    .fl {
      span {
        display: inline-block;
        margin-right: 20px;
        background-color: #D0F8ED;
        border-radius: 6px;
        padding: 6px 10px;
        color: #00C08A;
      }
    }

    .fr {
      color: #0EDBA1;
      padding-right: 10px;
    }
  }

  .popularity {
    margin-top: 20px;
    padding: 10px 40px;
    background-color: #FBF7F1;
    box-sizing: border-box;
    position: relative;
    color: #B78E4E;
    font-size: 1.4rem;
    border-radius: 6px;

    i {
      position: absolute;
      top: 16px;
    }

    i:first-child {
      left: 10px;
    }

    i:last-child {
      right: 10px;
    }
  }

  .area {
    margin-top: 20px;
    padding: 10px 40px;
    box-sizing: border-box;
    position: relative;
    font-size: 1.4rem;

    i {
      position: absolute;
      top: 16px;
    }

    i:first-child {
      left: 10px;
      color: #06CB67;
    }

    i:last-child {
      right: 10px;
    }
  }

  .phone {
    margin-top: 20px;
    padding: 10px 40px;
    box-sizing: border-box;
    position: relative;
    font-size: 1.4rem;

    span {
      a {
        color: #000000;
      }
    }

    i {
      position: absolute;
      top: 16px;
    }

    i:first-child {
      left: 10px;
      color: #41A8FF;
    }
  }

  hr {
    height: 20px;
    background-color: #EEEEEE;
    border: none;
  }

  .courseCont {
    padding: 40px 0;
    font-size: 1.4rem;
    color: #222222;

    p {
      span {
        img {
          width: 100% !important;
        }
      }
    }
  }

  .classList {
    li {
      margin-top: 40px;
      padding-left: 290px;
      position: relative;
      min-height: 270px;

      img {
        width: 270px;
        height: 270px;
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 10px;
      }

      h3 {
        font-size: 1.8rem;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin: 0;
      }

      p {
        margin: 0;
        margin-top: 10px;
        font-size: 1.4rem;
        color: #919191;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 25;
        overflow: hidden;
      }
    }
  }

  .gushi {
    .gslabel {
      span {
        display: inline-block;
        margin-right: 20px;
        padding: 6px 10px;
        background-color: #D2FCED;
        font-size: 1.2rem;
        border-radius: 6px;
      }
    }

    ul {
      overflow: hidden;

      li {
        float: left;
        width: 50%;
        margin-top: 20px;
        box-sizing: border-box;

        img {
          width: 100%;
          border-radius: 10px;
        }

        h3 {
          font-size: 1.6rem;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          margin: 0;
        }

        div {
          position: relative;
          padding: 10px 0;

          img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
          }

          span.name {
            display: inline-block;
            vertical-align: middle;
            color: #7E7F81;
            font-size: 1.2rem;
          }

          div.zan {
            position: absolute;
            right: 20px;
            bottom: 6px;
            font-size: 1.2rem;
            color: #7E7F81;

            i {
              font-size: 1.4rem;
              vertical-align: top;
            }

            span {
              display: inline-block;
              vertical-align: top;
            }
          }
        }
      }

      li:nth-child(2n) {
        padding-left: 20px;
      }

      li:nth-child(2n+1) {
        padding-right: 20px;
      }
    }
  }

  .positionTitle {
    margin: 40px 0;
    font-size: 2rem;
    position: relative;

    b {
      position: relative;
      z-index: 100;
    }

    u {
      width: 160px;
      height: 16px;
      border-radius: 100px;
      background-image: linear-gradient(to right, #3FCC95, #ffffff);
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }

  .days {
    padding: 40px 0;

    h3 {
      font-size: 1.6rem;
      color: #222222;
      margin: 0;
    }

    ul {
      overflow: hidden;

      li {
        float: left;
        width: 50%;
        text-align: center;
        margin-top: 20px;

        span {
          border-radius: 10px;
          display: inline-block;
          padding: 6px 20px;
          background-color: #D0F8ED;
          color: #1EC798;
          font-size: 1.2rem;
        }
      }

      li.no {
        span {
          background-color: #ECECEC;
          color: #767676;
          text-decoration: line-through;
        }
      }
    }

    p {
      color: #1DD995;
      position: relative;
      margin-top:10px;
      padding-left: 40px;
      font-size: 1.4rem;
    }

    p::after {
      position: absolute;
      content: '';
      top: 10px;
      left: 10px;
      width: 20px;
      height: 20px;
      border-radius: 100px;
      background: linear-gradient(138deg, rgba(41, 229, 118, 1) 0%, rgba(20, 207, 176, 1) 100%);
    }
  }

  .evaluate {
    padding: 20px 0;

    h3 {
      color: #222222;
      font-size: 1.6rem;
    }

    .spans {
      padding: 20px 0;

      span {
        display: inline-block;
        padding: 6px 20px;
        border-radius: 100px;
        margin-right: 20px;
        background-color: #D2FCED;
        color: #444444;
      }
    }

    ul {
      position: relative;

      li:not(:last-child) {
        border-bottom: 2px solid #eee;
      }

      li {
        margin-top: 20px;

        .head {
          position: relative;
          box-sizing: border-box;
          padding: 20px 0;

          img {
            width: 90px;
            height: 90px;
            display: inline-block;
            vertical-align: middle;
            border-radius: 50%;
            margin-right: 20px;
          }

          .name {
            display: inline-block;
            vertical-align: middle;

            h5 {
              font-size: 1.4rem;
              color: #494949;
              margin: 0;
            }

            p {
              color: #9D9D9D;
              font-size: 1.2rem;
              margin: 0;
            }
          }
        }

        .contBox {
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }

        .imgs {
          padding: 20px 0;

          img {
            display: inline-block;
            width: 160px;
            height: 160px;
            margin-right: 20px;
          }
        }
      }
    }
  }

  .courseCard {
    .cardTitle {
      padding: 20px;

      span {
        display: inline-block;
        margin-right: 20px;
        color: #A4A7AC;
      }

      span.active {
        color: #43CD97;
      }
    }

    .cardCont {
      table {
        border-radius: 10px;
        width: 100%;
        border: 2px solid #72DAB1;

        td {
          border: 2px solid #72DAB1;
          text-align: center;
        }
      }
    }
  }

  .courseContent {
    li:not(:last-child) {
      border-bottom: 2px solid #eee;
    }

    li:first-child {
      .left {
        color: #FA9B00;
        border: 2px solid #FA9B00;
        background-color: #FEF4D9;
      }
    }

    li:nth-child(3n+1) {
      .left {
        color: #FA9B00;
        border: 2px solid #FA9B00;
        background-color: #FEF4D9;
      }
    }

    li:nth-child(3n-1) {
      .left {
        color: #FA008C;
        border: 2px solid #FA008C;
        background-color: #FFEFFC;
      }
    }

    li:nth-child(3n) {
      .left {
        color: #0076FA;
        border: 2px solid #0076FA;
        background-color: #EFFFFF;
      }
    }

    li {
      position: relative;
      margin-top: 40px;
      padding-bottom: 20px;

      .left {
        position: absolute;
        top: 0;
        left: 0;
        width: 120px;
        font-size: 1.3rem;
        text-align: center;
        border-radius: 6px;
        padding: 6px;
        box-sizing: border-box;
        font-weight: 600;
      }

      h3 {
        color: #202228;
        font-size: 1.6rem;
        font-weight: 400;
        margin: 0;
        padding-left: 160px;
        word-break: break-all;
      }

      .item {
        margin-top: 20px;

        img {
          width: 100%;
        }

        p {
          margin: 0;
          margin-top: 20px;
          color: #A7A7AA;
          font-size: 1.4rem;

          b {
            font-size: 1.6rem;
            font-weight: 400;
            color: #000000;
            margin-right: 20px;
          }

          span {
            font-size: 1.2rem;
          }
        }
      }
    }
  }

  .courseNotice {
    font-size: 1.4rem;
  }
}

.Collection {
  background-color: white;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px 0;
  z-index: 500;

  .box {
    display: inline-block;
    vertical-align: middle;
    width: 49%;
    text-align: center;
    color: #666666;

    .icon {
      display: inline-block;
      width: 49%;
      text-align: center;
      font-size: 1.2rem;

      p {
        margin: 0;
      }

      i {
        font-size: 2.4rem;
        color: #000000;
        font-weight: bold;
      }
    }

    .icon.active {
      color: #0CE39D;

      i {
        color: #0CE39D;
      }
    }

    span {
      display: inline-block;
      width: 65%;
      padding: 20px 40px;
      border-radius: 100px;
      color: white;
      font-size: 2rem;
      background: linear-gradient(307deg, rgba(51, 233, 172, 1) 0%, rgba(6, 203, 103, 1) 100%);

      b {
        display: inline-block;
        vertical-align: middle;
        margin-left: 20px;
        color: white;
      }

      i {
        vertical-align: middle;
        font-size: 2.2rem;
        font-weight: bold;
      }
    }
  }
}
</style>