<template>
  <Drawer
    v-bind="$attrs"
    :visible="visible"
    @close="handleClose"
    :title="config?.name || '审核结果'"
    :width="width"
    :closable="true"
    :maskClosable="true"
    :destroyOnClose="true"
  >
    <div class="universal-review-container">
      <div class="split-layout" :class="{ 'no-pdf-layout': !pdfLayoutConfig }">
        <!-- 左侧PDF预览 -->
        <div class="pdf-preview-wrapper" v-if="pdfLayoutConfig">
          <ReviewPdfContainer
            ref="pdfContainerRef"
            :config="pdfLayoutConfig"
            :taskInfo="taskInfo"
            :getPdfStream="getPdfStream"
            @pdfLoaded="handlePdfLoaded"
            @pdfError="handlePdfError"
          />
        </div>
        
        <!-- 右侧审核结果 -->
        <div class="content-container" :class="{ 'full-width': !pdfLayoutConfig }">
          <!-- 多标签模式 -->
          <div v-if="config && config.mode === 'tabs'" class="tabs-container">
            <div class="review-type-tabs" v-if="availableTabs.length > 0">
              <Tabs v-model:activeKey="currentTab" @change="handleTabChange">
                <TabPane 
                  v-for="tab in availableTabs" 
                  :key="tab.key" 
                  :tab="tab.label"
                />
              </Tabs>
            </div>
            <div class="tab-content">
              <div class="category-items" v-if="filteredResults.length > 0">
                <div class="items-card-list">
                  <template v-for="(category, categoryIndex) in filteredResults" :key="categoryIndex">
                    <Card
                      v-for="(item, idx) in category.results" 
                      :key="getItemKey(categoryIndex, idx, item)"
                      class="item-card"
                      :bordered="true"
                      :bodyStyle="{ padding: activeItemKeys.includes(getItemKey(categoryIndex, idx, item)) ? '16px' : '0', height: activeItemKeys.includes(getItemKey(categoryIndex, idx, item)) ? 'auto' : '0', overflow: 'hidden', transition: 'all 0.3s' }"
                    >
                      <template #title>
                        <div class="item-header-content" @click="toggleItemExpand(categoryIndex, idx, item)">
                          <div class="item-info">
                            <span class="item-serial">{{ item.serialNumber }}</span>
                            <span class="item-title">{{ item.existingIssues }}</span>
                          </div>
                          <div class="item-actions">
                            <Switch
                              :checked="item.isRead === '1'"
                              checked-children="已读"
                              un-checked-children="未读"
                              :loading="loading && currentOpId === item.id && currentOpField === 'isRead'"
                              @change="(checked: any) => handleStatusChange(item.id!, 'isRead', checked ? '1' : '0')"
                              @click.stop
                            />
                            <Switch
                              class="ml-3"
                              :checked="item.isAdopted === '1'"
                              checked-children="已采纳"
                              un-checked-children="未采纳"
                              :loading="loading && currentOpId === item.id && currentOpField === 'isAdopted'"
                              @change="(checked: any) => handleStatusChange(item.id!, 'isAdopted', checked ? '1' : '0')"
                              @click.stop
                            />
                            <DownOutlined v-if="!activeItemKeys.includes(getItemKey(categoryIndex, idx, item))" class="expand-icon ml-3" />
                            <UpOutlined v-else class="expand-icon ml-3" />
                          </div>
                        </div>
                      </template>
                      <div class="item-content" v-if="activeItemKeys.includes(getItemKey(categoryIndex, idx, item))">
                        <template v-for="(section, sectionIndex) in getContentSections(item)" :key="sectionIndex">
                          <div v-if="getItemValue(item, section.field)" class="content-section">
                            <div class="section-title">
                              {{ section.title }}：
                              <div class="title-actions">
                                <Button 
                                  v-if="shouldShowComparison(section, item) && shouldShowComparisonButton(section)"
                                  type="link" 
                                  size="small" 
                                  class="comparison-btn"
                                  @click.stop="toggleComparison(getItemId(item, categoryIndex, idx))"
                                >
                                  <EyeOutlined v-if="!comparisonVisible[getItemId(item, categoryIndex, idx)]" />
                                  <EyeInvisibleOutlined v-else />
                                  {{ comparisonVisible[getItemId(item, categoryIndex, idx)] ? '隐藏对比' : '显示对比' }}
                                </Button>
                                <Button 
                                  type="link" 
                                  size="small" 
                                  class="copy-btn"
                                  @click.stop="copyContent(getItemValue(item, section.field))"
                                  v-if="getItemValue(item, section.field)"
                                >
                                  <CopyOutlined /> 复制
                                </Button>
                              </div>
                            </div>
                            <div
                              class="section-content markdown-content"
                              v-html="renderContent(section, getItemValue(item, section.field))"
                              @click="locateByText(getItemValue(item, section.field), item, section, categoryIndex, idx)"
                            ></div>
                            
                            <!-- 页面按钮 - 只在有pdfSource且存在多页时显示 -->
                            <div 
                              v-if="supportsPdfLocation(section) && fieldPageButtons[getFieldKey(item, section, categoryIndex, idx)]"
                              class="page-buttons"
                            >
                              <span class="page-buttons-label">定位到页面：</span>
                              <Button 
                                v-for="page in fieldPageButtons[getFieldKey(item, section, categoryIndex, idx)]"
                                :key="page"
                                type="link" 
                                size="small"
                                class="page-btn"
                                @click.stop="goToPageByButton(page, section)"
                              >
                                第{{ page }}页
                              </Button>
                            </div>
                          </div>
                          
                          <!-- 对比内容展示 - 只在对比模式下显示 -->
                          <div 
                            v-if="shouldShowComparison(section, item) && 
                                  hasComparisonContent(item, section) && 
                                  comparisonVisible[getItemId(item, categoryIndex, idx)]" 
                            class="content-section comparison-section"
                          >
                            <div class="section-title">
                              {{ getComparisonTitle(section) }}：
                              <Button 
                                type="link" 
                                size="small" 
                                class="copy-btn"
                                @click.stop="copyContent(getComparisonContent(item, section))"
                              >
                                <CopyOutlined /> 复制
                              </Button>
                            </div>
                            <div
                              class="section-content markdown-content comparison-content"
                              v-html="renderMarkdown(getComparisonContent(item, section))"
                              @click="locateByText(getComparisonContent(item, section), item, section, categoryIndex, idx)"
                            ></div>
                          </div>
                        </template>
                      </div>
                    </Card>
                  </template>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 单一模式 -->
          <div v-else class="single-content">
            <Tabs v-model:activeKey="activeCollapseKeys[0]">
              <TabPane 
                v-for="(category, index) in filteredTaskResultDetail" 
                :key="index.toString()" 
                :tab="category.name + ' (' + category.results.length + ')'"
              >
                <div class="category-items">
                  <div class="items-card-list">
                    <Card
                      v-for="(item, idx) in category.results" 
                      :key="getItemKey(index, idx, item)"
                      class="item-card"
                      :bordered="true"
                      :bodyStyle="{ padding: activeItemKeys.includes(getItemKey(index, idx, item)) ? '16px' : '0', height: activeItemKeys.includes(getItemKey(index, idx, item)) ? 'auto' : '0', overflow: 'hidden', transition: 'all 0.3s' }"
                    >
                      <template #title>
                        <div class="item-header-content" @click="toggleItemExpand(index, idx, item)">
                          <div class="item-info">
                            <span class="item-serial">{{ item.serialNumber }}</span>
                            <span class="item-title">{{ item.existingIssues }}</span>
                          </div>
                          <div class="item-actions">
                            <Switch
                              :checked="item.isRead === '1'"
                              checked-children="已读"
                              un-checked-children="未读"
                              :loading="loading && currentOpId === item.id && currentOpField === 'isRead'"
                              @change="(checked: any) => handleStatusChange(item.id!, 'isRead', checked ? '1' : '0')"
                              @click.stop
                            />
                            <Switch
                              class="ml-3"
                              :checked="item.isAdopted === '1'"
                              checked-children="已采纳"
                              un-checked-children="未采纳"
                              :loading="loading && currentOpId === item.id && currentOpField === 'isAdopted'"
                              @change="(checked: any) => handleStatusChange(item.id!, 'isAdopted', checked ? '1' : '0')"
                              @click.stop
                            />
                            <DownOutlined v-if="!activeItemKeys.includes(getItemKey(index, idx, item))" class="expand-icon ml-3" />
                            <UpOutlined v-else class="expand-icon ml-3" />
                          </div>
                        </div>
                      </template>
                      <div class="item-content" v-if="activeItemKeys.includes(getItemKey(index, idx, item))">
                        <template v-for="(section, sectionIndex) in getContentSections(item)" :key="sectionIndex">
                          <div v-if="getItemValue(item, section.field)" class="content-section">
                            <div class="section-title">
                              {{ section.title }}：
                              <div class="title-actions">
                                <Button 
                                  v-if="shouldShowComparison(section, item) && shouldShowComparisonButton(section)"
                                  type="link" 
                                  size="small" 
                                  class="comparison-btn"
                                  @click.stop="toggleComparison(getItemId(item, index, idx))"
                                >
                                  <EyeOutlined v-if="!comparisonVisible[getItemId(item, index, idx)]" />
                                  <EyeInvisibleOutlined v-else />
                                  {{ comparisonVisible[getItemId(item, index, idx)] ? '隐藏对比' : '显示对比' }}
                                </Button>
                                <Button 
                                  type="link" 
                                  size="small" 
                                  class="copy-btn"
                                  @click.stop="copyContent(getItemValue(item, section.field))"
                                  v-if="getItemValue(item, section.field)"
                                >
                                  <CopyOutlined /> 复制
                                </Button>
                              </div>
                            </div>
                            <div
                              class="section-content markdown-content"
                              v-html="renderContent(section, getItemValue(item, section.field))"
                              v-if="getItemValue(item, section.field)"
                              @click="locateByText(getItemValue(item, section.field), item, section, index, idx)"
                            ></div>
                            
                            <!-- 页面按钮 - 只在有pdfSource且存在多页时显示 -->
                            <div 
                              v-if="supportsPdfLocation(section) && fieldPageButtons[getFieldKey(item, section, index, idx)]"
                              class="page-buttons"
                            >
                              <span class="page-buttons-label">定位到页面：</span>
                              <Button 
                                v-for="page in fieldPageButtons[getFieldKey(item, section, index, idx)]"
                                :key="page"
                                type="link" 
                                size="small"
                                class="page-btn"
                                @click.stop="goToPageByButton(page, section)"
                              >
                                第{{ page }}页
                              </Button>
                            </div>
                            
                          </div>
                          
                          <!-- 对比内容展示 - 只在对比模式下显示 -->
                          <div 
                            v-if="shouldShowComparison(section, item) && 
                                  hasComparisonContent(item, section) && 
                                  comparisonVisible[getItemId(item, index, idx)]" 
                            class="content-section comparison-section"
                          >
                            <div class="section-title">
                              {{ getComparisonTitle(section) }}：
                              <Button 
                                type="link" 
                                size="small" 
                                class="copy-btn"
                                @click.stop="copyContent(getComparisonContent(item, section))"
                              >
                                <CopyOutlined /> 复制
                              </Button>
                            </div>
                            <div
                              class="section-content markdown-content comparison-content"
                              v-html="renderMarkdown(getComparisonContent(item, section))"
                              @click="locateByText(getComparisonContent(item, section), item, section, index, idx)"
                            ></div>
                          </div>
                        </template>
                      </div>
                    </Card>
                  </div>
                </div>
              </TabPane>
            </Tabs>
          </div>
        </div>
      </div>
    </div>
    
    <template #footer>
      <div class="drawer-footer">
        <div class="status-switches">
          <Switch
            :checked="expandReadItems"
            checked-children="展开已读"
            un-checked-children="折叠已读"
            @change="(checked: any) => toggleExpandReadItems(checked)"
          />
          <Switch
            class="ml-3"
            :checked="expandAdoptedItems"
            checked-children="展开已采纳"
            un-checked-children="折叠已采纳"
            @change="(checked: any) => toggleExpandAdoptedItems(checked)"
          />
        </div>
        <Button type="primary" @click="handleClose">关闭</Button>
      </div>
    </template>
  </Drawer>
