<template>
  <el-dialog
    v-model="visible"
    :title="title"
    width="600px"
    destroy-on-close
    :close-on-click-modal="false"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="信息类型" prop="type">
        <el-radio-group v-model="form.type">
          <el-radio label="lost">寻物启事 (丢失)</el-radio>
          <el-radio label="found">失物招领 (拾取)</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="物品名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入物品名称" />
      </el-form-item>
      <el-form-item label="物品分类" prop="category">
        <el-select v-model="form.category" placeholder="请选择分类" style="width: 100%">
          <el-option label="电子产品" value="electronics" />
          <el-option label="证件卡片" value="card" />
          <el-option label="书籍资料" value="book" />
          <el-option label="生活用品" value="living" />
          <el-option label="衣物饰品" value="clothing" />
          <el-option label="其他" value="other" />
        </el-select>
      </el-form-item>
      <el-form-item label="图片" prop="images">
        <el-upload
          v-model:file-list="fileList"
          action="#"
          list-type="picture-card"
          :auto-upload="false"
          :limit="3"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item :label="form.type === 'lost' ? '丢失地点' : '拾取地点'" prop="location">
        <el-input v-model="form.location" placeholder="请输入地点，如：一号书院 302 门口" />
      </el-form-item>
      <el-form-item :label="form.type === 'lost' ? '丢失时间' : '拾取时间'" prop="time">
        <el-date-picker
          v-model="form.time"
          type="datetime"
          placeholder="选择日期时间"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="联系人" prop="contactName">
        <el-input v-model="form.contactName" placeholder="请输入联系人姓名" />
      </el-form-item>
      <el-form-item label="联系方式" prop="contactPhone">
        <el-input v-model="form.contactPhone" placeholder="手机号或微信号" />
      </el-form-item>
      <el-form-item label="描述说明" prop="description">
        <el-input
          v-model="form.description"
          type="textarea"
          rows="3"
          placeholder="请描述物品特征、颜色、品牌等详细信息..."
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定发布</el-button>
    </template>

    <el-dialog v-model="previewVisible">
      <img w-full :src="previewImage" alt="Preview Image" style="width: 100%" />
    </el-dialog>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

const emit = defineEmits(['success'])

const visible = ref(false)
const formRef = ref()
const isEdit = ref(false)
const fileList = ref([])
const previewVisible = ref(false)
const previewImage = ref('')

const form = reactive({
  id: '',
  type: 'found',
  name: '',
  category: '',
  location: '',
  time: '',
  contactName: '',
  contactPhone: '',
  description: '',
  status: 'pending' // pending: 待认领/寻找中, claimed: 已认领/已找回
})

const title = computed(() => isEdit.value ? '编辑信息' : '发布失物招领')

const rules = {
  type: [{ required: true, message: '请选择信息类型', trigger: 'change' }],
  name: [{ required: true, message: '请输入物品名称', trigger: 'blur' }],
  category: [{ required: true, message: '请选择物品分类', trigger: 'change' }],
  location: [{ required: true, message: '请输入地点', trigger: 'blur' }],
  time: [{ required: true, message: '请选择时间', trigger: 'change' }],
  contactName: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
  contactPhone: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
}

const open = (row) => {
  if (row) {
    isEdit.value = true
    Object.assign(form, row)
    // Mock image handling
    if (row.image) {
      fileList.value = [{ name: 'img', url: row.image }]
    } else {
      fileList.value = []
    }
  } else {
    isEdit.value = false
    form.id = ''
    form.type = 'found'
    form.name = ''
    form.category = ''
    form.location = ''
    form.time = new Date()
    form.contactName = ''
    form.contactPhone = ''
    form.description = ''
    form.status = 'pending'
    fileList.value = []
  }
  visible.value = true
}

const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview = (uploadFile) => {
  previewImage.value = uploadFile.url
  previewVisible.value = true
}

const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      const data = { ...form }
      // Mock image upload result
      if (fileList.value.length > 0) {
        data.image = fileList.value[0].url || 'https://picsum.photos/200/200?random=' + Math.random()
      }
      
      ElMessage.success(isEdit.value ? '编辑成功' : '发布成功')
      emit('success', data)
      visible.value = false
    }
  })
}

defineExpose({
  open
})
</script>
