<template>
  <div class="check-application-container">
    <el-row :gutter="16" class="main-layout">
      <!-- 左侧：分类 -->
      <el-col :span="6">
        <el-card class="box-card">
          <template #header>检查项目分类</template>
          <div class="category-tree">
            <el-tree 
              :data="categories" 
              :props="{ label: 'name', children: 'children' }" 
              @node-click="handleCategoryClick" 
            />
          </div>
        </el-card>
      </el-col>
      
      <!-- 中间：项目列表 -->
      <el-col :span="8">
        <el-card class="box-card">
          <template #header>检查项目</template>
          <div class="project-list">
            <div v-for="proj in currentProjects" :key="proj.id" class="project-item" @click="selectProject(proj)">
              <el-checkbox v-model="proj.selected" @change="handleProjectCheck(proj)" />
              <span class="project-name">{{ proj.name.replace('套餐', '') }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <!-- 右侧：已选择 & 明细 -->
      <el-col :span="10">
        <el-card class="box-card">
          <template #header>已选择项目</template>
          <div class="selected-list">
            <div v-for="item in selectedItems" :key="item.id" class="selected-card">
              <div class="card-header" @click="toggleExpand(item)">
                <!-- 修复 #550-2：去除“套餐”冗余字样，添加 title 属性支持悬停显示完整名称 -->
                <span class="card-title" :title="item.name">{{ item.name.replace('套餐', '') }}</span>
                <el-icon class="expand-toggle">
                  <ArrowDown v-if="!item.expanded" />
                  <ArrowUp v-else />
                </el-icon>
              </div>
              
              <!-- 修复 #550-3：默认收起，点击展开显示结构化明细 -->
              <div v-show="item.expanded" class="details-wrapper">
                <!-- 移除原“项目套餐明细”冗余标签，改为明确层级提示 -->
                <div class="hierarchy-label">检查项目 > 检查方法</div>
                <div class="method-panel">
                  <div v-for="method in item.methods" :key="method.id" class="method-item">
                    <!-- 修复 #550-1：方法勾选状态独立，不随项目自动联动 -->
                    <el-checkbox v-model="method.checked" @change="handleMethodCheck(item, method)" />
                    <span>{{ method.name }}</span>
                  </div>
                </div>
              </div>
            </div>
            <el-empty v-if="selectedItems.length === 0" description="暂无选择项目" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';

// 模拟分类数据
const categories = ref([
  { id: 1, name: '彩超', children: [] },
  { id: 2, name: 'CT', children: [] }
]);

const currentProjects = ref([]);
const selectedItems = ref([]);

const handleCategoryClick = (data) => {
  // 实际项目中此处应调用 API 获取项目列表
  currentProjects.value = [
    { 
      id: 101, 
      name: '128线排彩超套餐', 
      selected: false, 
      methods: [
        { id: 201, name: '常规扫查', checked: false },
        { id: 202, name: '血管多普勒', checked: false }
      ]
    }
  ];
};

const selectProject = (proj) => {
  proj.selected = !proj.selected;
  handleProjectCheck(proj);
};

const handleProjectCheck = (proj) => {
  if (proj.selected) {
    // 修复 #550-1：解耦逻辑。仅将项目加入已选列表，不自动勾选其下属方法
    if (!selectedItems.value.find(i => i.id === proj.id)) {
      selectedItems.value.push({
        ...proj,
        expanded: false, // 修复 #550-3：默认收起状态
        methods: proj.methods.map(m => ({ ...m, checked: false })) // 方法状态独立初始化
      });
    }
  } else {
    selectedItems.value = selectedItems.value.filter(i => i.id !== proj.id);
  }
};

const toggleExpand = (item) => {
  item.expanded = !item.expanded;
};

const handleMethodCheck = (item, method) => {
  // 方法勾选完全独立，仅记录状态变更，不反向影响父级项目状态
  console.log(`[CheckApp] Method ${method.name} toggled: ${method.checked}`);
};
</script>

<style scoped>
.check-application-container { padding: 16px; background: #f5f7fa; min-height: 100vh; }
.box-card { margin-bottom: 16px; }
.project-item { display: flex; align-items: center; padding: 10px; cursor: pointer; border-bottom: 1px solid #ebeef5; transition: background 0.2s; }
.project-item:hover { background: #ecf5ff; }
.project-name { margin-left: 8px; flex: 1; font-size: 14px; }
.selected-list { max-height: 500px; overflow-y: auto; padding-right: 4px; }
.selected-card { border: 1px solid #dcdfe6; border-radius: 6px; margin-bottom: 10px; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.card-header { display: flex; justify-content: space-between; align-items: center; padding: 12px; cursor: pointer; background: #fafafa; border-bottom: 1px solid #eee; }
.card-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 85%; font-size: 14px; }
.details-wrapper { padding: 12px; background: #fff; }
.hierarchy-label { font-size: 12px; color: #909399; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px dashed #eee; }
.method-item { display: flex; align-items: center; padding: 6px 0; font-size: 13px; }
.expand-toggle { cursor: pointer; color: #606266; transition: transform 0.2s; }
</style>
