<template>
  <div class="abroad_des">
    <van-tabs class="tabs top_border" v-model="active" swipeable :ellipsis="false" color="#4092FF" scrollspy sticky>
      <van-tab title="研学详情">
        <div class="tag_item" v-if="detailData.productFeatures">
          <!-- <p class="tag_title">产品特色</p> -->
          <div class="content_box">
            <div class="content_all open">
              <p class="tag_text" v-html="detailData.productFeatures"></p>
            </div>
          </div>
        </div>
        <div class="tag_item" v-if="detailData.productDescription">
          <!-- <p class="tag_title">产品描述</p> -->
          <div class="content_box">
            <div class="content_all" :class="isOpen ? 'open' : ''">
              <p v-html="detailData.productDescription"></p>
            </div>
          </div>
        </div>
        <div class="tag_item" v-if="
            detailData.courseContentList &&
            detailData.courseContentList[0].content != ''
          ">
          <!-- <p class="tag_title">服务内容</p> -->
          <ul class="courseContent">
            <li v-for="(n, i) in detailData.courseContentList" :key="n.id">
              <span class="left" v-if="n.title">{{ 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>
              </div>
            </li>
          </ul>
        </div>
        <div class="tag_item" v-if="courseTable.length > 0 && showCourseTable">
          <!-- <p class="tag_title">课程表</p> -->
          <div class="cardCont" v-for="(item, index) in courseTable" :key="index">
            <table cellspacing="0" cellpadding="8">
              <tbody v-html="item"></tbody>
            </table>
          </div>
        </div>
        <div class="tag_item" v-if="detailData.extraService">
          <!-- <p class="tag_title">附送服务</p> -->
          <p class="tag_text" v-html="detailData.extraService"></p>
        </div>
        <div class="tag_item" v-if="detailData.serviceGuarantees">
          <!-- <p class="tag_title">服务保障和承诺</p> -->
          <p class="tag_text" v-html="detailData.serviceGuarantees"></p>
        </div>
      </van-tab>
      <van-tab title="研学说明" v-if="detailData.feeDescription">
        <div class="tag_item">
          <!-- <p class="tag_title">研学说明</p> -->
          <p class="tag_text" v-html="detailData.feeDescription"></p>
        </div>
      </van-tab>
      <van-tab title="研学须知" v-if="detailData.notice">
        <div class="tag_item">
          <!-- <p class="tag_title">研学须知</p> -->
          <p class="tag_text" v-html="detailData.notice"></p>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  props: ['detailData'],
  data () {
    return {
      courseTable: [], //课程表
      active: 0,
      isOpen: true,
      showCourseTable: true
    }
  },
  mounted () {
    for (let i in this.detailData.courseScheduleList) {
      this.getWeekCard(i);
    }
  },
  methods: {
    // 设置第几天的课程表
    getWeekCard (index) {
      var data = this.detailData.courseScheduleList[index].courseScheduleList;
      var morning = [];
      var afternoon = [];
      var night = [];
      data.forEach(function (k, j) {
        if (k.type == 1 && k.content != "") {
          morning.push(k);
        } else if (k.type == 2 && k.content != "") {
          afternoon.push(k);
        } else if (k.type == 3 && k.content != "") {
          night.push(k);
        }
      });
      if (morning.length == 0 && afternoon.length == 0 && night.length == 0) {
        this.showCourseTable = false;
      }
      var strMorning = "",
        strAfternoon = "",
        strNight = "";
      if (morning.length > 0) {
        strMorning = `<tr>
								<td class="td_left" 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 class="td_left" 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 class="td_left" 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.courseTable.push(strMorning + strAfternoon + strNight);
    },
    // 展开关闭院校简介
    extend_btn () {
      this.isOpen = !this.isOpen;
    },
  }
}
</script>