<template>
  <div class="container">
    <div class="page-header">
      <h2>评价指标</h2>
      <div class="header-actions">
        <el-button type="primary" @click="handleAddMetric">
          <el-icon><Plus /></el-icon>
          添加
        </el-button>
      </div>
    </div>

    <div class="metrics-container">
      <MetricCategory
        v-for="category in metricCategories"
        :key="category.id"
        :category="category"
        :active-id="activeCategoryId" 
        @active="activeCategory"
        @refresh="handleRefresh"
        @remove-category="removeCategory"
      />
    </div>
    <!-- 添加一级指标对话框 -->
    <el-dialog v-model="showAddDialog" title="添加一级指标" width="500px">
      <MetricForm ref="metricFormRef" :isNew="true" :metric="newMetric" @refresh="handleRefresh" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="resetForm">取消</el-button>
          <el-button type="primary" @click="submitMetricForm">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { Plus } from "@element-plus/icons-vue";
import MetricCategory from "./components/MetricCategory.vue";
import MetricForm from "./components/MetricForm.vue";
import { getIndicatorByParentId, deleteIndicator } from "@/api/evaluate/indicator";
import { ElMessage, ElMessageBox } from "element-plus";

const emit = defineEmits(['activeMetricCategory'])

// 模拟数据
const metricCategories = ref([]);

const activeCategoryId = ref('')

const handleAddMetric = () => {
  newMetric.name = "";
  showAddDialog.value = true;
};


const removeCategory = (categoryId) => {
  ElMessageBox.confirm(
    "确定要删除该指标及其所有子指标吗？",
    "删除确认",
    {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    }
  ).then(async () => {
    try {
      const res = await deleteIndicator(categoryId);
      if (res.code === 200) {
        ElMessage.success("指标删除成功");
        getIndicatorByParentIdData(0);
      } else {
        ElMessage.error(res.message || "指标删除失败");
      }
    } catch (error) {
      console.error("删除指标失败:", error);
      ElMessage.error("删除指标失败");
    }
  }).catch(() => {
    // 取消删除
  });
};

const showAddDialog = ref(false);
const metricFormRef = ref(null);
const newMetric = reactive({
  name: ""
});

const submitMetricForm = () => {
  if (metricFormRef.value) {
    metricFormRef.value.submitForm();
  }
};

const resetForm = () => {
  showAddDialog.value = false;
  if (metricFormRef.value) {
    metricFormRef.value.resetFields();
  }
}

const handleRefresh = () => {
  getIndicatorByParentIdData(0);
  showAddDialog.value = false;
};

const getIndicatorByParentIdData = async (parentId) => {
  try {
    const res = await getIndicatorByParentId(parentId, 0);
      if (res.code === 200) {
        metricCategories.value = res.data;
        emit('activeMetricCategory', res.data[0]?.id || null)
        activeCategoryId.value = res.data[0]?.id || null;
      }
  } catch (error) {
    console.error("获取指标数据失败:", error);
  }
};

const activeCategory = (data) => {
  activeCategoryId.value = data;
  emit('activeMetricCategory', data); // 通知父组件
};

onMounted(() => {
  getIndicatorByParentIdData(0); // 获取一级指标数据
});
</script>
<style lang="scss" scoped>
.container {
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e4e7ed;

    h2 {
      margin: 0;
      color: #303133;
    }
  }

  .metrics-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}
</style>
