<template>
  <div class="bank-report-table" @click="closeAllTooltips">
    <!-- 加载遮罩层 -->
    <div v-if="loading" class="loading-overlay">
      <div class="loading-spinner">
        <div class="spinner"></div>
        <div class="loading-text">加载中...</div>
      </div>
    </div>

    <vxe-toolbar>
      <template #button>
        <div style="margin:10px">
          <span style="font-weight: bold"> 填报任务：{{ queryParam?.taskName }} </span>
          <span style="font-weight: bold;margin-left:20px"> 表格：{{ queryParam?.tplCode }} {{ queryParam?.tplName }}</span>
        </div>
      </template>
      <template #tools>
        <vxe-button status="primary" icon="vxe-icon-edit" @click="handleOpenHistoryDrawer()" :disabled="loading">近5年数据填报</vxe-button>
        <vxe-button status="primary" icon="vxe-icon-save" @click="checkData()">校验</vxe-button>
        <vxe-button status="primary" icon="vxe-icon-save" @click="saveBatch()">保存</vxe-button>
      </template>
    </vxe-toolbar>

    <!-- 校验结果抽屉 -->
    <vxe-drawer
      v-model="drawerVisible"
      placement="right"
      @show="handleValidationDrawerShow"
      title="校验结果"
      width="40%"
      :footer="{ show: true }"
    >
      <template #default>
        <div class="validation-results">
          <div class="result-summary">
            <div class="summary-item">
              <span class="summary-label">校验字段数：</span>
              <span class="summary-value">{{ validationResultsList.length }}</span>
            </div>
            <div class="summary-item">
              <span class="summary-label">通过：</span>
              <span class="summary-value success">{{ validationResultsList.filter(item => item.isValid).length }}</span>
            </div>
            <div class="summary-item">
              <span class="summary-label">失败：</span>
              <span class="summary-value error">{{ validationResultsList.filter(item => !item.isValid).length }}</span>
            </div>
          </div>
          <div class="results-list">
            <div
              v-for="(result, index) in validationResultsList"
              :key="index"
              class="result-item"
              :class="{ success: result.isValid, error: !result.isValid }"
              @click="handleValidationResultClick(result)"
            >
              <div class="result-field">{{ result.field }}</div>
              <div class="result-desc">{{ result.description }}</div>
              <div class="result-value">值：{{ result.fieldValue || '空' }}</div>
              <div v-if="!result.isValid" class="result-error">失败原因：{{ result.description }}</div>
            </div>
          </div>
        </div>
      </template>
    </vxe-drawer>
    
    <vxe-table
      border
      height="auto"
      ref="tableRef"
      show-header-overflow
      :data="tableFormData"
      :column-config="{ resizable: true }"
      :row-config="{ resizable: true }"
      class="custom-table"
    >
      <vxe-column field="serialNumber" title="序号" width="80"></vxe-column>
      <vxe-column field="project" title="项目" width="200">
        <template #default="{ row }">
          <span style="font-weight: bold; font-size: 14px">{{ row.project }}</span>
        </template>
      </vxe-column>
      <vxe-column field="content" title="内容" row-resize>
        <template #default="{ row }"> 
          <div class="content-cell">
            <template v-for="(item, index) in row.content" :key="index">
              <span v-if="item.type === 'text'" v-html="item.value" style="line-height: 35px;"></span>
              <span v-else-if="item.type === 'br'"><br></span>
              <span v-else-if="item.type === 'brspace'">
                <br>
                <template v-for="i in (item.value || 1)" :key="i">
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </template>
              </span>

              <!-- 是/否单选组 -->
              <template v-else-if="item.type === 'yesno'">
                <vxe-radio-group v-model="formData[getFieldKey(row.code, item.field)]">
                  <vxe-radio label="是" content="是"></vxe-radio>
                  <vxe-radio label="否" content="否"></vxe-radio>
                </vxe-radio-group>

                <!-- 额外字段区域 -->
                <template v-if="item.extraField || item.extraFields">
                  <div v-if="formData[getFieldKey(row.code, item.field)] === '是'" class="extra-fields-container">
                    <!-- 单个额外字段的情况 -->
                    <template v-if="item.extraField">
                      <span class="extra-fields-prompt">如是，</span>
                      <span class="extra-label">{{ item.extraLabel }}：</span>
                      <vxe-input 
                        v-model="formData[getFieldKey(row.code, item.extraField)]" 
                        style="width: 300px"
                      ></vxe-input>
                      <span v-if="item.unit" class="unit">{{ item.unit }}</span>
                    </template>
                    
                    <!-- 多个额外字段的情况 -->
                    <template v-else-if="item.extraFields">
                      <span class="extra-fields-prompt">如是，</span>
                      <template v-for="(fieldOpt, index) in item.extraFields" :key="index">
                        <!-- 字段标签 -->
                        <span class="extra-field-item">
                          <span class="field-label">{{ fieldOpt.label }}: </span>
                          <template v-if="fieldOpt.formType === 'input'">
                            <vxe-input 
                              v-model="formData[getFieldKey(row.code, fieldOpt.field)]" 
                              style="width: 250px"
                            ></vxe-input>
                          </template>
                          
                          <template v-else-if="fieldOpt.formType === 'number'">
                            <vxe-input 
                              v-model="formData[getFieldKey(row.code, fieldOpt.field)]" 
                              type="number" 
                              style="width: 250px"
                            ></vxe-input>
                            <span v-if="fieldOpt.unit" class="unit">{{ fieldOpt.unit }}</span>
                          </template>
                          
                          <template v-else-if="fieldOpt.formType === 'checkbox'">
                            <vxe-checkbox-group v-model="formData[getFieldKey(row.code, fieldOpt.field)]">
                              <vxe-checkbox 
                                v-for="(opt, optIndex) in fieldOpt.options" 
                                :key="optIndex" 
                                :label="opt" 
                                :content="opt"
                              ></vxe-checkbox>
                            </vxe-checkbox-group>
                          </template>
                          
                          <template v-else-if="fieldOpt.formType === 'radio'">
                            <vxe-radio-group v-model="formData[getFieldKey(row.code, fieldOpt.field)]">
                              <vxe-radio 
                                v-for="(opt, optIndex) in fieldOpt.options" 
                                :key="optIndex" 
                                :label="opt" 
                                :content="opt"
                              ></vxe-radio>
                            </vxe-radio-group>
                          </template>
                          
                          <template v-else>
                            <vxe-input 
                              v-model="formData[getFieldKey(row.code, fieldOpt.field)]" 
                              :type="fieldOpt.formType" 
                              style="width: 100px"
                            ></vxe-input>
                          </template>
                          
                          <!-- 其他选项 -->
                          <template v-if="fieldOpt.otherOption">
                            <div class="other-option">
                              其他：
                              <vxe-input 
                                v-model="formData[getFieldKey(row.code, fieldOpt.otherField)]" 
                                style="width: 300px"
                              ></vxe-input>
                            </div>
                          </template>
                        </span>
                      </template>
                    </template>
                  </div>
                </template>
              </template>

              <!-- 普通单选组 -->
              <span v-else-if="item.type === 'radio-group'" class="radio-group">
                <vxe-radio-group v-model="formData[getFieldKey(row.code, item.field)]">
                  <vxe-radio v-for="(opt, optIndex) in item.options" :key="optIndex" :label="opt">{{ opt }}</vxe-radio>
                </vxe-radio-group>
              </span>

              <!-- 带额外字段的单选组 -->
              <span v-else-if="item.type === 'radio-group-extraFields'" class="radio-group" style="width:100%">
                <vxe-radio-group v-model="formData[getFieldKey(row.code, item.field)]">
                  <vxe-radio v-for="(opt, optIndex) in item.options" :key="optIndex" :label="opt.label">
                    {{ opt.label }}
                    <template v-if="opt.extraField && formData[getFieldKey(row.code, item.field)] === opt.label">
                      <span>{{ opt.extraField }}</span>
                      <vxe-input v-model="formData[getFieldKey(row.code, opt.otereField)]" style="width: 200px;"></vxe-input>  
                    </template>
                    <template v-if="opt.extraFields && formData[getFieldKey(row.code, item.field)] === opt.label">
                      <template v-for="(ccopt, ccind) in opt.extraFields" :key="ccind">
                        <span>{{ ccopt.label }}: </span>
                        <vxe-input v-model="formData[getFieldKey(row.code, ccopt.field)]" style="width: 200px;"></vxe-input>  
                      </template>
                    </template>
                  </vxe-radio>
                </vxe-radio-group>
                <span v-if="item.unit" class="unit"> {{ item.unit }}</span>
              </span>

              <!-- 多选组 -->
              <div v-else-if="item.type === 'checkbox-group'">
                <span class="checkbox-group">
                  <vxe-checkbox-group v-model="formData[getFieldKey(row.code, item.field)]">
                    <vxe-checkbox v-for="(opt, optIndex) in item.options" :key="optIndex" :label="opt">
                      {{ opt }}
                    </vxe-checkbox>
                    <template v-if="item.otherOption">
                      <vxe-checkbox label="其他">
                        其他：
                        <vxe-input 
                          v-model="formData[getFieldKey(row.code, item.otherField)]" 
                          style="width: 200px;" 
                          :disabled="!(formData[getFieldKey(row.code, item.field)]?.includes('其他'))"
                        ></vxe-input>
                      </vxe-checkbox>
                    </template>
                  </vxe-checkbox-group>
                </span> 
              </div>

              <!-- 文本域 -->
              <template v-else-if="item.type === 'textarea'">
                <vxe-textarea 
                  v-model="formData[getFieldKey(row.code, item.field)]" 
                  :rows="item.rows" 
                  :style="{width: item.width}"
                ></vxe-textarea>
              </template>

              <!-- 其他输入类型 -->
              <template v-else>
                <div class="input-wrapper">
                  <vxe-input 
                    :type="item.type" 
                    v-model="formData[getFieldKey(row.code, item.field)]"  
                    size="mini" 
                    class="table-input" 
                    :style="{width: item.width}"
                    :disabled="!item.hasRight"
                    @blur="handleInputBlur(row.code, item.field, item.matchedFormula?.formula)"
                  />
                  <span v-if="item.unit" class="unit"> {{ item.unit }}</span>
                  
                  <!-- 帮助图标 -->
                  <span
                    v-if="showHelpIcon(row.code, item.field, item)"
                    class="help-icon"
                    @click.stop="toggleTooltip(row.code, item.field)"
                    title="点击查看校验规则"
                  >
                    ?
                  </span>
                  
                  <!-- 错误图标 -->
                  <span
                    v-if="inputErrors[getFieldKey(row.code, item.field)]"
                    class="error-icon"
                    @click.stop="toggleErrorTooltip(row.code, item.field)"
                    title="点击查看错误详情"
                  >
                    ✗
                  </span>
                  
                  <!-- 帮助提示 -->
                  <div
                    v-if="showTooltip && hoveredKey === getFieldKey(row.code, item.field)"
                    class="tooltip"
                    @click.stop
                  >
                    {{ item.matchedFormula?.des || '暂无校验规则' }}
                  </div>
                  
                  <!-- 错误提示 -->
                  <div
                    v-if="showErrorTooltip && hoveredErrorKey === getFieldKey(row.code, item.field)"
                    class="error-tooltip"
                    @click.stop
                  >
                    {{ inputErrors[getFieldKey(row.code, item.field)].message }}
                    <br>
                    <span style="color: #ffcccc;">
                      公式: {{ inputErrors[getFieldKey(row.code, item.field)].formula }}
                    </span>
                    <template v-if="inputErrors[getFieldKey(row.code, item.field)].error">
                      <br>
                      <span style="color: #ff9999; font-size: 11px;">
                        错误: {{ inputErrors[getFieldKey(row.code, item.field)].error }}
                      </span>
                    </template>
                  </div>
                </div>
              </template>
            </template>
          </div>
        </template>
      </vxe-column>
      <vxe-column field="remarks" title="备注" width="200">
        <template #default="{ row }"> 
          <vxe-textarea 
            :rows="row.remarks.rows" 
            v-model="formData[getFieldKey(row.code, row.remarks.field)]" 
            style="height:100%;"
          ></vxe-textarea>
        </template>
      </vxe-column>
    </vxe-table>

    <!-- 历史填报检查组件 -->
    <HistoryFillCheck ref="historyFillCheckRef" v-model="historyDrawerVisible" @closeDrawer="closeHistoryDrawer"/>

    <!-- 验证公式帮助提示 -->
    <div
      v-if="validationTooltipVisible"
      class="validation-tooltip"
      :style="{ left: validationTooltipPosition.left + 'px', top: validationTooltipPosition.top + 'px' }"
    >
      <pre class="tooltip-content">{{ validationTooltipContent }}</pre>
    </div>
  </div>
