<template>
  <div class="app-container">
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="300px"
      class="config-form"
    >
      <!-- 提示信息 -->
      <el-alert
        title="提示"
        type="info"
        :closable="false"
        style="margin-bottom: 20px;"
      >
        <div>71小时是4260分钟，72小时是4320分钟</div>
      </el-alert>

      <!-- 第一阶段 -->
      <el-form-item
        label="老化流程第一阶段执行时间（单位：分钟）"
        prop="agingStage1Time"
      >
        <el-input-number
          v-model="form.agingStage1Time"
          :min="5"
          :max="4260"
          placeholder="请输入第一阶段执行时间"
          controls-position="right"
          style="width: 300px;"
          @change="validateStage1"
        />
        <div class="form-tips">必须大于等于5分钟</div>
      </el-form-item>

      <!-- 第二阶段 -->
      <el-form-item
        label="老化流程第二阶段执行时间（单位：分钟）"
        prop="agingStage2Time"
      >
        <el-input-number
          v-model="form.agingStage2Time"
          :min="Math.max(10, form.agingStage1Time + 5)"
          :max="4260"
          placeholder="请输入第二阶段执行时间"
          controls-position="right"
          style="width: 300px;"
          @change="validateStage2"
        />
        <div class="form-tips">必须大于等于第一阶段时间5分钟及以上，最大4260分钟</div>
      </el-form-item>

      <!-- 第三阶段 -->
      <el-form-item
        label="老化流程第三阶段执行时间（单位：分钟）"
        prop="agingStage3Time"
      >
        <el-input-number
          v-model="form.agingStage3Time"
          :min="Math.max(15, form.agingStage2Time + 5)"
          :max="4320"
          placeholder="请输入第三阶段执行时间"
          controls-position="right"
          style="width: 300px;"
          @change="validateStage3"
        />
        <div class="form-tips">必须大于等于第二阶段时间5分钟及以上，最大4320分钟</div>
      </el-form-item>

      <!-- 操作按钮 -->
      <el-form-item>
        <el-button
          type="primary"
          :loading="loading"
          @click="submitForm"
        >
          保存
        </el-button>
        <el-button @click="resetForm">
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getAgingStageTime, updateAgingStageTime } from "@/api/system/config";

