<template>
  <!-- 配置活动背景色 -->
  <div class="group" :style="{ backgroundColor: topicCfg.bgcolor }">
    <div v-if="!isShowShare" class="group-puzzle" @click="goToMyorder">我的拼团</div>
    <!-- 配置头部动态信息 start -->
    <div class="group-top">
      <!-- 动态活动背景图 -->
      <cr-image width="100%" height="100%" class="group-top-image" :src="topicCfg.img" />
    </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" :avatar="customers.src" :name="customers.name" />
          </div>
          <div class="group-portrait-ul">
            <groupSwiper
              v-if="showLoops"
              ref="swipeRota"
              :avator-data="topicCfg.groupBuyUserInfoList"
              @animation-event-start="animationEventStart"
              @animation-event-end="animationEventEnd"
            />
          </div>
        </div>
        <div class="group-portrait-num" @click="showSwipe = !showSwipe">
          已有 {{ topicCfg.groupBuyUserCount }}人 参与拼单
        </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">{{ topicCfg.stateTxt }}：</span>
            <count-down :end-time="gpCountDown" />
          </div>
        </div>
        <cr-list
          v-if="!reload"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          :immediate-check="false"
          @load="onLoad"
        >
          <goods-card
            v-for="(item, index) in goodsList"
            :key="index"
            :index="index"
            :goods-item="item"
            :topic-cfg="topicCfg"
            @on-button-click="handleBtnClick"
          />
        </cr-list>
      </div>
      <div v-if="showLoading" class="loading">
        <cr-skeleton title :row="5" />
        <cr-skeleton title :row="5" />
        <cr-skeleton title :row="5" />
        <cr-skeleton title :row="5" />
      </div>
      <!-- 下方列表展示信息 end -->
    </div>
    <dl v-if="!isShowShare" class="group-share" @click="openShareEvent">
      <dt class="group-share-icon">
        <cr-image src="@/assets/images/share.png" />
      </dt>
      <dd class="group-share-text">分享</dd>
    </dl>
  </div>
