<template>
  <div class="page p-home">
    <!-- Header -->
    <div class="header">
      <div class="title">奇妙测试机</div>
    </div>
    <div :class="fixed? 'fixed' : ''" @click="goSearch" class="search-box" id="search-box">
      <search></search>
    </div>
    <!-- Content -->
    <div :class="fixed? 'fixed' : ''" class="main">
      <!-- 热门精选 -->
      <div class="sec-1" v-if="recommandList.length > 0">
        <div class="wrap">
          <div class="title">
            <div class="l">
              <span>精选</span>
              <span>推荐</span>
            </div>
            <div @click="changeRecommand" class="r">
              <image
                class="icon-reload"
                lazy-load="false"
                mode="scaleToFill"
                src="/static/images/icon-reload.png"
              />
            </div>
          </div>
          <div class="card">
            <div class="card-hd">{{recommandList[curRecommandIdx].title}}</div>
            <div class="card-bd">{{recommandList[curRecommandIdx].desc}}</div>
            <div @click="goDetails(recommandList[curRecommandIdx]._id, true)" class="card-btn">GO</div>
          </div>
        </div>
      </div>
      <!-- 内容列表 -->
      <div class="sec-2" v-if="listData.length > 0">
        <div class="title">
          <div class="l">
            排行榜
          </div>
          <div @click="goList" class="color-yellow more">更多>></div>
        </div>
        <div class="list">
          <div class="list-hd">
            <div
              :class="curActive==='hot' ? 'active' : ''"
              @click="changeList('hot')"
              class="hot"
            >热门排行</div>
            <div
              :class="curActive==='new' ? 'active' : ''"
              @click="changeList('new')"
              class="new"
            >新品排行</div>
          </div>
          <div class="list-bd">
            <list-item
              :data="item"
              :from="curActive"
              :key="index"
              @clickItem="clickItem"
              v-for="(item, index) in listData"
            ></list-item>
          </div>
        </div>
      </div>
      <!-- 查看全部 -->
      <button @click="goList" class="btn-more">查看全部</button>
    </div>
  </div>
</template>

<script>
import card from '@/components/card'
import search from '@/components/search'
import listItem from '@/components/list-item'
import requestUtil from '@/utils/request'
import sdkManage from '@/utils/jcfw/SDKManage'

export default {
  data() {
    return {
      recommandList: [],
      hotList: [],
      newList: [],
      listData: [],
      curActive: 'hot',
      curRecommandIdx: 0,
      top: 0,
      fixed: false
    }
  },

  components: {
    search,
    listItem
  },
  async mounted() {
    this.getRecommand()
    await this.getHot()
    this.curActive = 'hot'
    this.listData = this.hotList
    this.getNew()
  },
  async onLoad(options) {
    sdkManage.init(options)
    let self = this
    //获取tab的距离顶部高度
    const query = wx.createSelectorQuery()
    query
      .select('#search-box')
      .boundingClientRect(function(res) {
        self.top = res.top
      })
      .exec()
  },
  onPageScroll: function(e) {
    //tab的吸顶效果
    if (e.scrollTop >= this.top) {
      if (this.fixed) return
      this.fixed = true
    } else {
      this.fixed = false
    }
  },
  methods: {
    async getRecommand() {
      try {
        const data = await requestUtil.getData('/list', { type: 'recommand' })
        this.recommandList = data.result
      } catch (err) {
        console.log(err)
      }
    },
    async getHot() {
      try {
        const data = await requestUtil.getData('/list', { type: 'hot' })
        this.hotList = data.result
      } catch (err) {
        console.log(err)
      }
    },
    async getNew() {
      try {
        const data = await requestUtil.getData('/list', { type: 'new' })
        this.newList = data.result
      } catch (err) {
        console.log(err)
      }
    },
    changeRecommand() {
      if (this.curRecommandIdx < this.recommandList.length - 1) {
        this.curRecommandIdx++
      } else {
        this.curRecommandIdx = 0
      }
    },
    changeList(type) {
      this.curActive = type
      this.listData = type === 'hot' ? this.hotList : this.newList
    },
    goDetails(id, isRecommand) {
      if (isRecommand) {
        setTimeout(() => {
          sdkManage.uploadLog('click_recommand', { id: id })
        }, 0)
      }
      requestUtil.postData('/view', { _id: id })
      wx.navigateTo({
        url: `/pages/details/main?_id=${id}`
      })
    },
    goList() {
      wx.switchTab({
        url: `/pages/list/main`
      })
    },
    goSearch() {
      wx.navigateTo({
        url: `/pages/search/main`
      })
    },
    clickItem(data) {
      setTimeout(() => {
        sdkManage.uploadLog(`click_${this.curActive}`, data)
      }, 0)
    }
  }
}
</script>

