<template>
  <div class="mainPage">
    <div class="banner">
      <div>
        <!-- <swiper :options="swiperOption" ref="mySwiper">
          <swiper-slide class="swiper-slide" v-for="(item,index) in projectInfo.CmsCaseImgs" :key="index">
            <img :src='item.CaseImageUrl' class="cover" alt="">
          </swiper-slide>
        </swiper> -->
        <img :src="cover" alt="" class="cover">
      </div>
    </div>
    <p>{{projectInfo.DetailContent}}</p>
    <div class="list flex-h">
      <div class="flex-item">
        <div v-for="(item,index) in courseList" :key="index">
          <span>{{item.month+1}}月</span>
          <ul class="items">
            <router-link tag="li" v-for="(subItem,subIndex) in item.list" :key="subIndex" :to="{name: 'majorProjectsDetail', query: {id: subItem.id}}" class="flex-h">
              <div class="flex-item">
                <div>
                  <courseItem :data="subItem"></courseItem>
                </div>
              </div>
            </router-link>
          </ul>
        </div>
        <div class="cutLine"></div>
        <div>
          <span>关注我们</span>
          <ul class="items">
            <li class="flex-h">
              <div class="bottom flex-item flex-h">
                <div class="flex-item flex-h">
                  <div class="flex-item">
                    <div>
                      <span class="centerLabel">长按右方二维码<br>关注“城的空间”公众号</span>
                    </div>
                  </div>
                  <div class="qrCode">
                    <a><img src="https://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/citymini/qrcode_city.jpg" class="centerLabel cover" alt=""></a>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapActions: mapProjectActions, mapState: mapProjectState } = createNamespacedHelpers('majorProjects')
import courseItem from '../../../components/courseItem/index'

export default {
  name: '',
  data () {
    return {
      swiperOption: {
        observer: true,
        autoplay: {
          disableOnInteraction: false,
        }
      },
      courseList: [], // 课程列表
      initList: [],
      cover:''
    }
  },
  computed: {
    ...mapState({
      orgid: x => x.app.orgId,
      fiveA: x => x.index.fiveA,
      banner: x => x.index.banner,
      message: x => x.index.message,
      project: x => x.index.project,
      cms: x => x.index.cms,
    }),
    ...mapProjectState({
      projectInfo: x => x.projectInfo
    }),
    // MySwiper () {
    //   return this.$refs.mySwiper.swiper
    // },
  },
  components: {
    courseItem,
    swiper,
    swiperSlide,
  },
  created () {
    this.initData()
  },
  methods: {
    ...mapProjectActions([
      'getProjectInfo',
    ]),
    returnTag (arr) {
      var aArr = []
      if (!arr) {
        arr = []
      }
      for (var n = 0; n < arr.length; n++) {
        aArr.push(arr[n].TagName)
      }
      return aArr
    },
    returnNum (val) {
      return val > 9 ? val : '0' + val
    },
    returnDate (val) {
      val = new Date(val)
      return val.getFullYear() + '.' + this.returnNum(val.getMonth() + 1) + '.' + this.returnNum(val.getDate())
    },
    initData () { // 初始化数据
      this.getProjectInfo({ id: this.$route.query.id }).then((res) => {
        // console.log(JSON.stringify(res))
        // this.initList
        if (!res.Courses) {
          res.Courses = []
        }
        var aArr = []
        for (var n = 0; n < res.Courses.length; n++) {
          console.log(this.returnTag(res.Courses[n].CourseTags))
          let tag = res.Courses[n].CourseTags
          aArr.push({
            id: res.Courses[n].CourseId,
            title: res.Courses[n].CourseName,
            img: res.Courses[n].CourseImg,
            remark: this.toolClass.dateFormat(res.Courses[n].BeginDate, 'yyyy-MM-dd') + '至' + this.toolClass.dateFormat(res.Courses[n].EndDate, 'yyyy-MM-dd'),
            address: res.Courses[n].CaseInfo.CaseAddress,
            tag: tag,
            courseType: '团体课',
            defaultPrice: res.Courses[n].Price + '/节',
            getWay: 'ticket',
            startDate: new Date(res.Courses[n].BeginDate).getTime(),
            endDate: new Date(res.Courses[n].EndDate).getTime(),
          })
        }
        this.cover = res.CmsCaseImgs.filter(item => item.ImageType === 'detail')[0].CaseImageUrl
        console.log(this.cover)
        console.log(aArr)
        this.initList = aArr
        this.calcArr()
      })
    },
    calcArr () {
      let arr = []
      if (!this.initList){
        this.initList = []
      }
      for (var n = 0; n < this.initList.length; n++) {
        arr.push(new Date(this.initList[n].startDate).getMonth())
      }
      for (var i = 0; i < arr.length; i++) {
        if (arr.indexOf(arr[i]) !== i) {
          arr.splice(i, 1)
          i--
        }
      }
      for (var i = 0; i < arr.length; i++) {
        this.courseList.push({
          month: arr[i],
          list: []
        })
      }
      for (var n = 0; n < this.initList.length; n++) {
        for (var i = 0; i < this.courseList.length; i++) {
          if (new Date(this.initList[n].startDate).getMonth() === this.courseList[i].month) {
            this.courseList[i].list.push(this.initList[n])
          }
        }
      }
    },
  }
}
</script>

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