<template>
  <div class="mainPage flex-v">
    <nav class="flex-h">
      <a
        class="flex-item"
        v-for="(item,index) in locations"
        :key="index"
        :class="{'active':index==active.index}"
        @click="changeLocation(item,index)"
      >{{item.LocationName}}</a>
    </nav>
    <div class="flex-item">
      <div>
        <div v-for="(item,index) in locations" :key="index" :hidden="index!==active.index">
          <div class="banner flex-h">
            <div class="flex-item">
              <swiper :options="swiperOption" ref="mySwiper">
                <swiper-slide
                  class="swiper-slide"
                  v-for="(banner,bindex) in item.Banners"
                  :key="bindex"
                >
                  <img
                    :src="banner.ImageUrl"
                    class="cover"
                    style="border-radius: .12rem;"
                    alt
                    @click="jump(banner)"
                  >
                </swiper-slide>
              </swiper>
            </div>
          </div>
          <h5>{{item.Title}}</h5>
          <div class="courseList flex-h">
            <ul class="flex-item" v-if="!fiveANoData">
              <router-link
                tag="li"
                v-for="(course,cindex) in item.Courses"
                :key="cindex"
                :to="{name:'majorProjectsDetail',query:{id: course.CourseId}}"
              >
                <courseItem :data="courseInfo(course)"></courseItem>
              </router-link>
            </ul>
            <!-- <span v-if="fiveANoData" style="width:100%;line-height:.3rem;display:block;text-align:center;color:#ccc;margin-bottom:.1rem;">暂无数据</span> -->
          </div>
          <div style="width:100%;height:.1rem;background:#f8f8f8;margin:0 auto;"></div>
          <h5>{{item.Consult || '资讯'}}</h5>
          <div class="newsList flex-h">
            <ul class="flex-item">
              <li
                tag="li"
                @click="jump(newinfo)"
                v-for="(newinfo,nindex) in item.News"
                v-if="nindex < 5"
                :key="nindex"
              >
                <newsItem :data="newinfo"></newsItem>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import courseItem from '../../../components/courseItem/index'
import newsItem from '../../../components/newsItem/index'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapActions: mapFiveAActions } = createNamespacedHelpers('fiveA')
export default {
  name: '',
  data () {
    return {
      fiveANoData: false,
      active: {
        index: 0,
        locationid: ''
      },
      swiperOption: {
        observer: true,
        loop: true,
        speed: 1000,
        autoplay: {
          disableOnInteraction: false,
        }
      },
      locations: [],
    }
  },
  computed: {
    MySwiper () {
      return this.$refs.mySwiper.swiper
    },
    MySwiperMsg () {
      return this.$refs.MySwiperMsg.swiper
    },
  },
  components: {
    newsItem,
    swiper,
    swiperSlide,
    courseItem,
  },
  created () {
    const _that = this
    this.getLocationDetails().then(res => {
      _that.locations = res
      let id = _that.$route.query.id
      let index = 0
      for (let i = 0; i < _that.locations.length; i++) {
        if (_that.locations[i].LocationId === id) {
          index = i
        }
      }
      console.log(index)
      _that.changeLocation(id, index)
    })
  },
  methods: {
    ...mapFiveAActions([
      'getLocationDetails',
    ]),
    changeLocation (item, index) {
      this.active.index = index
    },
    courseInfo (course) {
      return {
        id: course.CourseId,
        title: course.CourseName,
        img: course.CourseImg,
        remark: `${this.toolClass.dateFormat(course.BeginDate, 'yyyy-MM-dd')} ~ ${this.toolClass.dateFormat(course.EndDate, 'yyyy-MM-dd')}`,
        address: course.CaseAddress,
        tag: course.CourseTags || [],
        courseType: '',
        defaultPrice: course.Price + '/节',
        getWay: 'ticket'
      }
    },
    // returnCourseList (arr) { // 转换课程列表格式
    //   for (var n = 0; n < arr.length; n++) {
    //     this.courseList.push()
    //   }
    // },
    jump (item) {
      // console.log(item)
      item.ForwardType = item.ForwardType || ''
      if (item.ForwardType === 'url') {
        window.location.href = item.ForwardUrl
      } else if (item.ForwardType === 'course') {
        if (item.ForwardResourceId) {
          this.$router.push({ name: 'majorProjectsDetail', query: { id: item.ForwardResourceId } }) // 此处去课程详情
        } else {
          this.$router.push({ name: 'majorProjectsDetail', query: { id: item.ForwardCourseId } }) // 此处去课程详情
        }
      } else {
        window.location.href = item.InfoUrl
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import 'page.scss';
</style>
