<template>
  <view class="goods-action goods-action--safe">
    <view class="goods-action-left">
      <view class="goods-action-icon" @click="addToFavorites" v-if="showAddToFavorites">
        <u-icon
          v-if="customIconPrefix"
          :name="isCollect ? isCollectIconName : customCollectIconName"
          label-pos="bottom"
          :color="isCollect ? isCollectColor : iconColor"
          :label-color="isCollect ? isCollectColor : iconColor"
          :label="isCollect ? '已收藏' : '收藏'"
          :size="iconSize"
          :label-size="labelSize"
          :custom-prefix="customIconPrefix"
        >
        </u-icon>
        <u-icon
          v-else
          :name="isCollect ? 'heart-fill' : 'heart'"
          label-pos="bottom"
          :color="isCollect ? isCollectColor : iconColor"
          :label-color="isCollect ? isCollectColor : iconColor"
          :label="isCollect ? '已收藏' : '收藏'"
          :size="iconSize"
          :label-size="labelSize"
        >
        </u-icon>
      </view>
      <view class="goods-action-icon" v-if="showContact">
        <u-icon
          v-if="customIconPrefix"
          :name="customContactIconName"
          label-pos="bottom"
          label="客服"
          :color="iconColor"
          :size="iconSize"
          :label-size="labelSize"
          :custom-prefix="customIconPrefix"
          :customStyle="{ display: 'flex' }"
        >
        </u-icon>
        <u-icon
          v-else
          name="chat"
          label-pos="bottom"
          label="客服"
          :color="iconColor"
          :size="iconSize"
          :label-size="labelSize"
          :customStyle="{ height: '100%', display: 'flex' }"
        >
        </u-icon>
        <button open-type="contact" lang="zh_CN" class="contact-btn" plain></button>
      </view>
      <view class="goods-action-icon" @click="goToCart">
        <view class="custom-badge">{{ cartGoodsNum }}</view>
        <u-icon
          v-if="customIconPrefix"
          :name="customCartIconName"
          label-pos="bottom"
          label="购物车"
          :color="iconColor"
          :size="iconSize"
          :custom-prefix="customIconPrefix"
          :label-size="labelSize"
        >
        </u-icon>
        <u-icon
          v-else
          name="bag"
          label-pos="bottom"
          label="购物车"
          :color="iconColor"
          :size="iconSize"
          :label-size="labelSize"
        >
        </u-icon>
      </view>
    </view>
    <view class="goods-action-right" v-if="showVipLimitBtn">
      <button class="goods-action-button goods-action-button-disabled" @click="onClickVipLimitBtn">
        {{ vipLimitText }}
      </button>
    </view>
    <view class="goods-action-right" v-else>
      <button class="goods-action-button goods-action-button-first" v-if="showAddCart" @click="addToCart">
        加入购物车
      </button>
      <button class="goods-action-button goods-action-button-last" v-if="showBuyNow" @click="buyNow">
        {{ buyBtnText }}
      </button>
      <button
        class="goods-action-button"
        :class="newFlashBtnDisabled ? 'goods-action-button-disabled' : 'goods-flash-button'"
        @click="newFlash"
        :disabled="newFlashBtnDisabled"
        v-if="shownNewFlash"
      >
        立即秒杀
      </button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'GoodsAction',
  props: {
    safeAreaInsetBottom: {
      type: Boolean,
      default: true,
    },
    // 购物车商品数
    cartGoodsNum: {
      type: Number,
      default: 0,
    },
    // 显示加入购物车代码
    showAddCart: {
      type: Boolean,
      default: true,
    },
    // 显示立即购买按钮
    showBuyNow: {
      type: Boolean,
      default: true,
    },
    // 显示立即秒杀按钮
    shownNewFlash: {
      type: Boolean,
      default: true,
    },
    // 立即秒杀按钮是否可点击
    newFlashBtnDisabled: {
      type: Boolean,
      default: true,
    },
    // 立即购买按钮文字
    buyBtnText: {
      type: String,
      default: 'buyBtnText',
    },
    // 是否显示收藏
    showAddToFavorites: {
      type: Boolean,
      default: true,
    },
    // 是否已收藏
    isCollect: {
      type: Boolean,
      default: false,
    },
    // 是否已收藏
    isCollectColor: {
      type: String,
      default: '#ee0a24',
    },
    // 是否显示客服
    showContact: {
      type: Boolean,
      default: true,
    },
    // icon颜色值
    iconColor: {
      type: String,
      default: '#666',
    },
    // icon尺寸
    iconSize: {
      type: String,
      default: '46',
    },
    // label字体大小，单位rpx（默认28）
    labelSize: {
      type: [String, Number],
      default: '20',
    },
    // 扩展自定义图标样式前缀
    customIconPrefix: {
      type: String,
      default: null,
    },
    // 扩展自定义购物车图标名称
    customCartIconName: {
      type: String,
      default: null,
    },
    // 扩展自定义收藏图标名称
    customCollectIconName: {
      type: String,
      default: null,
    },
    // 扩展自定义已收藏图标名称
    isCollectIconName: {
      type: String,
      default: null,
    },
    // 扩展自定义客服图标名称
    customContactIconName: {
      type: String,
      default: null,
    },
    // 是否显示 vip 等级限制按钮
    showVipLimitBtn: {
      type: Boolean,
      default: false,
    },
    // vip 等级备注
    vipLevelMap: {
      type: Number,
      default: 0,
    },
    // vip 限制说明
    vipLimitText: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      customStyle: {
        border: 'none !important',
        paddingTop: '0rpx',
        paddingBottom: '0rpx',
        paddingLeft: '0',
        paddingRight: '0',
        width: '100%',
        height: '100%',
        backgroundColor: '#ee0a24',
        borderRadius: 0,
      },
    };
  },
  methods: {
    addToCart() {
      this.$emit('addToCart');
    },
    buyNow() {
      this.$emit('buyNow');
    },
    goToCart() {
      this.$emit('goToCart');
    },
    newFlash() {
      this.$emit('newFlash');
    },
    addToFavorites() {
      console.log('%c [addToFavorites]: ', 'color:#1989fa;');
      this.$emit('addToFavorites');
    },
    onClickVipLimitBtn() {
      this.$emit('onClickVipLimitBtn');
    },
  },
};
</script>

