<template>
  <div class="app-container">
    <el-card shadow="hover" style="max-width: 600px; margin: 0 auto;">
      <div slot="header" class="clearfix">
        <span>实时AD范围维护</span>
      </div>

      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" class="mt-4">
        <el-form-item label="实时AD最小值" prop="realTimeAdMin">
          <el-input
            v-model.number="form.realTimeAdMin"
            type="number"
            placeholder="请输入实时AD最小值 (0-65535)"
            :min="0"
            :max="65535"
            class="w-80"
          />
        </el-form-item>

        <el-form-item label="实时AD最大值" prop="realTimeAdMax">
          <el-input
            v-model.number="form.realTimeAdMax"
            type="number"
            placeholder="请输入实时AD最大值 (0-65535)"
            :min="0"
            :max="65535"
            class="w-80"
          />
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="handleSave"
            :loading="loading"
          >
            <i class="el-icon-check"></i> 保存设置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { updateRange ,getTopOne,addRange} from "@/api/realAdRange/realAdRange";

export default {
  name: "RealTimeAdRange",
  data() {
    return {
      // 加载状态
      loading: false,
      // 表单数据
      form: {
        realTimeAdMin: null,
        realTimeAdMax: null
      },
      // 表单校验规则
      rules: {
        realTimeAdMin: [
          { required: true, message: "实时AD最小值不能为空", trigger: "blur" },
          { type: "integer", message: "实时AD最小值必须为整数", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (value < 0) {
                callback(new Error("实时AD最小值不能小于0"));
              } else if (value > 65535) {
                callback(new Error("实时AD最小值不能大于65535"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        realTimeAdMax: [
          { required: true, message: "实时AD最大值不能为空", trigger: "blur" },
          { type: "integer", message: "实时AD最大值必须为整数", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (value < 0) {
                callback(new Error("实时AD最大值不能小于0"));
              } else if (value > 65535) {
                callback(new Error("实时AD最大值不能大于65535"));
              } else if (this.form.realTimeAdMin !== null && value <= this.form.realTimeAdMin) {
                callback(new Error("实时AD最大值必须大于最小值"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    // 初始化时加载数据
    this.fetchData();
  },
  methods: {
    /**
     * 加载AD范围数据
     */
    fetchData() {
      this.loading = true;
      getTopOne().then(response => {
        // 假设接口返回的数据结构是 { realTimeAdMin: xxx, realTimeAdMax: xxx }
        this.form = { ...response.data };
      }).catch(error => {
        this.$message.error("加载AD范围数据失败: " + (error.message || "未知错误"));
      }).finally(() => {
        this.loading = false;
      });
    },

    /**
     * 保存设置
     */
    handleSave() {
      this.$refs["formRef"].validate(valid => {
        if (valid) {
          this.loading = true;
          if(this.form.id) {
            updateRange(this.form).then(response => {
              this.$message.success("保存成功");
            }).catch(error => {
              this.$message.error("保存失败: " + (error.message || "未知错误"));
            }).finally(() => {
              this.loading = false;
            });
          } else {
            addRange(this.form).then(response => {
              this.form.id = response.data;
              this.$message.success("保存成功");
            }).catch(error => {
              this.$message.error("保存失败: " + (error.message || "未知错误"));
            }).finally(() => {
              this.loading = false;
            });
          }
        }
      });
    },
  }
};
</script>
<style scoped>
.el-card {
  border-radius: 12px;
  border: 1px solid #ebeef5;
}

.el-card__header {
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
}

.el-form-item {
  margin-bottom: 20px;
}

.w-80 {
  width: 240px;
}

.mt-4 {
  margin-top: 16px;
}
</style>
