<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>
        <span> 
          <el-button type="primary" :icon="Refresh" @click="getTableData">刷新</el-button>
        </span>
      </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"
        @cell-click="handleCellClick"
        :class="{ 'non-editing': !isEditing }"
      >
        <!-- 左浮动列 -->
        <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.typename!=='DATETIME' && row.primarykey !== '1' && row.secretkeyName" link type="primary" @click="openEncryptionDialog(row)">{{ row.secretkeyName }}</el-button>
            <el-button v-if="row.typename!=='DATETIME' && row.primarykey !== '1' && !row.secretkeyName" 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" class-name="operation-column">
          <template #default="{ row }">
            <el-button :disabled="isEditing" v-if="row.secretkeyName && ['1', '5', '44', '10', '11'].includes(row.flag)" type="primary" size="small" @click="handleDecryptField(row)">解密</el-button>
            <el-button :disabled="isEditing" v-if="row.secretkeyName && ['0','4', '6', '7', '9', '12'].includes(row.flag)" type="primary" size="small" @click="handleEncryptField(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-if="row.typename!=='DATETIME' && row.primarykey !== '1'" 
              v-model="row.description" 
              size="small" 
              :disabled="!isEditing"
            />
          </template>
        </el-table-column>
        <el-table-column prop="plaintextProcess" label="明文处理" align="left" fixed="right" class-name="plaintext-column">
          <template #default="{ row }">
            <el-button :disabled="isEditing" v-if="['1', '5'].includes(row.flag)" type="primary" size="small" @click="handlePlaintext(row)">处理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 操作按钮区域 -->
    <div class="action-buttons">
      <el-button v-if="!isEditing" type="primary" :loading="isBatchEncrypting" @click="handleBatchEncrypt">批量加密</el-button>
      <el-button v-if="!isEditing" type="primary" :loading="isBatchDecrypting" @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 
      ref="encryptionRuleDialogRef"
      v-model:visible="showEncryptionDialog"
      :field-data="currentField"
      @confirm="handleRuleConfirm"
      @reset="handleRuleReset"
    />
  </div>
</template>

<script setup>
import { Refresh } from '@element-plus/icons-vue'
import { ref, computed, reactive, inject, nextTick} from 'vue'
import EncryptionRuleDialog from './EncryptionRuleDialog.vue'
import { ElMessageBox } from 'element-plus'
import { queryOriginalList, queryEncryptionList, hasRedundanceColumns, 
  queryIsLike, queryEncDigit, save, delTableColumn, checkSingleEncOrDecColumn, 
  loadingColumn, checkCanReload ,removeLoadingColumn, checkTableEncOrDecColumn,
  loadingTableParams, reloadingColumn
} from '@/api/classification/classification.js'
import encryptFlag from '@/constants/encryptFlag.js'

const props = defineProps({
  // tableData: {
  //   type: Array,
  //   required: true,
  //   default: () => []
  // }
})

// 获取父组件 provide 的 currentNodeData（响应式）
const currentNodeData = inject('currentNodeData')

const encryptionRuleDialogRef = ref(null)
/**
 * 表格数据
 */
const tableData = ref([])
/**
 * 缓存一份tableData，用于比较是否有修改
 */
const tableDataCache = ref([])

/**
 * 获取表格数据
 */

const getTableData = async () => {
    const node = currentNodeData.value
    console.log('开始---------查询表的机密信--------------息', node)
    // 查询字段原始值配置&字段加密配置
    const [originalListRes, encryptionListRes] = await Promise.all([
      queryOriginalList({
        table_name: node.label,
        datasystem_id: node.dataSystemId,
        schema: node.schema,
        projectId: node.projectid
      }),
      queryEncryptionList({
        table_name: node.label,
        datasystem_id: node.dataSystemId,
        schema: node.schema,
        projectId: node.projectid
      })
    ])
    if (originalListRes && originalListRes.data) {
      // 处理字段加密配置
      originalListRes.data.forEach(item => {
        const encryptionItem = encryptionListRes.data.find(en => en.fieldName === item.columnname)
        if (encryptionItem) {
          item.maskingruleid = encryptionItem.encryptionIdTrue
          item.maskingrulename = encryptionItem.encryptionTypeName
          item.secretkeyId = encryptionItem.secretKey // 编辑保存时，需要判断是否改变
          item.secretkeyName = encryptionItem.encryptionTypeValue
          item.flag = encryptionItem.secretKey? encryptionItem.flag : null
          item.description = encryptionItem.describe_info || '', // 编辑保存时，需要判断是否改变
          item.isLike = encryptionItem.isLike, // 编辑保存时，需要判断是否改变
          item.encdigit = encryptionItem.encdigit, // 编辑保存时，需要判断是否改变
          item.keepfirst = encryptionItem.keepfirst, // 编辑保存时，需要判断是否改变
          item.twoindex = encryptionItem.twoindex // 编辑保存时，需要判断是否改变
        }
      })
      tableData.value = originalListRes.data || []
    }

    // 缓存一份tableData，用于比较是否有修改
    tableDataCache.value = JSON.parse(JSON.stringify(tableData.value))
}

