<template>
  <div class="param-config-container" v-loading="loading" element-loading-text="加载中...">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>全局模型参数管理</h2>
    </div>

    <!-- 模型参数卡片组（垂直堆叠） -->
    <div class="model-cards-container" v-if="!loading && modelGroups.length > 0">
      <div
        v-for="model in modelGroups"
        :key="model.modelCode"
        class="model-card"
      >
        <!-- 模型标题 -->
        <div class="model-header">
          <h3>{{ model.modelName }}</h3>
        </div>

        <!-- 参数表格 -->
        <el-table :data="model.params" border style="width: 100%">
          <el-table-column label="监测项" prop="paramName" width="200" />
          <el-table-column label="描述" prop="paramDesc" />
          <el-table-column label="阈值设置" width="200">
            <template #default="{ row }">
              <el-input
                v-model="row.paramValue"
                placeholder="请输入阈值"
                @input="markAsModified(model.modelCode, row)"
              />
            </template>
          </el-table-column>
          <el-table-column label="单位" prop="paramUnit" width="120" />
        </el-table>
      </div>
    </div>

    <!-- 空状态 -->
    <div class="empty-state" v-if="!loading && modelGroups.length === 0">
      <el-empty description="暂无参数配置数据"></el-empty>
    </div>

    <!-- 统一保存按钮 -->
    <div class="button-section" v-if="!loading && modelGroups.length > 0">
      <el-button type="primary" @click="handleSaveAll" :loading="saving">
        保存所有修改
      </el-button>
      <span v-if="modifiedCount > 0" class="modified-tip">
        已修改 {{ modifiedCount }} 个参数
      </span>
    </div>
  </div>
</template>

<script>
import { listAllParams, saveAllParams } from "@/api/ccdi/modelParam";

export default {
  name: "ModelParam",
  data() {
    return {
      modelGroups: [],
      modifiedParams: {},
      originalParamValues: {},
      loading: false,
      saving: false
    };
  },
  computed: {
    modifiedCount() {
      return Object.keys(this.modifiedParams).length;
    }
  },
  created() {
    this.loadAllParams();
  },
  methods: {
    buildModifiedKey(modelCode, paramCode) {
      return `${modelCode}:${paramCode}`;
    },
    normalizeParamValue(value) {
      return value === null || value === undefined ? '' : String(value);
    },
    normalizeModelGroups(models) {
      if (!Array.isArray(models)) {
        return [];
      }
      return models.map(model => ({
        ...model,
        params: Array.isArray(model.params) ? model.params : []
      }));
    },
    resetModifiedState() {
      this.modifiedParams = {};
      this.originalParamValues = {};
      this.modelGroups.forEach(model => {
        model.params.forEach(row => {
          const key = this.buildModifiedKey(model.modelCode, row.paramCode);
          this.$set(this.originalParamValues, key, this.normalizeParamValue(row.paramValue));
        });
      });
    },
    async loadAllParams() {
      this.loading = true;
      try {
        const res = await listAllParams({ projectId: 0 });
        this.modelGroups = this.normalizeModelGroups(res.data && res.data.models);
        this.resetModifiedState();
      } catch (error) {
        this.$message.error('加载参数失败：' + error.message);
        console.error('加载参数失败', error);
      } finally {
        this.loading = false;
      }
    },

    markAsModified(modelCode, row) {
      const modifiedKey = this.buildModifiedKey(modelCode, row.paramCode);
      const currentValue = this.normalizeParamValue(row.paramValue);
      const originalValue = this.originalParamValues[modifiedKey];

      if (currentValue === originalValue) {
        if (this.modifiedParams[modifiedKey]) {
          this.$delete(this.modifiedParams, modifiedKey);
        }
        return;
      }
      this.$set(this.modifiedParams, modifiedKey, {
        modelCode,
        paramCode: row.paramCode,
        paramValue: row.paramValue
      });
    },

    async handleSaveAll() {
      if (this.modifiedCount === 0) {
        this.$message.info('没有需要保存的修改');
        return;
      }

      const modelMap = {};
      Object.values(this.modifiedParams).forEach(item => {
        if (!modelMap[item.modelCode]) {
          modelMap[item.modelCode] = {
            modelCode: item.modelCode,
            params: []
          };
        }
        modelMap[item.modelCode].params.push({
          paramCode: item.paramCode,
          paramValue: item.paramValue
        });
      });
      const saveDTO = {
        projectId: 0,
        models: Object.values(modelMap)
      };

      this.saving = true;
      try {
        await saveAllParams(saveDTO);
        this.$modal.msgSuccess('保存成功');
        await this.loadAllParams();
      } catch (error) {
        if (error.response && error.response.data && error.response.data.msg) {
          this.$message.error('保存失败：' + error.response.data.msg);
        } else {
          this.$message.error('保存失败：' + error.message);
        }
        console.error('保存失败', error);
      } finally {
        this.saving = false;
      }
    }
  }
};
</script>

<style scoped lang="scss">
.param-config-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 20px;
  padding: 15px;
  background: #fff;
  border-radius: 4px;

  h2 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 0;
  }
}

.model-cards-container {
  margin-bottom: 20px;
  min-height: 300px;
  padding-bottom: 92px;
}

.model-card {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #e4e7ed;

  .model-header {
    margin-bottom: 15px;

    h3 {
      font-size: 16px;
      font-weight: bold;
      color: #333;
      margin: 0;
    }
  }
}

.empty-state {
  padding: 40px;
  text-align: center;
  background: #fff;
  border-radius: 4px;
}

.button-section {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-top: 24px;
  padding: 16px 20px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid #ebeef5;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.08);
  text-align: left;

  .el-button {
    flex-shrink: 0;
  }

  .modified-tip {
    color: #909399;
    font-size: 14px;
    line-height: 1.5;
  }
}

@media (max-width: 768px) {
  .param-config-container {
    padding: 16px;
  }

  .model-cards-container {
    padding-bottom: 104px;
  }

  .button-section {
    padding: 14px 16px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));

    .el-button {
      width: 100%;
    }
  }
}
</style>
