<template>
  <div class="goods-footer-con flex-default">
    <!-- <div class="opt-item" @click="goShop(merchant.merchantId)">
      <m-icon icon="icon-shop" :size="18" className="icon" />
      <div class="label">主页</div>
    </div> -->
    <!-- <div class="opt-item" @click="shopCustomer">
      <m-icon icon="icon-service" :size="19" className="icon" />
      <div class="label">客服</div>
    </div> -->
    <!-- <div class="opt-item" @click="goShoppingCart" v-if="showShoppingCart">
      <m-icon icon="icon-goods-shopping-cart" :size="20" className="icon" />
      <div class="label">购物车</div> -->
      <!-- <div class="number" v-show="shoppingCart.length">
        {{ shoppingCart.length }}
      </div> -->
    <!-- </div> -->
    <div class="btn-con flex-default">
      
      <van-button
          v-if="warmUp"
          disabled
          type="primary"
          class="warm-up-btn"
        >
          即将开售 {{ warmUpTimeLabel }}
      </van-button>
      <!-- 普通商品 -->
      <template v-else-if="goodsTypeMap.NORMAL || goodsTypeMap.NFT">
        <!-- <van-button type="primary" class="cart" @click="$emit('cart')">
          加入购物车
        </van-button> -->
        <van-button type="primary"  @click="$emit('buy')">
          立即购买
        </van-button>
      </template>
      <!-- 预热状态 -->
      
      <!-- 预购商品 -->
      <!-- <template v-else-if="goodsTypeMap.PRE_SALE">
        <div class="num">
          <span class="label">定金:</span>
          <span>500.00</span>
        </div>
        <van-button color="linear-gradient(295deg, #F07C5B 0%, #DD2E41 100%)">
          立即预定
        </van-button>
      </template> -->

      <!-- 转让商品 -->
      <!-- <template v-else-if="goodsTypeMap.TRANSFER">
        <van-button
          type="primary"
          style="width: 246px"
          @click="$emit('buy')"
          :disabled="transferBuyDisabled"
        >
          立即购买
        </van-button>
      </template> -->
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { GoodsType } from "@/enums";
import { formatTimeDuring } from "@/utils";
export default {
  props: {
    merchant: Object,
    goodsType: [Number, String],
    goodsTypeMap: Object,
    transferData: Object,
    goodsDesc: Object,
    goodsStatusMap:Object
  },
  data() {
    return {};
  },
  computed: {
    ...mapState(["shoppingCart"]),

    showShoppingCart() {
      return !this.goodsTypeMap.TRANSFER;
    },
    transferBuyDisabled() {
      if (this.transferData && this.transferData.stock == 0) {
        return true;
      }
      return false;
    },
    warmUp() {

      return (
        this.goodsStatusMap.WARM_UP &&
        this.goodsDesc.preheatEndTime >= this.currentTime
      );
    },
    warmUpTimeLabel() {
      let time = formatTimeDuring(
        this.goodsDesc.preheatEndTime - this.currentTime
      );
      return `${parseInt(time.day) * 24 + parseInt(time.hour)} : ${time.min} : ${time.sec}`;
    },
  },
  methods: {
    goShoppingCart() {
      this.$router.push({ name: "shopping-cart" });
    },
    shopCustomer() {
      if (this.hasLogin) {
        this.$api({
          apiName: "listShopCustomer",
          postData: { merchantId: this.merchant.merchantId },
          success: (res) => {
            if (res && res.length > 0) {
              let customer = res[0];
              let query = { customer: JSON.stringify(customer) };
              this.$router.push({ name: "customer-service-chat", query });
            } else {
              this.$toast("该商家暂未开通客服！");
            }
          },
        });
      } else {
        this.$router.push({ name: "login" });
      }
    },
  },
};
</script>

<style lang="less">
.goods-footer-con {
  position: fixed;
  padding: 6px 16px;
  background: #ffffff;
  bottom: 0;
  left: 0;
  width: 100%;
  box-shadow: 0px 1px 14px 0px #efeff1;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
  .opt-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    .icon {
      margin-bottom: 3px;
    }

    .label {
      font-size: 10px;
      line-height: 14px;
    }
    .number {
      position: absolute;
      top: -3px;
      right: 0;
      display: inline-block;
      background: #fff;
      color: #dd2e41;
      font-size: 7px;
      margin-left: -10px;
      line-height: 9px;
      border: 1px solid #dd2e41;
      border-radius: 10px;
      padding: 1px 3px;
      font-weight: 700;
    }
  }

  .btn-con {
    width: fit-content;
    height: 36px;

    > button {
      width:343px;
      font-size: 14px;
      padding: 0;
      height: 36px;
      border-radius: 22px;
    }

    .cart {
      border-radius: 22px 0 0 22px;
    }

    .buy {
      border-radius: 0 22px 22px 0;
    }

    .num {
      color: @mall-primary-color;
      height: 36px;
      background: #ffeff1;
      border-radius: 22px;
      width: 140px;
      margin-right: -45px;
      font-weight: bold;
      line-height: 36px;
      padding-left: 13px;
      > .label {
        font-size: 10px;
        margin-right: 3px;
      }
    }
  }
}
</style>
