<template>
  <div
    :class="{ 'button-dis': isDisabled, 'button-plain': isPlain }"
    class="button-container"
    @click="submit"
  >
    {{ buttonText }}
  </div>
</template>

<script>
export default {
  name: 'ButtonComponent',
  props: {
    isPlain: {
      type: Boolean,
      default: false
    },
    isDisabled: {
      type: Boolean,
      default: false
    },
    buttonText: {
      type: String,
      default: "继续学习"
    },
  },
  methods: {
    submit() {
      if (this.isDisabled) {
        return;
      }
      this.$emit('handlerClick'); //点击按钮的操作，触发父组件相应的方法
    }
  }
};
</script>

<style scoped lang="less">
.button-container {
  /*按钮本身样式没有设置margin，可根据具体页面的ui在父页面中进行设置*/
  // width: 325px;
  width: 90%;
  height: 44px;
  background: #449284;
  border-radius: 22px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 44px;
  text-align: center;
  margin: 16px auto;
}
.button-dis {
  opacity: 0.5;
}
.button-plain {
  color: #449284;
  background: #fff;
  border: 1px solid rgba(68,146,132, 0.4);
}
</style>
