<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入通知标题" />
      </el-form-item>
      
      <el-form-item label="内容" prop="content">
        <el-input type="textarea" v-model="form.content" :rows="4" placeholder="请输入通知内容" />
      </el-form-item>
      
      <el-form-item label="通知类型" prop="notification_type">
          <el-select v-model="form.notification_type">
              <el-option label="系统通知" value="system" />
              <el-option label="活动提醒" value="activity" />
              <el-option label="课程通知" value="course" />
          </el-select>
      </el-form-item>

      <el-form-item label="选择项目" prop="project_id">
        <el-select v-model="form.target_criteria.project_id" filterable placeholder="请选择项目">
            <el-option v-for="item in projectOptions" :key="item.id" :label="item.title" :value="item.id" />
        </el-select>
      </el-form-item>

      <el-form-item label="学员状态">
        <el-checkbox-group v-model="form.target_criteria.statuses">
            <el-checkbox label="enrolled">报名</el-checkbox>
            <el-checkbox label="studying">在读</el-checkbox>
            <el-checkbox label="graduated">毕业</el-checkbox>
            <el-checkbox label="completed">完成</el-checkbox>
            <el-checkbox label="quit">退学</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit" :loading="submitting">发送通知</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { createNotificationBatch, getProjects } from '@/api/crm'

export default {
  name: 'NotificationProject',
  data() {
    return {
      form: {
        title: '',
        content: '',
        notification_type: 'course',
        send_mode: 'project',
        target_criteria: {
            project_id: undefined,
            statuses: ['enrolled', 'studying', 'graduated']
        }
      },
      projectOptions: [],
      submitting: false,
      rules: {
          title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
          content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
      }
    }
  },
  created() {
      this.fetchProjects()
  },
  methods: {
    fetchProjects() {
        getProjects({ page_size: 1000 }).then(response => {
            this.projectOptions = response.data.results
        })
    },
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
            if (!this.form.target_criteria.project_id) {
                this.$message.warning('请选择项目');
                return;
            }

            this.submitting = true
            createNotificationBatch(this.form).then(response => {
                this.$notify({
                    title: '成功',
                    message: '通知发送成功',
                    type: 'success',
                    duration: 2000
                })
                this.submitting = false
                this.$router.push('/crm/notifications/history')
            }).catch(() => {
                this.submitting = false
            })
        }
      })
    }
  }
}
</script>
