<script setup name="Classification">
import { ref, toRefs, reactive, getCurrentInstance, proxyRefs, onMounted } from 'vue'

import TreeFilter from './modules/TreeFilter.vue'

import BasicInfoTab from './modules/BasicInfoTab.vue'
import TableInfoTab from './modules/TableInfoTab.vue'

import StructureTab from './modules/StructureTab.vue'
import EncryptionTab from './modules/EncryptionTab.vue'

import { useDict } from '@/utils/dict'


import { useRouter } from 'vue-router'
const router = useRouter()

const { proxy } = getCurrentInstance()

const projectId = ref('')

onMounted(()=>{
  projectId.value =proxy.$route.query.projectId
  console.log('projectId',projectId.value)
})
// const props = defineProps({
//   projectId: String, // 主键

// })
// 树形数据
const treeData = ref([
 {
        id: 'system',
        label: '若依配测系统',
        type: 'system',
        children: [
          {
            id: 'database',
            label: 'ry',
            type: 'database',
            children: [
              {
                id: 'tables',
                label: '表',
                type: 'category',
                children: [
                  { id: 'gen_table', label: 'gen_table', type: 'table' },
                  { id: 'gen_table_column', label: 'gen_table_column', type: 'table' },
                  { id: 'sys_config', label: 'sys_config', type: 'table' },
                  { id: 'sys_dept', label: 'sys_dept', type: 'table' },
                  { id: 'sys_dict_data', label: 'sys_dict_data', type: 'table' },
                  { id: 'sys_dict_type', label: 'sys_dict_type', type: 'table' },
                  { id: 'sys_job', label: 'sys_job', type: 'table' },
                  { id: 'sys_job_log', label: 'sys_job_log', type: 'table' },
                  { id: 'sys_logininfor', label: 'sys_logininfor', type: 'table' },
                  { id: 'sys_menu', label: 'sys_menu', type: 'table' },
                  { id: 'sys_notice', label: 'sys_notice', type: 'table' },
                  { id: 'sys_oper_log', label: 'sys_oper_log', type: 'table' },
                  { id: 'sys_post', label: 'sys_post', type: 'table' },
                  { id: 'sys_role', label: 'sys_role', type: 'table' },
                  { id: 'sys_role_dept', label: 'sys_role_dept', type: 'table' },
                  { id: 'sys_role_menu', label: 'sys_role_menu', type: 'table' },
                  { id: 'sys_user', label: 'sys_user', type: 'table' },
                  { id: 'sys_user_online', label: 'sys_user_online', type: 'table' },
                  { id: 'sys_user_post', label: 'sys_user_post', type: 'table' },
                  { id: 'sys_user_role', label: 'sys_user_role', type: 'table' }
                ]
              }
            ]
          }
          ]
          }
])

// 当前选中的节点数据
const currentNodeData = ref(null)
const currentNodeLevel = computed(() => {
  if (!currentNodeData.value) return 0
  if (currentNodeData.value.type === 'system') return 1
  if (currentNodeData.value.type === 'database') return 2
  if (currentNodeData.value.type === 'category') return 3
  if (currentNodeData.value.type === 'table') return 4
  return 0
})

// 是否启用解密插件
const enableDecryptionPlugin = ref(false)

// 当前激活的Tab
const activeTab = ref('basic')

// 当前表结构数据 (匹配图片中的gen_table结构) 
const currentTableStructure = ref([
    { pk: '', fieldName: 'business_name', comment: '生成业务名', fieldType: 'VARCHAR', length: '30', precision: '', algorithm: '' },
    { pk: '', fieldName: 'business_name_...', comment: '', fieldType: 'TEXT', length: '65535', precision: '', algorithm: '' },
    { pk: '', fieldName: 'class_name', comment: '实体类名称', fieldType: 'VARCHAR', length: '100', precision: '', algorithm: '' },
    { pk: '', fieldName: 'create_by', comment: '创建者', fieldType: 'VARCHAR', length: '64', precision: '', algorithm: '' },
    { pk: '', fieldName: 'create_time', comment: '创建时间', fieldType: 'DATETIME', length: '19', precision: '', algorithm: '' },
    { pk: '', fieldName: 'function_author', comment: '生成功能作者', fieldType: 'VARCHAR', length: '50', precision: '', algorithm: '' },
    { pk: '', fieldName: 'function_name', comment: '生成功能名', fieldType: 'VARCHAR', length: '50', precision: '', algorithm: '' },
    { pk: '', fieldName: 'gen_path', comment: '生成路径（不填...', fieldType: 'VARCHAR', length: '200', precision: '', algorithm: '' },
    { pk: '', fieldName: 'gen_type', comment: '生成代码方式（0...', fieldType: 'CHAR', length: '1', precision: '', algorithm: '' },
    { pk: '', fieldName: 'module_name', comment: '生成模块名', fieldType: 'VARCHAR', length: '30', precision: '', algorithm: '' }
])