<style lang="scss">
.goods-action {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  box-sizing: initial;
  height: 50px;
  background-color: #fff;
  z-index: 2021;

  .goods-action-left {
    flex: 4;
    display: flex;
    background-color: #fff;
  }
  .goods-action-right {
    flex: 6;
    display: flex;
  }
}
.goods-action--safe {
  padding-bottom: env(safe-area-inset-bottom);
}
.goods-action-icon {
  position: relative;
  color: #606266;
  width: 50px;
  display: flex;
  //flex-direction: column;
  justify-content: center;
  align-content: center;
  .contact-btn {
    border: none;
    width: 100% !important;
    height: 100% !important;
    background-color: transparent;
    padding: 0 !important;
    border-radius: 0;
    margin: 0 !important;
    background-color: transparent;
    opacity: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    &:after {
      border: none;
      content: none !important;
      height: 0 !important;
      width: 0 !important;
    }
  }
  .custom-badge {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4rpx 4rpx;
    border-radius: 50%;
    z-index: 9;
    background-color: #ee0a24;
    color: #fff;
    font-size: 20rpx;
    width: 24rpx;
    height: 24rpx;
    text-align: center;
    line-height: 26rpx;
  }
}

.goods-action-button {
  height: 40px;
  line-height: 40px;
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  margin: 0;
  flex: 1;
  &:after {
    border: none;
  }
}
.goods-action-button-first {
  background: linear-gradient(90deg, #ffd01e, #ff8917);
  border-radius: 20px 0 0 20px;
  margin-left: 5px;
}
.goods-action-button-last {
  background: linear-gradient(to right, #ff6034, #ee0a24);
  border-radius: 0 20px 20px 0;
  margin-right: 5px;
}
.goods-flash-button {
  background: linear-gradient(to right, #ff6034, #ee0a24);
  border-radius: 20px;
  margin-right: 5px;
  margin-left: 5px;
}
.goods-action-button-disabled {
  border-radius: 20px;
  margin-right: 5px;
  margin-left: 5px;
  background-color: #ddd !important;
}
</style>
