<template>
  <div>
    <vxe-drawer
      v-model="drawerVisible"
      placement="right"
      @show="handleValidationDrawerShow"
      title="校验结果"
      width="55%"
      :footer="{ show: true }"
      height="100%"
    >
      <template #default>
        <div class="validation-results">
          <!-- Tab 切换 -->
          <div class="result-tabs">
            <div 
              class="tab-item" 
              :class="{ active: activeTab === 'all' }"
              @click="activeTab = 'all'"
            >
              全部 ({{ validationResultsList.length }})
            </div>
            <div 
              class="tab-item" 
              :class="{ active: activeTab === 'passed' }"
              @click="activeTab = 'passed'"
            >
              通过 ({{ validationResultsList.filter(item => item.isValid).length }})
            </div>
            <div 
              class="tab-item" 
              :class="{ active: activeTab === 'failed' }"
              @click="activeTab = 'failed'"
            >
              未通过 ({{ validationResultsList.filter(item => !item.isValid).length }})
            </div>
            <div 
              class="tab-item" 
              :class="{ active: activeTab === 'unfilled' }"
              @click="activeTab = 'unfilled'"
            >
              未填报 ({{ unfilledFields.length }})
            </div>
          </div>

          <!-- 统计信息 -->
          <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 class="summary-item">
              <span class="summary-label">未填报：</span>
              <span class="summary-value warning">{{ unfilledFields.length }}</span>
            </div>
          </div>

          <div class="process-log" v-if="showProcessLog && validationProcess.length > 0">
            <h4>执行过程：</h4>
            <div class="process-content">
              <div v-for="(log, index) in validationProcess" :key="index" class="process-item">
                {{ log }}
              </div>
            </div>
          </div>

          <!-- 未填报字段列表 -->
          <div v-if="activeTab === 'unfilled'" class="results-list">
            <div
              v-for="(field, index) in unfilledFields"
              :key="index"
              class="result-item unfilled"
            >
              <div class="result-field">{{ field.rowCode }} - {{ field.fieldName }}</div>
              <div class="result-desc">{{ field.description }}</div>
            </div>
          </div>

          <!-- 校验结果列表 -->
          <div v-else class="results-list">
            <div
              v-for="(result, index) in filteredResults"
              :key="index"
              class="result-item"
              :class="{ success: result.isValid, error: !result.isValid }"
              @click="handleValidationResultClick(result)"
            >
              <div class="result-field">{{ result.description }}</div>
              <div class="result-formula">公式：{{ result.formula }}</div>
              <div v-if="result.fieldValues && Object.keys(result.fieldValues).length > 0" class="result-params">
                <span class="params-title">参数值：</span>
                <span v-for="(value, key, index) in result.fieldValues" :key="key" class="param-item">
                  <span class="param-name">{{ key }} = {{ formatFieldValue(value) }}</span>
                  <span v-if="index < Object.keys(result.fieldValues).length - 1" class="param-separator">，</span>
                </span>
              </div>
              <div v-if="result.evaluatedFormula" class="result-evaluated">替换后公式：{{ result.evaluatedFormula }}</div>
              <div class="result-value">当前字段值：{{ formatFieldValue(result.fieldValue) }}</div>
              <div v-if="!result.isValid" class="result-error">失败原因：{{ result.description }}</div>
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <div class="drawer-footer">
          <vxe-button @click="toggleProcessLog">
            {{ showProcessLog ? '隐藏' : '显示' }}执行过程
          </vxe-button>
          <vxe-button status="primary" @click="drawerVisible = false">关闭</vxe-button>
        </div>
      </template>
    </vxe-drawer>

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

<script lang="ts" setup>
import { ref, watch, computed } from 'vue'

interface ValidationResult {
  field: string
  description: string
  formula: string
  isValid: boolean
  fieldValue: any
  rowCode: string
  fieldValues: Record<string, any>
  evaluatedFormula: string
}

interface ValidationFormula {
  formula: string
  des: string
}

interface TableRow {
  code: string
  content: Array<{
    field: string
    type?: string
    [key: string]: any
  }>
}

interface UnfilledField {
  rowCode: string
  fieldName: string
  description: string
}

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  tableFormData: {
    type: Array as () => TableRow[],
    default: () => []
  },
})

const emit = defineEmits(['update:modelValue', 'validationResultClick', 'showValidationHelp'])

const drawerVisible = ref(false)
const validationResultsList = ref<ValidationResult[]>([])
const validationProcess = ref<string[]>([])
const showProcessLog = ref(false)
const validationTooltipVisible = ref(false)
const validationTooltipPosition = ref({ left: 0, top: 0 })
const validationTooltipContent = ref('')
const activeTab = ref('all')

