<template>
  <el-row :gutter="20">
    <!-- 左侧树形结构 -->
    <el-col :span="6">
      <el-card shadow="never">
        <div class="header">
          <span>分类树</span>
          <el-button type="primary" size="small" class="add-btn">添加根分类</el-button>
        </div>
        <el-tree :data="treeData" :props="treeProps" node-key="id" highlight-current @node-click="handleNodeClick" />
      </el-card>
    </el-col>

    <!-- 中间表单区域 -->
    <el-col :span="18">
      <el-card shadow="never">
        <h3>编辑分类</h3>
        <el-form :model="form" label-width="120px">
          <el-form-item label="分类名称">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="分类编码">
            <el-input v-model="form.code" />
          </el-form-item>
          <el-form-item label="父级分类">
            <el-select v-model="form.parentId" placeholder="请选择父级分类">
              <el-option label="无（根分类）" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="排序顺序">
            <el-input-number v-model="form.sort" :min="1" />
          </el-form-item>
          <el-form-item label="分类描述">
            <el-input v-model="form.description" type="textarea" />
          </el-form-item>
        </el-form>
        <!-- 关键词提示模块 -->
        <div style="color: #777777">关键词提示词</div>
        <div class="keyword-box" style="display: flex">
          <div class="keyword-content" style="margin-top: 20px;margin-bottom: 20px;margin-left: 20px">
            <span >该分类下共有 {{ templateCount }} 个提示词模板</span><br>
            <el-button type="plain" size="small" @click="viewKeywords" style="margin-top: 10px ">查看关联提示词</el-button>
          </div>
        </div>
        <div class="form-footer">
          <el-button type="danger">删除分类</el-button>
          <div class="right-btns">
            <el-button>取消</el-button>
            <el-button type="primary">保存</el-button>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref } from 'vue'
const templateCount=ref(5)
const treeData = ref([
  {
    id: 1,
    label: '内容创作',
    children: [
      { id: 2, label: '文案撰写' },
      { id: 3, label: '文章生成' }
    ]
  },
  {
    id: 1,
    label: '知识问答',
    children: [
      { id: 2, label: '通用回答' },
      { id: 2, label: '专业回答' }
    ]
  },
  {
    id: 1,
    label: '代码助手',
    children: [
      { id: 2, label: '代码生成' },
      { id: 2, label: '代码解释' },
      { id:2,  label: 'Bug修复'}
    ]
  },
  {
    id: 1,
    label: '聊天对话',
    children: [

    ]
  },
  {
    id: 1,
    label: '系统提示词',
    children: [

    ]
  }
])

const treeProps = {
  children: 'children',
  label: 'label'
}

const form = ref({
  name: '',
  code: '',
  parentId: '',
  sort: 1,
  description: ''
})
function handleNodeClick(data, node) {
  const parent = node.parent

  if (parent&&parent.level>0) {
    // ✅ 如果有父节点，把它的 id 设置为 form.parentId
    form.value.parentId = parent.data.id
    console.log('父节点ID为：', parent.data.id)
  } else {
    // 如果没有父节点（顶级节点），parentId 设为 null 或 ''
    form.value.parentId = '无(根分类)'
    console.log('该节点是顶级节点')
  }

  // 其他表单字段可选填充
  form.value.name = data.label
}
</script>

<style scoped>
.keyword-content{
  margin-top: 10px;
}
.keyword-box{
  background-color: #F5F7FA;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.add-btn {
  font-size: 12px;
}
.form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
.right-btns {
  display: flex;
  gap: 10px;
}
</style>