export default {
  name: "AgingConfig",
  data() {
    // 第一阶段验证规则
    const validateStage1 = (rule, value, callback) => {
      if (value === null || value === undefined || value === '') {
        callback(new Error("第一阶段时间不能为空"));
      } else if (value < 5) {
        callback(new Error("第一阶段时间必须大于等于5分钟"));
      } else if (value > 4260) {
        callback(new Error("第一阶段时间不能超过4260分钟"));
      } else {
        callback();
      }
    };

    // 第二阶段验证规则
    const validateStage2 = (rule, value, callback) => {
      if (value === null || value === undefined || value === '') {
        callback(new Error("第二阶段时间不能为空"));
      } else if (value < this.form.agingStage1Time + 5) {
        callback(new Error("第二阶段时间必须大于等于第一阶段时间5分钟及以上"));
      } else if (value > 4260) {
        callback(new Error("第二阶段时间不能超过4260分钟"));
      } else {
        callback();
      }
    };

    // 第三阶段验证规则
    const validateStage3 = (rule, value, callback) => {
      if (value === null || value === undefined || value === '') {
        callback(new Error("第三阶段时间不能为空"));
      } else if (value < this.form.agingStage2Time + 5) {
        callback(new Error("第三阶段时间必须大于等于第二阶段时间5分钟及以上"));
      } else if (value > 4320) {
        callback(new Error("第三阶段时间不能超过4320分钟"));
      } else {
        callback();
      }
    };

    return {
      // 表单数据
      form: {
        agingStage1Time: null,
        agingStage2Time: null,
        agingStage3Time: null,
      },
      // 验证规则
      rules: {
        agingStage1Time: [
          { required: true, validator: validateStage1, trigger: ["blur", "change"] }
        ],
        agingStage2Time: [
          { required: true, validator: validateStage2, trigger: ["blur", "change"] }
        ],
        agingStage3Time: [
          { required: true, validator: validateStage3, trigger: ["blur", "change"] }
        ],
      },
      // 加载状态
      loading: false,
      // 配置键名
      configKeys: {
        stage1: "agingStage1Time",
        stage2: "agingStage2Time",
        stage3: "agingStage3Time",
      },
    };
  },
  created() {
    this.getConfigData();
  },
  methods: {
    // 获取配置数据
    async getConfigData() {
      try {
        this.loading = true;
        const response = await getAgingStageTime();

        if (response.code === 200 && response.data) {
          // 假设返回的数据格式为数组，包含三个配置项
          const configs = response.data;
          configs.forEach(item => {
            switch (item.configKey) {
              case this.configKeys.stage1:
                this.form.agingStage1Time = parseInt(item.configValue) || 5;
                break;
              case this.configKeys.stage2:
                this.form.agingStage2Time = parseInt(item.configValue) || 10;
                break;
              case this.configKeys.stage3:
                this.form.agingStage3Time = parseInt(item.configValue) || 15;
                break;
            }
          });
        }
      } catch (error) {
        console.error("获取配置失败:", error);
        this.$message.error("获取配置失败");
      } finally {
        this.loading = false;
      }
    },

    // 提交表单
    submitForm() {
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          try {
            this.loading = true;

            // 构建请求数据
            const requestData = [
              {
                configKey: this.configKeys.stage1,
                configValue: this.form.agingStage1Time.toString(),
              },
              {
                configKey: this.configKeys.stage2,
                configValue: this.form.agingStage2Time.toString(),
              },
              {
                configKey: this.configKeys.stage3,
                configValue: this.form.agingStage3Time.toString(),
              },
            ];

            const response = await updateAgingStageTime(requestData);

            if (response.code === 200) {
              this.$message.success("保存成功");
              // 可以重新加载数据，也可以不清除表单状态
              // this.getConfigData();
            } else {
              this.$message.error(response.msg || "保存失败");
            }
          } catch (error) {
            console.error("保存失败:", error);
            this.$message.error("保存失败");
          } finally {
            this.loading = false;
          }
        } else {
          this.$message.warning("请检查表单填写是否正确");
          return false;
        }
      });
    },

    // 重置表单
    resetForm() {
      this.getConfigData(); // 重置为服务器数据
    },

    // 第一阶段变化时触发验证
    validateStage1() {
      // 重新验证第二阶段和第三阶段
      this.$refs.formRef.validateField("agingStage2Time");
      this.$refs.formRef.validateField("agingStage3Time");
    },

    // 第二阶段变化时触发验证
    validateStage2() {
      // 重新验证第三阶段
      this.$refs.formRef.validateField("agingStage3Time");
    },

    // 第三阶段变化时触发验证
    validateStage3() {
      // 不需要重新验证其他阶段
    },

    // 计算第二阶段的最小值
    getStage2Min() {
      return Math.max(10, (this.form.agingStage1Time || 5) + 5);
    },

    // 计算第三阶段的最小值
    getStage3Min() {
      return Math.max(15, (this.form.agingStage2Time || 10) + 5);
    }
  },
  watch: {
    'form.agingStage1Time': {
      handler(newVal) {
        // 当第一阶段变化时，确保第二阶段不小于第一阶段+5
        if (newVal !== null && this.form.agingStage2Time !== null) {
          const minStage2 = newVal + 5;
          if (this.form.agingStage2Time < minStage2) {
            this.form.agingStage2Time = minStage2;
          }
        }
      },
      immediate: true
    },
    'form.agingStage2Time': {
      handler(newVal) {
        // 当第二阶段变化时，确保第三阶段不小于第二阶段+5
        if (newVal !== null && this.form.agingStage3Time !== null) {
          const minStage3 = newVal + 5;
          if (this.form.agingStage3Time < minStage3) {
            this.form.agingStage3Time = minStage3;
          }
        }
      },
      immediate: true
    }
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.config-form {
  max-width: 800px;
  margin: 0 auto;
  padding: 30px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.form-tips {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.el-input-number {
  width: 100%;
}

::v-deep .el-form-item__label {
  font-weight: bold;
  color: #606266;
}
</style>
