<template>
  <view class="bottom-action-bar">
    <view class="action-row">
      <view
        v-for="(btn, index) in normalizedButtons"
        :key="index"
        class="action-btn"
        :class="btn.type === 'primary' ? 'btn-primary' : 'btn-default'"
        @click="handleClick(btn, index)"
      >
        <text class="btn-text" :class="btn.type === 'primary' ? 'text-primary' : 'text-default'">{{ btn.text }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  buttons: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['action'])

const normalizedButtons = computed(() => {
  if (!Array.isArray(props.buttons) || props.buttons.length === 0) {
    return [{ text: '返回', type: 'default', key: 'back' }]
  }
  return props.buttons.map((b) => ({
    text: b && b.text ? b.text : '按钮',
    type: b && b.type === 'primary' ? 'primary' : 'default',
    key: b && b.key ? b.key : ''
  }))
})

function handleClick(btn, index) {
  emit('action', { ...btn, index })
}
</script>

<style lang="scss" scoped>
.bottom-action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  box-shadow: 0 -6rpx 24rpx rgba(0, 0, 0, 0.08);
  padding: 20rpx 24rpx calc(20rpx + env(safe-area-inset-bottom));
  z-index: 90;
}

.action-row {
  display: flex;
  gap: 20rpx;
}

.action-btn {
  flex: 1;
  height: 88rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-default {
  background: #ffffff;
  border: 2rpx solid #dcdfe6;
}

.btn-primary {
  background: linear-gradient(135deg, #1a3a5c 0%, #2d5a87 100%);
}

.btn-text {
  font-size: 30rpx;
  font-weight: 600;
}

.text-default {
  color: #303133;
}

.text-primary {
  color: #ffffff;
}
</style>