</template>

<script lang="ts" setup>
import HistoryFillCheck from './check/historyFillCheck.vue'
import { tableFormData } from '../../data/tb8.data'
import { ref, reactive, nextTick, onMounted, computed } from 'vue'
import { VxeUI } from 'vxe-table'
import { batchSaveOrUpdate, queryRecord, batchSaveOrUpdateBeforeDelete } from '../../record/BaosongTaskRecord.api'
import { queryAllTplItemForUser, findUserRightForTplItem } from '../../alloc/BaosongTaskAlloc.api'
import { allTplItems } from '../../tpl/BaosongTplItem.api'
import { getTblvalidFormula } from '../../tpl/BaosongDataValid.api'
import { useRoute } from 'vue-router'

const route = useRoute()
const tableRef = ref()
const tplItemMap = ref<Record<string, TplItemInfo>>({})
const historyFillCheckRef = ref<any>(null)

// 查询参数
const queryParam = ref({
  taskId: -1,
  taskName: '',
  tplId: -1,
  tplName: '',
  tplCode: ''
})

// 状态变量
const loading = ref(false)
const formData = reactive<Record<string, any>>({})
const formValues = ref<FormData[]>([])

// 权限和验证相关
const userAllocItems = ref<string[]>([])
const validFormula = ref<FormulaItem[]>([])
const validationResultsList = ref<ValidationResult[]>([])
const drawerVisible = ref(false)
const historyDrawerVisible = ref(false)

