<template>
  <view>
    <view class="goods-bottom">
      <view
        url="/pages/cart/cart"
        class="goods-bottom-icon"
        style="position: relative"
        @click="goCart"
      >
        <view class="goods-bottom-badge">
          <uni-badge size="small" :text="cartCount || ''" type="primary" />
        </view>
        <text class="iconfont icon-cart-line" />
        <text>购物车</text>
      </view>
      <button v-if="noGoods" class="goods-bottom-similar" @click="goSimilar">查看相似</button>
      <button v-if="!noGoods" class="goods-bottom-car" @click="addToCart">加入购物车</button>
      <button v-if="!noGoods" class="goods-bottom-buy" @click="buy">立即购买</button>
    </view>
  </view>
</template>
<script>
import { saTrackEvent } from "@/utils/sa.js";
import { uniBadge } from "@dcloudio/uni-ui";
import { getCartCount } from "../api/home.api";
import { mapMutations } from "vuex";
export default {
  name: "BottomNav",
  components: {
    uniBadge
  },

  props: {
    noGoods: {
      type: Boolean,
      default: false
    },
    shopBtnName: {
      type: String,
      default: "立即购买" // shoppingCar 购物车；settlement 结算;submitOrder 确认订单
    },
    info: {
      type: Object,
      default() {
        return {};
      }
    },
    goodsId: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      cartCount: ""
    };
  },
  mounted() {
    this.getCartCount();
    uni.$on("cartUpdate", () => {
      console.log("获取购物车数量");
      this.getCartCount();
    });
  },
  beforeDestroy() {
    uni.$off("cartUpdate");
  },
  methods: {
    ...mapMutations(["saveCartCount"]),
    goCart() {
      saTrackEvent("MINI_CommodityDetailPageShoppingCartBtnClick");
      const token = uni.getStorageSync("token") || "";
      if (!token) {
        this.$emit("goLogin");
        return;
      }

      setTimeout(() => {
        uni.switchTab({
          url: "/pages/shopcart/index",
          fail: err => {
            console.log("失败", err);
          }
        });
      }, 200);
    },
    async getCartCount() {
      const token = uni.getStorageSync("token") || "";
      // console.log("token--cart", token);
      if (!token) {
        return;
      }
      const [data] = await getCartCount();
      this.saveCartCount(data.count);
      const count = data && data.count > 99 ? "99+" : data.count ? data.count : "";
      this.cartCount = count || "";
    },
    addToCart() {
      this.$emit("addToCart");
    },
    goSimilar() {
      saTrackEvent("MINI_CommodityDetailPageViewSimilarityBtnClick", {
        sku_no: this.goodsId
      });
      setTimeout(() => {
        this.$emit("goSimilar");
      }, 200);
    },
    buy() {
      this.$emit("buy");
    },
    goHome() {
      const that = this;
      // const currentPage = getCurrentPages();
      saTrackEvent("PD_YXMMAEC_UserClickCommodityDetailHomePageBtn", {
        commodity_id: that.goodsId
      });
      uni.reportAnalytics("c_commoditydetailhomepagebtn", {
        commodity_id: that.goodsId
      });
      setTimeout(() => {
        uni.switchTab({
          url: "/pages/index/index"
        });
      }, 500);
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/style/icon.scss";
.goods-bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: calc(env(safe-area-inset-bottom) + 150rpx);
  padding: 30rpx 15rpx 0rpx 30rpx;
  background: $white;
  border-top: $border-sm solid $bg-color-g1;
  padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
  overflow: hidden;
  box-sizing: border-box;
  // safe-area-inset-bottom: 20rpx;
  &-badge {
    position: absolute;
    right: -17rpx;
    top: -12rpx;
  }
  &-radio {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-top: 8rpx;
    width: 140rpx;
    radio {
      transform: scale(0.7);
    }
    text {
      font-size: 24rpx;
      color: #999999;
    }
  }
  &-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 1;
    margin: 0 20rpx;
    .Gb-text-top {
      display: flex;
      align-items: center;
      text {
        &:nth-child(1) {
          padding-top: 8rpx;
          font-size: 24rpx;
          color: #333333;
        }
        &:nth-child(2) {
          padding-top: 8rpx;
          font-size: 24rpx;
          color: #ec3333;
        }
        &:nth-child(3) {
          font-size: 38rpx;
          font-weight: bold;
          color: #ec3333;
        }
      }
    }
    .Gb-text-bottom {
      font-size: 24rpx;
      color: #999999;
    }
  }
  &-icon {
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 80rpx;
    text {
      &:first-child {
        font-size: $font-2;
      }
      &:last-child {
        font-size: $uni-font-size-tiny;
        color: $text-color-n1;
      }
    }
    .iconfont {
      font-size: 46rpx;
    }
  }
  button {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80rpx;
    font-size: 32rpx;
    // font-weight: bold;
    border-radius: $border-radius-2;
    &.disabled {
      opacity: 0.7;
    }
  }
  &-car {
    border: $border-sm solid $border-color-search;
    background: $white;
    color: $font-color-search;
    width: 42%;
  }
  &-buy {
    color: $white;
    background-image: $background-primary;
    width: 42%;
  }
  &-similar {
    color: $white;
    background-image: $background-primary;
    width: 85%;
  }
}
</style>
