<template>
  <div class="panic-buying-box" :style="{ backgroundImage: `url(${backgroundImage})` }">
    <template v-if="activityInfo && activityInfo.activityInfoId">
      <div v-if="showTime" class="panic-buying-box--timer">
        <div>{{ timeBefore }}</div>
        <div class="panic-buying-box--timer__time">
          <cr-count-down :time="time" :format="format" @finish="getActivityInfo" />
        </div>
      </div>
      <div class="panic-buying-wrapper">
        <cr-tabs
          v-model="value"
          title-bg-color="rgba(0,0,0,0)"
          title-active-color="#fff"
          color="#fff"
          @change="onTabChange"
        >
          <cr-tab
            v-for="category in categoryList"
            :key="category.categoryId"
            :title="category.categoryName"
          />
        </cr-tabs>
      </div>
      <div class="panic-buying-body">
        <cr-list
          v-if="!reload"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          :immediate-check="false"
          offset="10"
          @load="getGoodsList"
        >
          <GoodsItem
            v-for="(item, index) in goodsList"
            :key="index"
            :item="item"
            :topic-cfg="activityInfo"
          />
        </cr-list>
      </div>
    </template>
    <div v-else class="panic-buying-box--empty">
      <cr-loading v-if="!activityLoadFinished" size="24px">加载中...</cr-loading>
      <cr-empty v-else :image="empyImg" image-size="4rem" description="没有找到相关活动~" />
    </div>
  </div>
</template>
<script>
import { panicBuyingApi } from '@/api/activity';
import empyImg from '@/assets/images/electronicInvoice/empy.png';
import GoodsItem from './components/GoodsItem.vue';
export default {
  components: {
    GoodsItem
  },
  data() {
    return {
      activityInfoId: 0,
      backgroundImage: '',
      activityInfo: {},
      categoryList: [],
      goodsList: [],
      loading: true,
      activityLoading: false,
      activityLoadFinished: false,
      isShowDay: true,
      time: 0,
      showTime: false,
      empyImg,
      day: '',
      timeBefore: '距结束',
      format: '{h}时{m}分{s}秒',
      pageNo: 1,
      pageSize: 10,
      categoryId: 0,
      reload: false,
      finished: false,
      value: ''
    };
  },
  created() {
    this.getActivityInfo();
  },
  methods: {
    // 处理时间
    dealTime() {
      const atime = this.activityInfo.activityTimeInfo;
      if (!atime) {
        return;
      }
      const eTime = atime.endTime - atime.currentTime;
      const sTime = atime.currentTime - atime.startTime;
      let time = 0;
      if (eTime > 0) {
        this.showTime = true;
        this.timeBefore = '距结束';
        time = eTime;
      } else if (sTime > 0) {
        this.showTime = true;
        this.timeBefore = '距开始';
        time = sTime;
      }
      this.showTime = eTime > 0 || sTime > 0;
      if (this.showTime) {
        this.isShowDay = time > 24 * 60 * 60 * 1000;
        this.time = time;
        if (this.isShowDay) {
          this.format = '{d}天{h}时{m}分';
        } else {
          this.format = '{h}时{m}分{s}秒';
        }
      }
    },
    // 获取抢购活动信息
    async getActivityInfo() {
      const timer = setTimeout(() => {
        clearTimeout(timer);
        if (!this.activityLoadFinished) {
          this.activityLoading = true;
        }
      }, 500);
      this.activityInfoId = this.$route.query.id;
      const [res] = await panicBuyingApi.activityInfo(this.activityInfoId);
      this.activityLoadFinished = true;
      this.activityLoading = false;
      if (res && res.activityInfo) {
        this.activityInfo = res.activityInfo;
        this.backgroundImage = res.activityInfo.img || '';
        this.dealTime();
      }
      this.categoryList = res?.categoryList || [];
      if (this.categoryList && this.categoryList.length) {
        this.onTabChange(0);
      }
    },
    // 获取feed流商品
    async getGoodsList() {
      this.loading = true;
      this.pageNo++;
      const params = {
        activityInfoId: this.activityInfoId,
        categoryId: this.categoryId,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      };
      const [res] = await panicBuyingApi.goodsFeed(params);
      this.loading = false;
      if (res) {
        this.finished = !res.hasNext;
        this.goodsList = [...this.goodsList, ...res.records];
      } else {
        this.finished = true;
      }
    },
    onTabChange(index) {
      this.finished = false;
      const category = this.categoryList[index];
      this.categoryId = category.categoryId;
      this.pageNo = 0;
      this.goodsList = [];
      this.getGoodsList();
    }
  }
};
</script>
<style lang="less" scoped>
.panic-buying-box {
  padding: 0;
  min-height: 100vh;
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative;
  &--timer {
    position: absolute;
    right: 12px;
    top: 12px;
    height: 20px;
    line-height: 20px;
    min-width: 80px;
    border-radius: 10px;
    color: #fff;
    background: url('https://img.lkbang.net/icon-timer.bb39d4bce08a28d.bb39d4bc.png') no-repeat;
    background-position: 3px center;
    background-size: 16px 14px;
    background-color: rgba(0, 0, 0, 0.3);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px 0 23px;
    &__day {
      margin-left: 4px;
    }
    &__time {
      width: 82px;
      padding-left: 4px;
      word-break: keep-all;
    }
    /deep/ .cr-count-down {
      color: #fff;
      font-size: 12px;
    }
  }
  /deep/ .cr-loading--text {
    color: #999;
  }
  &--empty {
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    color: #999;
  }
}
.panic-buying-wrapper {
  padding-top: 106px;
  /deep/ .cr-tabs__item--active {
    font-size: 16px;
  }
}
.panic-buying-body {
  margin-top: 7px;
  background-color: #fff;
  border-radius: 28px 28px 0px 0px;
  min-height: calc(100vh - 167px);
  padding-top: 10px;
  color: #333;
}
</style>
