<template>
  <im-popup v-model:show="visible" ref="popupRef" :position="position" :animation="animation" :duration="duration"
    :show-overlay="showOverlay" :overlay-color="overlayColor" :overlay-opacity="overlayOpacity"
    :close-on-click-overlay="closeOnClickOverlay" :lock-scroll="lockScroll" :width="computedWidth"
    :border-radius="borderRadius" :background-color="backgroundColor" :z-index="zIndex"
    :show-close="showClose && showHeader" :close-position="closePosition" :custom-class="customClass" @open="handleOpen"
    @opened="handleOpened" @close="handleClose" @closed="handleClosed" @click-overlay="handleClickOverlay">
    <!-- 头部 -->
    <view v-if="showHeader" class="im-modal__header">
      <slot name="header">
        <view class="im-modal__header-content">
          <text class="im-modal__title">{{ title }}</text>
          <view v-if="showSubtitle && subtitle" class="im-modal__subtitle">
            <text>{{ subtitle }}</text>
          </view>
        </view>
      </slot>
    </view>

    <!-- 内容 -->
    <view class="im-modal__body" :style="bodyStyle">
      <slot>
        <text class="im-modal__content">{{ content }}</text>
      </slot>
    </view>

    <!-- 底部按钮 -->
    <view v-if="showFooter" class="im-modal__footer">
      <slot name="footer">
        <view class="im-modal__footer-buttons">
          <!-- 取消按钮 -->
          <im-button v-if="showCancel" class="im-modal__button" :type="cancelType" :size="buttonSize"
            :plain="cancelPlain" :disabled="cancelDisabled" :loading="cancelLoading" @click="handleCancel">
            {{ cancelText }}
          </im-button>

          <!-- 确认按钮 -->
          <im-button v-if="showConfirm" class="im-modal__button" :type="confirmType" :size="buttonSize"
            :plain="confirmPlain" :disabled="confirmDisabled" :loading="confirmLoading" @click="handleConfirm">
            {{ confirmText }}
          </im-button>
        </view>
      </slot>
    </view>
  </im-popup>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import type { Popup as PopupType } from '../../types/components/popup'
import { ModalProps, ModalEmits } from '../../types/components/modal'
import ImPopup from '../im-popup/im-popup.vue'
import ImButton from '../im-button/im-button.vue'

// 定义 Props 默认值
const props = withDefaults(defineProps<ModalProps>(), {
  show: false,
  modelValue: false,

  title: '提示',
  subtitle: '',
  content: '',

  showHeader: true,
  showSubtitle: true,

  bodyStyle: () => ({}),

  showFooter: true,
  showCancel: true,
  showConfirm: true,
  cancelText: '取消',
  confirmText: '确定',
  cancelType: 'default',
  confirmType: 'primary',
  cancelPlain: false,
  confirmPlain: false,
  cancelDisabled: false,
  confirmDisabled: false,
  cancelLoading: false,
  confirmLoading: false,
  buttonSize: 'medium',

  position: 'center',
  animation: 'zoom',
  duration: 300,
  showOverlay: true,
  overlayColor: '#000',
  overlayOpacity: 0.5,
  closeOnClickOverlay: true,
  lockScroll: true,
  width: '640rpx',
  maxWidth: '90vw',
  minWidth: '300rpx',
  borderRadius: '16rpx',
  backgroundColor: '#fff',
  zIndex: 1000,
  showClose: true,
  closePosition: 'top-right',
  customClass: '',

  closeOnClickAction: true,
  showCloseAfterConfirm: true,
  showCloseAfterCancel: true
})

const emit = defineEmits<ModalEmits>()

// 组件引用
const popupRef = ref<InstanceType<typeof PopupType>>()

// 内部显示状态
const visible = computed({
  get: () => props.show || props.modelValue,
  set: (val) => {
    emit('update:show', val)
    emit('update:modelValue', val)
  }
})

// 计算宽度
const computedWidth = computed(() => {
  let width = props.width

  // 添加最大宽度限制
  if (props.maxWidth) {
    width = `min(${props.width}, ${props.maxWidth})`
  }

  // 添加最小宽度限制
  if (props.minWidth) {
    width = `max(${width}, ${props.minWidth})`
  }

  return width
})

// 处理打开
const handleOpen = () => {
  emit('open')
  emit('before-enter')
}

const handleOpened = () => {
  emit('opened')
  emit('after-enter')
}

// 处理关闭
const handleClose = () => {
  emit('close')
  emit('before-leave')
}

const handleClosed = () => {
  emit('closed')
  emit('after-leave')
}

// 处理遮罩点击
const handleClickOverlay = () => {
  emit('click-overlay')
}

// 处理确认
const handleConfirm = () => {
  emit('confirm')
  if (props.closeOnClickAction && props.showCloseAfterConfirm) {
    popupRef.value.close()
    // visible.value = false
  }
}

// 处理取消
const handleCancel = () => {
  emit('cancel')
  if (props.closeOnClickAction && props.showCloseAfterCancel) {
    // visible.value = false
    popupRef.value.close()
  }
}

// 打开模态框
const open = () => {
  popupRef.value.open()
}

// 关闭模态框
const close = () => {
  popupRef.value.close()
}

// 切换显示状态
const toggle = () => {
  popupRef.value.toggle()
}

// 暴露方法给父组件
defineExpose({
  open,
  close,
  toggle
})
</script>

<style lang="scss" scoped>
.im-modal {
  &__header {
    padding: 40rpx 40rpx 20rpx;
    border-bottom: 2rpx solid #f5f5f5;

    &-content {
      text-align: center;
    }
  }

  &__title {
    display: block;
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
  }

  &__subtitle {
    margin-top: 12rpx;

    text {
      font-size: 28rpx;
      color: #999;
      line-height: 1.4;
    }
  }

  &__body {
    padding: 40rpx;
    font-size: 30rpx;
    color: #666;
    line-height: 1.6;
    overflow-y: auto;
    max-height: 60vh;
  }

  &__content {
    display: block;
    text-align: center;
  }

  &__footer {
    padding: 40rpx;

    &-buttons {
      display: flex;
      gap: 20rpx;
      justify-content: center;
    }
  }

  &__button {
    font-size: inherit;
  }
}
</style>