// 通过外部传入的数据
const validFormula = ref<ValidationFormula[]>([])
const formData = ref<Record<string, any>>({})

// 计算属性：过滤后的结果
const filteredResults = computed(() => {
  if (activeTab.value === 'all') {
    return validationResultsList.value
  } else if (activeTab.value === 'passed') {
    return validationResultsList.value.filter(item => item.isValid)
  } else if (activeTab.value === 'failed') {
    return validationResultsList.value.filter(item => !item.isValid)
  }
  return validationResultsList.value
})

// 计算属性：未填报字段
const unfilledFields = computed<UnfilledField[]>(() => {
  const fields: UnfilledField[] = []
  
  props.tableFormData.forEach((row) => {
    if (row.content && Array.isArray(row.content)) {
      row.content.forEach((item) => {
        if (item.field) {
          const key = `${row.code}_${item.field}`
          const value = formData.value[key]
          
          if (value === undefined || value === null || value === '') {
            // 查找该字段的校验公式
            const formula = validFormula.value.find(f => f.formula.includes(item.field))
            fields.push({
              rowCode: row.code,
              fieldName: item.field,
              description: formula?.des || '未填报'
            })
          }
        }
      })
    }
  })
  
  return fields
})

watch(() => props.modelValue, (newVal) => {
  drawerVisible.value = newVal
})

watch(drawerVisible, (newVal) => {
  emit('update:modelValue', newVal)
})

const handleValidationDrawerShow = () => {
  performValidation()
}

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

  validFormula.value.forEach((formulaItem: ValidationFormula) => {
   
    validationProcess.value.push(`开始校验公式: ${formulaItem.des}`)
    const result = evaluateFormula(formulaItem.formula, formulaItem.des)
    
    if (result) {
      validationResultsList.value.push(result)
    }
  })
  
  validationProcess.value.push('校验完成')
  validationProcess.value.push(`总计处理: ${validationResultsList.value.length} 条结果`)
}

