<template>
  <div class="evaluation-metrics">
    <div class="left">
      <Indicator @activeMetricCategory="handleActiveMetricCategory" />
    </div>
    <div class="right">
      <div class="title">
        <h2>指标配置</h2>
        <el-button type="primary" @click="handleAddSecondaryIndicator">
          <el-icon><Plus /></el-icon>
          添加二级指标
        </el-button>
      </div>
      <div class="secondaryIndicator-container" v-if="listData.length > 0">
        <SecondaryIndicator v-for="value in listData" :key="value.id" :indicatorId="value.id" :name="value.name" :weight="value.weight" @refresh="refreshSecondaryIndicator" />
      </div>

      <el-dialog v-model="showAddDialog" title="添加二级指标" width="500px">
        <el-form 
          ref="formRef" 
          :model="metric" 
          :rules="rules" 
          label-width="100px"
        >
          <el-form-item label="指标名称" prop="name">
            <el-input v-model="metric.name" placeholder="请输入指标名称" />
          </el-form-item>
          <el-form-item label="指标权重" prop="weight">
            <el-input-number v-model="metric.weight" placeholder="请输入指标权重" controls-position="right" />
          </el-form-item>
        </el-form>
        <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>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Indicator from './indicator.vue';
import SecondaryIndicator from './secondaryIndicator.vue';
import { getIndicatorByParentId, addIndicator } from "@/api/evaluate/indicator";
import { ElMessage } from 'element-plus'

const activeIndicatorId = ref(null);

const listData = ref([])

const metric = ref({
  name: '',
  weight: ''
})

const formRef = ref(null);

const rules = reactive({
  name: [
    { required: true, message: '请输入指标名称', trigger: 'blur' }
  ],
  weight: [
    { required: true, message: '请输入指标权重', trigger: 'blur' }
  ]
})

const handleActiveMetricCategory = (data) => {
  if (data) {
    activeIndicatorId.value = data;
    getIndicatorByParentIdData(data);
  }
};


const showAddDialog = ref(false);

const handleAddSecondaryIndicator = () => {
  showAddDialog.value = true;
};

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

const submitMetricForm = () => {
  if (formRef.value) {
    formRef.value.validate(async (valid) => {
      if (valid) {
        const res = await addIndicator({
          name: metric.value.name,
          parentId: activeIndicatorId.value,
          level: 2,
          weight: metric.value.weight,
          type: 0
        });
        if (res.code === 200) {
          ElMessage.success('指标添加成功')
          resetForm()
          getIndicatorByParentIdData(activeIndicatorId.value)
        } else {
          ElMessage.error(res.message || '指标添加失败')
        }
      }
    });
  }
}

const getIndicatorByParentIdData = async (parentId) => {
  try {
    const res = await getIndicatorByParentId(parentId, 0);
      if (res.code === 200) {
        listData.value = res.data;
      }
  } catch (error) {
    console.error("获取指标数据失败:", error);
  }
};

const refreshSecondaryIndicator = () => {
  getIndicatorByParentIdData(activeIndicatorId.value)
}
</script>

<style lang="scss" scoped>
.evaluation-metrics {
  width: 100%;
  display: flex;
  gap: 12px;
  
  .left {
    background-color: #fff;
    padding: 20px;
    width: 320px;
    border: 1px solid #dbdbdb;
    border-radius: 5px;
  }

  .right {
    flex: 1;
    height: 100%;
    background-color: #fff;
    border: 1px solid #dbdbdb;
    border-radius: 5px;
    overflow: hidden;

    .title {
      display: flex;
      padding: 0 20px;
      align-items: center;
      justify-content: space-between;
    }

    .secondaryIndicator-container {
      height: calc(100% - 72px);
      overflow: auto;
      padding: 0 20px;
    }
  }
}


</style>