<template>
  <!-- #ifdef H5 -->
	<zj-page-layout
    :hasFooter="false"
    :isScroll="true"
    :refresherTriggered="refresherTriggered"
	  @refresherrefresh="refresherrefresh"
    @scrolltolower="scrolltolower">
		<view class="top-container">
      <view class="time-list">
        <block v-for="(item, index) in seckillTimeList" :key='index'>
          <view class="item" :class="seckillTimeCurrent == index ? 'current':''" @tap="changeSeckillTime(index)">
            <view class="time">{{item.startHour}}:00</view>
            <view class="tag" v-if="item.type == 'yjs'">已结束</view>
            <view class="tag" v-if="item.type == 'jxz'">{{countdownTime}}</view>
            <view class="tag" v-if="item.type == 'wks'">即将开始</view>
          </view>
        </block>
      </view>
		</view>

		<view class="list-container">
      <div class="item" v-for="(item, index) in goodsList" :key='index' @tap="toSeckillGoodsDetail(item.goodsId)">
        <image :src="item.imgUrl" mode="aspectFill"></image>
        <view class="right">
          <view class="title ellipsis-2">{{item.goodsName}}</view>
          <view class="des ellipsis-2">{{item.describeText ? item.describeText : ''}}</view>
          <view class="stock-sales">
            <view class="stock">
              <text>剩余{{item.secStockNum}}件</text>
              <view class="progress-box">
                <!-- 库存 / 总数 * 100 = 剩余百分比 -->
                <progress :percent="item.secStockNum / item.limitBuy * 100" activeColor="#FF3F42" active stroke-width="6" />
              </view>
            </view>
            <view class="sales">销量：{{item.salesVolume}}</view>
          </view>
          <view class="bottom">
            <view class="price">
              <view class="price-1">¥{{item.price | priceFilter}}</view>
              <view class="price-2">¥{{item.goodsPrice | priceFilter}}</view>
            </view>
            <view class="btn" v-if="seckillTimeList[seckillTimeCurrent].type == 'jxz'">马上抢</view>
            <view class="btn2" v-else>马上抢</view>
          </view>
        </view>
      </div>
		</view>

    <Loading :loadStatus="loadStatus" :dataList="goodsList" />
	</zj-page-layout>

  <!-- #endif -->

  <!-- #ifndef H5 -->
  <web-view :src="webViewHref(`/packageGoods/pages/seckill`, pam, crossPagePam)" @message="crossPage.$listener"></web-view>
  <!-- #endif -->
</template>

<script>
  // #ifdef H5
	export default {
		data() {
			return {
				scrollTop: 0, // 滚动高度（用于控制自定义导航）
				seckillTimeList: [], // 秒杀时间段列表
				seckillTimeCurrent: 0, // 秒杀时间段选择
				goodsList: [], // 秒杀商品列表
				pageNum: 1,
        loadStatus: 0,
				refresherTriggered: false,
				countdownTime: '', // 倒计时
				endDatetime: '', // 倒计时结束时间
				nowDate: null, // 当前时间
			}
		},

		watch: {
			nowDate() {
				let hh = this.nowDate.getHours(),
					mm = this.nowDate.getMinutes(),
					ss = this.nowDate.getSeconds();
				let hs = [10, 12, 15, 18, 20];
				if(mm == 0 && ss == 0 && hs.indexOf(hh) >= 0) {
					setTimeout(() => {
						this.getTimeList();
					}, 1000)
				}
			}
		},

		onLoad() {
			this.getTimeList();
		},

		methods: {
			toBack(){
				uni.navigateBack({
					delta:1
				})
			},

			// 下拉刷新
			refresherrefresh() {
				this.refresherTriggered = true;
				this.getTimeList();
			},

      scrolltolower() {
        if (this.loadStatus === 0) {
          this.pageNum++;
          this.getGoodsList();
        }
      },

			findElem(array, attr, val) {
        for (var i = 0; i < array.length; i++) {
          if (array[i][attr] == val) {
            return i; //返回当前索引值
          }
        }
        return -1;
			},

			// 计算倒计时
			countTime() {
				let endDatetime = this.endDatetime.replace(/\-/g, '/');
				// console.log(endDatetime)
			    var nowtime = new Date(),  //获取当前时间
			        endtime = new Date(endDatetime);  //定义结束时间
			    var lefttime = endtime.getTime() - nowtime.getTime(),  //距离结束时间的毫秒数
			        hh = Math.floor(lefttime/(1000*60*60)),  //计算小时数
			        mm = Math.floor(lefttime/(1000*60)%60),  //计算分钟数
			        ss = Math.floor(lefttime/1000%60);  //计算秒数
				// console.log(new Date(endDatetime))
				function checkTime(i){
					if (i<10) {
						i = "0"+i;
					}
					return i;
				}
				setTimeout(() => {
					this.countTime();
				}, 1000);
				this.countdownTime = checkTime(hh) + ":" + checkTime(mm) + ":" + checkTime(ss);
				// console.log(this.countdownTime)
			},

			// 获取秒杀时间列表
			getTimeList() {
				this.$api.get('/goods/sec/time')
        .then(res => {
					if(res.data.length < 1) {return false;}
					this.seckillTimeList = res.data || [];
					this.seckillTimeCurrent = this.findElem(this.seckillTimeList, 'type', 'jxz');
					if(this.seckillTimeCurrent == -1) {
						this.seckillTimeCurrent = 0;
						this.refreshGoodsList();
					}else {
						this.endDatetime = this.seckillTimeList[this.seckillTimeCurrent].endDatetime;
						this.countTime();
						this.refreshGoodsList();
					}
				}).finally(res => {
					this.refresherTriggered = false;
				})
			},

			// 切换秒杀时间
			changeSeckillTime(index) {
				this.seckillTimeCurrent = index;
				this.refreshGoodsList();
			},

			// 获取秒杀商品列表
			getGoodsList() {
        this.loadStatus = 1;
				let secKillId = this.seckillTimeList[this.seckillTimeCurrent].secKillId;
				this.$api.get('/goods/sec/goods/list', {
          pageNum: this.pageNum,
          pageSize: 8,
          secKillId: secKillId,
				}).then(res => {
					this.loadStatus = 0;
					let list = res.data.records;
					if (list.length < 8) {
					  this.loadStatus = 2;
					}
					this.goodsList = this.goodsList.concat(list);
				}).finally(res => {
					this.refresherTriggered = false;
				})
			},

      refreshGoodsList() {
        this.goodsList = [];
        this.pageNum = 1;
        this.getGoodsList();
      },

			// 进入秒杀商品详情
			toSeckillGoodsDetail(id) {
				if(!id) return false
				if(this.seckillTimeList[this.seckillTimeCurrent].type == 'wks') return this.$toast('活动未开始');
        this.$navToPage({
          url: '/packageGoods/pages/detail?id=' + id
        })
			},
		}
	}

  // #endif
  // #ifndef H5
  export default {
    data() {
      return {
        pam: {},
      }
    },
    onLoad(pam) {
      this.pam = pam;
    }
  }
  // #endif
