<template>
    <div class="container">
      <img 
        src="@/assets/images/信息.png" 
        alt="添加提醒规则" 
        @click="handleAdd"
        class="add-icon"
      >
  
      <!-- 添加规则弹框 -->
      <el-dialog 
        :title="dialogTitle" 
        :visible.sync="dialogVisible" 
        width="600px" 
        :before-close="handleClose" 
        append-to-body
      >
        <el-form 
          ref="ruleForm" 
          :model="ruleForm" 
          :rules="rules" 
          label-width="120px" 
          size="small"
        >
          <el-form-item label="提醒规则标题" prop="rulesName">
            <el-input 
              v-model="ruleForm.rulesName" 
              placeholder="请输入提醒规则标题" 
            />
          </el-form-item>
          
          <el-form-item label="提醒对象" prop="alertRecipients">
            <el-radio-group v-model="ruleForm.alertRecipients">
              <el-radio label="2">政务用户</el-radio>
              <!-- <el-radio label="1">企业用户</el-radio> -->
            </el-radio-group>
          </el-form-item>
          
          <el-form-item label="提醒方式" prop="alertManner">
            <el-radio-group v-model="ruleForm.alertManner">
              <el-radio label="1">定期提醒</el-radio>
              <!-- <el-radio label="2">不定期提醒</el-radio> -->
            </el-radio-group>
          </el-form-item>
          
          <!-- <el-form-item label="提醒方法" prop="method">
            <el-radio-group v-model="ruleForm.method">
              <el-radio label="短信提醒" disabled>短信提醒</el-radio>
              <el-radio label="邮件提醒" disabled>邮件提醒</el-radio>
            </el-radio-group>
          </el-form-item> -->
          
          <el-form-item 
            label="提醒时间" 
            prop="alertTime" 
            v-if="ruleForm.alertManner === '1'"
          >
            <el-date-picker 
              v-model="ruleForm.alertTime" 
              type="datetime" 
              placeholder="请选择提醒时间"
              value-format="yyyy-MM-dd HH:mm:ss" 
            />
          </el-form-item>
          
          <el-form-item 
            label="提醒内容" 
            prop="alertType" 
            required 
            v-else
          >
            <el-radio-group v-model="ruleForm.alertType">
              <el-radio label="2">申报任务即将结束（企业）</el-radio>
              <el-radio label="3">项目即将建设完成（政府）</el-radio>
            </el-radio-group>
            
            <el-form-item 
              prop="daysAdvance" 
              class="reminder-days-item" 
              :rules="[
                { required: true, message: '请输入提醒天数', trigger: 'blur' },
                { type: 'number', min: 1, max: 30, message: '天数必须在1-30之间', trigger: 'blur' }
              ]"
            >
              <div style="display: flex; align-items: center">
                <span style="color: #f56c6c; margin-right: 4px">*</span>
                <span>提前</span>
                <el-input 
                  v-model.number="ruleForm.daysAdvance" 
                  type="number" 
                  :min="1" 
                  :max="30" 
                  size="small"
                  style="width: 80px; margin: 0 8px" 
                />
                <span>天提醒</span>
              </div>
            </el-form-item>
          </el-form-item>
          
          <el-form-item label="提醒内容" prop="alertContent">
            <el-input 
              v-model="ruleForm.alertContent" 
              type="textarea" 
              :rows="4" 
              placeholder="请输入提醒内容" 
            />
          </el-form-item>
        </el-form>
        
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelAdd">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { addSmartReminder } from "@/api/ManageApi/index";
  
  export default {
    name: "AddReminder",
    data() {
      return {
        dialogVisible: false,
        dialogTitle: "新增智能提醒",
        ruleForm: {
          rulesName: "",
          alertRecipients: "2",
          alertManner: "1",
          method: "短信提醒",
          alertTime: "",
          alertContent: "",
          alertType: "1",
          daysAdvance: null
        },
        rules: {
          rulesName: [
            { required: true, message: "请输入提醒规则标题", trigger: "blur" }
          ],
          alertRecipients: [
            { required: true, message: "请选择提醒对象", trigger: "change" }
          ],
          alertManner: [
            { required: true, message: "请选择提醒方式", trigger: "change" }
          ],
          method: [
            { required: true, message: "请选择提醒方法", trigger: "change" }
          ],
          alertTime: [
            { required: true, message: "请选择提醒时间", trigger: "change" }
          ],
          alertContent: [
            { required: true, message: "请输入提醒内容", trigger: "blur" }
          ]
        }
      };
    },
    methods: {
      // 打开添加弹窗
      handleAdd() {
        this.dialogVisible = true;
        this.resetForm();
      },
      
      // 重置表单
      resetForm() {
        this.ruleForm = {
          rulesName: "",
          alertRecipients: "2",
          alertManner: "1",
          method: "短信提醒",
          alertTime: "",
          alertContent: "",
          alertType: "1",
          daysAdvance: null
        };
        
        this.$nextTick(() => {
          if (this.$refs.ruleForm) {
            this.$refs.ruleForm.clearValidate();
          }
        });
      },
      
      // 关闭弹窗
      handleClose(done) {
        this.dialogVisible = false;
        this.resetForm();
        if (typeof done === "function") {
          done();
        }
      },
      
      // 取消添加
      cancelAdd() {
        this.dialogVisible = false;
        this.resetForm();
      },
      
      // 提交表单
      submitForm() {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            const params = {
              rulesName: this.ruleForm.rulesName,
              alertRecipients: Number(this.ruleForm.alertRecipients),
              alertManner: Number(this.ruleForm.alertManner),
              method: this.ruleForm.method,
              alertTime: this.ruleForm.alertTime,
              alertContent: this.ruleForm.alertContent,
              alertType: Number(this.ruleForm.alertType),
              daysAdvance: this.ruleForm.alertManner === "2" ? Number(this.ruleForm.daysAdvance) : null
            };
            
            addSmartReminder(params).then(res => {
              if (res.code === 200) {
                this.$message.success("添加成功");
                this.dialogVisible = false;
                this.resetForm();
                // 这里可以添加成功后的事件，如刷新列表等
              }
            }).catch(error => {
              console.error("添加失败:", error);
              this.$message.error("添加失败");
            });
          }
        });
      }
    }
  };
  </script>
  
  <style scoped lang="scss">
  .container {
    .add-icon {
      width: 2.5rem;
      height: 2.5rem;
      cursor: pointer;
      transition: transform 0.2s;
      
      &:hover {
        transform: scale(1.1);
      }
    }
  }
  
  .reminder-days-item {
    margin-bottom: 0;
  
    :deep(.el-form-item__label) {
      display: none;
    }
  
    :deep(.el-form-item__content) {
      margin-left: 0 !important;
    }
  }
  
  .el-dialog {
    .el-form {
      padding: 0 20px;
  
      .el-form-item {
        margin-bottom: 20px;
  
        .el-radio-group {
          .el-radio {
            margin-right: 20px;
            line-height: 32px;
          }
        }
  
        .el-date-picker {
          width: 100%;
        }
  
        .el-textarea {
          .el-textarea__inner {
            min-height: 80px;
          }
        }
      }
    }
  
    .dialog-footer {
      text-align: right;
      padding: 10px 20px 20px;
  
      .el-button {
        padding: 9px 20px;
  
        & + .el-button {
          margin-left: 10px;
        }
      }
    }
  }
  </style>