<template>
  <el-dialog
    v-model="dialogVisible"
    title="详情"
    width="80%"
    :before-close="handleClose"
  >
    <div class="strategy-detail">
      <!-- 基础信息区域 -->
      <div class="basic-info">
        <div class="info-grid">
          <div class="info-item">
            <span class="info-label">策略名称：</span>
            <span class="info-value">{{ detailData.name || '-' }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">备注：</span>
            <span class="info-value">{{ detailData.remark || '-' }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">创建人：</span>
            <span class="info-value">{{ detailData.creator || 'admin' }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">创建时间：</span>
            <span class="info-value">{{ detailData.createTime || '2025-08-22 17:12:50' }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">状态：</span>
            <el-tag :type="detailData.status === '1' ? 'success' : 'info'">
              {{ detailData.status === '1' ? '已启用' : '未启用' }}
            </el-tag>
          </div>
        </div>
      </div>

      <el-divider />

      <!-- 字段信息区域 -->
      <div class="field-info">
        <h3 class="section-title">字段信息</h3>
        <div class="field-content">
          <!-- 左侧树形结构 -->
          <div class="tree-section">
            <el-tree
              :data="treeData"
              :props="treeProps"
              @node-click="handleNodeClick"
              highlight-current
              default-expand-all
            />
          </div>

          <el-divider direction="vertical" />

          <!-- 右侧表格 -->
          <div class="table-section">
            <el-table
              :data="tableFields"
              border
              style="width: 100%"
              height="400px"
              :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
            >
            <el-table-column prop="pk" label="逐渐" min-width="150" />
              <el-table-column prop="name" label="字段名" min-width="150" />
              <el-table-column prop="comment" label="注释" min-width="150" />
              <el-table-column prop="dataType" label="数据域" min-width="120" />
              <el-table-column prop="algorithm" label="脱敏算法" min-width="180" />
            </el-table>
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'

const dialogVisible = ref(false)
const detailData = ref({})
const tableFields = ref([])

// 树形数据（与之前一致）
const treeData = ref([
  {
    id: 'system1',
    label: '若依测试系统1',
    children: [
      {
        id: 'ry',
        label: 'ry',
        children: [
          {
            id: 'tables',
            label: '表',
            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'
              }
            ]
          }
        ]
      }
    ]
  }
])

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

// 打开弹窗
const openDialog = (row) => {
  detailData.value = { ...row }
  dialogVisible.value = true
  // 默认显示第一个表的字段
  if (treeData.value[0]?.children?.[0]?.children?.[0]?.children?.[0]) {
    fetchTableFields(treeData.value[0].children[0].children[0].children[0].label)
  }
}

// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false
}

// 树节点点击
const handleNodeClick = (node) => {
  if (node.type === 'table') {
    fetchTableFields(node.label)
  }
}

// 获取表字段数据
const fetchTableFields = (tableName) => {
  // 模拟数据，实际应该调用API
  const mockData = {
    'gen_table': [
      { pk: '', name: 'class_name', comment: '实体类名称', dataType: 'varchar', algorithm: 'aa' },
      { pk: '', name: 'create_by', comment: '创建者', dataType: 'varchar', algorithm: 'bb' },
      { pk: '', name: 'create_time', comment: '创建时间', dataType: 'datetime', algorithm: 'cc' },
      { pk: '', name: 'function_author', comment: '生成功能作者', dataType: 'varchar', algorithm: 'dd' },
      { pk: '', name: 'function_name', comment: '生成功能名', dataType: 'varchar', algorithm: 'ee' },
      { pk: '', name: 'gen_path', comment: '生成路径（不填默认...', dataType: 'varchar', algorithm: 'ff' },
      { pk: '', name: 'gen_type', comment: '生成代码方式（Ozip...', dataType: 'varchar', algorithm: 'gg' }
    ],
    'gen_table_column': [
      { pk: '', name: 'column_id', comment: '编号', dataType: 'bigint', algorithm: 'hh' },
      { pk: '', name: 'table_id', comment: '归属表编号', dataType: 'bigint', algorithm: 'ii' },
      { pk: '', name: 'column_name', comment: '列名称', dataType: 'varchar', algorithm: 'jj' }
    ],
    'default': [
      { pk: '', name: 'business_name', comment: '生成业务名', dataType: '通用规则', algorithm: 'aa' }
    ]
  }
  
  tableFields.value = mockData[tableName] || mockData.default
}

defineExpose({
  openDialog
})
</script>

<style scoped lang="scss">
.strategy-detail {
  .section-title {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: #303133;
  }

  .basic-info {
    margin-bottom: 20px;
    
    .info-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }

    .info-item {
      display: flex;
      align-items: center;
    }

    .info-label {
      min-width: 80px;
      color: #606266;
      font-weight: 500;
    }

    .info-value {
      color: #303133;
    }
  }

  .field-info {
    .field-content {
      display: flex;
      height: 400px;
    }

    .tree-section {
      width: 300px;
      height: 100%;
      overflow-y: auto;
      padding-right: 16px;
    }

    .table-section {
      flex: 1;
      height: 100%;
      overflow-y: auto;
    }
  }

  .el-divider {
    margin: 20px 0;
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
  }
}

:deep(.el-tree) {
  .el-tree-node__content {
    height: 36px;
    
    &:hover {
      background-color: #f5f7fa;
    }
  }
  
  .is-current > .el-tree-node__content {
    background-color: #f0f7ff;
    color: #1890ff;
  }
}
</style>