<template>
  <div class="base_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.detail">
          <p class="tag_title">基地介绍</p>
          <div class="content_box">
            <div class="content_all open">
              <p class="tag_text" v-html="detailData.detail"></p>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="课程一览">
        <div class="tag_item">
          <p class="tag_title">课程一览</p>
          <div class="content_box">
            <div class="content_all active_box">
              <template v-for="(item, index) in CourseData">
                <div class="active_item" :key="index" @click="handleCourseDetail(item)">
                  <div class="bg_box" :style="{ backgroundImage: 'url(' + (item.coverUrl || item.coverList[0].cover_url) + ')' }"></div>
                  <div class="text_box">
                    <p class="title">{{ item.course_name }}</p>
                    <span class="tag" v-for="(item3, index3) in item.course_labels" :key="index3">{{ item3 }}</span>
                    <!-- <div class="count_box">
                      <span class="count">{{item.read_count}}人已浏览</span>
                    </div> -->
                  </div>
                </div>
              </template>
              <p class="tag_text" v-if="CourseData.length == 0">暂无课程</p>
            </div>
          </div>
        </div>
      </van-tab>
      <!-- <van-tab title="研学导师">
        <div class="tag_item">
          <p class="tag_title">研学导师</p>
          <div class="content_box">
            <div class="content_all">
              <div class="teacher_box">
                <div class="teacher_item" v-for="(item, index) in teacherData" :key="index">
                  <div class="teacher_img_box">
                    <img class="teacher_img" :src="item.photourl || defaultHead" alt="" />
                  </div>
                  <p class="teacher_name">{{ item.teacher_name }}</p>
                  <p class="teacher_info">{{ item.teacher_info }}</p>
                  <p class="teacher_level">
                    导师级别：{{ item.state == 1 ? '初级' : item.state == 1 ? '中级' : item.state == 1 ? '高级' : '' }}
                  </p>
                  <p class="teacher_location">所在机构：{{ detailData.baseName }}</p>
                </div>
              </div>
              <p class="tag_text" v-if="teacherData.length == 0">暂无导师</p>
            </div>
          </div>
        </div>
      </van-tab> -->
    </van-tabs>
  </div>
</template>
<script>
export default {
  props: ['detailData'],
  data() {
    return {
      active: 0,
      CourseData: [],
      teacherData: [],
      defaultHead: require('@/assets/service/head.png'),
    }
  },
  mounted() {
    this.GetCourseList() //获取课程列表
    this.GetTeacherList() //获取导师列表
  },
  methods: {
    //获取课程列表
    GetCourseList() {
      this.yxAxios.get(`${this.yanxueUrl}/api/BaseManage/GetCourseList?baseId=${this.detailData.id}&state=-1&checkStatus=4`).then((res) => {
        console.log(res)
        if (res.data.status == 1) {
          let CourseData = res.data.data.list
          console.log('课程列表：', CourseData)
          for (let i in CourseData) {
            CourseData[i].course_labels = CourseData[i].course_labels.split(',')
            if (CourseData[i].startDate) {
              CourseData[i].week = this.formatWeek(this.Moment(CourseData[i].startDate).format('d'))
              CourseData[i].startDate = this.Moment(CourseData[i].startDate).format('YYYY.M.D')
              CourseData[i].endDate = this.Moment(CourseData[i].endDate).format('YYYY.M.D')
            }
          }
          this.CourseData = CourseData
        } else {
          this.$message.warning(res.data.message || res.data.result)
        }
      })
    },
    //获取导师列表
    GetTeacherList() {
      this.yxAxios.get(`${this.yanxueUrl}/api/BaseManage/GetTeacherList?baseId=${this.detailData.id}`).then((res) => {
        console.log(res)
        if (res.data.status == 1) {
          let data = res.data.data.list
          console.log('导师列表：', data)
          this.teacherData = data
        } else {
          this.$message.warning(res.data.message || res.data.result)
        }
      })
    },
    // 点击课程
    handleCourseDetail(item) {
      this.$router.push({ name: 'ServiceAbroadDetail', query: { courseId: item.id } })
    },
    // 格式化星期
    formatWeek(week) {
      return week == 1
        ? '周一'
        : week == 2
        ? '周二'
        : week == 3
        ? '周三'
        : week == 4
        ? '周四'
        : week == 5
        ? '周五'
        : week == 6
        ? '周六'
        : week == 0
        ? '周日'
        : ''
    },
  },
}
</script>
<style lang="scss">
// 长辈版
.elder {
  .van-tab {
    font-size: 36px;
  }
  .base_detail {
    .uni_text {
      .course_name {
        font-size: 52px;
      }
      .course_info {
        font-size: 36px;
      }
    }
    .tag_item {
      .tag_title {
        font-size: 42px;
      }
      .tag_text {
        font-size: 36px !important;
        line-height: 48px !important;
      }
    }
    .content_box .content_all .active_item{
       .title{
      font-size: 36px;
      line-height: 52px;
    }
    .tag{
      font-size: 36px;
    }
    }
  }
}
</style>