<template>
  <div class="footer" :class="{ fixed }">
    <cr-button :disabled="disabled" shape="circle" block type="primary" @click="buttonClickEvent">
      {{ btnText }}
    </cr-button>
  </div>
</template>

<script>
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    btnText: {
      type: String,
      default: '确定'
    },
    fixed: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  methods: {
    buttonClickEvent() {
      this.$emit('btn-click');
    }
  }
};
</script>

<style lang="less" scoped>
.fixed {
  position: fixed;
  padding-bottom: constant(safe-area-inset-bottom) !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
  height: calc(constant(safe-area-inset-bottom) + 58px) !important;
  height: calc(env(safe-area-inset-bottom) + 58px) !important;
  box-sizing: border-box;
  left: 0;
  bottom: 0;
}
.footer {
  width: 100%;
  height: 58px;
  padding: 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: @white;
  box-sizing: border-box;
  border-top: solid #ededed 1px;
}
</style>