const evaluateFormula = (formula: string, description: string): ValidationResult | null => {
  try {
    // 修复正则表达式 - $$需要转义
    const fieldMatch = formula.match(/([A-Za-z_]\w*)/)
    if (!fieldMatch) {
      validationProcess.value.push(`跳过: 无法解析公式字段 ${formula}`)
      return null
    }

    const fieldName = fieldMatch[1]
    validationProcess.value.push(`解析到字段: ${fieldName}`)

    // 查找字段所在行
    const row = props.tableFormData.find((r: TableRow) => 
      r.content?.some((c: any) => c.field === fieldName)
    )

     console.log(row)
    
    if (!row) {
      validationProcess.value.push(`跳过: 未找到字段 ${fieldName} 所在的行`)
      return null
    }

    validationProcess.value.push(`找到字段所在行: ${row.code}`)

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

    const strKey = `${row.code}_${fieldName}`
    const fieldValue = formData.value[strKey]
    
    validationProcess.value.push(`字段值: ${fieldValue} (key: ${strKey})`)

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

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

    // 构建表达式 - 修复变量引用问题
    const fieldNames = formula.match(/\b[A-Za-z][A-Za-z0-9_]*\b/g) || [];
    const uniqueFields = [...new Set(fieldNames.filter(f => 
      !['and', 'or', 'not', 'equal', 'less', 'greater', 'if', 'else', 'true', 'false']
        .includes(f.toLowerCase())
    ))];
    
    uniqueFields.sort((a, b) => b.length - a.length);
    
    const fieldValues: Record<string, any> = {};
    let expression = formula;
    for (const fieldName of uniqueFields) {
      const key = `${row.code}_${fieldName}`;
      const value = formData.value[key];
      fieldValues[fieldName] = value;
      
      if (value !== undefined && value !== '') {
        // 检查字段类型，如果是日期类型，转换为时间戳进行比较
        const fieldItem = row.content.find((c: any) => c.field === fieldName);
        let processedValue = value;
        
        if (fieldItem && fieldItem.type === 'date') {
          // 将日期字符串转换为时间戳（毫秒）
          const date = new Date(value);
          if (!isNaN(date.getTime())) {
            processedValue = date.getTime();
          }
        }
        
        expression = expression.replace(
          new RegExp(`\\b${fieldName}\\b`, 'g'), 
          `${processedValue}`
        );
      }
    }
    
    console.log("构建的表达式:", expression)
    validationProcess.value.push(`执行公式: ${expression}`)
    
    // 安全地执行表达式
    const isValid = safeEvalExpression(expression)
    validationProcess.value.push(`校验结果: ${isValid ? '通过' : '失败'}`)

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

// 安全的表达式求值函数
const safeEvalExpression = (expression: string): boolean => {
  try {
    // 使用 Function 构造函数创建安全的求值环境
    const func = new Function(`return ${expression}`)
    const result = func()
    
    // 处理布尔值返回
    if (typeof result === 'boolean') {
      return result
    }
    
    // 处理数值比较结果
    if (typeof result === 'number') {
      return Boolean(result)
    }
    
    // 处理字符串
    if (typeof result === 'string') {
      return result.toLowerCase() === 'true'
    }
    
    return Boolean(result)
  } catch (error) {
    validationProcess.value.push(`表达式求值错误: ${error}`)
    return false
  }
}

const formatFieldValue = (value: any): string => {
  if (value === undefined || value === null) {
    return '空'
  }
  if (value === '') {
    return '空字符串'
  }
  return String(value)
}

const handleValidationResultClick = (result: ValidationResult) => {
  emit('validationResultClick', result)
}

const showValidationHelp = (formulaItem: ValidationFormula, 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 closeTooltip = () => {
  validationTooltipVisible.value = false
}

const toggleProcessLog = () => {
  showProcessLog.value = !showProcessLog.value
}

const setValidateData = (formulaData: ValidationFormula[], formDataObj: Record<string, any>) => {
  validFormula.value = formulaData
  formData.value = formDataObj
}

defineExpose({
  performValidation,
  showValidationHelp,
  closeTooltip,
  setValidateData
})
</script>

<style lang="less" scoped>
.validation-results {
  padding: 20px;
  height: calc(100vh-10px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.result-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #e8e8e8;
}

.tab-item {
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  font-size: 14px;
  color: #666;
  background-color: #f5f5f5;
  transition: all 0.3s;
  border: 1px solid #e8e8e8;
  border-bottom: none;
  
  &:hover {
    background-color: #e6f7ff;
    color: #1890ff;
  }
  
  &.active {
    background-color: #1890ff;
    color: white;
    border-color: #1890ff;
    font-weight: bold;
  }
}

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

.summary-value.warning {
  color: #faad14;
}

.process-log {
  margin: 15px 0;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 4px;
  border-left: 4px solid #1890ff;
  
  h4 {
    margin: 0 0 10px 0;
    color: #1890ff;
    font-size: 14px;
  }
}

.process-content {
  max-height: 200px;
  overflow-y: auto;
  font-family: monospace;
}

.process-item {
  font-size: 12px;
  color: #666;
  padding: 2px 0;
  border-bottom: 1px dashed #eee;
  
  &:last-child {
    border-bottom: none;
  }
}

.results-list {
  margin-top: 10px;
  flex: 1;
  overflow-y: auto;
}

.result-item {
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  
  &:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

.result-item.success {
  background-color: #f6ffed;
  border-left: 4px solid #52c41a;
  
  &:hover {
    background-color: #e8f7e0;
  }
}

.result-item.error {
  background-color: #fff2f0;
  border-left: 4px solid #ff4d4f;
  
  &:hover {
    background-color: #ffe9e6;
  }
}

.result-item.unfilled {
  background-color: #fffbe6;
  border-left: 4px solid #faad14;
  
  &:hover {
    background-color: #fff1b8;
  }
}

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

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

.result-formula {
  font-size: 12px;
  color: #888;
  font-family: monospace;
  margin-bottom: 5px;
  background-color: rgba(0, 0, 0, 0.02);
  padding: 2px 4px;
  border-radius: 2px;
  word-break: break-all;
}

.result-params {
  margin: 8px 0;
  padding: 8px;
  background-color: rgba(24, 144, 255, 0.05);
  border-radius: 4px;
  border: 1px dashed #1890ff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.params-title {
  font-size: 12px;
  color: #1890ff;
  font-weight: bold;
}

.param-item {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
}

.param-name {
  color: #333;
  font-family: monospace;
  font-weight: 500;
}

.param-separator {
  color: #999;
  margin: 0 2px;
}

.result-evaluated {
  font-size: 12px;
  color: #52c41a;
  font-family: monospace;
  margin-bottom: 5px;
  background-color: rgba(82, 196, 26, 0.05);
  padding: 4px 6px;
  border-radius: 2px;
  word-break: break-all;
  border-left: 3px solid #52c41a;
}

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

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

.validation-tooltip {
  position: fixed;
  background-color: #333;
  color: #fff;
  padding: 12px;
  border-radius: 6px;
  font-size: 12px;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-width: 400px;
  transform: translateX(-50%);
  
  &::before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px 5px 0;
    border-style: solid;
    border-color: #333 transparent transparent;
  }
}

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

.drawer-footer {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-top: 1px solid #eee;
}
</style>