<template>
  <fui-modal :buttons="[]" :width="width" :show="show" :maskClose="maskClose">
    <!-- 默认内容插槽 -->
    <slot>
      <!-- 默认内容 -->
    </slot>
    
    <!-- 按钮插槽 -->
    <view v-if="$slots.buttons" class="button-section">
      <slot name="buttons"></slot>
    </view>
    
    <!-- 关闭按钮 -->
    <view v-if="showClose" class="fui-icon__close" @tap="handleClose">
      <fui-icon name="close" color="#B2B2B2" :size="48"></fui-icon>
    </view>
  </fui-modal>
</template>

<script>
export default {
  name: 'CustomModal',
  props: {
    // 是否显示弹窗
    show: {
      type: Boolean,
      default: false
    },
    // 弹窗宽度
    width: {
      type: [String, Number],
      default: 600
    },
    // 是否显示关闭按钮
    showClose: {
      type: Boolean,
      default: true
    },
    // 是否允许点击遮罩关闭
    maskClose: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    // 处理关闭事件
    handleClose() {
      this.$emit('cancel', 'close')
    }
  }
}
</script>

<style lang="less" scoped>
.button-section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20rpx;
  margin-top: 40rpx;
}

.fui-icon__close {
  position: absolute;
  right: 24rpx;
  top: 20rpx;
  z-index: 1000;
}
</style>