<template>
  <div class="RankingList">
    <van-tabs v-model="tabActive" @click="tabClick">
      <van-tab title="基地"></van-tab>
      <van-tab title="课程"></van-tab>
    </van-tabs>
    <div id="taobao-best">
      <div class="swiper-container show-swiper swiper-container-horizontal swiper-container-ios" v-if="swiperData.length > 0">
        <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(37px, 0px, 0px)">
          <div
            class="swiper-slide swiper-slide swiper-slide-active"
            style="margin-right: 17px"
            v-if="swiperData.length >= 1"
            @click="goDetail(swiperData[0].id)"
          >
            <div class="goods" style="transform: scale3d(1.1, 1.1, 1); transition-duration: 0ms">
              <img class="icon" src="@/assets/top1.png" alt="" />
              <span class="lookNum">{{ swiperData[0].read_count }}人浏览</span>
              <div class="cont">
                <p class="label">
                  <span>{{ tabActive == 0 ? swiperData[0].baseName : swiperData[0].course_name }}</span>
                </p>
                <h3>{{ tabActive == 0 ? swiperData[0].baseInfo : swiperData[0].course_info }}</h3>
                <div class="address">
                  <van-icon name="location" />
                  {{
                    tabActive == 0
                      ? swiperData[0].province + swiperData[0].city + swiperData[0].area + swiperData[0].address
                      : swiperData[0].address
                  }}
                </div>
                <p class="bottomLabel">
                  <span>{{ tabActive == 0 ? swiperData[0].features : swiperData[0].baseName }}</span>
                </p>
              </div>
              <img v-if="tabActive == 0" :src="swiperData[0].coverUrl ? swiperData[0].coverUrl : require('@/assets/def.png')" alt="" />
              <img v-else :src="swiperData[0].coverUrl ? swiperData[0].coverUrl : require('@/assets/defCoure.jpg')" alt="" />
            </div>
          </div>
          <div
            class="swiper-slide swiper-slide-next"
            style="margin-right: 17px"
            v-if="swiperData.length >= 2"
            @click="goDetail(swiperData[1].id)"
          >
            <div class="goods" style="transform: scale3d(1, 1, 1); transition-duration: 0ms">
              <img class="icon" src="@/assets/top2.png" alt="" />
              <span class="lookNum">{{ swiperData[1].read_count }}人浏览</span>
              <div class="cont">
                <p class="label">
                  <span>{{ tabActive == 0 ? swiperData[1].baseName : swiperData[1].course_name }}</span>
                </p>
                <h3>{{ tabActive == 0 ? swiperData[1].baseInfo : swiperData[1].course_info }}</h3>
                <div class="address">
                  <van-icon name="location" />
                  {{
                    tabActive == 0
                      ? swiperData[1].province + swiperData[1].city + swiperData[1].area + swiperData[1].address
                      : swiperData[1].address
                  }}
                </div>
                <p class="bottomLabel">
                  <span>{{ tabActive == 0 ? swiperData[1].features : swiperData[1].baseName }}</span>
                </p>
              </div>
              <img v-if="tabActive == 0" :src="swiperData[1].coverUrl ? swiperData[1].coverUrl : require('@/assets/def.png')" alt="" />
              <img v-else :src="swiperData[1].coverUrl ? swiperData[1].coverUrl : require('@/assets/defCoure.jpg')" alt="" />
            </div>
          </div>
          <div class="swiper-slide" style="margin-right: 17px" v-if="swiperData.length >= 3" @click="goDetail(swiperData[2].id)">
            <div class="goods" style="transform: scale3d(1, 1, 1); transition-duration: 0ms">
              <img class="icon" src="@/assets/top3.png" alt="" />
              <span class="lookNum">{{ swiperData[2].read_count }}人浏览</span>
              <div class="cont">
                <p class="label">
                  <span>{{ tabActive == 0 ? swiperData[2].baseName : swiperData[2].course_name }}</span>
                </p>
                <h3>{{ tabActive == 0 ? swiperData[2].baseInfo : swiperData[2].course_info }}</h3>
                <div class="address">
                  <van-icon name="location" />
                  {{
                    tabActive == 0
                      ? swiperData[2].province + swiperData[2].city + swiperData[2].area + swiperData[2].address
                      : swiperData[2].address
                  }}
                </div>
                <p class="bottomLabel">
                  <span>{{ tabActive == 0 ? swiperData[2].features : swiperData[2].baseName }}</span>
                </p>
              </div>
              <img v-if="tabActive == 0" :src="swiperData[2].coverUrl ? swiperData[2].coverUrl : require('@/assets/def.png')" alt="" />
              <img v-else :src="swiperData[2].coverUrl ? swiperData[2].coverUrl : require('@/assets/defCoure.jpg')" alt="" />
            </div>
          </div>
          <div class="swiper-slide" style="margin-right: 17px"></div>
        </div>
      </div>
    </div>
    <van-list v-model="loading" :finished="Finished" finished-text="没有更多了" @load="onLoad">
      <ul class="dataList">
        <li v-for="(n, i) in dataList" :key="i" @click="goDetail(n.id)">
          <div class="img">
            <span class="bot">{{ n.read_count }}人已浏览</span>
            <img v-if="tabActive == 0" :src="n.coverUrl ? n.coverUrl : require('@/assets/def.png')" alt="" />
            <img v-else :src="n.coverUrl ? n.coverUrl : require('@/assets/defCoure.jpg')" alt="" />
          </div>
          <h3>{{ tabActive == 0 ? n.baseName : n.course_name }}</h3>
          <p class="label">
            <template v-for="(k, j) in n.labels">
              <span v-if="k" :key="i + '' + j">{{ k }}</span>
            </template>
          </p>
          <div class="address">
            <van-icon name="location" />
            {{ tabActive == 0 ? getNull(n.province) + getNull(n.city) + getNull(n.area) + getNull(n.address) : n.address }}
          </div>
          <p class="bottom">{{ tabActive == 0 ? n.features : n.course_info }}</p>
        </li>
      </ul>
    </van-list>
  </div>
