<template>
  <el-dialog
    v-model="visible"
    :title="title"
    width="90%"
    :fullscreen="fullscreen"
    :before-close="handleClose"
    :append-to-body="true"
    class="image-annotation-dialog"
  >
    <div class="annotation-dialog-content">
      <ImageAnnotation
        ref="annotationRef"
        :image-url="imageUrl"
        @save="handleSave"
      />
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="handleSaveAndClose">
          保存并关闭
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import ImageAnnotation from './ImageAnnotation.vue'

interface Annotation {
  type: 'rectangle' | 'circle' | 'arrow' | 'text'
  points: Array<{ x: number; y: number }>
  strokeColor: string
  strokeWidth: number
  fontSize?: number
  text?: string
  id: string
}

const props = defineProps<{
  modelValue: boolean
  imageUrl: string
  title?: string
}>()

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  save: [annotations: Annotation[], imageData: File]
}>()

// 响应式状态
const annotationRef = ref<InstanceType<typeof ImageAnnotation>>()
const fullscreen = ref(false)

// 计算属性
const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const title = computed(() => props.title || '图片标注')

// 事件处理
const handleClose = () => {
  visible.value = false
}

const handleSave = (annotations: Annotation[], imageData: File) => {
  emit('save', annotations, imageData)
}

const handleSaveAndClose = () => {
  if (annotationRef.value) {
    annotationRef.value.saveAnnotation()
  }
  visible.value = false
}

// 暴露方法
defineExpose({
  save: () => {
    if (annotationRef.value) {
      annotationRef.value.saveAnnotation()
    }
  },
  clear: () => {
    if (annotationRef.value) {
      annotationRef.value.clearAll()
    }
  }
})
</script>

<style scoped>
.annotation-dialog-content {
  height: 70vh;
  min-height: 500px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 对话框样式优化 */
:deep(.image-annotation-dialog) {
  .el-dialog__body {
    padding: 0;
  }
  
  .el-dialog__header {
    padding: 16px 20px;
    border-bottom: 1px solid #e4e7ed;
    margin: 0;
  }
  
  .el-dialog__footer {
    padding: 16px 20px;
    border-top: 1px solid #e4e7ed;
  }
}

/* 全屏模式样式 */
:deep(.image-annotation-dialog.is-fullscreen) {
  .annotation-dialog-content {
    height: calc(100vh - 120px);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .annotation-dialog-content {
    height: 60vh;
    min-height: 400px;
  }
  
  :deep(.image-annotation-dialog.is-fullscreen) {
    .annotation-dialog-content {
      height: calc(100vh - 100px);
    }
  }
}
</style>