<template>
  <a-modal
    v-model:visible="visible"
    title="新增质量会议"
    :width="700"
    :mask-closable="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      layout="vertical"
      :label-col-style="{ fontWeight: 'bold' }"
    >
      <a-form-item
        label="会议主题"
        field="subject"
        :required="true"
      >
        <a-input
          v-model="formData.subject"
          placeholder="请输入会议主题"
          allow-clear
        />
      </a-form-item>

      <a-form-item
        label="会议时间"
        field="meetingTime"
        :required="true"
      >
        <a-date-picker
          v-model="formData.meetingTime"
          placeholder="选择日期时间"
          style="width: 100%"
          show-time
          allow-clear
        />
      </a-form-item>

      <a-form-item
        label="组织者"
        field="organizer"
        :required="true"
      >
        <a-input
          v-model="formData.organizer"
          placeholder="请输入组织者"
          allow-clear
        />
      </a-form-item>

      <a-form-item
        label="参与人员"
        field="participants"
        :required="true"
      >
        <a-select
          v-model="formData.participants"
          placeholder="请选择参与人员"
          multiple
          allow-clear
          :max-tag-count="3"
        >
          <a-option value="张三">张三</a-option>
          <a-option value="李四">李四</a-option>
          <a-option value="王五">王五</a-option>
          <a-option value="赵六">赵六</a-option>
          <a-option value="刘七">刘七</a-option>
          <a-option value="陈八">陈八</a-option>
          <a-option value="杨九">杨九</a-option>
          <a-option value="周十">周十</a-option>
        </a-select>
      </a-form-item>

      <a-form-item
        label="会议内容"
        field="content"
      >
        <a-textarea
          v-model="formData.content"
          placeholder="请输入会议内容"
          :rows="4"
          :max-length="500"
          show-word-limit
        />
      </a-form-item>

      <a-form-item
        label="会议记录"
        field="records"
      >
        <a-upload
          ref="uploadRef"
          action="/api/upload"
          :file-list="fileList"
          :show-file-list="true"
          :multiple="true"
          :accept="'.doc,.docx,.pdf,.jpg,.jpeg,.png,.gif'"
          @change="handleFileChange"
          @before-upload="handleBeforeUpload"
        >
          <template #upload-button>
            <a-button type="primary">
              <template #icon><icon-upload /></template>
              <template #default>点击上传</template>
            </a-button>
          </template>
        </a-upload>
        <div class="upload-tip">
          可上传会议记录文档或图片
        </div>
      </a-form-item>
    </a-form>

    <template #footer>
      <a-button @click="handleCancel">取消</a-button>
      <a-button type="primary" @click="handleOk" :loading="loading">确定</a-button>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { Message } from '@arco-design/web-vue'
import type { FormInstance, FileItem } from '@arco-design/web-vue'

interface MeetingFormData {
  subject: string
  meetingTime: string
  organizer: string
  participants: string[]
  content: string
  records: FileItem[]
}

// Props
interface Props {
  visible: boolean
}

// Emits
interface Emits {
  (e: 'update:visible', value: boolean): void
  (e: 'save-success'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// Form ref
const formRef = ref<FormInstance>()
const uploadRef = ref()
const loading = ref(false)

// Form data
const formData = reactive<MeetingFormData>({
  subject: '',
  meetingTime: '',
  organizer: '',
  participants: [],
  content: '',
  records: []
})

// File list
const fileList = ref<FileItem[]>([])

// Form rules
const rules = {
  subject: [
    { required: true, message: '请输入会议主题' }
  ],
  meetingTime: [
    { required: true, message: '请选择会议时间' }
  ],
  organizer: [
    { required: true, message: '请输入组织者' }
  ],
  participants: [
    { required: true, message: '请选择参与人员' }
  ]
}

// Watch visible prop
const visible = ref(props.visible)
watch(() => props.visible, (newVal) => {
  visible.value = newVal
})

watch(visible, (newVal) => {
  emit('update:visible', newVal)
})

// File upload handlers
const handleFileChange = (fileList: FileItem[]) => {
  formData.records = fileList
}

const handleBeforeUpload = (file: File) => {
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isLt2M) {
    Message.error('文件大小不能超过2MB!')
    return false
  }
  return true
}

// Handle OK
const handleOk = async () => {
  try {
    const valid = await formRef.value?.validate()
    if (!valid) {
      loading.value = true
      
      // 这里应该调用API保存会议数据
      // await saveMeeting(formData)
      
      // 模拟API调用
      setTimeout(() => {
        loading.value = false
        Message.success('质量会议创建成功')
        emit('save-success')
        handleCancel()
      }, 1000)
    }
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

// Handle Cancel
const handleCancel = () => {
  visible.value = false
  resetForm()
}

// Reset form
const resetForm = () => {
  formRef.value?.resetFields()
  fileList.value = []
  Object.assign(formData, {
    subject: '',
    meetingTime: '',
    organizer: '',
    participants: [],
    content: '',
    records: []
  })
}

// Expose methods
defineExpose({
  resetForm
})
</script>

<style scoped>
:deep(.arco-form-item-label) {
  font-weight: 500;
}

.upload-tip {
  font-size: 12px;
  color: #86909c;
  margin-top: 8px;
}

:deep(.arco-upload-list-item) {
  margin-top: 8px;
}

:deep(.arco-select-view-multiple) {
  min-height: 32px;
}
</style> 