<template>
  <div class="group" :style="{ backgroundColor: gpBackColor }">
    <!-- 配置头部动态信息 start -->
    <div class="group-top">
      <!-- 动态活动背景图 -->
      <cr-image width="100%" height="100%" class="group-top-image" :src="gpImagePath" />
    </div>
    <!-- 配置头部动态信息 end -->

    <!-- 下方列表展示信息 start -->
    <div class="group-bottom">
      <div class="group-portrait">
        <div class="group-portrait-head">
          <div class="group-portrait-swipe" @click="switchAnimation">
            <swipeCustomerInfo v-model="showSwipe" />
          </div>
          <div class="group-portrait-ul">
            <groupSwiper v-if="avatorData.length" :avator-data="avatorData" />
          </div>
          <!-- <ul class="group-portrait-ul" :class="animate">
            <li
              v-for="(imgItem, imgIndex) in gpImagePathArray"
              :key="imgIndex"
              class="group-portrait-image"
            >
              <cr-image :src="imgItem" />
            </li>
          </ul> -->
        </div>
        <div class="group-portrait-num" @click="showSwipe = !showSwipe">已有 1230人 参与拼单</div>
      </div>
      <div class="group-list">
        <div class="list-title">
          <b class="list-title-text">今日拼团</b>
          <div class="list-count">
            <span class="list-count-label">距结束：</span>
            <count-down :end-time="gpCountDown" />
          </div>
        </div>
        <cr-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <goods-card
            v-for="(item, index) in goodsList"
            :key="index"
            :index="index"
            :goods-item="item"
          />
        </cr-list>
      </div>
      <!-- 下方列表展示信息 end -->
    </div>
  </div>
</template>
<script>
import groupBuyApi from '@/api/groupBuy';
import countDown from '@/components/countDown';
import swipeCustomerInfo from '@/components/swipeCustomerInfo';
import gpImagePath from '@/assets/images/groupBuy/bg-top.png';
import goodsCard from './components/goodsCard';
import groupSwiper from '@/components/groupSwiper';
export default {
  // beforeRouteEnter(to, from, next) {
  //   next(vm => {});
  // },
  // eslint-disable-next-line vue/name-property-casing
  name: 'groupBuyList',
  components: { countDown, swipeCustomerInfo, goodsCard, groupSwiper },
  data() {
    return {
      avatorData: [],

      animate: {
        animateAuto: false,
        transition: true,
        blue: true,
        green: false,
        animation: false
      },

      showSwipe: false,
      gpImagePath,
      gpBackColor: '#FA494E',
      gpImagePathArray: [
        'https://activitystatic.lkbang.net/mall-free-ui/img/avator_01.png',
        'https://activitystatic.lkbang.net/mall-free-ui/img/avator_02.png',
        'https://activitystatic.lkbang.net/mall-free-ui/img/avator_03.png',
        'https://activitystatic.lkbang.net/mall-free-ui/img/avator_04.png',
        'https://activitystatic.lkbang.net/mall-free-ui/img/avator_05.png',
        'https://activitystatic.lkbang.net/mall-free-ui/img/avator_06.png',
        'https://activitystatic.lkbang.net/mall-free-ui/img/avator_07.png'
      ],
      gpCountDown: new Date('2021-09-12 00:00:00').getTime(),

      goodsList: [],
      loading: false,
      finished: false
    };
  },
  computed: {},
  created() {},
  mounted() {
    // todo 曝光埋点
    this.$nextTick(() => {
      // this.avatorTimeSyncChange();
      this.getAvatorList();
    });
  },
  methods: {
    avatorTimeSyncChange() {
      setInterval(() => {
        this.showSwipe = false;
        this.getAvatorList();
        // clearTimeout(timer);
      }, 3000);
    },
    showSwipeSync(avatorData) {
      let timer = setTimeout(() => {
        this.avatorData = avatorData;
        this.showSwipe = true;
        clearTimeout(timer);
      }, 1000);
    },
    async getAvatorList() {
      try {
        const [data] = await groupBuyApi.getGroupAvator();
        this.showSwipeSync(data);
      } catch (err) {
        console.log(err);
      }
    },
    switchAnimation() {
      this.animate.animateAuto = !this.animate.animateAuto;
    },

    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // setTimeout(() => {
      //   for (let i = 0; i < 10; i++) {
      //     this.list.push(this.list.length + 1);
      //   }

      //   // 加载状态结束
      //   this.loading = false;

      //   // 数据全部加载完成
      //   if (this.list.length >= 40) {
      //     this.finished = true;
      //   }
      // }, 1000);

      this.getGoodsList();
    },

    async getGoodsList() {
      // const { pageSize, pageNo, activityId } = this;
      // const { goodsSpecialId, templateDetailId } = this.topicCfg;
      this.loading = true;
      this.finished = false;
      try {
        const [res] = await groupBuyApi.getGroupList({
          // goodsSpecialId,
          // pageSize,
          // pageNo,
          // activityId,
          // templateDetailId
        });
        console.log(res);
        if (res.size) {
          this.loading = false;
          this.showLoading = false;
          this.goodsList = res.items || [];
          if (!res.hasNext) {
            this.finished = true;
          } else {
            this.pageNo++;
          }
        }
      } catch (error) {
        this.loading = false;
        this.finished = true;
      }
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
