<template>
  <button
    class="base-button"
    :class="[
      `btn-${type}`,
      `btn-${size}`,
      { 'btn-block': block },
      { 'btn-disabled': disabled || loading },
      { 'btn-round': round }
    ]"
    :disabled="disabled || loading"
    :open-type="openType"
    :form-type="formType"
    @tap="handleClick"
  >
    <!-- 加载状态 -->
    <u-loading-icon v-if="loading" :show="true" :size="loadingSize" class="btn-loading"></u-loading-icon>

    <!-- 左侧图标 -->
    <u-icon
      v-if="icon && !loading"
      :name="icon"
      :size="iconSize"
      class="btn-icon btn-icon-left"
    ></u-icon>

    <!-- 按钮文字 -->
    <text class="btn-text">
      <slot>{{ text }}</slot>
    </text>

    <!-- 右侧图标 -->
    <u-icon
      v-if="iconRight"
      :name="iconRight"
      :size="iconSize"
      class="btn-icon btn-icon-right"
    ></u-icon>
  </button>
</template>

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

type ButtonType = 'primary' | 'secondary' | 'outline' | 'text' | 'danger' | 'success' | 'gradient' | 'glass'
type ButtonSize = 'mini' | 'small' | 'medium' | 'large'

interface Props {
  type?: ButtonType          // 按钮类型
  size?: ButtonSize          // 按钮尺寸
  text?: string              // 按钮文字
  icon?: string              // 左侧图标
  iconRight?: string         // 右侧图标
  loading?: boolean          // 加载状态
  disabled?: boolean         // 禁用状态
  block?: boolean            // 块级按钮
  round?: boolean            // 圆角按钮
  openType?: string          // 微信开放能力
  formType?: string          // 表单类型
  hapticFeedback?: boolean   // 触觉反馈
}

const props = withDefaults(defineProps<Props>(), {
  type: 'primary',
  size: 'medium',
  loading: false,
  disabled: false,
  block: false,
  round: false,
  hapticFeedback: true
})

const emit = defineEmits<{
  'click': [event: any]
}>()

// 图标尺寸
const iconSize = computed(() => {
  const sizeMap = {
    mini: 24,
    small: 28,
    medium: 32,
    large: 36
  }
  return sizeMap[props.size]
})

// 加载图标尺寸
const loadingSize = computed(() => {
  const sizeMap = {
    mini: 20,
    small: 24,
    medium: 28,
    large: 32
  }
  return sizeMap[props.size]
})

// 点击事件
const handleClick = (event: any) => {
  if (props.disabled || props.loading) return

  // 触觉反馈
  if (props.hapticFeedback) {
    uni.vibrateShort({
      type: 'light'
    })
  }

  emit('click', event)
}
</script>

<style lang="scss" scoped>
@import '@/static/styles/design-tokens.scss';

.base-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  border: none;
  font-weight: $font-medium;
  transition: $transition-all;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;

  &::after {
    border: none;
  }

  &:active:not(.btn-disabled) {
    transform: scale(0.95);
  }
}

/* ========== 尺寸 ========== */
.btn-mini {
  height: $btn-height-mini;
  padding: 0 $spacing-md;
  font-size: $font-sm;
  border-radius: $radius-sm;
}

.btn-small {
  height: $btn-height-small;
  padding: 0 $spacing-lg;
  font-size: $font-base;
  border-radius: $radius-base;
}

.btn-medium {
  height: $btn-height-medium;
  padding: 0 $spacing-xl;
  font-size: $font-base;
  border-radius: $radius-base;
}

.btn-large {
  height: $btn-height-large;
  padding: 0 $spacing-2xl;
  font-size: $font-xl;
  font-weight: $font-semibold;
  border-radius: $radius-md;
}

/* ========== 块级按钮 ========== */
.btn-block {
  width: 100%;
  display: flex;
}

/* ========== 圆角按钮 ========== */
.btn-round {
  border-radius: $radius-round;
}

/* ========== 按钮类型 ========== */

/* 主按钮 - 橙色渐变 */
.btn-primary {
  background: $gradient-primary;
  color: #FFFFFF;
  box-shadow: $shadow-primary;

  .btn-text {
    color: #FFFFFF;
  }

  &:active:not(.btn-disabled) {
    box-shadow: $shadow-sm;
  }
}

/* 次按钮 - 蓝色渐变 */
.btn-secondary {
  background: $gradient-secondary;
  color: $text-inverse;
  box-shadow: $shadow-secondary;

  &:active:not(.btn-disabled) {
    box-shadow: $shadow-sm;
  }
}

/* 描边按钮 */
.btn-outline {
  background: transparent;
  color: $primary-color;
  border: 2rpx solid $primary-color;

  &:active:not(.btn-disabled) {
    background: $primary-50;
  }
}

/* 文字按钮 */
.btn-text {
  background: transparent;
  color: $primary-color;
  box-shadow: none;

  &:active:not(.btn-disabled) {
    opacity: 0.6;
  }
}

/* 危险按钮 */
.btn-danger {
  background: transparent;
  color: $error-color;
  border: 2rpx solid $error-color;

  &:active:not(.btn-disabled) {
    background: $error-bg;
  }
}

/* 成功按钮 */
.btn-success {
  background: $gradient-success;
  color: $text-inverse;
  box-shadow: 0 4rpx 16rpx rgba(82, 196, 26, 0.25);

  &:active:not(.btn-disabled) {
    box-shadow: $shadow-sm;
  }
}

/* 渐变按钮（暖色） */
.btn-gradient {
  background: $gradient-warm;
  color: $text-inverse;
  box-shadow: $shadow-primary;

  &:active:not(.btn-disabled) {
    box-shadow: $shadow-sm;
  }
}

/* 毛玻璃按钮 */
.btn-glass {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20rpx);
  -webkit-backdrop-filter: blur(20rpx);
  color: $primary-color;
  border: 1rpx solid rgba(255, 255, 255, 0.3);
  box-shadow: $shadow-md;

  &:active:not(.btn-disabled) {
    background: rgba(255, 255, 255, 0.95);
  }
}

/* ========== 禁用状态 ========== */
.btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* ========== 加载状态 ========== */
.btn-loading {
  margin-right: 8rpx;
}

/* ========== 图标 ========== */
.btn-icon {
  flex-shrink: 0;
}

.btn-icon-left {
  margin-right: 4rpx;
}

.btn-icon-right {
  margin-left: 4rpx;
}

/* ========== 按钮文字 ========== */
.btn-text {
  line-height: 1;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
}

.btn-primary .btn-text,
.btn-secondary .btn-text,
.btn-success .btn-text,
.btn-gradient .btn-text {
  color: #FFFFFF;
  font-weight: $font-semibold;
  text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.2);
}
</style>
