<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.columnname"
            placeholder="字段名模糊搜索"
            clearable
            style="width: 200px;"
          />
        </el-form-item>
        <el-form-item label="状态：">
          <el-select style="width: 200px;" v-model="filterForm.flag" placeholder="全部" clearable>
            <el-option label="全部" value="" />
            <el-option v-for="item in encryptFlag" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="primary"  @click="handleSearch">搜索</el-button>
        </el-form-item> -->
      </el-form>
    </div>
    <!-- 表格区域 -->
    <div class="table-wrapper" style="position:relative;">
      <el-table 
        :data="filteredTableData" 
        border 
        style="width: 100%; margin-top: 15px;"
        max-height="500px"
        :row-class-name="tableRowClassName"
      >
        <!-- 左浮动列 -->
        <el-table-column label="主键" width="60" align="left"  fixed >
          <template #default="scope">
            <el-tag v-if="scope.row.primarykey === '1'" type="success">是</el-tag>
          </template> 
        </el-table-column>
         <el-table-column prop="columnname" label="字段名" width="180" />
        <el-table-column prop="typename" label="类型" width="120" />
        <el-table-column prop="columnsize" label="长度" width="80" />
        <el-table-column prop="maskingrulename" label="加密算法" width="120" align="center" />
        <el-table-column label="密钥" width="120" align="center">
          <template #default="{ row }">
            <el-button v-if="row.secretkeyName" link type="primary" >{{ row.secretkeyName }}</el-button>
            <el-button v-else link type="primary" @click="openEncryptionDialog(row)">设置</el-button>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100" align="center">
          <template #default="{ row }">
            <span>{{ getFlagName(row.flag) }}</span>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" width="100" align="center">
          <template #default="{ row }">
            <el-button v-if="row.secretkeyName && ['1', '5', '44', '10', '11'].includes(row.flag)" type="primary" size="small" @click="handleEditField(row)">解密</el-button>
            <el-button v-if="row.secretkeyName && ['4', '6', '7', '9', '12'].includes(row.flag)" type="primary" size="small" @click="handleEditField(row)">加密</el-button>
          </template>
        </el-table-column>
        <!-- 源长度 -->
        <el-table-column label="源长度" width="100" align="center">
          <template #default="{ row }">
            <el-button link type="success" v-if="row.secretkeyName">{{ row.columnsize }}</el-button>
          </template>
        </el-table-column>
        <!-- 右浮动列 -->
        <el-table-column prop="remarks" 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
        v-if="!isEditing"
        class="table-mask-click"
        @click="handleTableMaskClick"
        style="position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.01);z-index:11;cursor:not-allowed;"
      ></div>
    </div>
    <!-- 操作按钮区域 -->
    <div class="action-buttons">
      <el-button v-if="!isEditing" type="primary" @click="handleBatchEncrypt">批量加密</el-button>
      <el-button v-if="!isEditing" type="primary" @click="handleBatchDecrypt">批量解密</el-button>
      <el-button v-if="!isEditing" type="primary" @click="handleDeleteColumns">删除多余列</el-button>
      <el-button v-if="!isEditing" type="primary" @click="toggleEditMode">编辑</el-button>
      <el-button v-if="isEditing" type="info" @click="toggleEditMode">取消</el-button>
      <el-button v-if="isEditing" type="primary" @click="handleSave">保存</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'
import { ElMessageBox } from 'element-plus'
const props = defineProps({
  tableData: {
    type: Array,
    required: true,
    default: () => []
  }
})

// 状态标识对象数组
const encryptFlag = [
  { value: '-2', label: '解密中' },
  { value: '-1', label: '加密中' },
  { value: '1', label: '加密完成' },
  { value: '5', label: '加密完成' },
  { value: '4', label: '加密失败' },
  { value: '44', label: '解密失败' },
  { value: '6', label: '解密完成' },
  { value: '7', label: '解密完成' },
  { value: '9', label: '加密替换失败' },
  { value: '10', label: '解密替换失败' },
  { value: '11', label: '解密校验失败' },
  { value: '12', label: '加密校验失败' }
]

/**
 * 加密状态标识
 */
const getFlagName = (flag) => {
  const found = encryptFlag.find(item => item.value === String(flag))
  return found ? found.label : ''
}

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

// 编辑模式
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 handleSave = () => {
  emit('save-changes')
}

// 过滤表格数据
const filteredTableData = computed(() => {
  return props.tableData.filter(item => {
    const matchesName = filterForm.columnname 
      ? item.columnname.includes(filterForm.columnname)
      : true
    
    const matchesStatus = filterForm.flag 
      ? item.flag === filterForm.flag
      : 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
}

const handleTableMaskClick = () => {
  ElMessageBox.alert('当前是只读状态，编辑可点击编辑按钮进行编辑!')
}
</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;
}

.table-mask-click {
  /* 只拦截点击事件，不影响滚动和悬浮 */
  pointer-events: auto;
}
</style>