<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="name">
        <el-input v-model="form.name" placeholder="请输入活动名称" />
      </el-form-item>
      <el-form-item label="活动类型" prop="type">
        <el-select v-model="form.type" placeholder="请选择类型" style="width: 100%">
          <el-option label="学术讲座" value="academic" />
          <el-option label="文体活动" value="culture" />
          <el-option label="志愿服务" value="volunteer" />
          <el-option label="社团招新" value="club" />
        </el-select>
      </el-form-item>
      <el-form-item label="活动时间" prop="timeRange">
        <el-date-picker
          v-model="form.timeRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="活动地点" prop="location">
        <el-input v-model="form.location" placeholder="请输入活动地点" />
      </el-form-item>
      <el-form-item label="人数限制" prop="limit">
        <el-input-number v-model="form.limit" :min="0" :step="1" placeholder="0为不限" />
        <span class="ml-10 text-gray text-xs">0 表示不限制</span>
      </el-form-item>
      <el-form-item label="报名门槛" prop="creditLimit">
        <el-input-number v-model="form.creditLimit" :min="0" :step="1" />
        <span class="ml-10 text-gray text-xs">信用分低于此值不可报名</span>
      </el-form-item>
      <el-form-item label="素质加分" prop="score">
        <el-input-number v-model="form.score" :min="0" :step="0.5" />
        <span class="ml-10 text-gray text-xs">参与完成可获得的信用/素质分</span>
      </el-form-item>
      <el-form-item label="是否收费" prop="isFee">
        <el-switch v-model="form.isFee" />
      </el-form-item>
      <el-form-item label="费用金额" prop="fee" v-if="form.isFee">
        <el-input-number v-model="form.fee" :min="0" :precision="2" :step="1" />
        <span class="ml-10">元</span>
      </el-form-item>
      <el-form-item label="活动详情" prop="description">
        <el-input
          v-model="form.description"
          type="textarea"
          rows="4"
          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>
</template>

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

const emit = defineEmits(['success'])

const visible = ref(false)
const formRef = ref()
const isEdit = ref(false)

const form = reactive({
  id: '',
  name: '',
  type: '',
  timeRange: [],
  location: '',
  limit: 0,
  creditLimit: 60,
  score: 2,
  isFee: false,
  fee: 0,
  description: ''
})

const title = computed(() => isEdit.value ? '编辑活动' : '发布新活动')

const rules = {
  name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
  type: [{ required: true, message: '请选择活动类型', trigger: 'change' }],
  timeRange: [{ required: true, message: '请选择活动时间', trigger: 'change' }],
  location: [{ required: true, message: '请输入活动地点', trigger: 'blur' }],
}

const open = (row) => {
  if (row) {
    isEdit.value = true
    Object.assign(form, row)
    form.timeRange = [row.startTime, row.endTime]
  } else {
    isEdit.value = false
    form.id = ''
    form.name = ''
    form.type = ''
    form.timeRange = []
    form.location = ''
    form.limit = 50
    form.creditLimit = 60
    form.score = 2
    form.isFee = false
    form.fee = 0
    form.description = ''
  }
  visible.value = true
}

const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      const data = {
        ...form,
        startTime: form.timeRange[0],
        endTime: form.timeRange[1]
      }
      delete data.timeRange
      
      ElMessage.success(isEdit.value ? '活动更新成功' : '活动发布成功，通知短信已发送')
      emit('success', data)
      visible.value = false
    }
  })
}

defineExpose({
  open
})
</script>

<style scoped>
.ml-10 { margin-left: 10px; }
.text-gray { color: #909399; }
.text-xs { font-size: 12px; }
</style>
