<template>
  <view class="hot-recommend" :style="customStyle" v-if="listlength">
    <view class="title" v-if="customStyle">
       <image class="new-t" src="https://ttmini.yizhiwechat.com/ytKnowledgePlanet/chatTest/hot-title.png" mode="scaleToFill" />
    </view>
    <view class="title" v-else>
       <image src="https://ttmini.yizhiwechat.com/yzInterstTest2/title-hot.png" mode="scaleToFill" />
    </view>
    <view class="product-list">
      <!-- 产品 循环 -->
      <view class="product-item" v-for="(item) in list" :key="item.tt_miniapp_product.product_id"
            @click="onNavigatePage(item)">
        <view class="product-icon">
          <image :src="item.featured_img" mode="scaleToFill"/>
        </view>
        <view class="product-main">
          <view class="title text-ellipsis">{{item.name}}</view>
          <view class="introduction  text-ellipsis-line2">{{item.tt_miniapp_product.text}}</view>
          <!-- <view class="test-people">{{item.tt_miniapp_product.remark}}</view> -->
          <button class="btn">立即测试</button>
        </view>
      </view>
    </view>
    <view class="data-bottom" v-if="finish">已经到底了 :-)</view>
    <view class="data-bottom" v-else-if="loading"><img src="https://ttmini.yizhiwechat.com/InterestingPlanet/loading.svg">加载中</view>
  </view>
</template>

<script>
import { getTtAppDanHotlist } from '../../common/api'
export default {
  name: 'yt-recommend',
  props: {
    customStyle:String,
    top:{
      type: String,
      default:'40rpx'
    },
    scrollIndex:{
      type: Number,
      default:0
    }
  },
  data() { 
    return {
      list:[],
      page:1,
      finish:false,
      loading:false
    }
  },
  watch: {
    openid:{
      handler(val){
        if(val){
          this.getData()
        }
      },immediate:true
    },
    scrollIndex(){
      this.getData()
    }
  },
  computed: {
    openid(){
      return this.$store.state.index.openid
    },
    listlength() {
      return this.list.length
    }
  },
  methods: {
    onNavigatePage: function(opt) {
      const { product_id,index_path } = opt.tt_miniapp_product;
      const page_path = `${index_path}?product_id=${product_id}`
      uni.$yt.route({
        type:'reLaunch',
        url: '/pages/index/index' + this.$store.state.index.tid,
        params:{
          path:encodeURIComponent(page_path)
        }
      })
      uni.$yt.uv('hot')
    },
    getData(){
      if(this.loading||this.finish)return false;
      this.loading = true
      getTtAppDanHotlist({ tid:this.$store.state.index.tid,page:this.page,page_size:50 }).then(res => {
        const { data,last_page } = res
        this.list = data
        if(this.page >= last_page){
          this.finish = true
        }else{
          this.page += 1
        }
      }).finally(() => {
        this.loading = false
        this.$forceUpdate()
      })
    }
  },
 }
</script>

<style lang="scss" scoped>
.hot-recommend{
  width:690rpx;
  background-color:#ffffff;
  margin:50rpx auto;
  border-radius: 20rpx;
  padding: 30rpx 0;
  position: relative;
  z-index: 3;
  box-shadow: 0 0 50rpx #eeeeee;
  &>.title{
    padding-left: 30rpx;
    image{
      width: 423rpx;
      height: 87rpx;
    }
    .new-t{
      width: 641rpx;
      height: 49rpx;
    }
  }
}
.product-list {
    padding: 0 30rpx;
  }

  .product-item {
    position: relative;
    display: flex;
    align-items: center;
    padding:30rpx 0;

    & + .product-item::after {
      content: "";
      display: block;
      height: 1px;
      width: 100%;
      background-color: #F1F1F1;
      position: absolute;
      top: 0;
      right: 0;
    }

    .product-icon {
      flex: 0 0 172rpx;
      width: 172rpx;

      image {
        width: 172rpx;
        height: 172rpx;
        background: #F1F1F1;
        border-radius: 10rpx;
        // box-shadow: 1px 1px 20rpx rgba(0,0,0,.2);
      }
    }

    .product-main {
      position: relative;
      flex: 1 1 auto;
      min-width: 0;
      padding-left: 20rpx;
      min-height: 172rpx;
      .title {
        font-size: 32rpx;
        color: #333333;
        font-weight: bolder;
      }

      .introduction {
        min-height: 68rpx;
        margin: 8rpx 0 6rpx;
      }

      .introduction, .test-people {
        font-size: 26rpx;
        color: #999999;
      }

      .btn {
        position: absolute;
        right: 0;
        bottom: -10rpx;
        white-space: nowrap;
        color: #6B75FF;
        background-color: #D6D9FF;
        font-size: 24rpx;
        border-radius: 32rpx;
        padding: 8rpx 30rpx;
        line-height: normal;
      }
    }
  }
  .data-bottom{
    font-size: 26rpx;
    color: #333333;
    text-align: center;
    padding: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    img{
      width: 36rpx;
      height: 36rpx;
      animation: rotate 1500ms linear infinite;
    }
  }
</style>
