<template>
  <!-- 限时秒杀 -->
  <div class="seckill wrapper_1200">
    <div class="swiperBoxBg">
      <div class="swiperBoxBg_l"></div>
      <div class="swiperBoxBg_c"></div>
      <div class="swiperBoxBg_r"></div>
    </div>
    <div v-swiper:navSwiper="swiperOption" class="swiperBox">
      <div class="seckill_title">
        <div class="seckill_title_txt">
          <div>秒杀专区</div>
          <div>疯狂抢购</div>
        </div>
      </div>
      <div class="swiper-wrapper" v-if="HourList.length">
        <div
          @click="seckillDetail(item, index)"
          v-for="(item, index) in HourList"
          v-show="item.isSeckillBg"
          :key="index"
          :class="{ 'row-column_active': item.isSeckillBg, on: slideIndex == index }"
          class="acea-row row-center-wrapper swiper-slide row-column"
        >
          <div style="font-size: 30px; font-family: DINAlternate-Bold, DINAlternate">
            {{ item.hours }}:00
          </div>
          <div v-if="moment == item.hours && item.isSeckillBg" style="color: #000">
            进行中
          </div>
          <div v-if="moment < item.hours && item.isSeckillBg">即将开始</div>
          <div v-if="moment > item.hours && item.isSeckillBg">已结束</div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <!--  -->
    <div class="goods_list" v-if="goods_seckillList.length">
      <div
        class="item"
        v-for="(item, index) in goods_seckillList"
        :key="index"
        @click="goDetail(item.goods_id)"
      >
        <div class="pictrue">
          <img v-lazy="imgUrl + item.sku_image" v-if="item.sku_image" />
          <img src="~assets/images/no_goods.jpg" alt v-else />
        </div>
        <div style="padding: 0 15px">
          <!-- <i>
            秒杀活动:
            <span class="seckill_name">{{ item.seckill_name }}</span>
          </i> -->

          <div class="name">{{ item.sku_name }}</div>
          <div class="kc">
            <span>库存：{{ item.stock }}</span>
            <span> 销量：{{ item.sale_num }} </span>
          </div>
          <!-- <div class="kc">
            <span
              >活动开始时间：{{
                $dayjs(item.start_time * 1000).format("YYYY-MM-DD HH:mm")
              }}
            </span>
            <span
              >活动结束时间：{{ $dayjs(item.end_time * 1000).format("YYYY-MM-DD HH:mm") }}
            </span>
          </div> -->
          <div class="stock" v-if="userInfo.show_price">
            <p>
              秒杀价：
              <span>￥{{ item.seckill_price }}</span>
              <!-- /{{ item.unit }} -->
            </p>
            <div class="originalPrice">原价¥{{ item.price }}</div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="!goods_seckillList.length" class="nothing">
      <img src="@/assets/images/noGoods.png" />
      暂无秒杀商品，去看点别的吧
    </div>
  </div>
</template>