</template>
<script>
import store from '@/store';
import groupBuyApi from '@/api/groupBuy';
import countDown from '@/components/countDown';
import swipeCustomerInfo from '@/components/swipeCustomerInfo';
import goodsCard from './components/goodsCard';
import groupSwiper from '@/components/groupSwiper';
import { isNull } from '@/service/validation.service';
import { handleRemainTime, handleDateFormat } from './components/utils';
import localStorage from '@/service/localStorage.service';
import goodsCheckMixin from '@/mixins/goodsCheck.mixin';
import { setAppTitleColor } from '@/service/utils.service';
import { registeredEvents } from '@/service/sa.service';
let topicIndex;
export default {
  // eslint-disable-next-line vue/name-property-casing
  name: 'groupBuyList',
  components: { countDown, swipeCustomerInfo, goodsCard, groupSwiper },
  mixins: [goodsCheckMixin],
  data() {
    return {
      showShare: false,
      avatorData: [],

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

      showSwipe: false,
      showLoops: false,
      customers: {},
      // goodsSpecialId	是

      showLoading: true,
      pageNo: 1, //	是
      pageSize: 10, //	否
      activityId: '', //是

      topicIndex: 0,
      topicList: {},

      goodsList: [],
      loading: false,
      finished: false
    };
  },
  computed: {
    isShowShare() {
      return this.$store.state.pay.isPrimordialBrowser;
    },

    // 更具goodsSpecialId 获取查询活动模板列表-对应数据项
    topicCfg() {
      const { topicList } = this;
      const info = topicList || {};
      return info;
    },

    gpCountDown() {
      const { endTime } = this.topicCfg;
      // if (hasStart) {
      //   return +new Date(endTime || 0);
      // } else {

      // };
      // if (){}

      return +new Date(endTime || 0);
    }
  },
  created() {
    this.reload = true;
    // console.log(this.isShowShare);
    // console.log(this.activityId);
    // this.hasLogin = !!localStorage.get('vccToken');
  },
  mounted() {
    this.showLoading = true;
  },
  beforeRouteEnter(to, from, next) {
    const { activityId } = to.query;
    if (!activityId || isNaN(activityId)) {
      next({
        path: '/error',
        replace: true
      });
      return;
    } else {
      if (isNull(topicIndex)) {
        getActivityList(to.query, next);
      } else {
        next();
      }
    }
  },
  deactivated() {
    clearTimeout(this.$refs.swipeRota.timer);
    this.showLoops = false;
  },
  activated() {
    this.showLoops = true;
    this.$nextTick(() => {
      this.$refs.swipeRota.onSlidePrevChange();
    });
    // this.topicIndex = topicIndex;
    // this.setTitleColor(this.topicCfg.bgcolor);
    // store.commit('changeTitle', this.topicCfg.title || '活动页');
  },
  methods: {
    animationEventStart() {
      this.showSwipe = false;
    },
    animationEventEnd(avator) {
      this.customers = avator;
      this.showSwipe = true;
    },

    async goToMyorder() {
      console.log(this.$track);
      const isLogin = this.checkLogin();
      if (!isLogin) {
        this.$router.push('/orderList/0');
      }
    },
    async openShareEvent() {
      const activity_id = this.activityId;
      let options = await this.getShareData();
      this.$store.dispatch('goods_share_open', options);
      registeredEvents('H5_GroupZeroYuanPurchaseActivityPageSharePopupBtnClick', {
        activity_id
      });
    },
    async getShareData() {
      // const link = `${window.location.origin}/groupBuy/list`;
      const { title, sharePosterTemplateUrl, img } = this.topicCfg;
      const link = window.location.href;
      return Promise.resolve({
        title,
        desc: '我正在免费拿商品，请你帮帮我',
        link: `pages/webview/webview?url=${link}/`, // 页面地址
        imgUrl: img, // 图片地
        posterUrl: sharePosterTemplateUrl
      });
    },
    showSwipeSync(avatorData) {
      let timer = setTimeout(() => {
        this.avatorData = avatorData;
        this.showSwipe = true;
        clearTimeout(timer);
      }, 1000);
    },
    switchAnimation() {
      this.animate.animateAuto = !this.animate.animateAuto;
    },
    setTitleColor(bgcolor = '#fff') {
      setAppTitleColor(bgcolor);
    },
    handleBtnClick(item) {
      const { activityId } = this;
      const { goodsSpecialId, templateId, templateDetailIds } = this.topicCfg;
      const { skuNo } = item;
      if (item.goodsCount !== 0) {
        this.$router.push({
          path: '/groupBuy/skuInfo',
          query: { skuNo, goodsSpecialId, templateId, templateDetailIds, activityId }
        });
      } else {
        this.$notify({ type: 'warning', message: '该商品已抢完' });
      }
    },
    onLoad() {
      if (this.topicCfg) {
        this.getGoodsList();
      }
    },

    async getGoodsList() {
      const { pageSize, pageNo, activityId } = this;
      const { goodsSpecialIds, templateDetailIds } = this.topicCfg;
      this.loading = true;
      this.finished = false;
      try {
        const [res] = await groupBuyApi.getGoodsList({
          goodsSpecialIds,
          templateDetailIds,
          pageSize,
          pageNo,
          activityId
        });
        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;
      }
    }
  }
};
async function getActivityList(urlQuery, next) {
  const { activityId } = urlQuery;
  // eslint-disable-next-line prettier/prettier
  let nextFns = function(cb) {
    cb(next);
  };
  if (typeof next === 'function') {
    nextFns = next;
  }
  const [result] = await groupBuyApi.getTemplateList(activityId);
  if (result?.templateInfo) {
    let t = result.templateInfo;
    // t.startTime = '2021-09-25 00:00:00';
    // t.endTime = '2021-09-15 00:00:00';
    // t.startTime = '2021-09-15 00:00:00';
    // t.endTime = '2021-09-18 00:00:00';
    const { endTime, startTime } = t;
    t.remainTime = handleRemainTime('', endTime)[0];
    t.hasStop = t.remainTime < 1;
    t.willTime = handleRemainTime('', startTime)[0];
    t.hasStart = handleRemainTime(startTime, '')[0] > 0;
    t = { ...t, ...handleDateFormat(startTime, endTime) };
    t.stateTxt = !t.hasStart ? '即将开始' : t.hasStop ? '活动已结束' : '距结束';
    t.groupBuyUserInfoList = t.groupBuyUserInfoList.reverse();
    const { title } = t;
    store.commit('CHANGE_TITLE', title || '活动页');
    nextFns(vm => {
      vm.activityId = activityId;
      vm.topicList = t;
      // vm.topicIndex = activityIndex;
      localStorage.set('activityId', activityId);
      // const { hasStop } = vm.topicCfg;
      // if (hasStop || !list.length) {
      //   vm.showOverTip = true;
      // }
      vm.getGoodsList();
      vm.reload = false;
    });
  } else {
    nextFns(vm => {
      vm.$toast({ type: 'danger', message: '当前活动不存在' });
    });
    return;
  }
}
</script>
<style lang="less" src="./index.less" scoped></style>