// 工具提示状态
const showTooltip = ref(false)
const hoveredKey = ref('')
const showErrorTooltip = ref(false)
const hoveredErrorKey = ref('')
const inputErrors = ref<Record<string, InputError>>({})
const isInitialized = ref(false)

// 验证公式提示
const validationTooltipVisible = ref(false)
const validationTooltipPosition = ref({ left: 0, top: 0 })
const validationTooltipContent = ref('')

// 接口定义
interface FormData {
  id: number | null
  taskid: number
  tplid: number
  itemid?: number
  itempid?: number
  content: string
  tplcode: string
  rind: number
}

interface TplItemInfo {
  pid: number
  itemid: number
  formTp: string
  code: string
}

interface FormulaItem {
  formula: string
  des: string
  [key: string]: any
}

interface InputError {
  message: string
  formula: string
  error?: string
}

interface ValidationResult {
  field: string
  description: string
  formula: string
  isValid: boolean
  fieldValue: any
  rowCode: string
}

// 计算属性
const fieldKeys = computed(() => Object.keys(formData))

// 生命周期钩子
onMounted(async () => {
  await initializePage()
})

// 初始化页面
const initializePage = async () => {
  try {
    await setQueryParams()
    
    // 并行获取权限和验证公式
    await Promise.all([
      fetchUserRights(),
      fetchValidationFormulas()
    ])
    
    console.log('获取到的权限:', userAllocItems.value.length)
    console.log('获取到的公式:', validFormula.value.length)
    
    await setTplItemMap()
    setFormItemRight()
    await setData()
    
    isInitialized.value = true
    
    // 延迟刷新帮助图标
    setTimeout(() => {
      refreshHelpIcons()
    }, 300)
  } catch (error) {
    console.error('初始化页面失败:', error)
    showErrorMessage('初始化页面失败', error)
  }
}

