<template>
  <base-modal
    v-model="show"
    position="bottom"
    :show-close="false"
    :show-indicator="true"
    :close-on-click-mask="closeOnClickMask"
    @close="handleClose"
  >
    <!-- 标题 -->
    <view v-if="title" class="action-sheet-title">
      <text>{{ title }}</text>
    </view>

    <!-- 描述 -->
    <view v-if="description" class="action-sheet-desc">
      <text>{{ description }}</text>
    </view>

    <!-- 操作列表 -->
    <view class="action-sheet-list">
      <view
        v-for="(action, index) in actions"
        :key="index"
        class="action-item"
        :class="[
          { 'action-disabled': action.disabled },
          { 'action-danger': action.danger }
        ]"
        @tap="handleAction(action, index)"
      >
        <u-icon
          v-if="action.icon"
          :name="action.icon"
          :size="40"
          :color="getIconColor(action)"
          class="action-icon"
        ></u-icon>
        <text class="action-text">{{ action.text }}</text>
        <text v-if="action.subtext" class="action-subtext">{{ action.subtext }}</text>
      </view>
    </view>

    <!-- 取消按钮 -->
    <view v-if="showCancel" class="action-cancel" @tap="handleCancel">
      <text class="cancel-text">{{ cancelText }}</text>
    </view>
  </base-modal>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import BaseModal from '../base/BaseModal.vue'

interface Action {
  text: string
  subtext?: string
  icon?: string
  value?: any
  disabled?: boolean
  danger?: boolean
}

interface Props {
  modelValue: boolean          // 是否显示
  title?: string               // 标题
  description?: string         // 描述
  actions: Action[]            // 操作列表
  showCancel?: boolean         // 是否显示取消按钮
  cancelText?: string          // 取消按钮文字
  closeOnClickMask?: boolean   // 点击遮罩是否关闭
}

const props = withDefaults(defineProps<Props>(), {
  showCancel: true,
  cancelText: '取消',
  closeOnClickMask: true
})

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  'select': [action: Action, index: number]
  'cancel': []
  'close': []
}>()

const show = ref(props.modelValue)

// 监听外部值变化
watch(() => props.modelValue, (val) => {
  show.value = val
})

// 监听内部值变化
watch(show, (val) => {
  emit('update:modelValue', val)
})

// 获取图标颜色
const getIconColor = (action: Action) => {
  if (action.disabled) return '#CCCCCC'
  if (action.danger) return '#F5222D'
  return '#FF6B35'
}

// 操作点击
const handleAction = (action: Action, index: number) => {
  if (action.disabled) return

  emit('select', action, index)
  show.value = false
}

// 取消
const handleCancel = () => {
  emit('cancel')
  show.value = false
}

// 关闭
const handleClose = () => {
  emit('close')
}
</script>

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

/* ========== 标题 ========== */
.action-sheet-title {
  padding: $spacing-xl $spacing-xl $spacing-md;
  text-align: center;
  font-size: $font-lg;
  font-weight: $font-semibold;
  color: $text-primary;
  border-bottom: 1rpx solid $border-light;
}

/* ========== 描述 ========== */
.action-sheet-desc {
  padding: $spacing-md $spacing-xl;
  text-align: center;
  font-size: $font-sm;
  color: $text-secondary;
  line-height: $line-height-relaxed;
  border-bottom: 1rpx solid $border-light;
}

/* ========== 操作列表 ========== */
.action-sheet-list {
  max-height: 60vh;
  overflow-y: auto;
}

.action-item {
  display: flex;
  align-items: center;
  gap: $spacing-md;
  padding: $spacing-lg $spacing-xl;
  border-bottom: 1rpx solid $border-light;
  transition: $transition-all;

  &:last-child {
    border-bottom: none;
  }

  &:active:not(.action-disabled) {
    background: $bg-hover;
  }
}

.action-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.action-danger {
  .action-text {
    color: $error-color;
  }
}

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

/* 文字 */
.action-text {
  flex: 1;
  font-size: $font-base;
  color: $text-primary;
  font-weight: $font-medium;
}

.action-subtext {
  font-size: $font-sm;
  color: $text-tertiary;
}

/* ========== 取消按钮 ========== */
.action-cancel {
  padding: $spacing-lg $spacing-xl;
  border-top: $spacing-sm solid $bg-page;
  text-align: center;
  transition: $transition-all;

  &:active {
    background: $bg-hover;
  }
}

.cancel-text {
  font-size: $font-base;
  color: $text-secondary;
  font-weight: $font-medium;
}
</style>
