<template>
  <view class="bottom-button" :class="buttonClass" @click="handleClick">
    <text class="button-text">{{ title }}</text>
  </view>
</template>

<script>
export default {
  name: 'BottomButton',
  props: {
    // 按钮标题
    title: {
      type: String,
      default: '确认'
    },
    // 按钮类型：primary(主要), secondary(次要), danger(危险)
    type: {
      type: String,
      default: 'primary',
      validator: value => ['primary', 'secondary', 'danger'].includes(value)
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 自定义样式类
    customClass: {
      type: String,
      default: ''
    }
  },
  computed: {
    buttonClass() {
      return [
        'bottom-button',
        `bottom-button--${this.type}`,
        {
          'bottom-button--disabled': this.disabled
        },
        this.customClass
      ]
    }
  },
  methods: {
    handleClick() {
      if (this.disabled) {
        return
      }
      this.$emit('click')
    }
  }
}
</script>

<style lang="scss" scoped>
.bottom-button {
  position: fixed;
  bottom: 40rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 600rpx;
  height: 100rpx;
  border-radius: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  transition: all 0.3s ease;
  
  .button-text {
    color: #FFFFFF;
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
  }
  
  // 主要按钮样式（默认）
  &--primary {
    background-color: #8B2E2E;
    box-shadow: 0 8rpx 20rpx rgba(139, 46, 46, 0.3);
    
    &:active {
      background-color: #7A2A2A;
      transform: translateX(-50%) scale(0.98);
    }
  }
  
  // 次要按钮样式
  &--secondary {
    background-color: #6C757D;
    box-shadow: 0 8rpx 20rpx rgba(108, 117, 125, 0.3);
    
    &:active {
      background-color: #5A6268;
      transform: translateX(-50%) scale(0.98);
    }
  }
  
  // 危险按钮样式
  &--danger {
    background-color: #DC3545;
    box-shadow: 0 8rpx 20rpx rgba(220, 53, 69, 0.3);
    
    &:active {
      background-color: #C82333;
      transform: translateX(-50%) scale(0.98);
    }
  }
  
  // 禁用状态
  &--disabled {
    background-color: #CCCCCC !important;
    box-shadow: none !important;
    cursor: not-allowed;
    
    .button-text {
      color: #999999;
    }
    
    &:active {
      transform: translateX(-50%) !important;
    }
  }
}
</style> 