<style scoped lang="less">
.p-home {
  .header {
    padding: 32rpx 32rpx 0;
    background-color: #ffdc34;
    .title {
      font-size: 60rpx;
      font-weight: 700;
    }
  }
  .search-box {
    box-sizing: border-box;
    width: 100%;
    padding: 22rpx 32rpx;
    background-color: #ffdc34;
    &.fixed {
      position: fixed;
      top: 0;
      z-index: 999;
    }
  }
  .main {
    padding: 0 32rpx 60rpx;
    &.fixed {
      margin-top: 188rpx;
    }
  }
  .sec-1 {
    margin-top: 60rpx;

    .wrap {
      position: relative;
      height: 300rpx;
      margin: 0 auto;
      padding: 90rpx 32rpx 90rpx;
      background-color: #fffdf5;
      border: 8rpx solid #ffdc34;
    }
    .title {
      .l {
        position: absolute;
        top: -2rpx;
        left: -2rpx;
        height: 80rpx;
        padding: 0 32rpx;
        font-size: 36rpx;
        line-height: 80rpx;
        font-weight: 700;
        background-color: #ffdc34;
        color: #B8860B;
      }
      .r {
        position: absolute;
        padding: 8rpx;
        height: 48rpx;
        width: 48rpx;
        right: -26rpx;
        top: -26rpx;
        font-size: 0;
        background-color: #ffdc34;
        border-radius: 50%;
        .icon-reload {
          width: 100%;
          height: 100%;
        }
      }
    }

    .card {
      .card-hd {
        margin-bottom: 16rpx;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        font-size: 42rpx;
      }
      .card-bd {
        color: #999;
        max-height: 216rpx;
        line-height: 1.5;
        font-size: 36rpx;
        overflow: hidden;
      }
      .card-btn {
        position: absolute;
        right: 32rpx;
        bottom: 32rpx;
        width: 108rpx;
        height: 108rpx;
        color: #fff;
        font-size: 36rpx;
        font-weight: 700;
        line-height: 108rpx;
        text-align: center;
        background: linear-gradient(
          0deg,
          rgba(255, 214, 53, 1) 0%,
          rgba(255, 237, 154, 1) 100%
        );
        box-shadow: 0px 2px 4px 0px rgba(94, 94, 94, 0.35);
        border-radius: 50%;
      }
    }
  }

  .sec-2 {
    margin-top: 64rpx;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .l {
        font-size: 28rpx;
        font-weight: 700;
        background-color:#ffdc34;
        height:52rpx;
        padding:0rpx 32rpx;
        line-height:52rpx;
        color:#FAFAD2;
      }
      .r {
      }
    }
    .list {
      background-color: #fff;
      border: 6rpx solid #ffdc34;
      .list-hd {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100rpx;
        line-height: 100rpx;
        border-bottom: 1px solid #f0f0f0;
        font-size:36rpx;
        .hot {
          flex: 1;
          text-align: center;
          border-right: 1px solid #f0f0f0;
        }
        .new {
          flex: 1;
          text-align: center;
        }
        .active {
          color: #ffdc34;
          font-weight: 700;
        }
      }
    }
  }
  .btn-more {
    margin: 60rpx auto;
    border: none;
    background-color: #ffdc34;
    color: #fff;
    border-radius: 0;
    width: 100%;
    letter-spacing: 4rpx;
  }
  .more {
    font-weight: 700;
    font-size:28rpx;
  }
}
</style>
