<template>
  <div class="common-button-wrapper button-default" :class="type" @click="btnClick">
    <span>{{btnText}}</span>
  </div>
</template>
<script>
export default {
  props: {
    btnText: {
      type: String,
      default: '确定'
    },
    type: {
      type: String,
      default: 'primary'
    }
  },
  data() {
    return {
    }
  },
  methods: {
    btnClick() {
      if(this.type == 'disabled') return;
      this.$emit('btnClick');
    }
  },
}
</script>
<style  lang="less" scoped>
  .common-button-wrapper {
    font-size: 14px;
    margin: 20px 15px;
    text-align: center;
    &.button-default {
      span {
        display: block;
        height: 50px;
        line-height: 50px;
        width: 100%;
        border-radius: 25px;
        font-size: 17px;
        font-weight: 700;
        color: #FFFFFF;
        background: #449284;
      }
    }
    &.primary {
      span {
        color: #FFFFFF;
        background: #449284;
      }
    }
    &.disabled {
      span {
        color: rgba(255, 255, 255, 0.95);
        background: rgba(68, 146, 132, 0.4);;
      }
    }
  }

</style>
