<template>
  <div v-if="visible" class="fab-popup-placeholder">
    <div class="fab-popup-backdrop" @click="handleClose"></div>
    <div :class="['fab-popup', sizeClass]" @click.stop>
      <div class="fab-popup-header">
        <span class="fab-popup-title">{{ title }}</span>
        <el-button 
          type="text" 
          icon="el-icon-close" 
          size="mini"
          @click="handleClose"
          class="fab-popup-close"
        ></el-button>
      </div>
      <div class="fab-popup-body">
        <slot>
          <el-empty description="功能开发中..." :image-size="80"></el-empty>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FabActionPopup',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      required: true
    },
    size: {
      type: String,
      default: 'default', // 'default' | 'medium' | 'large'
      validator: (value) => ['default', 'medium', 'large'].includes(value)
    }
  },
  computed: {
    sizeClass() {
      if (this.size === 'medium') return 'fab-popup-medium'
      if (this.size === 'large') return 'fab-popup-large'
      return ''
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
/* FAB 弹窗占位符样式 */
.fab-popup-placeholder {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
}

.fab-popup-placeholder .fab-popup-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 1999;
}

.fab-popup-placeholder .fab-popup {
  position: fixed;
  bottom: 100px;
  right: 30px;
  width: 400px; /* 默认：草稿箱、历史记录 */
  height: 500px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fab-popup-medium {
  width: 500px; /* 转警管理、转事件管理 */
}

.fab-popup-large {
  width: 600px; /* 审核工作台 */
}

.fab-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #EBEEF5;
  background: #F5F7FA;
  flex-shrink: 0;
}

.fab-popup-title {
  font-weight: 600;
  font-size: 14px;
  color: #303133;
}

.fab-popup-close {
  padding: 0;
  color: #909399;
}

.fab-popup-close:hover {
  color: #303133;
}

.fab-popup-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
}
</style>