</template>

<script>
import '@/common/swiper.min.css'
import Swiper from '@/common/swiper.min.js'
export default {
  data() {
    return {
      tabActive: 0,
      swiperData: [],
      dataIndex: 0,
      dataList: [],
      loading: false,
      Finished: false,
    }
  },
  created() {},
  methods: {
    goDetail(id) {
      if (this.tabActive == 0) {
        this.$router.push({
          path: '/base_detail',
          query: { baseId: id },
        })
      } else {
        this.$router.push({
          path: '/abroad_detail',
          query: { courseId: id },
        })
      }
    },
    tabClick(item) {
      this.dataIndex = 1
      this.dataList = []
      this.swiperData = []
      this.Finished = false
      if (item == 0) {
        this.GetStudyBaseList(1)
      } else {
        this.GetCourseList(1)
      }
    },
    onLoad() {
      var that = this
      that.dataIndex++
      setTimeout(() => {
        if (that.tabActive == 0) {
          that.GetStudyBaseList(that.dataIndex)
        } else {
          that.GetCourseList(that.dataIndex)
        }
      }, 1000)
    },
    GetStudyBaseList(page, callback) {
      var that = this
      this.http
        .GetStudyBaseList({
          pageIndex: page,
          pageSize: 10,
          cs: this.projectCity,
        })
        .then(function (res) {
          if (res.status == 1) {
            var data = res.data.items
            data.forEach(function (n, i) {
              var baseLabels = n.baseLabels
              if (baseLabels) {
                n.labels = baseLabels.split(',')
              } else {
                n.labels = []
              }
              if (page == 1) {
                if (i < 3) {
                  that.swiperData.push(n)
                } else {
                  that.dataList.push(n)
                }
              } else {
                that.dataList.push(n)
              }
            })
            that.loading = false
            if (data.length < 10) {
              that.Finished = true
            }
            setTimeout(function () {
              that.setSwiper()
            }, 1000)
          }
        })
    },
    GetCourseList(page, callback) {
      var that = this
      this.http
        .GetCourseList({
          pageIndex: page,
          pageSize: 10,
          cs: this.projectCity,
        })
        .then(function (res) {
          if (res.status == 1) {
            var data = res.data.items
            data.forEach(function (n, i) {
              var baseLabels = n.course_labels
              if (baseLabels) {
                n.labels = baseLabels.split(',')
              } else {
                n.labels = []
              }
              if (page == 1) {
                if (i < 3) {
                  that.swiperData.push(n)
                } else {
                  that.dataList.push(n)
                }
              } else {
                that.dataList.push(n)
              }
            })
            that.loading = false
            if (data.length < 10) {
              that.Finished = true
            }
            setTimeout(function () {
              that.setSwiper()
            }, 1000)
          }
        })
    },
    getNull(t) {
      return t ? t : ''
    },
    setSwiper() {
      new Swiper('.show-swiper', {
        slidesPerView: 'auto',
        watchSlidesProgress: !0,
        slidesOffsetBefore: 37,
        spaceBetween: 17,
        resistanceRatio: 1,
        controller: {
          control: '',
        },
        on: {
          progress: function (b) {
            for (var i = 0; i < this.slides.length; i++) {
              var slide = this.slides.eq(i)
              var slideProgress = this.slides[i].progress
              var prevIndent = 4 == i ? 0.3228 : 0.0898
              var scale = 1 > Math.abs(slideProgress + prevIndent) ? 0.1 * (1 - Math.abs(slideProgress + prevIndent)) + 1 : 1
              slide.find('.goods').transform('scale3d(' + scale + ',' + scale + ',1)')
            }
          },
          setTransition: function (b) {
            for (var a = 0; a < this.slides.length; a++) this.slides.eq(a).find('.goods').transition(b)
          },
          touchMove: function () {},
          touchEnd: function () {
            ;-1515 > this.translate && alert('\u8df3\u8f6c')
          },
        },
      })
    },
  },
}
</script>

