<template>
  <view>
    <view v-if="type === 'shoppingCar'" class="goods-bottom">
      <!-- <navigator url="/pages/index/index" class="goods-bottom-icon" @click="goHome" hover-class="none">
        <text class="iconfont icon-home"></text>
        <text>首页</text>
      </navigator> -->
      <!-- <navigator v-if="type === 'shoppingCar'" url="/pages/cart/cart" class="goods-bottom-icon">
        <text class="iconfont icon-cart-card" />
        <text>购物车</text>
      </navigator>
      <button class="goods-bottom-car">加入购物车</button> -->
      <button class="goods-bottom-buy" :class="{ disabled: disabled }" @click="buy">
        {{ shopBtnName }}
      </button>
    </view>
    <view v-if="type === 'settlement'" class="goods-bottom">
      <radio-group class="goods-bottom-radio" @change="radioChange">
        <label>
          <radio />
          <text>全选</text>
        </label>
      </radio-group>
      <view class="goods-bottom-text">
        <view class="Gb-text-top">
          <text>合计：</text>
          <text>¥</text>
          <text>627.00</text>
        </view>
        <text class="Gb-text-bottom">免运费</text>
      </view>
      <button class="goods-bottom-buy" @click="buy">结算（5）</button>
    </view>
    <view v-if="type === 'submitOrder'" class="goods-bottom">
      <view class="goods-bottom-text">
        <view class="Gb-text-top">
          <text>合计：</text>
          <text>¥</text>
          <text>{{ info.totalPayFee || "0.00" }}</text>
        </view>
      </view>
      <button class="goods-bottom-buy confirm-order-btn" @click="buy">提交订单</button>
    </view>
  </view>
</template>
<script>
import { saTrackEvent } from "@/utils/sa.js";
export default {
  name: "BottomNav",
  props: {
    type: {
      type: String,
      default: "shopCar" // shoppingCar 购物车；settlement 结算;submitOrder 确认订单
    },
    shopBtnName: {
      type: String,
      default: "立即购买" // shoppingCar 购物车；settlement 结算;submitOrder 确认订单
    },
    info: {
      type: Object,
      default() {
        return {};
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    goodsId: {
      type: String,
      default: ""
    }
  },
  methods: {
    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: 120rpx;
  padding: 30rpx 15rpx 30rpx 30rpx;
  background: $white;
  border-top: $border-sm solid $bg-color-g1;
  &-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;
    text {
      &:first-child {
        font-size: $font-2;
      }
      &:last-child {
        font-size: $font-sm;
        color: $text-color-n1;
      }
    }
  }
  &-car {
    border: $border-sm solid $border-color-search;
    background: $white;
    color: $font-color-search;
  }
  &-buy {
    color: $white;
    background-image: $background-primary;
  }
  button {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80rpx;
    font-size: 34rpx;
    // font-weight: bold;
    border-radius: $border-radius-2;
    &.disabled {
      opacity: 0.7;
    }
  }
}
.confirm-order-btn {
  width: 200rpx !important;
}
</style>