// 设置查询参数
const setQueryParams = () => {
  const params = route.query
  if (params.taskId) queryParam.value.taskId = Number(params.taskId)
  if (params.taskName) queryParam.value.taskName = String(params.taskName)
  if (params.tplId) queryParam.value.tplId = Number(params.tplId)
  if (params.tplName) queryParam.value.tplName = String(params.tplName)
  if (params.tplCode) queryParam.value.tplCode = String(params.tplCode)
}

// 获取用户权限
const fetchUserRights = async () => {
  userAllocItems.value = await findUserRightForTplItem({
    tplid: queryParam.value.tplId,
    taskid: queryParam.value.taskId
  })
}

// 获取验证公式
const fetchValidationFormulas = async () => {
  validFormula.value = await getTblvalidFormula({
    tplid: queryParam.value.tplId,
  })
}

// 保存批量数据
const saveBatch = async () => {
  try {
    loading.value = true
    await getFillDatas()
    
    if (formValues.value.length > 0) {
      await batchSaveOrUpdateBeforeDelete(formValues.value)
      VxeUI.modal.message({ content: '保存成功', status: 'success' })
    } else {
      VxeUI.modal.message({ content: '没有需要保存的数据', status: 'warning' })
    }
  } catch (error) {
    showErrorMessage('保存失败', error)
  } finally {
    loading.value = false
  }
}

