<template>
  <div class="orderGoodDivC" v-if="show">
    <basicPop :pop="pop" @closeClick="closeClick">

      <div class="goodulbox">

        <div class="goodulInner">
          <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
            <van-cell v-for="(item, index) in joinGoodList" :key="index" class="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">
                  <div class="goodName">
                    <span class="titleSpan">{{ item.name ? item.name : item.skuName }}</span>
                  </div>
                  <div>
                    <div class="goodPrice">
                      <span class="price1">￥</span>
                      {{ item.price ? item.price : item.skuPrice }}
                    </div>

                  </div>
                </div>
              </div>
              <div class="goBuyGood" v-lz-click="'5'" v-lz-skuid="item.skuId" @click="goToBuy(item)"></div>
            </van-cell>
          </van-list>
        </div>
      </div>

    </basicPop>
  </div>
</template>

<script>
import Vue from 'vue';
import { List } from 'vant';
import { Cell } from 'vant';
Vue.use(List);
Vue.use(Cell);
import basicPop from './hdzxtbasicPop.vue';
import apis from '../../../util/apis1.js';
import {newToSkuPage} from "../../../util/tools";

let {orderCourtesyskuList} = apis;
export default {
  props: [],
  components: {
    basicPop
  },
  data() {
    return {
      pop: {
        title: '参与活动商品',
        titlepop: ''
      },
      orderList: [],

      list: [],
      loading: false,
      finished: false,
      pageSize: 10,
      pageNo: 1,

      joinGoodList: [],
      timer: new Date().getTime(),
      total: 0,


    };
  },
  created() {
    console.log(this.styleDataNew, 'this.styleDataNew');
    this.pop.titlepop = {backgroundImage: 'url(https://img10.360buyimg.com/imgzone/jfs/t1/128849/31/33933/2771/63aa4b07F2f2413ab/128c388f947eff26.png)'};
    this.pop.leftLineDiv = {
      "width": "17px",
      "height": "14px",
      "backgroundImage": "url(//img10.360buyimg.com/imgzone/jfs/t1/33183/9/18253/584/63aa55a3E627eec33/193748e76bdf7a8e.png)",
      "backgroundRepeat": "no-repeat",
      "backgroundSize": "100%",
      "marginRight": "0.1rem"
    }
    this.pop.rightLineDiv = {
      "width": "17px",
      "height": "14px",
      "backgroundImage": "url(//img10.360buyimg.com/imgzone/jfs/t1/110600/5/36333/565/63aa537aEe2462433/46946ce79404dcea.png)",
      "backgroundRepeat": "no-repeat",
      "backgroundSize": "100%",
      "marginLeft": "0.1rem"
    }

    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() {


      this.getOrderGoods1();


    },


    getOrderGoods1() {
      orderCourtesyskuList(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);
    },

    closeClick() {
      this.submit();
    }
  }
};
</script>

<style lang="scss">
.orderGoodDivC {

  .goodulbox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-content: flex-start;
    flex-wrap: wrap;
    padding: 0.3rem;
    max-height: 9.85rem;
    position: relative;
    overflow-y: scroll;

    .goodulInner {
      width: 100%;
      height: 100%;
      overflow-y: scroll;

      .van-list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
      }

      .van-list__finished-text {
        width: 100%;
      }

      .goodlibox {
        width: 3.4rem;
        margin-bottom: .1rem;
        background: #fff;
        border-radius: 0.2rem;
        overflow: hidden;

        .goodDetailAllDiv {
          text-align: left;
          max-width: 3rem;
          padding: 0.2rem 0.01rem;

          .goodName {
            font-size: 0.24rem;
            font-weight: 500;
            color: #333333;
            line-height: 0.3rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .goodPrice {
            font-size: 0.24rem;
            font-weight: 500;
            color: #E2231A;
            line-height: 0.3rem;
          }


        }


        .goBuyGood {
          width: 2.56rem;
          height: 0.60rem;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          margin: 0 auto;
          margin-top: 0.14rem;
          background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/32236/20/17598/3026/6307406bE3b87a669/355ec23696288825.png')

        }


      }


    }

  }

  .orderListDivAll {
    .itemTitleDiv {
      display: flex;
      color: #303030;
      font-size: 0.22rem;
      justify-content: center;
      align-items: center;
      margin-top: 0.54rem;

      .titelDiv {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .titelDiv1 {
        flex: 0.5;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .orderItemDivAll {
      height: 5.3rem;
      overflow-y: scroll;
      margin-top: 0.42rem;

      .orderItemDiv {
        display: flex;

        .itemDiv1 {
          color: #000000;
          font-size: 0.2rem;
          flex: 1;
          display: flex;
          justify-content: center;
        }

        .itemDiv2 {
          color: #000000;
          font-size: 0.2rem;
          flex: 0.5;
          display: flex;
          justify-content: center;
        }
      }
    }
  }

  .a {
    height: 100%;
    font-size: 0.24rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #8c8c8c;
  }
}
</style>
