<template>
  <view class="coupons-reduction">
    <search-bar @search="searchKeyWords" />
    <filterBar @search="filterTab" />
    <view v-if="desc" class="reduction-desc">
      {{ desc }}
    </view>
    <scroll-view
      class="coupons-reduction-goods"
      scroll-y
      scroll-with-animation
      @scrolltolower="loadData(false)"
    >
      <view v-if="goodsList.length" class="content">
        <full-minus-goods-list :goods-list.sync="goodsList" @addProduct="addProduct" />
      </view>
    </scroll-view>
    <view v-if="Object.keys(couponLimitInfo).length" class="coupons-reduction-calculate">
      <view class="bottom-text">
        <text class="total-text">
          小计：<text class="total-unit">￥</text><text class="total-amount">{{ totalAmt }}</text>
        </text>
        <template v-if="parseFloat(totalAmt) == 0 || couponLimitInfo.couponType == 3">
          <text class="desc">快去选购心仪商品立享优惠吧</text>
        </template>
        <template v-else>
          <template v-if="parseFloat(needAmt) == 0">
            <text class="desc">已满足立减{{ couponLimitInfo.couponDeductAmt }}的优惠</text>
          </template>
          <template v-else>
            <text class="desc"
              >再买<text class="desc-red">{{ needAmt }}</text
              >可享受优惠</text
            >
          </template>
        </template>
      </view>
      <button class="toCartBtn btn-small" @click="toCart">
        去购物车
      </button>
    </view>
  </view>
</template>
<script>
import searchBar from "./components/searchBar.vue";
import filterBar from "./components/filterBar.vue";
import fullMinusGoodsList from "@/components/fullMinusGoodsList.vue";
import { homeSearch, getActivityInfo } from "@/api/home.api.js";
export default {
  components: {
    searchBar,
    filterBar,
    fullMinusGoodsList
  },
  data() {
    return {
      totalAmt: 0, // 小计
      needAmt: 0, // 还差XX
      desc: "",
      goodsList: [],
      pageNo: 1,
      pageSize: 20,
      searchText: "",
      rankType: 1,
      activityType: 2,
      activityId: "",
      searchId: "",
      couponLimitInfo: {},
      hasNext: true
    };
  },
  onLoad(option) {
    const title = option.title || "";
    if (title) {
      uni.setNavigationBarTitle({
        title
      });
    }
    this.activityId = +option.couponId;
    this.loadData();
  },
  methods: {
    async loadData(search) {
      if (!this.hasNext) return;
      // 加载数据
      const { pageNo, pageSize, searchText, rankType, activityId, activityType, searchId } = this;
      const params = {
        labelIds: "",
        pageNo,
        pageSize,
        searchId,
        searchText,
        rankType,
        activityType,
        activityId,
        queryShopCartSku: true
      };
      const [data] = await homeSearch(params);
      this.hasNext = data.hasNext || false;
      const [activityInfo] = await getActivityInfo({
        activityType,
        activityId,
        queryShopCartSku: true
      });
      this.pageNo++;
      this.couponLimitInfo = activityInfo.couponLimitInfo || {};
      this.needAmt = activityInfo.couponLimitInfo?.needAmt || 0;
      this.totalAmt = activityInfo.couponLimitInfo?.totalAmt || 0;
      this.desc = activityInfo.couponLimitInfo?.couponDesc || "";
      this.searchId = data?.searchId || "";
      this.goodsList = data.goodsList
        ? search
          ? data.goodsList
          : [...this.goodsList, ...data.goodsList]
        : [];
    },
    searchKeyWords(keyWords) {
      // 搜索栏搜索
      this.pageNo = 1;
      this.searchId = "";
      this.searchText = keyWords;
      this.hasNext = true;
      this.loadData(true);
    },
    filterTab(tab) {
      // filter筛选
      this.pageNo = 1;
      this.searchId = "";
      this.rankType = tab;
      this.hasNext = true;
      this.loadData(true);
    },
    addProduct(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() {
      uni.switchTab({
        url: "/pages/shopcart/index"
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/style/var.scss";
.coupons-reduction {
  /* #ifndef MP-ALIPAY */
  height: 100%;
  /* #endif */
  /* #ifdef MP-ALIPAY */
  height: 100vh;
  /* #endif */
  padding-bottom: env(safe-area-inset-bottom);
  .reduction-desc {
    padding: 0 20rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 26rpx;
    color: $black;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
  }
  &-goods {
    height: calc(100% - 360rpx);
    .content {
      padding-top: 10rpx;
      background: $white;
    }
    // background: #000;
  }
  &-calculate {
    width: 100%;
    height: calc(120rpx + env(safe-area-inset-bottom));
    position: fixed;
    bottom: 0;
    z-index: 100;
    align-items: center;
    background-color: $white;
    border-top: 2rpx solid $white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 $padding-sm env(safe-area-inset-bottom);
    .bottom-text {
      display: flex;
      flex-direction: column;
      .total-text {
        font-size: 24rpx;
        color: $black;
      }
      .total-unit {
        font-size: 24rpx;
        color: $red;
        font-weight: $font-weight-bold;
      }
      .total-amount {
        font-size: 36rpx;
        color: $red;
        font-weight: $font-weight-bold;
      }
      .desc {
        font-size: 24rpx;
        color: $gray-4;
        &-red {
          color: $red;
        }
      }
    }
    .toCartBtn {
      margin: 0;
      width: 260rpx;
      background-image: linear-gradient(to left, #ff5d00, #ff1900);
      height: 80rpx;
      color: $white;
      border-radius: 40rpx;
      font-size: 28rpx;
      font-weight: $font-weight-bold;
    }
  }
}
</style>
