<style scoped>
.bottomButton-wrapper {
  display: flex;
  position: fixed;
  bottom: 0;
  width: 100vw;
  height: 130px;
  padding: 0 40px;
  justify-content: space-around;
  align-items: center;
  background: white;
  box-sizing: border-box;
  z-index: 999999;
}

.bottomButton-wrapper .share-btn {
  position: relative;
  width: 112px;
  border: none;
  border-radius: 0;
  font-size: 22px;
  background: #fff;
  line-height:28px;
  padding: 0;
  box-sizing: border-box;
}
.bottomButton-wrapper .share-btn::after {
  border: none;
}


.bottomButton-wrapper .share-btn img {
  display: block;
  width: 32px;
  height: 32px;
  margin: 15px auto 4px;
}

.bottomButton-wrapper .share-btn div {
  margin-top: 13px;
  text-align: center;
}

.bottomButton-wrapper .btn-container {
  flex-grow: 1;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.bottomButton-wrapper .btn-container button {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: white;
}

.bottomButton-wrapper .btn-container button {
  width: 100%;
  height: 96px;
}

.bottomButton-wrapper .btn-container button::after {
  border: none;
}

.bottomButton-wrapper .btn-container button:nth-child(1) {
  background: #0BBE6B;
}

.bottomButton-wrapper .btn-container button:nth-child(2) {
  margin-left: 20px;
  background: #488AFF;
}

.bottomButton-wrapper > .single-btn button {
  background: #488AFF !important;
  width: 100%;
  height: 100px;
}

</style>

<template>
  <div class="bottomButton-wrapper">
    <button v-if="isShare" open-type="share" class="share-btn">
      <img src="/static/images/black-share.svg">
      <div>分享</div>
    </button>
    <div :class="{'btn-container': true, 'single-btn': buttons.length === 1}">
      <button @click="buttonClick(item, index)" :open-type="item.openType" v-for="(item ,index) in buttons" :key="index">{{item.text}}</button>
    </div>
  </div>
</template>

<script>
export default {
  /**
    * isShare：是否显示左侧分享按钮
    * buttons：最大长度2
    * [
    *   {
    *     text:String
    *   }
    * ]
  */
  props: {
    isShare: {
      type: Boolean,
      default: () => false
    },
    buttons: {
      type: Array,
      default: () => []
    }
  },
  data: () => {
    return {
    }
  },
  mounted () {
  },
  methods: {
    // 右侧按钮点击事件s
    buttonClick (val, index) {
      this.$emit('click', val, index)
    }
  }
}
</script>

