<template>
  <div class="footer">
    <div v-if="hasStock" class="footer-tips">
      <span class="footer-tips-text">商品暂无库存，看看其他相似商品吧</span>
      <cr-icon type="arrow" color="#ffffff" size="12px" />
    </div>
    <div class="footer-container">
      <!-- <dl class="footer-item">
        <dt class="footer-item-icon store" />
        <dd class="footer-item-text">店铺</dd>
      </dl>
      <dl class="footer-item">
        <dt class="footer-item-icon customer" />
        <dd class="footer-item-text">客服</dd>
      </dl> -->
      <div class="footer-button">
        <cr-button shape="circle" block type="primary" :disabled="hasStock">
          {{ buyButtonText }}
        </cr-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    hasStock: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    buyButtonText() {
      return this.hasStock ? '暂无库存' : '立即购买';
    }
  }
};
</script>

<style lang="less" scoped>
@padding-footer: @padding-xs + 2px;
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  &-tips {
    height: 35px;
    padding: 0 @padding-footer;
    background-color: #ffece6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &-text {
      .text-size(13);
      color: @red;
    }
    @{deep} .cr-icon--arrow {
      padding: 2px;
      background-image: @gradient-red;
      border-radius: 50%;
    }
  }
  &-container {
    height: 83px;
    background-color: @white;
    border-top: 0.5px solid #ededed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: @padding-footer @padding-footer 33px @padding-footer;
    box-sizing: border-box;
  }
  &-item {
    &-icon {
      width: 24px;
      height: 24px;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 100% 100%;
      &.store {
        background-image: url(~@/assets/images/sericeGoods/store-o.png);
      }
      &.customer {
        background-image: url(~@/assets/images/sericeGoods/customer-o.png);
      }
    }
    &-text {
      .text-size(10);
      color: @gray-4;
      text-align: center;
    }
  }
  &-button {
    // width: 258px;
    width: 100%;
  }
}
</style>
