<template>
  <view class="home-wrapper">
    <scroll-view
      class="home-container"
      scroll-y
      scroll-with-animation
      lower-threshold="200"
      @scrolltolower="loadData"
      @scroll="pageScroll"
    >
      <view v-if="periodSeconds" class="head">
        <text style="font-size: 13px;color: #333;">{{ text }}</text>
        <view style="display: flex; align-items: center;margin: 12px 12px 12px 0;">
          <text style="font-size:13px;color: #333;">
            距结束
          </text>
          <uni-countdown
            :second="periodSeconds"
            color="#fff"
            :show-colon="false"
            background-color="#EE0A24"
            splitor-color="#EE0A24"
            :show-day="showDay"
            class="countdown"
            @timeup="timeup"
          />
        </view>
      </view>
      <view v-if="!goodsList.length" style="margin: 103px auto;color:#999">
        <view style="display: flex;justify-content: center">
          <image src="https://img.lkbang.net/xcx/commodity.png" alt="" />
        </view>
        <view style="display: flex;justify-content: center">没有更多啦！</view>
      </view>

      <view v-if="goodsList.length" style="padding-top: 10px;background-color:#fff">
        <full-minus-goods-list :goods-list.sync="goodsList" @addProduct="addProduct" />
        <uni-load-more :status="loadingType" />
      </view>
      <!-- <view v-if="goodsList.length">
        <full-minus-goods-list :goods-list.sync="goodsList" />
        <uni-load-more :status="loadingType" />
      </view> -->
    </scroll-view>
    <view class="footer">
      <div v-if="!!periodSeconds" class="bottom-text">
        <text style="font-size:12px;color: #333"
          >小计：<text style="font-size:12px;color: #ec1500; font-weight: bold">￥</text
          ><text style="font-size: 18px;color: #ec1500; font-weight: bold">{{
            totalAmt
          }}</text></text
        >
        <text style="font-size:12px;color: #999 "
          >还差<text style="color: #ec1500;">{{ needAmt }}</text
          >即可享受{{ desc }}的优惠</text
        >
      </div>
      <button class="toCartBtn" :class="!!periodSeconds ? 'btn-small' : 'btn-big'" @click="toCart">
        去购物车
      </button>
    </view>
  </view>
</template>
<script>
import fullMinusGoodsList from "../../components/fullMinusGoodsList.vue";
import { homeSearch, getActivityInfo } from "@/api/home.api.js";
import { uniCountdown } from "@dcloudio/uni-ui";
export default {
  components: {
    fullMinusGoodsList,
    uniCountdown
  },
  data() {
    return {
      keyWords: "",
      text: "",
      activityDeductAmt: "",
      needAmt: "",
      periodSeconds: "",
      goodsList: [],
      loadingType: "loading",
      totalAmt: 0,
      tabScrollTop: 0,
      desc: "",
      searchForm: {
        searchText: "",
        activityType: "1",
        activityId: null,
        pageNo: 0,
        pageSize: 20,
        appPrePage: ""
      }
    };
  },
  onLoad(option) {
    console.log(option, "88888888888");
    this.searchForm.activityId = option.activityId;
    // this.needAmt = option.activityLimitAmt;
    this.desc = option.activityDesc;
    this.loadData();
  },
  computed: {
    showDay() {
      return this.periodSeconds > 86400;
    }
  },
  methods: {
    timeup() {
      this.periodSeconds = 0;
      this.searchForm.activityId = "";
      this.pageNo = 0;
      this.activity = null;
      this.loadData();
    },
    async loadData() {
      const routes = getCurrentPages();
      const prevPageUrl = routes[routes.length - 2].route || "";
      this.searchForm.appPrePage = prevPageUrl;
      this.hasRecommend = false;
      if (this.loadingType === "noMore" || this.progress === "loading") {
        return;
      }
      this.progress = "loading";
      this.searchForm.pageNo++;
      this.loadingType = "loading";
      const [res] = await homeSearch(this.searchForm);
      const [activityInfo] = await getActivityInfo({
        activityId: this.searchForm.activityId,
        activityType: this.searchForm.activityType,
        queryShopCartSku: true
      });
      this.hasRecommend = res.hasRecommend;
      // 活动信息赋值
      this.activityDeductAmt = activityInfo.activityInfo.activityDeductAmt;
      this.periodSeconds = activityInfo.activityInfo.endTimeSecond || 0;
      this.text = activityInfo.activityInfo.activityDesc;
      this.totalAmt = activityInfo.activityInfo.totalAmt;
      this.needAmt = activityInfo.activityInfo.needAmt;

      this.progress = "finished";
      if (res.goodsList) {
        this.goodsList = [...this.goodsList, ...res.goodsList];
      }
      this.searchForm.searchId = res.searchId;
      // this.loadingType = (res.hasNext || res.goodsList)? 'more': 'noMore';
      this.loadingType = res.hasNext ? "more" : "noMore";
    },
    pageScroll(val) {
      this.scrollTop = val.detail.scrollTop;
      this.old.scrollTop = val.detail.scrollTop;
    },
    addProduct(val) {
      console.log(val);
      this.totalAmt = Math.round((+this.totalAmt + +val) * 100) / 100;
      this.needAmt = +this.needAmt - +val > 0 ? Math.round((this.needAmt - +val) * 100) / 100 : 0;
    },
    toCart() {
      const route = getCurrentPages();
      if (route[route.length - 2].route === "pages/shopcart/index") {
        uni.navigateBack({
          delta: 1
        });
      } else {
        uni.navigateTo({
          url: "/pages/shopcart/index"
        });
      }
    }
  }
};
</script>
<style>
.home-wrapper {
  height: 100vh;
}
.home-container {
  height: 1000px;
}
.head {
  background-color: #f7f8fa;
  margin: 9px 11.5px 0 11.5px;
}
.footer {
  width: 100%;
  height: 120rpx;
  position: fixed;
  bottom: 0;
  z-index: 100;
  align-items: center;
  background-color: #fff;
  border-top: 1px solid #fff;
  display: flex;
}
.countdown {
  color: #ec1500;
  border-radius: 4px;
  width: 300rpx;
}
.toCartBtn {
  position: absolute;
  bottom: 10px;
  right: 12px;
  background-image: linear-gradient(to left, #ff5d00, #ff1900);
  height: 40px;
  color: #fff;
  border-radius: 20px;
}
.bottom-text {
  display: flex;
  flex-direction: column;
  margin-left: 15px;
}
.btn-small {
  width: 130px;
  color: #fff !important;
}
.btn-big {
  width: 343px;
  color: #fff !important;
}
::v-deep .uni-countdown__number {
  border-radius: 8rpx;
  height: 40rpx !important;
  width: 40rpx !important;
}
::v-deep .uni-countdown {
  align-items: center;
}
</style>