// 树节点点击处理
const handleNodeClick = (data) => {
  currentNodeData.value = data
  activeTab.value = 'basic'
}

// 批量加密
const handleBatchEncrypt = () => {
  console.log('批量加密', currentNodeData.value)
}

// 批量解密
const handleBatchDecrypt = () => {
  console.log('批量解密', currentNodeData.value)
}

// 删除多余列
const handleDeleteColumns = () => {
  console.log('删除多余列', currentNodeData.value)
}

// 编辑字段
const handleEditField = (field) => {
  console.log('编辑字段', field)
}

defineExpose({
  // handleRedInk,
  // handleVoid
})

</script>
<template>
  <div class="app-container scroller">
    <PageTitle :back="true" @back="pageProjectManage" >
      <template #title>
        返回项目管理
      </template>

    </PageTitle>

    <div class="app-container__body">
      <div class="flex-container content-container">
        <div class="left">
          <el-card class="image-card tree-container">
            <TreeFilter :tree-data="treeData" @node-click="handleNodeClick"/>
          </el-card>   
        </div>
        <div class="right flex1">
          <el-card class="image-card">
              <div class="header-section">
                <div class="breadcrumb">
                  <el-breadcrumb separator="/">
                    <el-breadcrumb-item>若依配测系统</el-breadcrumb-item>
                    <el-breadcrumb-item v-if="currentNodeLevel >= 2">ry</el-breadcrumb-item>
                    <el-breadcrumb-item v-if="currentNodeLevel >= 3">表</el-breadcrumb-item>
                    <el-breadcrumb-item v-if="currentNodeLevel >= 4">{{ currentNodeData?.label }}</el-breadcrumb-item>
                  </el-breadcrumb>
                </div>
                <div class="radio-group" v-if="currentNodeLevel === 4">
                  <el-radio-group v-model="enableDecryptionPlugin">
                    <el-radio :label="true">启用解密插件</el-radio>
                    <el-radio :label="false">不启用解密插件</el-radio>
                  </el-radio-group>
                </div>
              </div>

              <!-- Tab区域 -->
              <div class="tab-section">
                <el-tabs v-model="activeTab">
                  <!-- 基本信息Tab -->
                  <el-tab-pane label="基本信息" name="basic">
                    <BasicInfoTab 
                      :node-data="currentNodeData"
                      v-if="activeTab === 'basic' && currentNodeLevel === 1"
                    />

                    <TableInfoTab 
                      :node-data="currentNodeData"
                      v-if="activeTab === 'basic' && currentNodeLevel === 4"
                    />
                    
                  </el-tab-pane>

                  <!-- 数据结构Tab (仅4级节点显示) -->
                  <el-tab-pane label="数据结构" name="structure" v-if="currentNodeLevel === 4">
                    <StructureTab 
                      :table-data="currentTableStructure"
                      v-if="activeTab === 'structure'"
                    />
                  </el-tab-pane>

                  <!-- 字段加密配置Tab (仅4级节点显示) -->
                  <el-tab-pane label="字段加密配置" name="encryption" v-if="currentNodeLevel === 4">
                    <EncryptionTab 
                      :table-data="currentTableStructure"
                      @batch-encrypt="handleBatchEncrypt"
                      @batch-decrypt="handleBatchDecrypt"
                      @delete-columns="handleDeleteColumns"
                      @edit-field="handleEditField"
                      v-if="activeTab === 'encryption'"
                    />
                  </el-tab-pane>
                </el-tabs>
              </div>
          </el-card>   
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.flex-container { 
  display: flex;
}

.align-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.flex1 {
  flex: 1;
}
.content-container {
  .left {
    .tree-container {
      width: 300px;
    }
  }
  .right {
    margin-left: var(--container-pd);
    overflow: hidden;
  }
}
</style>