/**
 * 加密状态标识
 */
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 toggleEditMode = () => {
  isEditing.value = !isEditing.value
}

/**
 * 处理单个字段加密
 * @param row 
 */
const handleEncryptField = async (row) => {
  // 添加个确认
  const ok = await ElMessageBox.confirm('确认要加密该字段吗？', '确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  if (!ok) return
  // 处理加密逻辑
  const params = buildEncryptionParams(row, 0)
  const result = await checkSingleEncOrDecColumn(params)
  if (result && result.code === 'POP_00014' && result.flag) {
    const loadingResult = await loadingColumn(params)
    if (loadingResult && loadingResult.code === 'POP_00014' && loadingResult.flag) {
      // 重新获取表格数据
      setTimeout(async () => {
        await getTableData()
      }, 2000)
      // 退出编辑模式
      isEditing.value = false
    } else {
      ElMessageBox.alert(loadingResult ? loadingResult.message : '加密失败，请重试', '错误', {
        confirmButtonText: '确定',
        type: 'error'
      })
    }
  } else {
    ElMessageBox.alert(result ? result.message : '加密失败，请重试', '错误', {
      confirmButtonText: '确定',
      type: 'error'
    })
  }
}

/**
 * 处理单个字段解密
 * @param row
 */
const handleDecryptField = (row) => {
  ElMessageBox.confirm('确认要解密该字段吗？', '确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    // 处理解密逻辑
    const params = buildEncryptionParams(row, 1)

    const result = await checkSingleEncOrDecColumn(params)
    if (result && result.code === 'POP_00014' && result.flag) {
      const loadingResult = await removeLoadingColumn(params)
      if (loadingResult && loadingResult.code === 'POP_00014' && loadingResult.flag) {
        // 重新获取表格数据
        setTimeout(async () => {
          await getTableData()
        }, 2000)
        // 退出编辑模式
        isEditing.value = false
      } else {
        ElMessageBox.alert(loadingResult ? loadingResult.message : '解密失败，请重试', '错误', {
          confirmButtonText: '确定',
          type: 'error'
        })
      }
    } else {
      ElMessageBox.alert(result ? result.message : '解密失败，请重试', '错误', {
        confirmButtonText: '确定',
        type: 'error'
      })
    }
  })
}