// 获取填充数据
const getFillDatas = async () => {
  try {
    formValues.value = []
    
    for (const strKey in formData) {
      const valData = formData[strKey]
      if (valData !== undefined && valData !== "") {
        const st = strKey.indexOf("_")
        const pcode = strKey.substring(0, st)
        const field = strKey.substring(st + 1)
        await setFormValues(pcode, field, valData, 1)
      }
    }
  } catch (error) {
    console.error('获取填充数据失败:', error)
  }
}

// 设置表单值
const setFormValues = async (pcode: string, code: string, valData: any, rind: number) => {
  if (!valData) return
  
  const strKey = `${pcode}_${code}`
  const item = tplItemMap.value[strKey]
  
  if (!item) {
    console.warn(`未找到对应的模板项: ${strKey}`)
    return
  }
  
  const vals = Array.isArray(valData) ? valData.join(',') : String(valData)
  
  const tempForm: FormData = {
    id: null,
    rind,
    taskid: queryParam.value.taskId,
    tplid: queryParam.value.tplId,
    tplcode: code,
    itemid: item.itemid,
    itempid: item.pid,
    content: vals
  }
  
  formValues.value.push(tempForm)
}

// 加载数据
const setData = async () => {
  try {
    loading.value = true
    
    // 清空表单数据
    Object.keys(formData).forEach(key => delete formData[key])
    
    await setTplItemMap()
    
    // 查询记录数据
    const recordData = await queryRecord({
      taskid: queryParam.value.taskId,
      tplid: queryParam.value.tplId
    })
    
    // 构建数据映射
    const valueObj: Record<string, string> = {}
    recordData.forEach((data: any) => {
      const key = `${data.itempid}_${data.itemid}_${data.rind}`
      valueObj[key] = data.content
    })
    
    // 设置表单数据
    Object.keys(tplItemMap.value).forEach(strKey => {
      const item = tplItemMap.value[strKey]
      const { pid, itemid, formTp } = item
      const dataKey = `${pid}_${itemid}_1`
      const dataVal = valueObj[dataKey]
      
      if (dataVal !== undefined) {
        if (formTp === 'checkbox') {
          formData[strKey] = dataVal.split(",") || []
        } else {
          formData[strKey] = dataVal || ""
        }
      }
    })
  } catch (error) {
    showErrorMessage('加载数据失败', error)
  } finally {
    loading.value = false
  }
}

// 设置模板项映射
const setTplItemMap = async () => {
  try {
    const tplItems = await allTplItems({
      tplid: queryParam.value.tplId,
    })
    
    const map: Record<string, TplItemInfo> = {}
    tplItems.forEach(item => {
      const strKey = `${item.pcode}_${item.xmlcode}`
      map[strKey] = {
        pid: item.pid,
        itemid: item.id,
        formTp: item.formTp,
        code: item.xmlcode
      }
    })
    
    tplItemMap.value = map
  } catch (error) {
    showErrorMessage('加载模板项失败', error)
  }
}

// 工具函数
const getFieldKey = (pcode: string | undefined, field: string): string => {
  return pcode ? `${pcode}_${field}` : field
}

// 校验数据
const checkData = () => {
  drawerVisible.value = true
}

// 校验结果抽屉显示时触发
const handleValidationDrawerShow = () => {
  performValidation()
}

// 执行校验
const performValidation = () => {
  validationResultsList.value = []
  const process: string[] = []
  process.push('开始校验')
  process.push(`找到 ${validFormula.value.length} 个验证公式`)

  validFormula.value.forEach((formulaItem: FormulaItem) => {
    process.push(`开始校验公式: ${formulaItem.des}`)
    const result = evaluateFormula(formulaItem.formula, formulaItem.des, process)
    if (result) {
      validationResultsList.value.push(result)
    }
  })
  process.push('校验完成')
}

