<template>
  <el-dialog v-model="visible" :title="title" width="600px">
    <el-form ref="formRef" :model="form" label-width="100px" label-position="top">
      <el-form-item label="活动名称">
        <el-input v-model="form.title" placeholder="请输入活动主题" />
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="活动类型">
            <el-select v-model="form.type" style="width: 100%">
              <el-option label="志愿服务" value="volunteer" />
              <el-option label="文体活动" value="culture" />
              <el-option label="学术讲座" value="lecture" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
           <el-form-item label="人数限制">
            <el-input-number v-model="form.limit" :min="0" placeholder="0为不限" style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="活动时间">
         <el-date-picker
          v-model="form.timeRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="活动地点">
        <el-input v-model="form.location" placeholder="请输入地点" />
      </el-form-item>
      <el-form-item label="综测加分">
        <el-input-number v-model="form.points" :precision="1" :step="0.5" :max="5" />
        <span class="ml-10 text-gray text-xs">分 (计入第二课堂成绩单)</span>
      </el-form-item>
      <el-form-item label="活动详情">
        <el-input v-model="form.description" type="textarea" rows="4" />
      </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 isEdit = ref(false)
const formRef = ref(null)

const form = reactive({
  title: '',
  type: 'volunteer',
  limit: 50,
  timeRange: [],
  location: '',
  points: 0.5,
  description: ''
})

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

const open = (row) => {
  if (row) {
    isEdit.value = true
    Object.assign(form, row)
  } else {
    isEdit.value = false
    Object.assign(form, { title: '', type: 'volunteer', limit: 50, timeRange: [], location: '', points: 0.5, description: '' })
  }
  visible.value = true
}

const handleSubmit = () => {
  visible.value = false
  ElMessage.success('发布成功！系统已自动推送通知给相关学生')
  emit('success')
}

defineExpose({
  open
})
</script>

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