<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="courseTable.length > 0 && showCourseTable">
          <template>
            <p class="tag_title">行程安排</p>
            <div class="cardCont" v-for="(item, index) in courseTable" :key="index">
              <p class="day_tag">第{{index+1}}天</p>
              <table cellspacing="0" cellpadding="8">
                <tbody v-html="item"></tbody>
              </table>
            </div>
          </template>
        </div>
        <p></p>
      </van-tab>
      <van-tab title="费用说明">
        <div class="tag_item" v-if="detailData.feeDescription">
          <template>
            <p class="tag_title">费用说明</p>
            <p class="tag_text" v-html="detailData.feeDescription"></p>
          </template>
        </div>
        <p></p>
      </van-tab>
      <van-tab title="订购须知">
        <div class="tag_item" v-if="detailData.serviceGuarantees">
          <template>
            <p class="tag_title">订购须知</p>
            <p class="tag_text" v-html="detailData.serviceGuarantees"></p>
          </template>
        </div>
        <p></p>
      </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>