// 解析和执行验证公式
const evaluateFormula = (formula: string, description: string, process: string[]): ValidationResult | null => {
  try {
    const fieldMatch = formula.match(/\[(\w+)\]/)
    if (!fieldMatch) {
      process.push(`跳过: 无法解析公式字段 ${formula}`)
      return null
    }

    const fieldName = fieldMatch[1]
    const row = tableFormData.find((r: any) => r.content?.some((c: any) => c.field === fieldName))
    if (!row) {
      process.push(`跳过: 未找到字段 ${fieldName}`)
      return null
    }

    const fieldItem = row.content.find((c: any) => c.field === fieldName)
    if (!fieldItem) {
      process.push(`跳过: 未找到字段 ${fieldName}`)
      return null
    }

    const strKey = getFieldKey(row.code, fieldName)
    const fieldValue = formData[strKey]

    // 检查是否有空字段规则
    const emptyFieldRule = validFormula.value.find((f: FormulaItem) => 
      f.formula.includes(fieldName) && f.des.includes('空字段')
    )

    if (emptyFieldRule && (!fieldValue || fieldValue === '')) {
      process.push(`跳过: 字段 ${fieldName} 为空，跳过空字段规则`)
      return null
    }

    const expression = formula.replace(/\[(\w+)\]/g, (_, field) => {
      const value = formData[getFieldKey(row.code, field)]
      return value !== undefined ? `Number(${value})` : '0'
    })

    process.push(`执行公式: ${expression}`)
    const isValid = eval(expression)

    return {
      field: fieldName,
      description: description,
      formula: formula,
      isValid: isValid,
      fieldValue: fieldValue,
      rowCode: row.code
    }
  } catch (error) {
    process.push(`公式执行错误: ${error instanceof Error ? error.message : String(error)}`)
    return null
  }
}

// 处理校验结果点击
const handleValidationResultClick = (result: ValidationResult) => {
  const message = `字段 ${result.field} 的校验结果: ${result.isValid ? '通过' : '失败'}`
  const status = result.isValid ? 'success' : 'error'
  
  VxeUI.modal.message({ content: message, status })
  
  // 滚动到对应字段
  scrollToField(result)
}

// 滚动到字段位置
const scrollToField = (result: ValidationResult) => {
  const row = tableFormData.find((r: any) => r.code === result.rowCode)
  if (row) {
    const fieldItem = row.content.find((c: any) => c.field === result.field)
    if (fieldItem) {
      const strKey = getFieldKey(row.code, result.field)
      const inputElement = document.querySelector(`[data-field="${strKey}"]`) as HTMLElement
      if (inputElement) {
        inputElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
        inputElement.focus()
        inputElement.style.border = '2px solid #ff4d4f'
        setTimeout(() => {
          inputElement.style.border = ''
        }, 2000)
      }
    }
  }
}

// 显示验证公式帮助
const showValidationHelp = (formulaItem: FormulaItem, event: MouseEvent) => {
  const rect = (event.target as HTMLElement).getBoundingClientRect()
  validationTooltipPosition.value = {
    left: rect.left + rect.width / 2,
    top: rect.top - 10
  }
  validationTooltipContent.value = `验证公式: ${formulaItem.formula}\n说明: ${formulaItem.des}`
  validationTooltipVisible.value = true
}

// 关闭所有提示
const closeAllTooltips = () => {
  showTooltip.value = false
  hoveredKey.value = ''
  showErrorTooltip.value = false
  hoveredErrorKey.value = ''
  validationTooltipVisible.value = false
}

// 打开历史填报抽屉
const handleOpenHistoryDrawer = () => {
  historyDrawerVisible.value = true
}

// 关闭历史填报抽屉
const closeHistoryDrawer = () => {
  historyDrawerVisible.value = false
}

// 显示帮助图标
const showHelpIcon = (rowCode: string, field: string, item: any): boolean => {
  if (item.hasValidFormula !== undefined) {
    return item.hasValidFormula === true
  }
  
  const key = getFieldKey(rowCode, field)
  const hasRight = userAllocItems.value.includes(key)
  
  if (!hasRight) return false
  
  const formulaResult = findEarliestFormulaForField(validFormula.value, field)
  return !!formulaResult.formula
}

// 设置表单项权限
const setFormItemRight = () => {
  console.log('开始设置表单权限...')
  console.log('userAllocItems 数量:', userAllocItems.value.length)
  console.log('validFormula 数量:', validFormula.value.length)
  
  tableFormData.forEach((row: any) => {
    if (row.content && Array.isArray(row.content)) {
      row.content.forEach((item: any) => {
        if (item.field) {
          const key = getFieldKey(row.code, item.field)
          item.hasRight = userAllocItems.value.includes(key)
          
          if (item.hasRight) {
            const formulaResult = findEarliestFormulaForField(validFormula.value, item.field)
            item.hasValidFormula = !!formulaResult.formula
            item.matchedFormula = formulaResult.formula || null
          } else {
            item.hasValidFormula = false
            item.matchedFormula = null
          }
        }
      })
    }
  })
  
  console.log('表单权限设置完成')
}

