<template>
  <div>
    <ShareOverlay :app-url="appUrl" />
    <div class="container">
      <img :src="backgroundImage" class="image" />
      <div
        class="cutDown"
        :style="{
          width: timeText === '距开始' || timeText === '距结束' ? '120px' : '160px'
        }"
      >
        <img src="./clock.png" class="clock" />
        <div class="cutDown-text">{{ timeText }}{{ time }}</div>
      </div>
      <cr-tabs
        v-model="categoryId"
        class="goods__tabs"
        :swipe-threshold="3"
        :line="true"
        :line-width="63"
        :line-height="3"
        color="#fff"
        title-active-color="#fff"
        title-inactive-color="#fff"
      >
        <cr-tab
          v-for="(item, index) in tabs"
          :key="index"
          :name="item.categoryId"
          :title="item.categoryName"
          :title-style="{
            fontSize: item.categoryId === categoryId ? '16px' : '14px',
            fontWeight: item.categoryId === categoryId ? '900' : 'normal'
          }"
        />
      </cr-tabs>
      <cr-list
        v-model="loading"
        class="goods__list"
        :finished="finished"
        finished-text="没有更多了"
        offset="100"
        @load="onLoad"
      >
        <div class="skuList">
          <div v-for="(sku, i) in list" :key="i" class="skuList-body">
            <img :src="sku.goodsImage" class="skuList-body-image" />
            <div class="skuList-body-right">
              <div class="skuList-body-right-info">
                <div class="skuList-body-right-info-name">{{ sku.goodsName }}</div>
                <div class="skuList-body-right-info-desc">
                  {{ sku.sellPoint }}
                </div>
                <div v-if="sku.tagList && sku.tagList.length" class="skuList-body-right-info-tags">
                  <div v-for="(tag, n) in sku.tagList" :key="n">
                    <cr-image v-if="tag.type === 0" :src="tag.imgUrl" height="12" fit="cover" />
                    <div v-if="tag.type === 1" class="skuList-body-right-info-tags-tag">
                      {{ tag.name }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="skuList-body-right-footer">
                <div class="skuList-body-right-footer-left">
                  <div class="skuList-body-right-footer-left-price">
                    <div class="skuList-body-right-footer-left-price-salePrice">
                      ￥<span class="skuList-body-right-footer-left-price-salePrice-detail">{{
                        sku.discountShow.discountPrice
                      }}</span>
                    </div>
                    <div class="skuList-body-right-footer-left-price-marketPrice">
                      原价：<span class="skuList-body-right-footer-left-price-marketPrice-detail"
                        >￥{{ sku.discountShow.skuInfoSalePrice }}</span
                      >
                    </div>
                  </div>
                  <div class="skuList-body-right-footer-left-progress">
                    <cr-progress
                      class="skuList-body-right-footer-left-progress-line"
                      :percentage="
                        sku.stockAndProgressInfo.saleCount /
                          (sku.stockAndProgressInfo.saleCount + sku.stockAndProgressInfo.goodsCount)
                      "
                      stroke-width="5"
                      :show-pivot="false"
                    />
                    <span class="skuList-body-right-footer-left-progress-count"
                      >已售{{ sku.stockAndProgressInfo.saleCount }}件</span
                    >
                  </div>
                </div>
                <cr-image src="./shopCart.png" width="30" height="30" />
              </div>
            </div>
          </div>
        </div>
      </cr-list>
    </div>
  </div>
</template>
<script>
import api from '../../api/goods.api';
import { parseTime } from '../../service/utils.service';
import ShareOverlay from '@/components/ShareOverlay.vue';
export default {
  components: {
    ShareOverlay
  },
  data() {
    return {
      appUrl: '',
      categoryId: '',
      activityInfoId: '',
      pageNo: 1,
      loading: false,
      finished: false,
      time: '',
      timer: null,
      timeInterval: '',
      activityTimeLeft: '',
      timeText: '结束时间',
      backgroundImage: '',
      activityName: '',
      list: [],
      tabs: []
    };
  },
  watch: {
    categoryId() {
      this.finished = false;
      this.pageNo = 1;
      this.getGoodsList();
    }
  },
  async mounted() {
    this.activityInfoId = this.$route.query.activityInfoId;
    this.appUrl = `xyqb://snapUpActivity?activityId=${this.activityInfoId}`;
    const [res] = await api.getActivityInfo(this.activityInfoId);
    this.tabs = res.categoryList || [];
    this.categoryId = this.tabs[0].categoryId || '';
    this.timeInterval =
      res.activityInfo.activityTimeInfo.startTime - res.activityInfo.activityTimeInfo.currentTime ||
      0;
    this.activityTimeLeft =
      res.activityInfo.activityTimeInfo.endTime - res.activityInfo.activityTimeInfo.currentTime ||
      0;
    this.timeText =
      this.timeInterval > 24 * 60 * 60 * 1000
        ? '开始时间'
        : this.timeInterval > 0
        ? '距开始'
        : this.activityTimeLeft > 0 && this.activityTimeLeft < 24 * 60 * 60 * 1000
        ? '距结束'
        : '结束时间';
    this.endTime = parseTime(res.activityInfo.activityTimeInfo.endTime, '{m}月{d}日 {h}:{i}');
    this.time =
      this.timeInterval > 24 * 60 * 60 * 1000
        ? parseTime(res.activityInfo.activityTimeInfo.startTime, '{m}月{d}日 {h}:{i}')
        : this.endTime;
    if (this.timeInterval && this.timeInterval < 24 * 60 * 60 * 1000) {
      this.timer = setInterval(() => {
        // const timeList = this.time.split(':');
        this.timeInterval = this.timeInterval - 1000;
        if (this.timeInterval <= 0) {
          clearInterval(this.timer);
          if (this.activityTimeLeft > 0 && this.activityTimeLeft < 24 * 60 * 60 * 1000) {
            this.timeText = '距结束';
            this.timer = setInterval(() => {
              if (this.activityTimeLeft <= 0) {
                clearInterval(this.timer);
                return;
              }
              const times = this.activityTimeLeft / 1000;
              let h = parseInt((times / 60 / 60) % 24);
              h = h < 10 ? '0' + h : h;
              let m = parseInt((times / 60) % 60);
              m = m < 10 ? '0' + m : m;
              let s = parseInt(times % 60);
              s = s < 10 ? '0' + s : s;
              this.time = `${h}:${m}:${s}`;
              this.activityTimeLeft = this.activityTimeLeft - 1000;
            }, 1000);
          } else {
            this.time = this.endTime;
            this.timeText = '结束时间';
          }
          return;
        }
        const times = this.timeInterval / 1000;
        let h = parseInt((times / 60 / 60) % 24);
        h = h < 10 ? '0' + h : h;
        let m = parseInt((times / 60) % 60);
        m = m < 10 ? '0' + m : m;
        let s = parseInt(times % 60);
        s = s < 10 ? '0' + s : s;
        this.time = `${h}:${m}:${s}`;
      }, 1000);
    } else if (this.activityTimeLeft > 0 && this.activityTimeLeft < 24 * 60 * 60 * 1000) {
      // this.timeText = '距结束';
      this.timer = setInterval(() => {
        if (this.activityTimeLeft <= 0) {
          clearInterval(this.timer);
          return;
        }
        const times = this.activityTimeLeft / 1000;
        let h = parseInt((times / 60 / 60) % 24);
        h = h < 10 ? '0' + h : h;
        let m = parseInt((times / 60) % 60);
        m = m < 10 ? '0' + m : m;
        let s = parseInt(times % 60);
        s = s < 10 ? '0' + s : s;
        this.time = `${h}:${m}:${s}`;
        this.activityTimeLeft = this.activityTimeLeft - 1000;
      }, 1000);
    }
    this.backgroundImage = res.activityInfo.img;
    this.activityName = res.activityInfo.activityName;
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    onLoad() {
      this.getGoodsList();
    },
    async getGoodsList() {
      if (!this.categoryId) return;
      this.loading = true;
      try {
        const [data] = await api.goodsList({
          categoryId: this.categoryId === '-1' ? '' : this.categoryId,
          activityInfoId: this.activityInfoId,
          pageSize: 10,
          pageNo: this.pageNo
        });
        if (data) {
          if (this.pageNo === 1) {
            this.list = [];
          }
          this.loading = false;
          this.list = [...this.list, ...data.records] || [];
          console.log(this.list, '9999999');
          if (!data.hasNext) {
            this.finished = true;
          } else {
            this.pageNo++;
          }
        } else {
          this.loading = false;
          this.finished = true;
        }
      } catch (error) {
        this.loading = false;
        this.finished = true;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  width: 100vw;
  height: 100vh;
}
.image {
  // width: 100vw;
  // height: auto;
  width: 100vw;
  height: 24.7vh;
}
.cutDown {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 10px;
  height: 20px;
  width: 160px;
  align-items: center;
  justify-content: space-around;
  // padding: 0 3px;
  &-text {
    color: #fff;
    font-size: 11px;
  }
}
.clock {
  width: 14px;
  height: 14px;
}
.goods__list {
  position: relative;
  top: -12vh;
  // background-color: #fff;
}
.goods__tabs {
  @{deep}.cr-tabs__item {
    width: 23vw;
  }
  @{deep}.cr-tabs__nav {
    // margin-left: 1vw;
    // width: 98vw;
    background: rgba(0, 0, 0, 0);
  }
  // @{deep} .cr-tabs__content {
  //   width: 100vh;
  //   overflow-y: scroll;
  //   position: fixed;
  //   top: 18.6vh;
  // }
  width: 100vw;
  position: relative;
  top: -12vh;
}
.skuList {
  width: 100vw;
  height: 80vh;
  overflow-y: scroll;
  background-color: #fff;
  margin-top: 5px;
  border-radius: 28px 28px 0 0;
  &-body {
    display: flex;
    width: 93.6vw;
    height: 15.5vh;
    margin-left: 3.2vw;
    padding-top: 2.5vh;
    &-image {
      width: 30.9vw;
      height: 15.5vh;
      margin-right: 8px;
    }
    &-right {
      display: flex;
      flex-direction: column;
      margin-left: 8px;
      justify-content: space-between;
      width: 60.5vw;
      height: 15.5vh;
      &-info {
        display: flex;
        flex-direction: column;
        margin-bottom: 3.3vh;
        &-name {
          font-size: 13px;
          color: #333;
          overflow: hidden;
          // width: 100%;
          white-space: normal;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          line-height: 19px;
        }
        &-desc {
          font-size: 12px;
          color: #999;
          margin-top: 5px;
        }
        &-tags {
          display: flex;
          color: #ec1500;
          font-size: 8px;
          margin-top: 7px;
          &-tag {
            border: 0.5px solid #ec1500;
            padding: 1px 3px 1px 5px;
            border-radius: 3px;
            margin-right: 3px;
          }
        }
      }
      &-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        &-left {
          display: flex;
          flex-direction: column;
          &-price {
            display: flex;
            align-items: center;
            &-salePrice {
              color: #ec1500;
              font-size: 14px;
              &-detail {
                font-size: 18px;
              }
            }
            &-marketPrice {
              font-size: 12px;
              color: #999;
              margin-left: 6px;
              &-detail {
                margin-left: -6px;
              }
            }
          }
          &-progress {
            display: flex;
            align-items: center;
            margin-top: 3px;
            &-line {
              width: 62px;
              @{deep}.cr-progress__progress {
                background-image: linear-gradient(to left, #ff5d00, #ec1500);
              }
            }
            &-count {
              font-size: 12px;
              color: #999;
              margin-left: 8px;
            }
          }
        }
      }
    }
  }
}
</style>
