<template>
  <div class="joinGoodDivC" v-if="joinGoodList.length > 0">
    <div ref="repurchasejoinGoods" @click="styleClick('click', 'repurchasejoinGoods')" @mousemove="styleClick('mousemove', 'repurchasejoinGoods')" @mouseout="styleClick('mouseout')">
      <div>
        <div><img :style="styleData.goodTitleStyle" :src="styleData.goodTitleStyle.imageUrl" /></div>

        <div :style="styleData.goodulbox" :key="timer">
          <div class="goodulInner">
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-cell v-for="(item, index) in joinGoodList" :key="index" :style="styleData.goodlibox">
              <div v-lz-click="'5'" v-lz-skuid="item.skuId" @click="goToBuy(item)">
                <!-- <a href="javascript:;" style="display: block; width: 3.15rem; height: 3.4rem"> -->
                  <img alt="" :src="item.imagePath ? item.imagePath : item.skuImg" style="width: 100%; height: 100%" />
                <!-- </a> -->
                <div class="goodDetailAllDiv" :style="styleData.goodDetailAllDiv">
                  <div class="title" :style="styleData.goodName">
                    <span class="titleSpan">{{ item.name ? item.name : item.skuName }}</span>
                  </div>
                  <div class="detail" :style="styleData.detailBackground">
                    <div class="price" :style="styleData.goodPrice">
                      <span class="price1">￥</span>
                      {{ item.price ? item.price : item.skuPrice}}
                    </div>
                    
                  </div>
                </div>
              </div>
              <div class="attention" v-lz-click="'5'" v-lz-skuid="item.skuId" @click="goToBuy(item)" :style="styleData.goBuyGood"></div>
            </van-cell>
          </van-list>
          </div>
          
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { List } from 'vant';
import { Cell } from 'vant';
Vue.use(List);
Vue.use(Cell);
import { newToSkuPage } from "../../../util/tools.js";
import apis from '../../../util/apis1.js';
let { getOrderGoodsRepurchase } = apis;
export default {
  props: ['datas', 'styleData', 'keyData', 'isTemplate', 'templateData', 'modifyContent', 'isWebClick'],
  components: {},
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      pageSize: 10,
      pageNo: 1,

      joinGoodList: [],
      timer :new Date().getTime()
    };
  },
  created() {
    this.initData();
  },
  methods: {
    onLoad() {
      console.log(this.total);
      console.log(this.joinGoodList.length,"this.joinGoodList.length");
      if (this.total <= this.joinGoodList.length) {
        this.finished = true;
        return;
      }
       this.pageNo = this.pageNo + 1;
        this.loading = false;
        this.getOrderGoods1();
     
    },

    initData() {
      if (this.isTemplate) {
        // console.log(this.templateData, 'this.templateData','银师傅');

        if (this.templateData) {
          if(this.templateData.consumptionGift.rules.skuInfoArr.length > 0){
            this.joinGoodList = this.templateData.consumptionGift.rules.skuInfoArr;
          }
        } else {
          this.joinGoodList = [
            {
              skuImg: 'https://img12.360buyimg.com/n0/jfs/t1/130255/37/10086/97127/5f6077a7E06be6368/2afbe833d5afe737.jpg',
              skuId: '1336052',
              skuName: '曝光商品1',
              skuPrice: '10.00'
            },
            {
              skuImg: 'https://img12.360buyimg.com/n0/jfs/t1/141102/16/8423/287508/5f608040E577b0a23/638bfa81fa424117.jpg',
              skuId: '100015054036',
              skuName: '曝光商品2',
              skuPrice: '10.00'
            },
            {
              skuImg: 'https://img12.360buyimg.com/n0/jfs/t1/130255/37/10086/97127/5f6077a7E06be6368/2afbe833d5afe737.jpg',
              skuId: '1336052',
              skuName: '曝光商品1',
              skuPrice: '10.00'
            },
            {
              skuImg: 'https://img12.360buyimg.com/n0/jfs/t1/141102/16/8423/287508/5f608040E577b0a23/638bfa81fa424117.jpg',
              skuId: '100015054036',
              skuName: '曝光商品2',
              skuPrice: '10.00'
            },
            {
              skuImg: 'https://img12.360buyimg.com/n0/jfs/t1/130255/37/10086/97127/5f6077a7E06be6368/2afbe833d5afe737.jpg',
              skuId: '1336052',
              skuName: '曝光商品1',
              skuPrice: '10.00'
            },
            {
              skuImg: 'https://img12.360buyimg.com/n0/jfs/t1/141102/16/8423/287508/5f608040E577b0a23/638bfa81fa424117.jpg',
              skuId: '100015054036',
              skuName: '曝光商品2',
              skuPrice: '10.00'
            }
          ];
        }
      }else{
        this.getOrderGoods1()
      }
    },
    getOrderGoods1() {
      getOrderGoodsRepurchase(this.pageNo, this.pageSize, responseData => {
        this.total = responseData.data.total;
        this.joinGoodList = this.joinGoodList.concat(responseData.data.records);
        this.$forceUpdate();
        this.timer = new Date().getTime();
      });
    },
    //立即抢购
    goToBuy(item){
        newToSkuPage(item);
    },
    //点击可修改位置的方法
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleDataNew,
          isCustomSwitching: this.receive,
          c_this: this,
          styleDataOld: this.styleDataOld
        };
        this.$emit('opertaionCom', type, byValue);
      }
    }
  }
};
</script>

<style lang="scss">
.joinGoodDivC {
  .van-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
  }
  .van-list__finished-text{
    width: 100%;
  }
  .goodulInner{
    width: 100%;
    height: 100%;
    overflow-y:scroll ;
  }
}
</style>