</script>

<style lang="scss" scoped>
	.top-container {
    padding: 20rpx;
		.time-list {
      @include zj-card;
			flex: 1;
			display: flex;
			overflow-x: scroll;
			align-items: center;
      padding: 20rpx 0;
			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				flex-shrink: 0;
				width: 140rpx;
				margin-right: 48rpx;
				.time {
					font-size: 32rpx;
				}
				.tag {
					width: 140rpx;
					height: 44rpx;
					border-radius: 44rpx;
					border: 1px solid #FFFFFF;
					font-size: 24rpx;
					box-sizing: border-box;
					margin-top: 12rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				&.current {
					.tag {
						background: #FFFFFF;
						color: #FF3F42;
					}
				}
			}
		}
	}
	.list-container {
		padding: 0 20rpx;
		.item {
      @include zj-card;
			background: #FFFFFF;
			border-radius: 10rpx;
			display: flex;
			padding: 20rpx;
			margin-bottom: 20rpx;
			image {
				display: block;
				width: 180rpx;
				height: 180rpx;
				flex-shrink: 0;
			}
			.right {
				width: 490rpx;
				box-sizing: border-box;
				padding-left: 20rpx;
				.title {
					font-size: 30rpx;
					color: #333333;
					line-height: 36rpx;
					font-weight: 600;
				}
				.des {
					font-size: 24rpx;
					line-height: 30rpx;
					color: #999999;
					margin-top: 6rpx;
				}
				.stock-sales {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 10rpx;
					font-size: 24rpx;
					color: #666666;
					.stock {
						display: flex;
						align-items: center;
						text {
							font-size: 24rpx;
							color: #666666;
						}
						.progress-box {
							width: 140rpx;
							border-radius: 6px;
							overflow: hidden;
							margin-left: 10rpx;
						}
					}
				}
				.bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 10rpx;
					.price {
						display: flex;
						flex-direction: column;
					}
					.price-1 {
						font-size: 32rpx;
						color: #FF3F42;
						line-height: 36rpx;
					}
					.price-2 {
						font-size: 26rpx;
						color: #666666;
						line-height: 30rpx;
						text-decoration: line-through;
					}
					.btn {
						width: 110rpx;
						height: 44rpx;
						background: #FF3F42;
						border-radius: 5rpx;
						font-size: 28rpx;
						color: #FFFFFF;
						text-align: center;
						line-height: 44rpx;
					}
					.btn2 {
						width: 110rpx;
						height: 44rpx;
						background: #AAAAAA;
						border-radius: 5rpx;
						font-size: 28rpx;
						color: #FFFFFF;
						text-align: center;
						line-height: 44rpx;
					}
				}
			}
		}
	}
</style>
