<template>
  <view v-if="modelValue" class="base-modal" @tap="handleMaskClick">
    <!-- 遮罩层 -->
    <view
      class="modal-mask"
      :class="{ 'modal-mask-show': show }"
      :style="{ background: maskBackground }"
    ></view>

    <!-- 弹窗内容 -->
    <view
      class="modal-content"
      :class="[
        `modal-${position}`,
        { 'modal-show': show }
      ]"
      :style="contentStyle"
      @tap.stop
    >
      <!-- 顶部指示器（仅底部弹窗） -->
      <view v-if="position === 'bottom' && showIndicator" class="modal-indicator"></view>

      <!-- 头部 -->
      <view v-if="title || showClose" class="modal-header">
        <view class="modal-title">{{ title }}</view>
        <view v-if="showClose" class="modal-close" @tap="handleClose">
          <u-icon name="close" :size="32" color="#999"></u-icon>
        </view>
      </view>

      <!-- 内容区域 -->
      <view class="modal-body" :style="bodyStyle">
        <slot></slot>
      </view>

      <!-- 底部操作区 -->
      <view v-if="$slots.footer" class="modal-footer">
        <slot name="footer"></slot>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, watch, nextTick } from 'vue'

interface Props {
  modelValue: boolean           // 是否显示弹窗
  position?: 'bottom' | 'center' // 弹窗位置
  title?: string                 // 标题
  showClose?: boolean            // 是否显示关闭按钮
  showIndicator?: boolean        // 是否显示顶部指示器（底部弹窗）
  closeOnClickMask?: boolean     // 点击遮罩是否关闭
  maskBackground?: string        // 遮罩背景色
  width?: string                 // 弹窗宽度（居中弹窗）
  height?: string                // 弹窗高度
  maxHeight?: string             // 最大高度
  borderRadius?: string          // 圆角
  zIndex?: number                // 层级
}

const props = withDefaults(defineProps<Props>(), {
  position: 'bottom',
  showClose: true,
  showIndicator: true,
  closeOnClickMask: true,
  maskBackground: 'rgba(0, 0, 0, 0.5)',
  width: '600rpx',
  borderRadius: '',
  zIndex: 1050
})

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  'close': []
  'open': []
}>()

const show = ref(false)

// 内容样式
const contentStyle = computed(() => {
  const style: Record<string, string> = {
    zIndex: String(props.zIndex)
  }

  if (props.position === 'center') {
    if (props.width) style.width = props.width
  }

  if (props.height) style.height = props.height
  if (props.maxHeight) style.maxHeight = props.maxHeight

  if (props.borderRadius) {
    style.borderRadius = props.borderRadius
  } else {
    style.borderRadius = props.position === 'bottom' ? '24rpx 24rpx 0 0' : '16rpx'
  }

  return style
})

// 内容区域样式
const bodyStyle = computed(() => {
  const style: Record<string, string> = {}
  if (props.maxHeight) {
    style.maxHeight = props.maxHeight
    style.overflowY = 'auto'
  }
  return style
})

// 监听显示状态
watch(() => props.modelValue, (val) => {
  if (val) {
    nextTick(() => {
      setTimeout(() => {
        show.value = true
      }, 50)
    })
    emit('open')
  } else {
    show.value = false
  }
})

// 点击遮罩
const handleMaskClick = () => {
  if (props.closeOnClickMask) {
    handleClose()
  }
}

// 关闭弹窗
const handleClose = () => {
  show.value = false
  setTimeout(() => {
    emit('update:modelValue', false)
    emit('close')
  }, 300)
}
</script>

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

.base-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: $z-modal-backdrop;
}

/* 遮罩层 */
.modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity $transition-base $ease-in-out;
}

.modal-mask-show {
  opacity: 1;
}

/* 弹窗内容 */
.modal-content {
  position: absolute;
  background: $bg-card;
  transition: all $transition-base $ease-out;
}

/* 底部弹窗 */
.modal-bottom {
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(100%);
  padding-bottom: env(safe-area-inset-bottom);
}

.modal-bottom.modal-show {
  transform: translateY(0);
}

/* 居中弹窗 */
.modal-center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0;
}

.modal-center.modal-show {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* 顶部指示器 */
.modal-indicator {
  width: 64rpx;
  height: 8rpx;
  background: $gray-300;
  border-radius: $radius-round;
  margin: 16rpx auto 8rpx;
}

/* 头部 */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: $spacing-xl $spacing-xl $spacing-md;
  border-bottom: 1rpx solid $border-light;
}

.modal-title {
  font-size: $font-lg;
  font-weight: $font-semibold;
  color: $text-primary;
  flex: 1;
}

.modal-close {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: $spacing-md;
  transition: $transition-all;

  &:active {
    opacity: 0.6;
  }
}

/* 内容区域 */
.modal-body {
  padding: $spacing-xl;
}

/* 底部操作区 */
.modal-footer {
  padding: $spacing-md $spacing-xl $spacing-xl;
  border-top: 1rpx solid $border-light;
}
</style>
