<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="发送对象">
          <el-radio-group v-model="sendType">
              <el-radio label="select">选择学员</el-radio>
              <el-radio label="all">全员发送</el-radio>
          </el-radio-group>
      </el-form-item>

      <el-form-item v-if="sendType === 'select'" label="选择学员">
           <el-select
            v-model="form.target_criteria.student_ids"
            multiple
            filterable
            remote
            reserve-keyword
            placeholder="请输入学员姓名或电话搜索"
            :remote-method="remoteMethod"
            :loading="loading"
            style="width: 100%"
            >
            <el-option
            v-for="item in studentOptions"
            :key="item.id"
            :label="item.name + ' (' + item.phone + ')'"
            :value="item.id">
            </el-option>
        </el-select>
      </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, getStudents } from '@/api/crm'

export default {
  name: 'NotificationCustom',
  data() {
    return {
      form: {
        title: '',
        content: '',
        notification_type: 'system',
        send_mode: 'custom',
        target_criteria: {
            student_ids: [],
            select_all: false
        }
      },
      sendType: 'select',
      studentOptions: [],
      loading: false,
      submitting: false,
      rules: {
          title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
          content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
      }
    }
  },
  watch: {
      sendType(val) {
          this.form.target_criteria.select_all = (val === 'all')
      }
  },
  methods: {
    remoteMethod(query) {
        if (query !== '') {
            this.loading = true;
            getStudents({ search: query, page_size: 20 }).then(response => {
                this.studentOptions = response.data.results;
                this.loading = false;
            })
        } else {
            this.studentOptions = [];
        }
    },
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
            if (this.sendType === 'select' && this.form.target_criteria.student_ids.length === 0) {
                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>
