<script setup lang="ts">
import { ref } from 'vue'

// 组件Props：全可选，默认值适配通用业务场景，支持外部自定义
const props = defineProps({
  // 按钮主文字（无插槽时使用，有插槽可留空）
  btnText: {
    type: String,
    default: '按钮',
  },
  // 外部自定义类名：用于批量覆盖样式，适配个性化需求
  customClass: {
    type: String,
    default: '',
  },
  // 外部自定义内联样式：快速修改单按钮样式（背景/圆角/间距等）
  customStyle: {
    type: Object,
    default: () => ({}),
  },
  // 禁用状态：内置禁用样式，禁用时不触发点击事件
  disabled: {
    type: Boolean,
    default: false,
  },
})

// 组件事件：向父组件派发点击事件，支持传递自定义参数
const emit = defineEmits(['click'])

// 点击激活状态：控制点击反馈动画，避免全局状态污染
const isActive = ref(false)

// 核心点击处理方法：包含禁用判断、点击反馈、事件派发
function handleBtnClick() {
  // 禁用状态直接返回，不执行任何逻辑
  if (props.disabled)
    return
  // 点击反馈：150ms 激活样式，模拟原生按钮按压效果
  isActive.value = true
  setTimeout(() => {
    isActive.value = false
  }, 150)
  // 向父组件派发点击事件，支持后续扩展参数
  emit('click')
}
</script>

<template>
  <view
    class="uni-common-btn"
    :class="[customClass, { 'btn-active': isActive, 'disabled': disabled }]"
    :style="customStyle"
    data-v-common-btn
    @click="handleBtnClick"
  >
    <!-- 前置插槽：文字左侧内容（图标/小标签等），规范命名prefix -->
    <slot name="prefix" />
    <!-- 按钮主文字：支持props传入，灵活适配基础场景 -->
    <text v-if="btnText" class="btn-text">{{ btnText }}</text>
    <!-- 后置插槽：文字右侧内容（图标/角标/箭头等），规范命名suffix -->
    <slot name="suffix" />
  </view>
</template>

  <style lang="scss" scoped>
  // 基础按钮样式：归一化处理，适配多端，保留通用交互
.uni-common-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  padding: 20rpx 40rpx;
  background-color: #f5f5f5; // 基础浅灰背景，匹配原寻车铃样式
  border-radius: 16rpx; // 通用圆角，符合移动端设计规范
  font-size: 32rpx;
  color: #333;
  transition: all 0.15s ease; // 过渡动画，让点击反馈更顺滑
  user-select: none; // 禁止文本选中，提升交互体验
  cursor: pointer; // 桌面端鼠标指针样式
  box-sizing: border-box; // 盒模型归一化，避免padding撑大按钮

  // 禁用状态样式：灰化处理，取消指针交互
  &.disabled {
    background-color: #fafafa !important;
    color: #ccc !important;
    cursor: not-allowed;
    transform: none !important; // 取消点击缩放
    opacity: 0.8;
  }

  // 点击激活反馈：背景加深+轻微缩放，原生APP级体验
  &.btn-active {
    background-color: #e8e8e8;
    transform: scale(0.98);
  }

  // 按钮文字样式：防止挤压，保证显示一致性
  .btn-text {
    flex-shrink: 0;
    line-height: 1.2; // 行高归一化，多端对齐
  }
}
</style>
