<template>
  <div class="exjumper-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>
  .exjumper-button-wrapper {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1000;
    font-size: 14px;
    padding: 20px 15px;
    background: linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    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: #C7C8C9;
      }
    }
  }

</style>
