<template>
  <div class="encryption-tab">
    <!-- 搜索区域 -->
    <div class="filter-section">
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item label="字段名过滤：">
          <el-input
            v-model="filterForm.fieldName"
            placeholder="字段名模糊搜索"
            clearable
            style="width: 200px;"
          />
        </el-form-item>
        <el-form-item label="状态：">
          <el-select style="width: 200px;" v-model="filterForm.status" placeholder="全部" clearable>
            <el-option label="已加密" value="encrypted" />
            <el-option label="未加密" value="unencrypted" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  @click="handleSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格区域 -->
    <el-table 
      :data="filteredTableData" 
      border 
      style="width: 100%; margin-top: 15px;"
      :row-class-name="tableRowClassName"
    >
      <!-- 左浮动列 -->
      <el-table-column prop="pk" label="主键" width="60" align="left"  fixed />
      <el-table-column prop="fieldName" label="字段名" width="150" align="left" fixed/>
      <el-table-column prop="fieldType" label="字段类型" width="120" align="center" />
      <el-table-column prop="length" label="长度" width="80" align="center" />
      <el-table-column prop="algorithm" label="加密算法" width="120" align="center" />
      <el-table-column label="密钥" width="120" align="center">
        <template #default="{ row }">
          <el-button type="text" @click="openEncryptionDialog(row)">设置</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100" align="center">
        <template #default="{ row }">
          <el-tag v-if="row.status === 'encrypted'" type="success" size="small">已加密</el-tag>
          <el-tag v-else type="info" size="small">未加密</el-tag>
        </template>
      </el-table-column>
      
      <!-- 右浮动列 -->
      <el-table-column prop="comment" label="注释" align="left" min-width="200" />
      <el-table-column label="描述信息" align="left" fixed="right">
        <template #default="{ row }">
          <el-input 
            v-model="row.description" 
            size="small" 
            :disabled="!isEditing"
            @change="handleDescriptionChange(row)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="plaintextProcess" label="明文处理" align="left" fixed="right"/>
      

    </el-table>

    <!-- 操作按钮区域 -->
    <div class="action-buttons">
      <el-button type="primary"  @click="handleBatchEncrypt">批量加密</el-button>
      <el-button type="primary"  @click="handleBatchDecrypt">批量解密</el-button>
      <el-button type="primary"  @click="handleDeleteColumns">删除多余列</el-button>
      <el-button 
        type="primary" 
         
        @click="toggleEditMode"

      >
        {{ isEditing ? '保存' : '编辑' }}
      </el-button>
    </div>


    <EncryptionRuleDialog 
      v-model:visible="showEncryptionDialog"
      :field-data="currentField"
      @confirm="handleRuleConfirm"
    />
  </div>
</template>

<script setup>
import { ref, computed, reactive } from 'vue'
import EncryptionRuleDialog from './EncryptionRuleDialog.vue'
const props = defineProps({
  tableData: {
    type: Array,
    required: true,
    default: () => [
      { 
        pk: 'PK', 
        fieldName: 'table_id', 
        fieldType: 'BIGINT', 
        length: '19', 
        algorithm: '',
        status: 'unencrypted',
        comment: '编号',
        description: '主键ID',
        plaintextProcess: ''
      },
      // 其他数据行...
    ]
  }
})

const emit = defineEmits(['batch-encrypt', 'batch-decrypt', 'delete-columns', 'edit-field', 'update-field'])

// 搜索表单
const filterForm = reactive({
  fieldName: '',
  status: ''
})

// 编辑模式
const isEditing = ref(false)

// 表格行样式
const tableRowClassName = ({ row, rowIndex }) => {
  return row.status === 'encrypted' ? 'encrypted-row' : ''
}

// 处理搜索
const handleSearch = () => {
  // 搜索逻辑已在计算属性中实现
}

// 切换编辑模式
const toggleEditMode = () => {
  isEditing.value = !isEditing.value
}


// 处理描述信息变更
const handleDescriptionChange = (row) => {
  emit('update-field', row)
}


// 批量加密
const handleBatchEncrypt = () => {
  emit('batch-encrypt')
}

// 批量解密
const handleBatchDecrypt = () => {
  emit('batch-decrypt')
}

// 删除多余列
const handleDeleteColumns = () => {
  emit('delete-columns')
}

// 过滤表格数据
const filteredTableData = computed(() => {
  return props.tableData.filter(item => {
    const matchesName = filterForm.fieldName 
      ? item.fieldName.includes(filterForm.fieldName)
      : true
    
    const matchesStatus = filterForm.status 
      ? item.status === filterForm.status
      : true
    
    return matchesName && matchesStatus
  })
})



const showEncryptionDialog = ref(false)
const currentField = ref({})

// 处理设置密钥
const openEncryptionDialog = (row) => {
  if(!isEditing.value) return
  currentField.value = row
  showEncryptionDialog.value = true
}


const handleRuleConfirm = (ruleData) => {
  console.log('确认加密规则:', ruleData)
  // 更新表格数据或调用API
}
</script>

<style scoped>
.encryption-tab {
  padding: 15px;
  background-color: white;
}

.filter-section {
  margin-bottom: 15px;
}

.filter-form {
  display: flex;
  align-items: center;
}

.action-buttons {
  margin-top: 20px;
  text-align: center;
}

:deep(.el-table .encrypted-row) {
  background-color: #f0f9eb;
}

:deep(.el-table td) {
  padding: 8px 0;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
}

:deep(.el-form-item) {
  margin-bottom: 0;
}

:deep(.el-form-item__label) {
  color: #333;
  font-weight: normal;
}
</style>