<template>
  <div class="h-index">
    <div class="h-index-ad">
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide>
          <img src="@/assets/images/ad.png" alt width="100%" />
        </swiper-slide>
        <swiper-slide>
          <img src="@/assets/images/ad.png" alt width="100%" />
        </swiper-slide>
        <swiper-slide>
          <img src="@/assets/images/ad.png" alt width="100%" />
        </swiper-slide>
      </swiper>
    </div>
    <div class="h-index-list">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <div class="h-index-list__main">
            <div class="h-index-list__l">
              <div class="h-index-list__item" v-for="(item, index) in leftList" :key="index">
                <div class="video-info">
                  <img :src="item.tcover" alt width="100%" />
                  <div class="video-info__text">
                    <div class="video-info__user">
                      <div class="video-info__avatar">
                        <img :src="item.tcover" alt width="100%" />
                      </div>
                      <span class="van-ellipsis">{{ item.setname }}</span>
                    </div>
                    <div class="video-info__favorite">
                      <van-icon name="like" size="12" color="#6E6D7A" />
                    </div>
                  </div>
                </div>
                <p class="van-ellipsis">{{ item.setname }}</p>
              </div>
            </div>
            <div class="h-index-list__r">
              <div class="h-index-list__item" v-for="(item, index) in rightList" :key="index">
                <div class="video-info">
                  <img :src="item.tcover" alt width="100%" />
                  <div class="video-info__text">
                    <div class="video-info__user">
                      <div class="video-info__avatar">
                        <img :src="item.tcover" alt width="100%" />
                      </div>
                      <span class="van-ellipsis">{{ item.setname }}</span>
                    </div>
                    <div class="video-info__favorite">
                      <van-icon name="like" size="12" color="#6E6D7A" />
                    </div>
                  </div>
                </div>
                <p class="van-ellipsis">{{ item.setname }}</p>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      swiperOptions: {
        loop: true,
        spaceBetween: 12,
        pagination: {
          el: '.swiper-pagination'
        }
      },
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      page: 0,
      leftList: [],
      rightList: []
    }
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.$swiper
    }
  },
  methods: {
    onLoad () {
      let _page = this.refreshing ? this.page = 1 : this.page += 1
      this.$http.test
        .cosplay({ page: _page })
        .then(({ code, data }) => {
          if (this.refreshing) {
            this.leftList = []
            this.rightList = []
            this.refreshing = false
          }
          this.loading = false
          if (code === 1) {
            data.map((item, index) => {
              if (index % 2 === 0) {
                this.rightList.push(item)
              } else {
                this.leftList.push(item)
              }
            })
          }
          // if (this.list.length >= 40) {
          //   this.finished = true
          // }
        })
    },
    onRefresh () {
      // 清空列表数据
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    }
  }
}
</script>

<style lang="scss" scoped>
.h-index {
  &-ad {
    height: 150px;
  }
  &-list {
    padding-top: 12px;
    padding-bottom: 50px;
    flex: 1;
    &__main {
      display: flex;
    }
    &__l {
      padding-right: 6px;
    }
    &__r {
      padding-left: 6px;
    }
    &__l,
    &__r {
      flex: 1;
      overflow: hidden;
    }
    &__item {
      margin-bottom: 12px;
      p {
        font-size: 14px;
        margin-top: 8px;
      }
      .video-info {
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        img {
          vertical-align: top;
        }
        &__text {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 1;
          height: 32px;
          background: rgba(255, 255, 255, 0.16);
          border-radius: 0 0 8px 8px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 8px;
          overflow: hidden;
          span {
            font-size: 12px;
            flex: 1;
            color: #ffffff;
          }
        }
        &__user {
          display: flex;
          align-items: center;
          width: 70%;
        }
        &__avatar {
          width: 22px;
          height: 22px;
          border-radius: 50%;
          background-color: #E7E7E9;
          display: block;
          margin-right: 4px;
          overflow: hidden;
        }
        &__favorite {
          width: 16px;
          height: 16px;
          border-radius: 50%;
          background-color: #E7E7E9;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
</style>