// 批量加密
const isBatchEncrypting = ref(false);
const handleBatchEncrypt = async() => {
  isBatchEncrypting.value = true;
  try {
    const params = buildBatchEncryptionParams(0);
    // 验证是否有多余列
    const checkResult = await checkTableEncOrDecColumn(params)

    if (!checkResult) {
      ElMessageBox.alert('加密失败，请重试', '错误', {
        confirmButtonText: '确定',
        type: 'error'
      })
      return
    }

    if (checkResult && checkResult.code === '9983') {
      ElMessageBox.alert(checkResult.msg || '存在多余列，请先删除多余列', '提示', {
        confirmButtonText: '确定',
        type: 'info'
      })
      return
    }

    await ElMessageBox.confirm('确认要批量加密选中的字段吗？', '确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    const loadingResult = await loadingTableParams(params)
    if (loadingResult && loadingResult.code === 'POP_00014' && loadingResult.flag) {
      setTimeout(async () => {
        await getTableData()
      }, 2000)
    } else {
      ElMessageBox.alert(loadingResult ? loadingResult.message : '加密失败，请重试', '错误', {
        confirmButtonText: '确定',
        type: 'error'
      })
    }
  } catch (error) {
   
  } finally {
    isBatchEncrypting.value = false;
  }
}

/**
 * 构建批量加密请求参数
 * @param flag
 */
const buildBatchEncryptionParams = (flag) => {
  return {
    projectId: currentNodeData.value.projectid,
    dataSystemId: currentNodeData.value.dataSystemId,
    schema: currentNodeData.value.schema,
    tableName: currentNodeData.value.label,
    flag: flag
  }
}

/**
 * 批量解密
 */
const isBatchDecrypting = ref(false);
const handleBatchDecrypt = async () => {
  isBatchDecrypting.value = true;
  try {
    const params = buildBatchEncryptionParams(1);
    const checkResult = await checkTableEncOrDecColumn(params);

    if (!checkResult) {
      ElMessageBox.alert('解密失败，请重试', '错误', {
        confirmButtonText: '确定',
        type: 'error'
      });
      return;
    }

    if (checkResult && checkResult.code === '9983') {
      ElMessageBox.alert(checkResult.msg || '存在多余列，请先删除多余列', '提示', {
        confirmButtonText: '确定',
        type: 'info'
      });
      return;
    }

    await ElMessageBox.confirm('确认要批量解密选中的字段吗？', '确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });

    const loadingResult = await loadingTableParams(params);
    if (loadingResult && loadingResult.code === 'POP_00014' && loadingResult.flag) {
      setTimeout(async () => {
        await getTableData();
      }, 2000);
    } else {
      ElMessageBox.alert(loadingResult ? loadingResult.message : '解密失败，请重试', '错误', {
        confirmButtonText: '确定',
        type: 'error'
      });
    }
  } catch (error) {
    console.error(error);
  } finally {
    isBatchDecrypting.value = false;
  }
}

// 删除多余列
const handleDeleteColumns = async () => {
  console.log('开始---------删除多余列--------------',currentNodeData.value)
  ElMessageBox.confirm('确认删除多余列吗？', '提示', {
    type: 'warning'
  }).then(async () => {
    // 调用删除接口
    const res = await delTableColumn({
      projectId: currentNodeData.value.projectid,
      dataSystemId: currentNodeData.value.dataSystemId,
      schema: currentNodeData.value.schema,
      tableName: currentNodeData.value.label
    })
    if (res && res.code === 'POP_00014' && res.flag) {
      ElMessageBox.alert('删除成功', '成功', {
        confirmButtonText: '确定',
        type: 'success'
      })
      // 重新获取表格数据
      await getTableData()
    } else {
      ElMessageBox.alert(res ? res.message : '删除失败，请重试', '错误', {
        confirmButtonText: '确定',
        type: 'error'
      })
    }
  }).catch(() => {})
}

/**
 * 保存修改
 */
const handleSave = async () => {
    // 判断数据是否有修改
    const changedData = {}
    let hasChanges = false

    tableData.value.forEach(current => {
      const original = tableDataCache.value.find(item => item.columnname === current.columnname)
      if (original) {
        // console.log('检测到字段变更:', current.columnname)
        // console.log('检测到字段变更:', current)
        // console.log('检测到字段变更:', original)
        const fieldsToCompare = ['secretkeyId', 'description', 'isLike', 'encdigit', 'keepfirst', 'twoindex']
        const isChanged = fieldsToCompare.some(field => current[field] !== original[field])
        if (isChanged) {
          // 构建key：schema#|#table#|#column格式
          const key = `${currentNodeData.value.schema}#|#${currentNodeData.value.label}#|#${current.columnname}`
          changedData[key] = {
            columnType: current.typename,
            describe_info: current.description || '',
            keepfirst: String(current.keepfirst || '0'),
            encdigit: String(current.encdigit || '0'),
            encryptionSecretKeyId: current.secretkeyId || '',
            flag: current.flag || '0',
            note: current.remarks || '',
            realitycolumnsize: String(current.columnsize || ''),
            twoindex: String(current.twoindex || '0'),
            isLike: String(current.isLike || '0')
          }
          hasChanges = true
        }
      }
    })

    if (!hasChanges) {
      ElMessageBox.alert('没有检测到更改', '提示', {
        confirmButtonText: '确定',
        type: 'info'
      })
      return
    }
 
    console.log('修改的字段changedData', changedData)
    ElMessageBox.confirm('确认保存更改吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      const res = await save({
        projectId: currentNodeData.value.projectid,
        datasystemid: currentNodeData.value.dataSystemId,
        map: changedData
      }) 
      if (res && res.code === 'POP_00014' && res.flag) {
        ElMessageBox.alert('保存成功', '成功', {
          confirmButtonText: '确定',
          type: 'success'
        })
        // 重新获取表格数据
        await getTableData()
        // 退出编辑模式
        isEditing.value = false
      } else {
        ElMessageBox.alert(res ? res.message : '保存失败，请重试', '错误', {
          confirmButtonText: '确定',
          type: 'error'
        })
      }
    })
}