</template>

<script lang="ts" setup>
  import { ref, computed, watch, nextTick, type PropType } from 'vue';
  import { Drawer, Button, Card, Switch, Tabs, TabPane } from 'ant-design-vue';
  import { DownOutlined, UpOutlined, CopyOutlined, EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons-vue';
  import { message } from 'ant-design-vue';
  import MarkdownIt from 'markdown-it';
  import ReviewPdfContainer from '@/components/Preview/src/PdfPreview/ReviewPdfContainer.vue';
  import { 
    getTaskConfig, 
    getTaskConfigSync,
    shouldShowComparison, 
    getFieldPdfSource,
    supportsPdfLocation,
    getComparisonField,
    getComparisonTitle,
    shouldShowComparisonButton,
    type TaskConfig,
    type FieldConfig 
  } from '@/configs/taskConfigs';

  // 定义数据接口
  interface TaskResultItem {
    id?: string;
    serialNumber?: string;
    existingIssues?: string;
    isRead?: string;
    isAdopted?: string;
    originalText?: string;
    modifiedContent?: string;
    modificationDisplay?: string;
    reviewBasis?: any;
    comparedText?: string;
    [key: string]: any;
  }

  interface TaskResultCategory {
    name: string;
    results: TaskResultItem[];
  }

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    width: {
      type: [String, Number],
      default: '95%'
    },
    taskType: {
      type: String,
      required: true
    },
    taskResultDetail: {
      type: Array as PropType<TaskResultCategory[]>,
      default: () => []
    },
    taskInfo: {
      type: Object,
      default: () => ({})
    },
    getPdfStream: {
      type: Function as PropType<(taskId: string) => Promise<Blob>>,
      required: true
    },
    updateResultItemStatus: {
      type: Function as PropType<(id: string, field: string, value: string) => Promise<void>>,
      required: true
    }
  });

  const emit = defineEmits(['update:visible', 'close']);

  const md = new MarkdownIt({
    html: true,
    linkify: true,
    typographer: true,
    breaks: true,
  });

  // 获取任务配置
  const config = ref<TaskConfig | null>(null);
  
  // 异步加载配置
  const loadConfig = async () => {
    try {
      config.value = await getTaskConfig(props.taskType);
    } catch (error) {
      console.error('加载配置失败，使用同步配置:', error);
      config.value = getTaskConfigSync(props.taskType);
    }
  };

  // 基础状态管理
  const activeCollapseKeys = ref<string[]>(['0']);
  const activeItemKeys = ref<string[]>([]);
  const loading = ref<boolean>(false);
  const currentOpId = ref<string>('');
  const currentOpField = ref<string>('');
  const expandReadItems = ref<boolean>(false);
  const expandAdoptedItems = ref<boolean>(false);

  // 多标签模式相关状态
  const currentTab = ref<string>('');
  const comparisonVisible = ref<Record<string, boolean>>({});

  // 页面选择相关状态（仅保留必要的）
  const currentSelectText = ref<string>('');
  const currentSelectFieldConfig = ref<FieldConfig | null>(null);
  const currentSelectItem = ref<TaskResultItem | null>(null);
  const currentSelectCategoryIndex = ref<number | null>(null);
  const currentSelectItemIndex = ref<number | null>(null);
  const fieldPageButtons = ref<Record<string, number[]>>({});

  const pdfContainerRef = ref<InstanceType<typeof ReviewPdfContainer> | null>(null);

  // PDF布局配置（支持tabs模式下动态切换）
  const pdfLayoutConfig = computed(() => {
    if (!config.value) return null;
    
    let pdfConfig = config.value.pdfConfig;
    
    // 如果是tabs模式，优先使用当前tab的PDF配置
    if (config.value.mode === 'tabs' && currentTab.value) {
      // 根据当前tab名称匹配配置中的tab
      // 通过数据的name（中文）匹配配置中的label
      const currentTabConfig = config.value.tabs?.find(tab => tab.label === currentTab.value);
      if (currentTabConfig?.pdfConfig) {
        pdfConfig = currentTabConfig.pdfConfig;
      }
    }
    
    // 检查 pdfConfig 是否存在且有效
    if (!pdfConfig || !pdfConfig.layout || !pdfConfig.sources || pdfConfig.sources.length === 0) {
      return null;
    }
    
    // 创建适配ReviewTypeConfig接口的配置对象
    return {
      type: config.value.taskType,
      name: config.value.name,
      pdfLayout: pdfConfig.layout,
      pdfSources: pdfConfig.sources,
      fields: [] // 暂时使用空数组避免类型冲突
    } as any;
  });

  // 可用标签页（按配置顺序展示）
  const availableTabs = computed(() => {
    if (!config.value || config.value.mode !== 'tabs' || !props.taskResultDetail || props.taskResultDetail.length === 0) {
      return [];
    }
    
    // 如果配置中没有定义 tabs，则回退到基于数据生成
    if (!config.value.tabs || config.value.tabs.length === 0) {
      console.warn('配置中未定义 tabs，使用数据生成标签页');
      return props.taskResultDetail.map((category, index) => {
        let label = `${category.name} (${category.results?.length || 0})`;
        
        // 特殊处理：如果是实质性审查，加上审查立场
        if (category.name === '实质性审查' && props.taskInfo?.contractPartyRole) {
          label = `（${props.taskInfo.contractPartyRole}）实质性审查 (${category.results?.length || 0})`;
        }
        
        return {
          key: category.name,
          label: label,
          dataIndex: index,
          name: category.name
        };
      });
    }
    
    // 按配置的 tabs 顺序生成标签页
    const availableTabsWithData: any[] = [];
    
    config.value.tabs.forEach((tabConfig, configIndex) => {
      // 在数据中查找对应的分类
      const correspondingDataCategory = props.taskResultDetail.find(category => {
        // 尝试多种匹配方式
        const matches = [
          category.name === tabConfig.label,
          category.name === tabConfig.key,
          category.name.includes(tabConfig.label),
          tabConfig.label.includes(category.name),
          // 额外的匹配：去掉括号和空格后的匹配
          category.name.replace(/[（）\(\)\s]/g, '') === tabConfig.label.replace(/[（）\(\)\s]/g, ''),
          // 处理特殊情况：审查类型的匹配
          (category.name.includes('审查') && tabConfig.label.includes('审查') && 
           (category.name.includes(tabConfig.label.replace('审查', '')) || 
            tabConfig.label.includes(category.name.replace('审查', ''))))
        ];
        
        const isMatch = matches.some(Boolean);
        if (isMatch) {
          console.log(`匹配成功: 数据"${category.name}" <-> 配置"${tabConfig.label}" (key: ${tabConfig.key})`);
        }
        return isMatch;
      });
      
      if (correspondingDataCategory) {
        let label = `${correspondingDataCategory.name} (${correspondingDataCategory.results?.length || 0})`;
        
        // 特殊处理：如果是实质性审查，加上审查立场
        if (correspondingDataCategory.name === '实质性审查' && props.taskInfo?.contractPartyRole) {
          label = `（${props.taskInfo.contractPartyRole}）实质性审查 (${correspondingDataCategory.results?.length || 0})`;
        }
        
        // 记录在原数据中的索引
        const dataIndex = props.taskResultDetail.findIndex(category => category === correspondingDataCategory);
        
        availableTabsWithData.push({
          key: correspondingDataCategory.name, // 使用数据的name作为key
          label: label,
          dataIndex: dataIndex,
          name: correspondingDataCategory.name,
          configIndex: configIndex, // 记录在配置中的索引，用于排序
          tabConfig: tabConfig // 保存tab配置引用
        });
      } else {
        console.log(`未找到匹配的数据分类: 配置"${tabConfig.label}" (key: ${tabConfig.key})`);
      }
    });
    
    // 按配置中的顺序排序
    availableTabsWithData.sort((a, b) => a.configIndex - b.configIndex);
    
    console.log('Generated tabs based on config order:', availableTabsWithData.map(tab => 
      `${tab.configIndex}: ${tab.label}`));
    
    return availableTabsWithData;
  });

  // 过滤后的结果（用于标签模式）
  const filteredResults = computed(() => {
    if (!config.value || config.value.mode !== 'tabs' || !props.taskResultDetail || !currentTab.value) {
      return [];
    }
    
    // 直接从所有数据中查找对应的分类
    const dataToSearch = props.taskResultDetail;
    
    // 根据当前选中的tab name，找到对应的数据类别
    const targetCategory = dataToSearch.find(category => category.name === currentTab.value);
    
    if (targetCategory) {
      return [targetCategory];
    }
    
    // 如果没找到对应数据，返回空数组
    return [];
  });

  // 单一模式的过滤结果
  const filteredTaskResultDetail = computed(() => {
    if (!config.value || config.value.mode === 'tabs') return [];
    
    if (props.taskResultDetail.length <= 0) {
      return [];
    }

    // 如果只有两个或更少的类别，或者第一个类别的results数量<=5个，只展示第一个类别
    if (props.taskResultDetail.length <= 2 || 
        (props.taskResultDetail[0] && props.taskResultDetail[0].results && 
         props.taskResultDetail[0].results.length <= 5)) {
      return [props.taskResultDetail[0]];
    }

    return props.taskResultDetail;
  });

  // 检查值是否为有效数据（非空）
  const hasValidData = (value: any, fieldConfig?: FieldConfig): boolean => {
    if (value === null || value === undefined) {
      return false;
    }
    
    if (typeof value === 'string') {
      return value.trim() !== '';
    }
    
    if (Array.isArray(value)) {
      return value.length > 0;
    }
    
    if (typeof value === 'object') {
      // 如果是JSON配置且有extractFields，需要检查指定字段是否有有效数据
      if (fieldConfig && fieldConfig.dataType === 'json' && fieldConfig.jsonConfig?.extractFields) {
        const extractFields = fieldConfig.jsonConfig.extractFields;
        
        // 检查是否至少有一个配置的字段有有效数据
        return extractFields.some((fieldName: string) => {
          const fieldValue = value[fieldName];
          if (!fieldValue) return false;
          
          // 应用字段处理器（如果有）
          let processedValue = fieldValue;
          if (fieldConfig.jsonConfig?.fieldProcessors && fieldConfig.jsonConfig.fieldProcessors[fieldName]) {
            const processor = fieldConfig.jsonConfig.fieldProcessors[fieldName];
            
            // 如果处理器是函数，直接调用
            if (typeof processor === 'function') {
              processedValue = processor(fieldValue);
            } 
            // 如果处理器是字符串，按名称处理
            else if (typeof processor === 'string') {
              if (processor === 'arrayJoinNewLine' && Array.isArray(fieldValue)) {
                processedValue = fieldValue.length > 0 ? fieldValue.join('\n') : '';
              } else if (processor === 'arrayJoin' && Array.isArray(fieldValue)) {
                processedValue = fieldValue.length > 0 ? fieldValue.join(', ') : '';
              } else if (processor === 'extractFirst' && Array.isArray(fieldValue)) {
                processedValue = fieldValue.length > 0 ? fieldValue[0] : '';
              }
            }
          } else {
            // 默认处理：如果是数组，连接所有元素
            if (Array.isArray(fieldValue) && fieldValue.length > 0) {
              processedValue = fieldValue.join('\n');
            }
          }
          
          return hasValidData(processedValue);
        });
      }
      
      // 对于普通对象，检查是否有有效的属性值
      return Object.keys(value).length > 0 && Object.values(value).some(v => hasValidData(v));
    }
    
    return true;
  };

  // 获取当前字段配置
  const getContentSections = (item: TaskResultItem): FieldConfig[] => {
    if (!config.value) return [];
    
    if (config.value.mode === 'tabs') {
      // 多标签模式：优先使用缓存的标签页配置
      let currentTabConfig: any = null;
      
      // 首先尝试从 availableTabs 中找到当前标签页的配置
      const currentTabData = availableTabs.value.find(tab => tab.key === currentTab.value);
      if (currentTabData && currentTabData.tabConfig) {
        currentTabConfig = currentTabData.tabConfig;
      } else {
        // 回退到原有的匹配方式
        currentTabConfig = config.value.tabs?.find(tab => 
          tab.label === currentTab.value || 
          tab.key === currentTab.value ||
          tab.label.includes(currentTab.value) ||
          currentTab.value.includes(tab.label)
        );
      }
      
      return (currentTabConfig?.fields || []).filter(field => {
        if (field.displayCondition) {
          return field.displayCondition(item);
        }
        const fieldValue = getItemValue(item, field.field);
        return hasValidData(fieldValue, field);
      });
    } else {
      // 单一模式：使用配置的字段
      return (config.value.fields || []).filter(field => {
        if (field.displayCondition) {
          return field.displayCondition(item);
        }
        const fieldValue = getItemValue(item, field.field);
        return hasValidData(fieldValue, field);
      });
    }
  };

  // 从项目中获取特定字段的值
  const getItemValue = (item: TaskResultItem, field: string): any => {
    if (!item || !field) return null;
    
    // 支持嵌套字段
    if (field.includes('.')) {
      const parts = field.split('.');
      let value: any = item;
      for (const part of parts) {
        if (value && typeof value === 'object') {
          value = value[part];
        } else if (part === 'reviewBasis' && typeof value === 'string') {
          try {
            value = JSON.parse(value);
          } catch (e) {
            return null;
          }
        } else {
          return null;
        }
      }
      return value;
    }
    
    // 如果直接访问reviewBasis字段且为字符串，尝试解析
    if (field === 'reviewBasis' && typeof item[field] === 'string') {
      try {
        return JSON.parse(item[field]);
      } catch (e) {
        return item[field];
      }
    }
    
    return item[field];
  };

  // 根据配置渲染内容
  const renderContent = (section: FieldConfig, value: any): string => {
    if (!value) return '';
    
    if (section.displayType === 'markdown') {
      if (section.dataType === 'json' && section.jsonConfig) {
        return renderJsonContent(value, section.jsonConfig);
      }
      return renderMarkdown(value);
    }
    
    return value.toString().replace(/\n/g, '<br>');
  };

  // 渲染JSON内容
  const renderJsonContent = (value: any, jsonConfig: any): string => {
    let jsonObj = value;
    
    // 如果是字符串，尝试解析为JSON
    if (typeof value === 'string') {
      try {
        jsonObj = JSON.parse(value);
      } catch (e) {
        return value.toString().replace(/\n/g, '<br>');
      }
    }
    
    const values: string[] = [];
    const separator = jsonConfig.separator || '：';
    
    jsonConfig.extractFields.forEach((fieldName: string) => {
      if (jsonObj[fieldName]) {
        let fieldValue = jsonObj[fieldName];
        
        // 应用字段处理器
        if (jsonConfig.fieldProcessors && jsonConfig.fieldProcessors[fieldName]) {
          const processor = jsonConfig.fieldProcessors[fieldName];
          
          // 如果处理器是函数，直接调用
          if (typeof processor === 'function') {
            fieldValue = processor(fieldValue);
          } 
          // 如果处理器是字符串，按名称处理
          else if (typeof processor === 'string') {
            if (processor === 'arrayJoinNewLine' && Array.isArray(fieldValue)) {
              fieldValue = fieldValue.join('\n');
            } else if (processor === 'arrayJoin' && Array.isArray(fieldValue)) {
              fieldValue = fieldValue.join(', ');
            } else if (processor === 'extractFirst' && Array.isArray(fieldValue)) {
              fieldValue = fieldValue.length > 0 ? fieldValue[0] : '';
            } else {
              // 默认处理
              if (Array.isArray(fieldValue) && fieldValue.length > 0) {
                fieldValue = fieldValue.join('\n');
              }
            }
          } else {
            // 默认处理
            if (Array.isArray(fieldValue) && fieldValue.length > 0) {
              fieldValue = fieldValue.join('\n');
            }
          }
        } else {
          // 默认处理：如果是数组，显示所有元素（用换行符连接）
          if (Array.isArray(fieldValue) && fieldValue.length > 0) {
            fieldValue = fieldValue.join('\n');
          }
        }
        
        if (fieldValue) {
          values.push(String(fieldValue));
        }
      }
    });
    return renderMarkdown(values.join(separator));
  };

  const renderMarkdown = (text: any) => {
    if (!text) return '';
    
    const processedText = String(text).replace(/\n/g, '  \n');
    return md.render(processedText);
  };

  // 生成审核项的唯一key
  const getItemKey = (categoryIndex: number, itemIndex: number, item: TaskResultItem): string => {
    return item.id ? String(item.id) : `${categoryIndex}-${itemIndex}`;
  };

  // 获取项目的唯一标识符
  const getItemId = (item: TaskResultItem, categoryIndex: number, itemIndex: number): string => {
    return item.id ? String(item.id) : getItemKey(categoryIndex, itemIndex, item);
  };

  // 切换对比显示状态
  const toggleComparison = (itemId: string) => {
    comparisonVisible.value[itemId] = !comparisonVisible.value[itemId];
  };

  // 切换项目展开/折叠
  const toggleItemExpand = (categoryIndex: number, itemIndex: number, item: TaskResultItem) => {
    const itemKey = getItemKey(categoryIndex, itemIndex, item);
    const index = activeItemKeys.value.indexOf(itemKey);
    
    if (index > -1) {
      activeItemKeys.value.splice(index, 1);
    } else {
      activeItemKeys.value.push(itemKey);
    }
  };

  // 根据过滤条件更新折叠状态
  const updateActiveItemKeys = () => {
    const newActiveKeys: string[] = [];
    const dataToProcess = config.value && config.value.mode === 'tabs' ? filteredResults.value : filteredTaskResultDetail.value;
    
    dataToProcess.forEach((category: TaskResultCategory, categoryIndex: number) => {
      if (category?.results) {
        category.results.forEach((item: TaskResultItem, itemIndex: number) => {
          const itemKey = getItemKey(categoryIndex, itemIndex, item);
          const isRead = item.isRead === '1';
          const isAdopted = item.isAdopted === '1';
          
          const shouldExpand = 
            (!isRead && !isAdopted) ||
            (isRead && expandReadItems.value) ||
            (isAdopted && expandAdoptedItems.value);
          
          if (shouldExpand) {
            newActiveKeys.push(itemKey);
          }
        });
      }
    });
    
    activeItemKeys.value = newActiveKeys;
  };

  // 切换展开已读项
  const toggleExpandReadItems = (checked: any) => {
    expandReadItems.value = !!checked;
    updateActiveItemKeys();
  };

  // 切换展开已采纳项
  const toggleExpandAdoptedItems = (checked: any) => {
    expandAdoptedItems.value = !!checked;
    updateActiveItemKeys();
  };

  // 标签页切换
  const handleTabChange = (activeKey: string | number) => {
    currentTab.value = String(activeKey);
    nextTick(() => {
      updateActiveItemKeys();
      // 通知PDF容器配置已变化
      if (pdfContainerRef.value) {
        pdfContainerRef.value.$forceUpdate && pdfContainerRef.value.$forceUpdate();
      }
    });
  };

  // 状态变更处理
  const handleStatusChange = async (id: string, field: 'isRead' | 'isAdopted', value: '0' | '1') => {
    if (!id) {
      message.error('缺少记录ID，无法更新状态');
      return;
    }
    
    loading.value = true;
    currentOpId.value = id;
    currentOpField.value = field;
    
    try {
      await props.updateResultItemStatus(id, field, value);
      
      // 更新本地状态
      const dataToUpdate = config.value && config.value.mode === 'tabs' ? props.taskResultDetail : filteredTaskResultDetail.value;
      dataToUpdate.forEach((category: TaskResultCategory) => {
        if (category?.results) {
          category.results.forEach((item: TaskResultItem) => {
            if (item.id === id) {
              item[field] = value;
            }
          });
        }
      });
      
      updateActiveItemKeys();
    } catch (error) {
      console.error('更新状态失败', error);
      message.error('更新状态失败');
    } finally {
      loading.value = false;
      currentOpId.value = '';
      currentOpField.value = '';
    }
  };

  // 复制内容到剪贴板
  const copyContent = (content: any) => {
    if (!content) return;
    
    let textToCopy = '';
    
    if (typeof content === 'string') {
      try {
        const parsed = JSON.parse(content);
        if (parsed && typeof parsed === 'object') {
          const values: string[] = [];
          const fields = ['reviewPoints', 'reviewContent', 'review_content'];
          
          fields.forEach(fieldName => {
            if (parsed[fieldName]) {
              let fieldValue = parsed[fieldName];
              
              if (Array.isArray(fieldValue) && fieldValue.length > 0) {
                fieldValue = fieldValue[0];
              }
              
              if (fieldValue) {
                values.push(String(fieldValue));
              }
            }
          });
          
          if (values.length > 0) {
            textToCopy = values.join('：');
          } else {
            textToCopy = content;
          }
        } else {
          textToCopy = content;
        }
      } catch (e) {
        textToCopy = content;
      }
    } else if (typeof content === 'object') {
      if (content.reviewContent) {
        textToCopy = content.reviewContent;
        
        if (content.reviewPoints && content.reviewPoints.length) {
          textToCopy += '\n\n审查要点:\n';
          content.reviewPoints.forEach((point: any, index: number) => {
            textToCopy += `${index + 1}. ${point}\n`;
          });
        }
      } else {
        try {
          textToCopy = JSON.stringify(content, null, 2);
        } catch (e) {
          textToCopy = String(content);
        }
      }
    } else {
      textToCopy = String(content);
    }
    
    // 复制到剪贴板
    navigator.clipboard.writeText(textToCopy)
      .then(() => {
        message.success('内容已复制到剪贴板');
      })
      .catch((err) => {
        console.error('复制失败:', err);
        message.error('复制失败，请手动选择并复制');
      });
  };

  // 生成字段唯一标识
  const getFieldKey = (item: TaskResultItem, fieldConfig: FieldConfig, categoryIndex: number, itemIndex: number): string => {
    const itemId = getItemId(item, categoryIndex, itemIndex);
    return `${itemId}_${fieldConfig.field}`;
  };

  // 定位功能 - 优化版，利用现有弹窗机制并保存页面信息
  const locateByText = async (text: string, item?: TaskResultItem, fieldConfig?: FieldConfig, categoryIndex?: number, itemIndex?: number) => {
    if (!pdfContainerRef.value || !text || !text.trim()) return;
    
    // 检查字段是否支持PDF定位
    if (fieldConfig && !supportsPdfLocation(fieldConfig)) {
      console.log('Field does not support PDF location:', fieldConfig.field);
      return;
    }
    
    // 获取PDF源
    let pdfSource: string | undefined;
    if (fieldConfig) {
      const source = getFieldPdfSource(fieldConfig);
      pdfSource = source || undefined;
    }
    
    // 保存当前定位的字段信息，以便在检测到多页面时使用
    if (fieldConfig && item && categoryIndex !== undefined && itemIndex !== undefined) {
      currentSelectText.value = text;
      currentSelectFieldConfig.value = fieldConfig;
      currentSelectItem.value = item;
      currentSelectCategoryIndex.value = categoryIndex;
      currentSelectItemIndex.value = itemIndex;
      
      // 清理当前字段的页面按钮数据，重新获取
      const fieldKey = getFieldKey(item, fieldConfig, categoryIndex, itemIndex);
      console.log('fieldKey', fieldKey);
      delete fieldPageButtons.value[fieldKey];
      console.log('fieldPageButtons', fieldPageButtons.value);
    }
    
    // 检查是否已经有页面按钮，如果有直接使用第一个页面
    if (fieldConfig && item && categoryIndex !== undefined && itemIndex !== undefined) {
      const fieldKey = getFieldKey(item, fieldConfig, categoryIndex, itemIndex);
      if (fieldPageButtons.value[fieldKey] && fieldPageButtons.value[fieldKey].length > 0) {
        // 有页面按钮时，使用第一个页面进行定位
        try {
          await pdfContainerRef.value.locateByText(text, pdfSource);
          return;
        } catch (error) {
          console.error('PDF定位失败:', error);
        }
      }
    }
    
    try {
      // 先尝试用完整文本进行定位
      await pdfContainerRef.value.locateByText(text, pdfSource);
      
      // 延迟检查是否出现了页面选择弹窗
      setTimeout(() => {
        checkForPageModal();
      }, 300); // 等待弹窗显示
    } catch (error) {
      console.error('完整文本定位失败，尝试使用前20个字符定位:', error);
      
      // 如果完整文本定位失败，尝试用前10个字符再次定位
      const shortText = text.trim().substring(0,25);
      if (shortText && shortText !== text.trim()) {
        try {
          console.log('使用前25个字符进行定位:', shortText);
          message.warning('完整文本定位失败，尝试使用前25个字符定位');
          await pdfContainerRef.value.locateByText(shortText, pdfSource);
          
          // 延迟检查是否出现了页面选择弹窗
          setTimeout(() => {
            checkForPageModal();
          }, 300); // 等待弹窗显示
        } catch (shortError) {
          console.error('前25个字符定位也失败:', shortError);
          message.warning('文本定位失败，该内容可能不在PDF中');
        }
      } else {
        message.warning('文本定位失败，该内容可能不在PDF中');
      }
    }
  };

  // 通过页面按钮跳转
  const goToPageByButton = async (page: number, fieldConfig: FieldConfig) => {
    if (!pdfContainerRef.value) return;
    
    // 获取PDF源
    let pdfSource: string | undefined;
    if (fieldConfig) {
      const source = getFieldPdfSource(fieldConfig);
      pdfSource = source || undefined;
    }
    
    // 使用PDF定位功能，传入当前选中的文本
    if (currentSelectText.value) {
      try {
        // 使用新的直接定位方法，避免弹窗选择
        await pdfContainerRef.value.locateByTextAndPage(currentSelectText.value, page, pdfSource);
        message.success(`已定位到第${page}页`);
      } catch (error) {
        console.error('页面跳转失败:', error);
        message.error('页面跳转失败');
      }
    }
  };

  // 检测并提取页面选择弹窗中的页面信息
  const checkForPageModal = () => {
    const modal = document.querySelector('.ant-modal:not(.ant-modal-hidden)');
    if (modal && modal.textContent?.includes('请选择要跳转的页码')) {
      // 提取页面信息
      const pages: number[] = [];
      const modalButtons = document.querySelectorAll('.ant-modal:not(.ant-modal-hidden) .ant-btn');
      
      modalButtons.forEach(button => {
        const text = button.textContent || '';
        console.log('button', button.textContent);
        const match = text.match(/第(\d+)页/);
        if (match) {
          pages.push(parseInt(match[1]));
        }
      });
      console.log('pages', pages);
      // 如果有字段信息，创建页面按钮
      if (pages.length > 0 && currentSelectFieldConfig.value && currentSelectItem.value && 
          currentSelectCategoryIndex.value !== null && currentSelectItemIndex.value !== null) {
        const fieldKey = getFieldKey(
          currentSelectItem.value, 
          currentSelectFieldConfig.value, 
          currentSelectCategoryIndex.value, 
          currentSelectItemIndex.value
        );
        
        // 保存页面信息到状态变量
        fieldPageButtons.value[fieldKey] = pages;
      }
    }
  };

  // 初始化数据
  const initData = async () => {
    loading.value = true;
    try {
      // 首先加载配置
      await loadConfig();
      
      if (props.taskResultDetail) {
        if (config.value && config.value.mode === 'tabs' && availableTabs.value.length > 0) {
          // 使用第一个数据类别的名称作为默认tab
          currentTab.value = availableTabs.value[0].key;
        } else {
          if (props.taskResultDetail.length > 0) {
            activeCollapseKeys.value = ['0'];
          }
        }
        
        await nextTick();
        updateActiveItemKeys();
      }
    } catch (error) {
      console.error('初始化详情抽屉时出错', error);
    } finally {
      loading.value = false;
    }
  };

  // 事件处理
  const handleClose = () => {
    // 清理页面按钮状态
    fieldPageButtons.value = {};
    currentSelectText.value = '';
    currentSelectFieldConfig.value = null;
    currentSelectItem.value = null;
    currentSelectCategoryIndex.value = null;
    currentSelectItemIndex.value = null;
    
    emit('update:visible', false);
    emit('close');
  };

  const handlePdfLoaded = (data: any) => {
    console.log('PDF加载成功:', data);
  };

  const handlePdfError = (error: any) => {
    console.error('PDF加载失败:', error);
  };

  // 监听变化
  watch(() => props.visible, (newVal) => {
    if (newVal && props.taskResultDetail) {
      initData();
    }
  });

  watch([expandReadItems, expandAdoptedItems], () => {
    updateActiveItemKeys();
  });

  // 监听PDF配置变化，当配置变化时强制刷新PDF容器
  watch(() => pdfLayoutConfig.value, (newConfig, oldConfig) => {
    if (newConfig && oldConfig && 
        (newConfig.pdfLayout !== oldConfig.pdfLayout || 
         JSON.stringify(newConfig.pdfSources) !== JSON.stringify(oldConfig.pdfSources))) {
      nextTick(() => {
        if (pdfContainerRef.value) {
          // 强制PDF容器重新渲染
          pdfContainerRef.value.$forceUpdate && pdfContainerRef.value.$forceUpdate();
        }
      });
    }
  }, { deep: true });

  // 检查是否有对比内容（支持配置化对比字段）
  const hasComparisonContent = (item: TaskResultItem, fieldConfig: FieldConfig): boolean => {
    const comparisonField = getComparisonField(fieldConfig);
    return !!(item[comparisonField] && item[comparisonField].trim());
  };

  // 获取对比内容
  const getComparisonContent = (item: TaskResultItem, fieldConfig: FieldConfig): string => {
    const comparisonField = getComparisonField(fieldConfig);
    return item[comparisonField] || '';
  };
