<template>
  <view class="modal-container" v-if="show" :class="{ 'modal-show': show }">
    <!-- 遮罩层 -->
    <view 
      class="modal-mask" 
      :class="{ 'mask-transparent': !mask }"
      @tap="onMaskTap"
    ></view>
    
    <!-- 弹窗内容 -->
    <view class="modal-content" :class="[position, size]" :style="contentStyle">
      <!-- 头部 -->
      <view class="modal-header" v-if="showHeader">
        <text class="modal-title">{{ title }}</text>
        <view class="modal-close" v-if="showClose" @tap="onClose">
          <text class="close-icon">×</text>
        </view>
      </view>
      
      <!-- 主体内容 -->
      <view class="modal-body" :class="{ 'no-header': !showHeader, 'no-footer': !showFooter }">
        <slot>
          <text class="modal-text" v-if="content">{{ content }}</text>
        </slot>
      </view>
      
      <!-- 底部 -->
      <view class="modal-footer" v-if="showFooter">
        <slot name="footer">
          <button 
            v-if="showCancel" 
            class="modal-button cancel-button" 
            @tap="onCancel"
          >
            {{ cancelText }}
          </button>
          <button 
            v-if="showConfirm" 
            class="modal-button confirm-button" 
            @tap="onConfirm"
          >
            {{ confirmText }}
          </button>
        </slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Modal',
  
  props: {
    // 是否显示
    show: {
      type: Boolean,
      default: false
    },
    // 标题
    title: {
      type: String,
      default: '提示'
    },
    // 内容
    content: {
      type: String,
      default: ''
    },
    // 是否显示头部
    showHeader: {
      type: Boolean,
      default: true
    },
    // 是否显示底部
    showFooter: {
      type: Boolean,
      default: true
    },
    // 是否显示关闭按钮
    showClose: {
      type: Boolean,
      default: true
    },
    // 是否显示取消按钮
    showCancel: {
      type: Boolean,
      default: true
    },
    // 是否显示确认按钮
    showConfirm: {
      type: Boolean,
      default: true
    },
    // 取消按钮文本
    cancelText: {
      type: String,
      default: '取消'
    },
    // 确认按钮文本
    confirmText: {
      type: String,
      default: '确定'
    },
    // 是否显示遮罩
    mask: {
      type: Boolean,
      default: true
    },
    // 点击遮罩是否关闭
    maskClosable: {
      type: Boolean,
      default: true
    },
    // 弹窗位置
    position: {
      type: String,
      default: 'center',
      validator: (value) => ['center', 'top', 'bottom'].includes(value)
    },
    // 弹窗大小
    size: {
      type: String,
      default: 'medium',
      validator: (value) => ['small', 'medium', 'large', 'full'].includes(value)
    },
    // 自定义样式
    customStyle: {
      type: Object,
      default: () => ({})
    },
    // 层级
    zIndex: {
      type: Number,
      default: 9999
    }
  },
  
  computed: {
    contentStyle() {
      return {
        zIndex: this.zIndex + 1,
        ...this.customStyle
      }
    }
  },
  
  methods: {
    // 遮罩点击
    onMaskTap() {
      if (this.maskClosable) {
        this.onClose()
      }
    },
    
    // 关闭弹窗
    onClose() {
      this.$emit('close')
      this.$emit('update:show', false)
    },
    
    // 取消
    onCancel() {
      this.$emit('cancel')
      this.onClose()
    },
    
    // 确认
    onConfirm() {
      this.$emit('confirm')
      this.onClose()
    }
  }
}
</script>

<style lang="scss" scoped>
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  
  &.modal-show {
    opacity: 1;
    visibility: visible;
  }
}

.modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  
  &.mask-transparent {
    background: transparent;
  }
}

.modal-content {
  position: relative;
  background: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
  transform: scale(0.8);
  transition: transform 0.3s ease;
  
  .modal-show & {
    transform: scale(1);
  }
  
  // 位置样式
  &.center {
    margin: 40rpx;
  }
  
  &.top {
    position: absolute;
    top: 100rpx;
    left: 40rpx;
    right: 40rpx;
    transform: translateY(-100%);
    
    .modal-show & {
      transform: translateY(0);
    }
  }
  
  &.bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 16rpx 16rpx 0 0;
    transform: translateY(100%);
    
    .modal-show & {
      transform: translateY(0);
    }
  }
  
  // 大小样式
  &.small {
    width: 500rpx;
    max-width: 80vw;
  }
  
  &.medium {
    width: 600rpx;
    max-width: 85vw;
  }
  
  &.large {
    width: 700rpx;
    max-width: 90vw;
  }
  
  &.full {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    margin: 0;
  }
}

.modal-header {
  position: relative;
  padding: 40rpx 40rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
  
  .modal-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333333;
    text-align: center;
    display: block;
  }
  
  .modal-close {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .close-icon {
      font-size: 40rpx;
      color: #999999;
      line-height: 1;
    }
  }
}

.modal-body {
  padding: 40rpx;
  max-height: 60vh;
  overflow-y: auto;
  
  &.no-header {
    padding-top: 40rpx;
  }
  
  &.no-footer {
    padding-bottom: 40rpx;
  }
  
  .modal-text {
    font-size: 32rpx;
    color: #666666;
    line-height: 1.6;
    text-align: center;
  }
}

.modal-footer {
  padding: 20rpx 40rpx 40rpx;
  display: flex;
  gap: 20rpx;
  border-top: 1rpx solid #f0f0f0;
  
  .modal-button {
    flex: 1;
    height: 80rpx;
    border: none;
    border-radius: 12rpx;
    font-size: 32rpx;
    font-weight: 500;
    
    &.cancel-button {
      background: #f5f5f5;
      color: #666666;
    }
    
    &.confirm-button {
      background: linear-gradient(135deg, #2E8B57, #3CB371);
      color: #ffffff;
    }
    
    &::after {
      border: none;
    }
  }
}

/* 动画效果 */
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes modalSlideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes modalSlideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
</style>