<template>
  <el-dialog
    v-model="dialogVisible"
    title="编辑策略"
    width="80%"
    :before-close="handleClose"
  >
    <div class="edit-strategy-dialog">
      <!-- 版本选择区域 -->
      <div class="version-section">
        <div class="version-header">
          <span class="version-title">根据发现版本设置脱敏:</span>
        </div>
        <div class="version-selector">
          <span class="selector-label">选择发现版本:</span>
          <el-select v-model="selectedVersion" placeholder="选择发现版本" class="version-select">
            <el-option label="无版本" value="" />
            <el-option
              v-for="version in versions"
              :key="version"
              :label="version"
              :value="version"
            />
          </el-select>
        </div>
      </div>

      <!-- 主体内容区域 -->
      <div class="content-section">
        <!-- 左侧树形结构 -->
        <div class="tree-section">
          <el-tree
            :data="treeData"
            :props="treeProps"
            @node-click="handleNodeClick"
            highlight-current
            default-expand-all
            :current-node-key="currentNodeKey"
          />
        </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="isPk" label="主键" width="80" align="center" fixed>
              <template #default="{ row }">
                <span v-if="row.isPk">PK</span>
              </template>
            </el-table-column>
            <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-column label="操作" width="80" align="center" fixed="right">
              <template #default="{ row }">
                <el-button type="text" size="small" @click="handleSet(row)">设置</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </div>
    </template>

    <!-- 脱敏规则设置弹窗 -->
    <DesensitizationRuleDialog
      v-model="desensitizationDialogVisible"
      :current-field="currentField"
      @confirm="handleRuleConfirm"
    />
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import DesensitizationRuleDialog from './DesensitizationRuleDialog.vue'

const dialogVisible = ref(false)
const desensitizationDialogVisible = ref(false)
const currentField = ref({})
const selectedVersion = ref('')
const currentNodeKey = ref('sys_config') // 默认选中sys_config表

// 版本选项
const versions = ref(['v1.0', 'v2.0', 'v3.0'])

// 树形数据（根据图片内容）
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' },
              { id: 'sys_post', label: 'sys_post', type: 'table' }
            ]
          }
        ]
      }
    ]
  }
])

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

// 表格字段数据（根据图片中的sys_config表）
const tableFields = ref([
  { isPk: true, name: 'config_id', comment: '参数主键', dataType: 'int', algorithm: '' },
  { isPk: false, name: 'config_key', comment: '参数键名', dataType: 'varchar', algorithm: '' },
  { isPk: false, name: 'config_name', comment: '参数名称', dataType: 'varchar', algorithm: '' },
  { isPk: false, name: 'config_type', comment: '系统内置 (Y是 N否)', dataType: 'char', algorithm: '' },
  { isPk: false, name: 'create_by', comment: '创建者', dataType: 'varchar', algorithm: '' },
  { isPk: false, name: 'create_time', comment: '创建时间', dataType: 'datetime', algorithm: '' },
  { isPk: false, name: 'remark', comment: '备注', dataType: 'varchar', algorithm: '' }
])

// 打开弹窗
const openDialog = (row) => {
  dialogVisible.value = true
  // 初始化数据，可以根据传入的row数据填充表单
  if (row) {
    // 这里可以根据实际需求初始化数据
    selectedVersion.value = row.version || ''
  }
}

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

// 保存策略
const handleSave = () => {
  // 这里调用API保存数据
  console.log('保存策略:', {
    version: selectedVersion.value,
    fields: tableFields.value
  })
  
  ElMessage.success('策略保存成功')
  dialogVisible.value = false
}

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

// 获取表字段数据
const fetchTableFields = (tableName) => {
  // 模拟不同表的字段数据
  const mockData = {
    'sys_config': [
      { isPk: true, name: 'config_id', comment: '参数主键', dataType: 'int', algorithm: '' },
      { isPk: false, name: 'config_key', comment: '参数键名', dataType: 'varchar', algorithm: '' },
      { isPk: false, name: 'config_name', comment: '参数名称', dataType: 'varchar', algorithm: '' },
      { isPk: false, name: 'config_type', comment: '系统内置 (Y是 N否)', dataType: 'char', algorithm: '' },
      { isPk: false, name: 'create_by', comment: '创建者', dataType: 'varchar', algorithm: '' },
      { isPk: false, name: 'create_time', comment: '创建时间', dataType: 'datetime', algorithm: '' },
      { isPk: false, name: 'remark', comment: '备注', dataType: 'varchar', algorithm: '' }
    ],
    'gen_table': [
      { isPk: true, name: 'table_id', comment: '编号', dataType: 'bigint', algorithm: '' },
      { isPk: false, name: 'table_name', comment: '表名称', dataType: 'varchar', algorithm: '' }
    ],
    'default': [
      { isPk: false, name: 'field_name', comment: '字段名称', dataType: 'varchar', algorithm: '' }
    ]
  }
  
  tableFields.value = mockData[tableName] || mockData.default
}

// 设置字段脱敏规则
const handleSet = (row) => {
  currentField.value = row
  desensitizationDialogVisible.value = true
}

// 处理规则确认
const handleRuleConfirm = (ruleData) => {
  // 更新表格中的算法字段
  const fieldIndex = tableFields.value.findIndex(field => field.name === ruleData.fieldName)
  if (fieldIndex !== -1) {
    tableFields.value[fieldIndex].algorithm = ruleData.algorithm
    ElMessage.success(`字段 ${ruleData.fieldName} 的脱敏规则已更新`)
  }
}

defineExpose({
  openDialog
})
</script>

<style scoped lang="scss">
.edit-strategy-dialog {
  .version-section {
    margin-bottom: 20px;
    
    .version-header {
      margin-bottom: 12px;
    }
    
    .version-title {
      font-size: 14px;
      font-weight: 600;
      color: #606266;
    }
    
    .version-selector {
      display: flex;
      align-items: center;
      gap: 12px;
      
      .selector-label {
        font-size: 14px;
        color: #606266;
        white-space: nowrap;
      }
      
      .version-select {
        width: 200px;
      }
    }
  }
  
  .content-section {
    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;
    }
  }
  
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
  }
}

: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>