<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="coupon_id">
        <el-select v-model="form.target_criteria.coupon_id" filterable placeholder="请选择优惠券">
            <el-option v-for="item in couponOptions" :key="item.id" :label="item.title" :value="item.id" />
        </el-select>
      </el-form-item>

      <el-form-item label="使用状态">
        <el-select v-model="form.target_criteria.status" clearable placeholder="全部状态">
            <el-option label="已领取（未使用）" value="assigned" />
            <el-option label="已使用" value="used" />
            <el-option label="已过期" value="expired" />
        </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, getCoupons } from '@/api/crm'

export default {
  name: 'NotificationCoupon',
  data() {
    return {
      form: {
        title: '',
        content: '',
        notification_type: 'activity',
        send_mode: 'coupon',
        target_criteria: {
            coupon_id: undefined,
            status: 'assigned'
        }
      },
      couponOptions: [],
      submitting: false,
      rules: {
          title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
          content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
      }
    }
  },
  created() {
      this.fetchCoupons()
  },
  methods: {
    fetchCoupons() {
        getCoupons({ page_size: 1000 }).then(response => {
            this.couponOptions = response.data.results
        })
    },
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
            if (!this.form.target_criteria.coupon_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>