<style lang="stylus" scoped>
p{
	margin: 20px 0
}
.RankingList{
}
#taobao-best {
	position relative
	.show-swiper {
		padding 60px 0
	}
	.swiper-slide {
		width 440px
		.goods {
			width 100%
			box-sizing border-box
			border-radius 16px
			position relative
      overflow hidden;
			img{
				width 100%
			}
			.icon{
				position absolute
				left 0
				top 0
				width 100px
			}
			.lookNum{
				position absolute
				top 10px
				right 20px
				background-color rgba(0,0,0,0.5)
				color white
				font-size 1.2rem
				padding 4px 10px
				border-radius 100px
			}
			.cont{
				position absolute
				bottom 0
				left 0
				width 100%
				padding 0 20px
				box-sizing border-box
				background-image linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.5))
				.label{
					margin 0
					span {
						background-color rgba(0,0,0,0.5)
						color #0EDBA1
						display inline-block
						padding 6px
					}
				}
				h3{
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
					color white
					font-size 1.6rem
					margin 20px 0px
				}
				div{
					position relative
					padding-left 36px
					box-sizing border-box
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					color white
					font-size 1.2rem
					i{
						position absolute
						left: 0px;
						top: 0px;
						font-size: 1.4rem;
					}
				}
				.bottomLabel{
					span{
						display inline-block
						background-color #0EDBA1
						font-size 1.2rem
						display inline-block
						border-radius 6px
						padding 6px 10px
					}
				}
			}
		}
	}
}
.dataList{
	padding 0 40px
	box-sizing border-box
	li{
		position relative
		padding-left 300px
		box-sizing border-box
		margin-bottom 40px
		min-height 280px
		.img{
			position absolute
			left 0
			top 0
			width 270px
			padding 0
			img{
				width 100%
				height 270px
				border-radius 10px
			}
			span{
				display inline-block
				background-color rgba(0,0,0,0.5)
				color white
				padding 6px 10px
				font-size 1.2rem
				position absolute
				left 10px
			}
			.top{
				top 10px
			}
			.bot{
				bottom 10px
				border-radius 100px
			}
		}
		h3{
			word-break: break-all;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			font-size 1.6rem
			margin 0px
		}
		.label{
			span{
				display inline-block
				margin-right 20px
				padding 6px 16px
				border-radius 6px
				background-color #D0F8ED
				color #0EDBA1
				font-size 1.2rem
			}
		}
		div{
			position relative
			padding-left 36px
			box-sizing border-box
			word-break: break-all;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			color #333;
			font-size: 1.4rem;
			i{
				position absolute
				left: 0px;
				top: 0px;
				font-size: 1.4rem;
			}
		}
		.address{
			margin-top 20px
		}
		.bottom{
			color #D4BCAB
			font-size 1.2rem
		}
	}
}
</style>
<style lang="scss">
// 长辈版
.elder {
  .dataList li h3,.dataList li .address,.dataList li .bottom,.dataList li .img .bot,#taobao-best .swiper-slide .goods .cont div,#taobao-best .swiper-slide .goods .cont .bottomLabel span,#taobao-best .swiper-slide .goods .lookNum{
    font-size: 36px;
  }
  
}
</style>