<script>
import Setting from "~/setting";
import Guess from "@/components/guess.vue";
import countDown from "@/components/countDown";
export default {
  auth: false,
  components: { countDown, Guess },
  data() {
    return {
      isSignin: localStorage.getItem("token") ? true : false,
      userInfo: {},
      imgUrl: Setting.uplodBaseURL,
      swiperOption: {
        slidesPerView: "auto",
        loop: true,
      },

      finished: false,
      currentTimeId: "",
      currentStopTime: "",
      currentTimeState: "",
      currentTimeStatus: "",
      seckillTime: [],
      goods_seckillList: [],

      slideIndex: 0,
      isMoment: false,
      moment: undefined,
      beforeData: undefined,
      momentData: {},
      isSeckillBg: false,
      rangeTime: [],
      nowHour: "", //当前小时
      HourList: [], //钟点时间 24小时
    };
  },
  fetch({ store }) {
    store.commit("isHeader", true);
    store.commit("isFooter", true);
  },
  head() {
    return {
      title: "秒杀列表-" + this.$store.state.titleCon,
    };
  },
  watch: {},
  created() {
    // 已登录
    if (this.isSignin) {
      this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    }
    this.nowHour = this.getHour();

    //钟点时间 24小时
    var hoursObj = {};
    for (var i = 0; i <= 23; i++) {
      hoursObj = i;
      this.HourList.push({
        hours: hoursObj,
        isSeckillBg: false,
      });
    }
    let time = new Date();
    this.moment = time.getHours();
    this.swiperOption.initialSlide = this.moment;
    this.getSeckillTime();
  },
  mounted() {},
  methods: {
    // 获取秒杀时间段列表
    getSeckillTime() {
      this.$axios
        .post(`/goodssku/seckilltimeList`)
        .then((res) => {
          this.seckillTime = res.data.list;
          this.changeTime(this.seckillTime);
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 将秒杀时段转化
    changeTime(list) {
      let arr = [];
      arr = list.map((item) => {
        return {
          start: item.seckill_start_time / 3600,
          end: item.seckill_end_time / 3600,
          data: item,
        };
      });
      arr.forEach((item) => {
        for (let newNum = item.start; newNum <= item.end; newNum++) {
          this.rangeTime.push({ newNum, data: item.data });
        }
      });
      this.HourList.forEach((item) => {
        this.rangeTime.forEach((v, i) => {
          if (item.hours == v.newNum) {
            item.index1 = i;
            item.isSeckillBg = true;
            item.seckilldata = v.data;
          }
        });
      });

      this.HourList.forEach((item, index) => {
        if (this.moment == item.hours && item.isSeckillBg) {
          // 获取当前时间段秒杀商品
          this.seckillDetail(item, index);
        }
      });
      // console.log(this.HourList);
    },
    //获取当前时间 24小时
    getHour() {
      var h = new Date().getHours();
      var m = new Date().getMinutes();
      if (m > 1) {
        h = h + 1;
      }
      return h;
    },
    // 点击秒杀时段获取当前秒杀商品
    seckillDetail(item, index) {
      // isSeckillBg true 该时段有秒杀活动 false 该时段无秒杀活动
      if (item.isSeckillBg) {
        this.slideIndex = index;
        let obj = {
          seckill_time_id: item.seckilldata.id,
        };
        this.$axios
          .post(`/goodssku/seckillgoodsList`, obj)
          .then((res) => {
            this.goods_seckillList = res.data.list;
            // this.guessPage.total = res.data.count;
            console.log(this.goods_seckillList);
          })
          .catch((err) => {
            this.$message.error(err);
          });
      } else {
        this.$message.error("该时段无秒杀活动");
      }
    },
    goDetail(id) {
      this.$router.push({
        path: `/activityDetail`,
        query: {
          id,
          isSeckill: true,
          isCollage: false,
          isSetMeal: false,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.seckill {
  min-height: 330px;

  .swiperBoxBg {
    margin: 0 auto;
    margin-top: 30px;
    width: 510px;
    height: 15px;
    display: flex;
    .swiperBoxBg_c {
      width: 500px;
      height: 15px;
      background: var(--themeColor) !important;
    }
    .swiperBoxBg_l {
      width: 0px;
      height: 0px;
      border-top: 0px solid transparent;
      border-left: 5px solid transparent;
      border-right: 0px solid transparent;
      border-bottom: 15px solid var(--themeColor) !important;
    }
    .swiperBoxBg_r {
      width: 0px;
      height: 0px;
      border-top: 0px solid transparent;
      border-left: 0px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 15px solid var(--themeColor) !important;
    }
  }

  .title-section {
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: center;

    img {
      display: inline-block;
      width: 200px;
      height: 48px;
      vertical-align: middle;
    }
  }

  .swiperBox {
    width: 1200px;
    .seckill_title {
      width: 500px;
      height: 60px;
      margin: 0 auto;
      margin-bottom: 20px;
      font-size: 36px;
      font-family: Helvetica;
      color: #ffffff;
      line-height: 48px;
      background: var(--themeColor) !important;
      border-radius: 0px 0px 54px 54px;
      .seckill_title_txt {
        width: 408px;
        height: 50px;
        font-size: 40px;
        font-family: Helvetica;
        color: #ffffff;
        line-height: 40px;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        font-style: italic;
        font-weight: 600;
      }
    }
  }
  .swiper-container {
    width: 1200px;
    background: #ffffff;

    .swiper-slide {
      width: 253px;
      height: 80px;
      padding-right: 18px;
      margin-right: -18px;
      // background: url("~assets/images/seckill-slide-arrow.png") right top/18px
      //   80px no-repeat;
      font-size: 14px;
      color: #282828;
      cursor: pointer;

      &:last-child {
        margin-right: 0;
      }

      &.row-column {
        width: 161px;
        height: 91px;
        margin: 0px 30px 30px 20px;
        background: #f7f7f7;
        border-radius: 4px;
        div {
          &:first-child {
            width: auto;
            height: auto;
            margin-right: 0;
            margin-bottom: 4px;
            background: none;
            font-weight: bold;
            font-size: 18px;
            line-height: normal;
            text-align: inherit;
          }
        }
      }
      &.row-column_active {
        background: var(--themeColor) !important;
        border-radius: 4px;
        color: #fff;
      }

      &.off {
        color: #969696;
      }

      &.on {
        // background: url("~assets/images/seckill-slide-back.png") center/100%
        //   100% no-repeat;
        color: #222;
      }

      > div {
        &:first-child {
          width: 76px;
          height: 60px;
          margin-right: 16px;
          // background: url("~assets/images/seckill-slide-clock.png") center/60px
          //   60px no-repeat;
          font-weight: bold;
          font-size: 24px;
          line-height: 60px;
          text-align: center;
        }
      }

      .time {
        margin-top: 8px;
        margin-right: -3px;
        margin-left: -3px;
        font-weight: bold;
        font-size: 17px;
      }

      /deep/.styleAll {
        width: 30px;
        height: 25px;
        margin-right: 3px;
        margin-left: 3px;
        background-color: #222222;
        line-height: 25px;
        text-align: center;
        color: #ffffff;
      }
    }
  }

  .goods_list {
    width: 1200px;
    min-height: 400px;
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 260px;
      height: 320px;
      background-color: #fff;
      margin: 10px 20px;
      cursor: pointer;
      margin-bottom: 20px;
      box-shadow: 0px 0px 10px 0px rgba(102, 102, 102, 0.2);
      border-radius: 8px;
      overflow: hidden;
      box-sizing: border-box;

      &:hover {
        box-shadow: 0 3px 20px rgba(0, 0, 0, 0.06);
      }
      .pictrue {
        width: 100%;
        height: 202px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
        }
        .newTag {
          color: white;
          width: 60px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          background: #ff7d02;
          position: absolute;
          top: 0px;
          left: 0px;
          border-bottom-right-radius: 15px;
        }
      }
      .seckill_name {
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: var(--themeColor);
        line-height: 28px;
        margin-top: 10px;
      }
      .name {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #222222;
        line-height: 28px;
      }
      .kc {
        margin-top: 10px;
        span {
          font-size: 13px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
          line-height: 20px;
          margin-right: 20px;
        }
      }
      .stock {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 15px;
        img {
          width: 24px;
          height: 24px;
        }

        p {
          font-size: 12px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #999;
          span {
            font-size: 18px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ff1d1d;

            line-height: 25px;
          }
        }
        .originalPrice {
          color: #999999;
          text-decoration: line-through;
        }
      }
    }
  }

  .nothing {
    padding-top: 250px;
    padding-bottom: 150px;
    font-size: 16px;
    text-align: center;
    color: #969696;

    img {
      margin: 0 auto;
    }
  }
}
</style>
