<template>
  <div>
    <search-panel ref="panel" @clear="clearKeywords" @enter="searchEnterEvent" />
    <search-tab @change="searchTabChange" />

    <div v-if="activityInfo.endTimeSecond" class="head">
      <p class="activity-desc">{{ activityInfo.activityDesc }}</p>
      <div class="endTime-second">
        <span class="endTime-second-tip">距结束</span>
        <cr-count-down
          v-if="activityInfo.endTimeSecond"
          :time="activityInfo.endTimeSecond"
          @finish="timeup"
        >
          <template #default="timeData">
            <span class="block">{{ timeData.d }}</span>
            <span class="colon">天</span>
            <span class="block">{{ timeData.h }}</span>
            <span class="colon">时</span>
            <span class="block">{{ timeData.m }}</span>
            <span class="colon">分</span>
            <span class="block">{{ timeData.s }}</span>
            <span class="colon">秒</span>
          </template>
        </cr-count-down>
      </div>
    </div>

    <scroll-view class="home-container" :to-top="scrollTop" @toBottom="loadData" @scroll="onScroll">
      <div v-if="!goodsList.length && isShowEmptyImg" class="main">
        <div class="main-empty">
          <img src="../../assets/images/activity/commodity.png" alt="" />
        </div>
        <div class="main-empty-tip">没有更多啦！</div>
      </div>
      <div v-if="goodsList.length" class="goods-list">
        <full-minus-goods-list :goods-list.sync="goodsList" @addProduct="addProduct" />
        <loadMore :status="loadingType" />
      </div>
    </scroll-view>

    <div class="footer">
      <div v-if="!!activityInfo.endTimeSecond" class="bottom-text">
        <p class="bottom-text-one">
          小计：<span>￥</span><span class="total-amt"> {{ activityInfo.totalAmt }}</span>
        </p>
        <p class="bottom-text-two">
          还差<span>{{ activityInfo.needAmt }}</span
          >即可享受{{ desc }}的优惠
        </p>
      </div>
      <button
        class="toCartBtn"
        :class="!!activityInfo.endTimeSecond ? 'btn-small' : 'btn-big'"
        @click="toCart"
      >
        去购物车
      </button>
    </div>
  </div>
</template>
<script>
import fullMinusGoodsList from './components/fullMinusGoodsList.vue';
import { homeSearch, getActivityInfo } from '@/api/home.api.js';
import ScrollView from '@/components/scrollView';
import loadMore from '@/components/loadMore';
import SearchTab from '@/components/search/SearchTab';
import SearchPanel from '@/components/search/SearchPanel';

export default {
  name: 'ActivityProduct',
  components: {
    fullMinusGoodsList,
    ScrollView,
    loadMore,
    SearchTab,
    SearchPanel
  },
  data() {
    return {
      goodsList: [],
      loadingType: 'loading',
      desc: '',
      isShowEmptyImg: false,
      searchForm: {
        searchText: undefined,
        activityType: '1', // 活动类型1： 满减 2：金刚位专题
        activityId: '',
        pageNo: 0,
        pageSize: 20,
        rankType: 1, // 排序类型 1:综合; 2:价格倒序; 3: 价格 正序; 4. 销量倒序; 5: 销量正序;
        searchId: undefined // 搜索批次ID(首次搜索不传)
      },
      activityInfo: {}, // 活动信息
      scrollTop: 0
    };
  },
  computed: {
    showDay() {
      return this.activityInfo.endTimeSecond > 86400;
    }
  },
  activated() {
    const currnetScrollTop = this.scrollTop;
    this.scrollTop = 0;
    this.$nextTick(() => {
      this.scrollTop = currnetScrollTop;
    });
  },
  mounted() {
    this.searchForm.activityId = this.$route.query.activityId;
    this.desc = this.$route.query.activityDesc;
    this.loadData();
  },

  methods: {
    timeup() {
      this.activityInfo.endTimeSecond = 0;
      this.searchForm.activityId = '';
      this.pageNo = 0;
      this.activity = null;
      this.loadData();
    },
    async loadData() {
      this.hasRecommend = false;
      if (this.loadingType === 'noMore' || this.progress === 'loading') {
        return;
      }
      this.progress = 'loading';
      this.searchForm.pageNo++;
      const [data] = await getActivityInfo({
        activityId: this.searchForm.activityId,
        activityType: this.searchForm.activityType,
        queryShopCartSku: true
      });
      // 活动信息赋值
      this.$set(this, 'activityInfo', { ...data.activityInfo });
      await this.getList();
      this.progress = 'finished';
    },
    /**
     * 加入购物车
     */
    addProduct(val) {
      this.activityInfo.totalAmt = Math.round((+this.activityInfo.totalAmt + +val) * 100) / 100;
      this.activityInfo.needAmt =
        +this.activityInfo.needAmt - +val > 0
          ? Math.round((this.activityInfo.needAmt - +val) * 100) / 100
          : 0;
    },
    toCart() {
      this.$router.push('/shopcart');
    },
    /**
     * 搜索---删除关键字
     */
    clearKeywords() {
      this.searchForm.searchText = '';
    },
    /**
     * 搜索
     */
    async search() {
      // this.isSearch = true;
      this.goodsList = [];
      this.searchForm.pageNo = 1;
      this.getList();
    },
    /**
     * 获取商品列表
     */
    async getList() {
      this.loadingType = 'loading';
      const [res] = await homeSearch(this.searchForm);
      this.hasRecommend = res.hasRecommend;
      if (res.goodsList) {
        this.goodsList = [...this.goodsList, ...res.goodsList];
      }
      if (!this.goodsList.length) {
        this.isShowEmptyImg = true;
      }
      this.searchForm.searchId = res.searchId;
      this.loadingType = res.hasNext ? 'more' : 'noMore';
    },
    /**
     * 修改排序
     */
    searchTabChange(rankType) {
      this.searchForm.rankType = rankType;
      this.search();
    },
    /**
     * 回车搜索
     */
    searchEnterEvent(keyWords) {
      this.searchForm.searchText = keyWords;
      this.search();
    },
    /**
     * 滑动
     */
    onScroll(top) {
      this.scrollTop = top;
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped />
