<template>
  <page-meta :page-style="themeColor"></page-meta>
  <view class="seckill">
    <!--顶部内容-->
    <view class="seckill-top" v-if="list.length > 0">
      <image class="top-background-image" :src="$util.img('public/static/img/futures/seckill-bg.png')" mode="widthFix"></image>
      <view class="seckill-count-down" v-if="h > 0 || i > 0 || s > 0">
        距结束
        <text class="count-down-time">{{ h }}</text>时
        <text class="count-down-time">{{ i }}</text>分
        <text class="count-down-time">{{ s }}</text>秒
      </view>
    </view>
    <!--商品列表-->
    <mescroll-uni ref="mescroll" @getData="getList" top="240">
      <block slot="list">
        <view class="goods-list" v-if="list.length > 0">
          <view class="goods-block" v-for="(item,index) in list" :key="index">
            <view class="left">
              <image class="goods-image" :src="$util.img(item.goods_image)" mode="widthFix"></image>
              <view class="goods-status" v-if="parseInt(item.status) === 2">正在销售</view>
              <view class="goods-status" v-else>{{ status_text[item.status] }}</view>
            </view>
            <view class="right">
              <view class="goods-title">{{ item.goods_name }}</view>
              <view class="goods-sell">
                <view class="goods-sell-item">销售商：{{ item.seller_nickname }}</view>
                <view class="goods-sell-item">采购数量：{{ item.total }}件</view>
              </view>
              <view class="goods-bottom">
                <view class="price">
                  <view class="price-item">单价:￥{{ item.market_price }}/{{ item.unit || '件' }}</view>
                  <view class="price-item">采购价:<text class="purchase_price">￥{{ item.price }}</text></view>
                </view>
                <view class="buy-button">
                  <view class="buy-btn" @click="$util.redirectTo('/pages_promotion/futures/details', { id: item.id }, 'redirectTo');">前去采购</view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-else>
          <ns-empty :isIndex="false" :text="msg"></ns-empty>
        </view>
      </block>
    </mescroll-uni>
    <!--登录弹框-->
    <ns-login ref="login"></ns-login>
    <!--加载动画-->
    <loading-cover ref="loadingCover"></loading-cover>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      msg: '未到秒杀时间',
      status_text: {
        1 : '库存',
        2 : '正在销售',
        3 : '已售出',
        4 : '提货中',
        5 : '提货完成',
        6 : '待支付',
        7 : '捡漏',
      },
      // 倒计时
      end_time: 0,// 结束时间  时间戳
      diff_time: 0,
      h: '00',
      i: '00',
      s: '00',
      interval: '',
    };
  },
  components: {},
  mixins: [],
  onLoad(option) {},
  onReady(){
    // 判断是否登录
    if (!uni.getStorageSync('token')) this.$refs.login.open('/pages_promotion/futures/seckill');
  },
  onShow() {},
  methods: {
    // 获取商品列表
    getList(mescroll) {
      this.$api.sendRequest({
        url: '/futures/api/futures/list',
        data: {
          page: mescroll.num,
          page_size: mescroll.size,
          status: 'miaosha',
        },
        success: res => {
          if(parseInt(res.code) === 0){
            mescroll.endSuccess(Object.keys(res.data.list).length);

            //设置列表数据
            if (parseInt(mescroll.num) === 1){
              this.list = []; //如果是第一页需手动制空列表
            }

            this.list = this.list.concat(res.data.list); //追加新数据
            this.end_time = parseInt(res.data.end_time);
            // 开启倒计时
            this.countDown();
          }else {
            this.msg = res.message;
          }

          if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
        },
        fail: res => {
          mescroll.endErr();
          if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
        }
      });
    },
    // 倒计时
    countDown(){
      this.interval = setInterval(() => {
        // 获取距离结束时间的毫秒数
        let nowTime = Math.ceil((new Date()).getTime() / 1000);
        this.diff_time = this.end_time - nowTime;
        // 计算时间
        let result = this.$util.countDown(this.diff_time);
        this.h = (parseInt(result.d) * 24) + parseInt(result.h);
        this.i = parseInt(result.i);
        this.s = parseInt(result.s);
      }, 1000)
    }


  },
  onBackPress(options) {
    if (options.from === 'navigateBack') return false;
    this.$util.redirectTo('/pages/member/index');
    return true;
  }
};
</script>

<style lang="scss" scoped>
.seckill{
  background: #fafcff;
  min-height: 100vh;

  .seckill-top{
    width: 100vw;
    position: relative;
    .top-background-image{
      width: 100%;
    }
    .seckill-count-down{
      position: absolute;
      top: 150rpx;
      left: 0;
      width: 100%;
      text-align: center;
      font-size: 30rpx;
      color: #f7dee1;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-content: center;
      justify-content: center;
      align-items: center;
      height: 60rpx;
      .count-down-time{
        --size--: 45rpx;
        background: #ffffff;
        color: #fe7671;
        min-width: calc(var(--size--) - 20rpx);
        height: var(--size--);
        border-radius: 10rpx;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        margin: 0 6rpx;
        font-size: 26rpx;
        padding: 0 10rpx;
      }
    }
  }
  .goods-list{
    margin: 0 30rpx;

    .goods-block{
      --size--: calc((100vw - 100rpx) / 3);
      border-radius: 20rpx;
      background: #ffffff;
      padding: 20rpx;
      margin-bottom: 30rpx;
      box-shadow: 0 2rpx 10rpx #eeeff2;
      width: calc(100% - 40rpx);
      display: inline-flex;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: center;
      justify-content: center;
      align-items: center;
      height: var(--size--);

      .left{
        margin-right: 20rpx;
        height: var(--size--);
        width: var(--size--);
        position: relative;
        border-radius: 20rpx;
        overflow: hidden;

        .goods-image{
          max-width: 100% !important;
          max-height: 100% !important;
        }
        .goods-status{
          position: absolute;
          bottom: 0;
          width: 100%;
          background: #fc4740;
          color: #febebc;
          font-size: 24rpx;
          text-align: center;
          height: 30rpx;
          line-height: 30rpx;
        }
      }
      .right{
        width: calc((var(--size--) * 2) - 20rpx);
        display: inline-flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: flex-start;
        justify-content: flex-start;
        align-items: flex-start;
        height: 100%;
        .goods-title{
          width: 100%;
          height: 50rpx;
          line-height: 50rpx;
          font-size: 30rpx;
          font-weight: bold;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .goods-sell{
          width: 100%;
          display: inline-flex;
          height: 50rpx;
          line-height: 50rpx;
          color: #b5b7c0;
          .goods-sell-item{
            width: 50%;
            color: #b5b7c0;
            font-size: 24rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 50rpx;
          }
          .goods-sell-item:nth-of-type(1){
            text-align: left;
          }
          .goods-sell-item:nth-of-type(2){
            text-align: right;
          }
        }
        .goods-bottom{
          width: 100%;
          height: calc(var(--size--) - 100rpx);
          display: inline-flex;
          align-items: flex-end;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: space-between;

          .price{
            height: 100%;
            display: inline-flex;
            flex-direction: column;
            flex-wrap: nowrap;
            justify-content: flex-end;
            align-items: flex-start;
            width: calc(100% - 140rpx);

            .price-item{
              width: 100%;
              color: #b5b7c0;
              font-size: 24rpx;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              height: 40rpx;
              line-height: 40rpx;
              .purchase_price{
                color: #fe7e79;
                font-size: 30rpx;
                font-weight: bold;
              }
            }
          }
          .buy-button{
            height: 100%;
            display: inline-flex;
            align-items: flex-end;
            justify-content: flex-end;
            .buy-btn{
              width: 140rpx;
              height: 70rpx;
              line-height: 70rpx;
              color: #fef5f5;
              background: #ff2724;
              font-size: 26rpx;
              border-radius: 100rpx;
              text-align: center;
              margin-bottom: 8rpx;
            }
          }
        }
      }
    }
  }
}
</style>