// 查找字段对应的最早公式
const findEarliestFormulaForField = (
  formulas: FormulaItem[], 
  field: string
): { formula: FormulaItem | null, index: number } => {
  let result = { formula: null, index: Infinity }
  
  formulas?.forEach((f: FormulaItem) => {
    const text = f.formula || ''
    const escapedField = field.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
    const regex = new RegExp(`\\b${escapedField}\\b(?!\\w)`, 'g')
    const match = regex.exec(text)
    
    if (match && match.index < result.index) {
      result = { formula: f, index: match.index }
    }
  })
  
  return result
}

// 刷新帮助图标
const refreshHelpIcons = () => {
  console.log('刷新帮助图标...')
  
  tableFormData.forEach((row: any) => {
    if (row.content && Array.isArray(row.content)) {
      row.content.forEach((item: any) => {
        if (item.field) {
          const key = getFieldKey(row.code, item.field)
          const hasRight = userAllocItems.value.includes(key)
          
          if (hasRight) {
            const formulaResult = findEarliestFormulaForField(validFormula.value, item.field)
            item.hasValidFormula = !!formulaResult.formula
            item.matchedFormula = formulaResult.formula || null
          } else {
            item.hasValidFormula = false
            item.matchedFormula = null
          }
        }
      })
    }
  })
  
  nextTick(() => {
    console.log('帮助图标刷新完成')
  })
}

// 输入框失去焦点处理
const handleInputBlur = (rowCode: string, field: string, formula?: string) => {
  if (!formula) return
  
  const key = getFieldKey(rowCode, field)
  const value = formData[key]
  
  if (!value || value === '') {
    delete inputErrors.value[key]
    return
  }
  
  validateFieldFormula(rowCode, field, formula)
}

// 验证字段公式
const validateFieldFormula = (rowCode: string, field: string, formula: string) => {
  const key = getFieldKey(rowCode, field)
  
  try {
    const expression = buildExpression(formula, rowCode)
    const isValid = eval(expression)
    
    if (!isValid) {
      inputErrors.value[key] = {
        message: "公式校验失败，请检查填写内容",
        formula
      }
    } else {
      delete inputErrors.value[key]
    }
  } catch (error: any) {
    inputErrors.value[key] = {
      message: "公式校验失败，请检查填写内容",
      formula,
      error: error.message
    }
  }
}

// 构建表达式
const buildExpression = (formula: string, rowCode: string): string => {
  const reservedWords = ['and', 'or', 'not', 'equal', 'less', 'greater', 'if', 'else', 'true', 'false']
  
  // 提取字段名
  const fieldNames = formula.match(/\b[A-Za-z][A-Za-z0-9_]*\b/g) || []
  const uniqueFields = [...new Set(fieldNames.filter(f => 
    !reservedWords.includes(f.toLowerCase())
  ))]
  
  // 按长度降序排序，避免替换时出现部分匹配
  uniqueFields.sort((a, b) => b.length - a.length)
  
  let expression = formula
  for (const fieldName of uniqueFields) {
    const key = getFieldKey(rowCode, fieldName)
    const value = formData[key]
    
    if (value !== undefined && value !== '') {
      expression = expression.replace(
        new RegExp(`\\b${fieldName}\\b`, 'g'), 
        `Number(${value})`
      )
    }
  }
  
  return expression
}

// 工具提示控制
const toggleTooltip = (rowCode: string, field: string) => {
  const key = getFieldKey(rowCode, field)
  if (hoveredKey.value === key) {
    showTooltip.value = false
    hoveredKey.value = ''
  } else {
    showTooltip.value = true
    hoveredKey.value = key
  }
}

const toggleErrorTooltip = (rowCode: string, field: string) => {
  const key = getFieldKey(rowCode, field)
  if (hoveredErrorKey.value === key) {
    showErrorTooltip.value = false
    hoveredErrorKey.value = ''
  } else {
    showErrorTooltip.value = true
    hoveredErrorKey.value = key
  }
}

// 错误消息显示
const showErrorMessage = (title: string, error: any) => {
  const message = error instanceof Error ? error.message : String(error)
  VxeUI.modal.message({ 
    content: `${title}: ${message}`, 
    status: 'error' 
  })
}
</script>