</script>

<style lang="less" scoped>
  :deep(.ant-drawer-body) {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
  }

  .universal-review-container,
  .content-container,
  .tabs-container,
  .single-content,
  :deep(.ant-tabs),
  :deep(.ant-tabs-content),
  :deep(.ant-tabs-tabpane),
  .category-items {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  :deep(.ant-tabs-nav) {
    flex-shrink: 0;
    background: #fff;
    z-index: 2;
  }

  .items-card-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    min-height: 0;
  }

  :deep(.ant-tabs-tab) {
    padding: 8px 16px;
    font-weight: 500;
  }

  .item-card {
    width: 100%;
    margin-bottom: 10px;
    cursor: pointer;
  }

  .item-card :deep(.ant-card-head-title) {
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: unset !important;
  }

  .expand-icon {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.45);
  }

  .item-header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
  }

  .item-info {
    display: flex;
    align-items: flex-start;
    flex: 1;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
  }

  .item-serial {
    margin-right: 12px;
    font-weight: bold;
    color: #1890ff;
  }

  .item-title {
    font-weight: 500;
    font-size: 14px;
    flex: 1;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    line-height: 1.5;
  }

  .item-actions {
    display: flex;
    align-items: flex-start;
    margin-left: 16px;
    flex-shrink: 0;
  }

  .item-content {
    padding: 16px;
  }

  .content-section {
    margin-bottom: 16px;
  }

  .section-title {
    font-weight: 500;
    margin-bottom: 8px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .title-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .comparison-btn {
    padding: 0 8px;
    font-size: 12px;
    height: 24px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    
    :deep(.anticon) {
      font-size: 12px;
      margin-right: 4px;
    }
    
    &:hover {
      border-color: #40a9ff;
      color: #40a9ff;
    }
  }

  .copy-btn {
    padding: 0 4px;
    font-size: 12px;
    height: 24px;
    
    :deep(.anticon) {
      font-size: 12px;
    }
  }

  .section-content {
    padding: 12px;
    background-color: #f9fbfd;
    border-radius: 4px;
    white-space: pre-wrap;
    max-height: 300px;
    overflow: auto;
  }

  .comparison-section {
    margin-top: 12px;
    border-top: 1px dashed #e8e8e8;
    padding-top: 12px;
  }

  .comparison-content {
    background-color: #fff7e6;
    border: 1px solid #ffd591;
    border-radius: 4px;
    
    &:hover {
      background-color: #fff1d6;
    }
  }

  .markdown-content {
    :deep(p) {
      margin-bottom: 8px;
    }

    :deep(ul), :deep(ol) {
      padding-left: 24px;
    }

    :deep(h1), :deep(h2), :deep(h3), :deep(h4), :deep(h5), :deep(h6) {
      margin-top: 16px;
      margin-bottom: 8px;
    }

    :deep(code) {
      background-color: #f5f5f5;
      padding: 2px 4px;
      border-radius: 4px;
    }

    :deep(pre) {
      background-color: #f5f5f5;
      padding: 12px;
      border-radius: 4px;
      overflow: auto;
    }

    :deep(blockquote) {
      border-left: 4px solid #ddd;
      padding-left: 16px;
      color: #666;
      margin: 16px 0;
    }

    :deep(table) {
      border-collapse: collapse;
      width: 100%;
      margin: 16px 0;

      th, td {
        border: 1px solid #e8e8e8;
        padding: 8px 12px;
      }

      th {
        background-color: #f8f8f8;
        font-weight: 500;
      }
    }
  }

  .ml-3 {
    margin-left: 12px;
  }

  .page-buttons {
    margin-top: 8px;
    padding: 8px 12px;
    background-color: #f0f9ff;
    border: 1px solid #bfdbfe;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
  }

  .page-buttons-label {
    font-size: 12px;
    color: #6b7280;
    margin-right: 4px;
  }

  .page-btn {
    font-size: 12px;
    height: 24px;
    padding: 0 8px;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    margin: 0 2px;
    
    &:hover {
      background-color: #dbeafe;
      border-color: #3b82f6;
      color: #1d4ed8;
    }
  }

  .drawer-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .status-switches {
    display: flex;
    align-items: center;
  }

  .split-layout {
    display: flex;
    height: 100%;
    overflow: hidden;
  }

  .split-layout.no-pdf-layout {
    justify-content: center;
  }

  .pdf-preview-wrapper {
    width: 50%;
    height: 100%;
    border-right: 1px solid #e8e8e8;
  }

  .content-container {
    width: 50%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .content-container.full-width {
    width: 100%;
  }

  .review-type-tabs {
    flex-shrink: 0;
    border-bottom: 1px solid #e8e8e8;
    background: #fff;
    
    :deep(.ant-tabs-nav) {
      margin-bottom: 0;
    }
    
    :deep(.ant-tabs-tab) {
      padding: 8px 16px;
      font-weight: 500;
      color: #666;
      
      &.ant-tabs-tab-active {
        color: #1890ff;
        font-weight: 600;
      }
    }
  }

  .tab-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
</style> 