// 过滤表格数据
const filteredTableData = computed(() => {
  return tableData.value.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 = async (row) => {
  if(!isEditing.value) return
  //验证table是否有重复的字段,如果重复提示
  if(row.secretkeyId){
    const hasRedundance = await hasRedundanceColumns({
      table: currentNodeData.value.label,
      datasystemid: currentNodeData.value.dataSystemId,
      schema: currentNodeData.value.schema,
      projectid: currentNodeData.value.projectid
    })
    if (hasRedundance && !hasRedundance.flag) {
      ElMessageBox.alert('当前表存在重复字段，请先处理重复字段', '提示', {
        confirmButtonText: '确定',
        type: 'warning'
      })
      isEditing.value = false
      return
    }
  }
  // console.log('设置密钥openEncryptionDialog', row)
  // console.log('当前字段:', row.columnname)
  const [isLikeRes, encDigitRes] = await Promise.all([
    queryIsLike({
      tablename: currentNodeData.value.label,
      datasystemid: currentNodeData.value.parent?.parent?.tid,
      tablecat: currentNodeData.value.parent?.parent?.label,
      projectid: currentNodeData.value.parent?.parent?.parent?.project_id,
      columnname: row.columnname
    }),
    queryEncDigit({
      tablename: currentNodeData.value.label,
      datasystemid: currentNodeData.value.parent?.parent?.tid,
      tablecat: currentNodeData.value.parent?.parent?.label,
      projectid: currentNodeData.value.parent?.parent?.parent?.project_id,
      columnname: row.columnname
    })
  ])

  currentField.value = {
    // tablecat: row.tablecat, // 库名
    // tablename: row.tablename, // 表名
    columnname: row.columnname, // 字段
    columnSize: Number(row.columnsize), // 长度
    realitycolumnsize: Number(row.columnsize),
    columnType: row.typename, // 类型
    note: row.remarks,
    maskingruleid: row.maskingruleid,//加密规则
    maskingrulename: row.maskingrulename,//加密规则名称
    encryptionSecretKeyId: row.secretkeyId, // 密钥ID
    secretkeyName: row.secretkeyName, // 密钥名称
    isLike: Number(isLikeRes.data),
    encdigit: Number(encDigitRes.data.encdigit),
    keepfirst: Number(encDigitRes.data.keepfirst),
    twoindex: Number(encDigitRes.data.twoindex),
    flag: "0"
  }
  showEncryptionDialog.value = true
  // 计算加密后长度
  if(row.secretkeyId){
    nextTick(() => {
      encryptionRuleDialogRef.value.calculateLength()
    })
  }
}

/**
 * 确认加密规则-回调方法
 */
const handleRuleConfirm = () => {
  // 更新表格数据或调用API
  const field = tableData.value.find(f => f.columnname === currentField.value.columnname)
  if (field) {
    Object.assign(field, {
      maskingruleid: currentField.value.maskingruleid,//加密规则
      maskingrulename: currentField.value.maskingrulename,//加密规则名称
      secretkeyId: currentField.value.encryptionSecretKeyId,
      secretkeyName: currentField.value.secretkeyName, // 密钥名称
      isLike: currentField.value.isLike,
      encdigit: currentField.value.encdigit,
      keepfirst: currentField.value.keepfirst,
      twoindex: currentField.value.twoindex,
    })
  }
}

/**
 * 重置加密规则
 */
const handleRuleReset = () => {
  console.log('重置加密规则')
  currentField.value.encryptionSecretKeyId = ''
  const field = tableData.value.find(f => f.columnname === currentField.value.columnname)
  if (field) {
      field.maskingruleid = ''//加密规则
      field.maskingrulename = ''//加密规则名称
      field.secretkeyId = ''
      field.secretkeyName = '' // 密钥名称
      field.flag = null
  }
}

/**
 * 明文处理
 * @param row 
 */
const handlePlaintext = async (row) => {
  ElMessageBox.confirm('确认处理明文吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    // 处理明文逻辑
   const params = buildEncryptionParams(row, 0)
   const checkCanReloadRes = await checkCanReload(params)
   if(!checkCanReloadRes ){
       ElMessageBox.alert('验证失败，请重试', '错误', {
        confirmButtonText: '确定',
        type: 'error'
      })
      return
   }
   if(checkCanReloadRes && checkCanReloadRes.code === '-1'){
      ElMessageBox.alert(checkCanReloadRes.msg || '处理明文失败，请重试', '错误', {
        confirmButtonText: '确定',
        type: 'error'
      })
      return
   }

   //处理逻辑
   const reloadingColumnRes = await reloadingColumn(params)
   if(reloadingColumnRes && reloadingColumnRes.code === 'POP_00014' && reloadingColumnRes.flag){
      // 重新获取表格数据
      setTimeout(async () => {
        await getTableData()
      }, 2000)
      ElMessageBox.alert('处理成功')
      // 退出编辑模式
      isEditing.value = false
    }

  }).catch(() => {
    // 取消处理
  })
}

/**
 * 处理单元格点击
 */
const handleCellClick = (row, column) => {
  // 当不是编辑状态时
  if (!isEditing.value) {
    // 如果点击的不是"操作"列和"明文处理"列，则提示
    if (column.label !== '操作' && column.label !== '明文处理') {
      ElMessageBox.alert('非编辑状态，请点击编辑按钮后进行编辑', '提示', {
        confirmButtonText: '确定',
        type: 'info'
      })
    }
  } else {
    // 当是编辑状态时，如果点击的是"操作"列或"明文处理"列，则不响应
    if (column.label === '操作' || column.label === '明文处理') {
      return
    }
  }
}

/**
 * 构建解密/加密参数
 * @param {Object} row - 当前行数据
 * @returns {Object} params - 构建的参数对象
 */
const buildEncryptionParams = (row, isEncrypt) => {
  const schema = currentNodeData.value.schema;
  const tableName = currentNodeData.value.label;
  const key = `${schema}.${tableName}.${row.columnname}`;

  return {
    columnName: row.columnname,
    columnSize: String(row.columnsize),
    columnType: row.typename,
    dataSystemId: currentNodeData.value.dataSystemId,
    flag: isEncrypt, // 加密是0，解密是1
    map: {
      dataSystemId: currentNodeData.value.dataSystemId,
      projectId: currentNodeData.value.projectid,
      map: {
        [key]: {
          columnType: row.typename,
          columnSize: String(row.columnsize),
          describe_info: row.description || '',
          encryptionSecretKeyId: row.secretkeyId,
        },
      },
    },
    primaryKeys: tableData.value.filter((item) => item.primarykey === '1').map((item) => item.columnname),
    projectId: currentNodeData.value.projectid,
    schema: schema,
    secretKeyId: row.secretkeyId,
    tableName: tableName,
  };
};


/**
 * 暴露给父组件的数据
 */
defineExpose({
  getTableData
})

</script>

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

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

.filter-form {
  display: flex;
  justify-content: space-between; /* Align the refresh button to the right */
}

.filter-form span {
  margin-left: auto; /* Push the refresh button to the right */
}

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

.action-buttons .el-button {
  width: 120px; /* 设置统一宽度 */
}

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

/* 非编辑状态下的表格样式 */
.non-editing {
  :deep(.el-button) {
    &[disabled] {
      cursor: not-allowed;
    }
  }
  
  :deep(.el-table__cell) {
    &:not(.operation-column):not(.plaintext-column) {
      cursor: not-allowed;
    }
  }
}

/* 编辑状态下的表格样式 */
:deep(.el-table__cell) {
  &.operation-column, &.plaintext-column {
    cursor: not-allowed;
  }
}

</style>