<style lang="less" scoped>
.bank-report-table {
  font-family: "SimSun", "宋体", serif;
  font-size: 12px;
  color: #000;
  margin: 5px auto;
  width: 90%;
  height: 80vh;
  position: relative;
}

/* 表格样式 */
.custom-table {
  width: 100%;
  border: 1px solid #000;
  border-collapse: collapse;
  
  .vxe-header--column,
  .vxe-body--column {
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 5px;
  }
}

/* 加载遮罩层 */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  margin-top: 10px;
  color: #666;
  font-size: 14px;
}

/* 校验结果样式 */
.validation-results {
  padding: 20px;
  height: 600px;
  overflow-y: auto;
}

.result-summary {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.summary-item {
  display: flex;
  flex-direction: column;
}

.summary-label {
  font-size: 12px;
  color: #666;
}

.summary-value {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.summary-value.success {
  color: #52c41a;
}

.summary-value.error {
  color: #ff4d4f;
}

.results-list {
  margin-top: 10px;
}

.result-item {
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
  
  &:hover {
    background-color: #f5f5f5;
  }
  
  &.success {
    background-color: #f6ffed;
    border-left: 4px solid #52c41a;
  }
  
  &.error {
    background-color: #fff2f0;
    border-left: 4px solid #ff4d4f;
  }
}

.result-field {
  font-weight: bold;
  margin-bottom: 5px;
}

.result-desc {
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

.result-value {
  font-size: 12px;
  color: #999;
}

.result-error {
  font-size: 12px;
  color: #ff4d4f;
  margin-top: 5px;
}

/* 验证公式帮助提示样式 */
.validation-tooltip {
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 10px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.tooltip-content {
  margin: 0;
  white-space: pre-wrap;
}

/* 内容单元格 */
.content-cell {
  line-height: 1.8;
}

/* 输入框包装器 */
.input-wrapper {
  position: relative;
  display: inline-block;
}

/* 输入框样式 */
.table-input,
.vxe-input {
  height: 24px;
  line-height: 24px;
  min-width: 150px;
  margin: 0 2px;
  padding: 0 5px;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  background: #fff;
  text-align: left;
  
  &:disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
  }
}

/* 表单组件样式 */
.vxe-radio-group,
.vxe-checkbox-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-right: 5px;
  max-width: 100%;
}

.vxe-radio,
.vxe-checkbox {
  margin: 2px 5px;
  white-space: nowrap;
}

.radio-group,
.checkbox-group {
  display: inline-block;
  margin-right: 5px;
  max-width: 99%;
}

/* 单位样式 */
.unit {
  margin-left: 4px;
  color: #666;
  font-size: 12px;
}

/* 图标样式 */
.help-icon {
  margin-left: 5px;
  cursor: pointer;
  color: #1890ff;
  font-weight: bold;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  line-height: 20px;
  background: #e6f7ff;
  border-radius: 50%;
  transition: all 0.3s;
  opacity: 0;
  animation: fadeIn 0.5s forwards;
  animation-delay: 0.3s;
  
  &:hover {
    background: #bae7ff;
    transform: scale(1.1);
  }
}

.error-icon {
  margin-left: 5px;
  cursor: pointer;
  color: #ff4d4f;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  line-height: 20px;
  transition: all 0.3s;
  
  &:hover {
    transform: scale(1.1);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 提示框样式 */
.tooltip, .error-tooltip {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 5px;
  padding: 10px;
  font-size: 12px;
  border-radius: 4px;
  z-index: 1000;
  white-space: pre-wrap;
  max-width: 300px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.tooltip {
  background: #333;
  color: #fff;
  
  &::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
  }
}

.error-tooltip {
  background: #8b0000;
  color: #fff;
  border: 1px solid #ff4d4f;
  
  &::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #8b0000 transparent;
  }
}

/* 额外字段样式 */
.extra-fields-container {
  margin-left: 40px;
  margin-top: 8px;
}

.extra-fields-prompt {
  margin-bottom: 8px;
}

.extra-field-item {
  margin-bottom: 12px;
}

.field-label {
  display: inline-block;
  min-width: 80px;
}

.other-option {
  margin-top: 8px;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .bank-report-table {
    width: 95%;
  }
  
  .table-input,
  .vxe-input {
    min-width: 120px;
  }
}
</style>