<script lang="ts">
import type { PropType } from 'vue';
import { defineComponent } from 'vue';
import DiffItem from './DiffItem.vue';

interface CompareResult {
  baseBoxArea: string;
  baseDiffContent: string;
  baseDiffType: 'modify' | 'insert' | 'delete';
  basePageNum: number;
  compareBoxArea: string;
  compareDiffContent: string;
  compareDiffType: 'modify' | 'insert' | 'delete';
  comparePageNum: number;
  firstPageNum: number;
  secondPageNum: number;
  id: number;
}

interface Filter {
  type: 'all' | 'insert' | 'delete' | 'modify';
  label: string;
  color: string;
}

interface Stats {
  total: number;
  insert: number;
  delete: number;
  modify: number;
}

export default defineComponent({
  name: 'DiffResultPanel',
  components: {
    DiffItem
  },
  props: {
    compareResults: {
      type: Array as PropType<CompareResult[]>,
      required: true
    },
    selectedDiff: {
      type: Object as PropType<CompareResult | null>,
      default: null
    },
    taskId: {
      type: [Number, String],
      required: true
    },
    isPolling: {
      type: Boolean,
      default: false
    },
    status: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      currentFilter: 'all' as 'all' | 'insert' | 'delete' | 'modify',
      filters: [
        { type: 'all', label: '全部', color: '#666' },
        { type: 'insert', label: '新增', color: '#52c41a' },
        { type: 'delete', label: '删除', color: '#ff4d4f' },
        { type: 'modify', label: '修改', color: '#faad14' }
      ] as Filter[]
    };
  },
  computed: {
    filteredResults(): CompareResult[] {
      if (this.currentFilter === 'all') {
        return this.compareResults;
      }
      return this.compareResults.filter(item => item.compareDiffType === this.currentFilter);
    },
    stats(): Stats {
      return {
        total: this.compareResults.length,
        insert: this.compareResults.filter(item => item.compareDiffType === 'insert').length,
        delete: this.compareResults.filter(item => item.compareDiffType === 'delete').length,
        modify: this.compareResults.filter(item => item.compareDiffType === 'modify').length
      };
    },
    emptyDescription(): string {
      // 根据任务状态显示不同的空数据提示
      if (this.status === 3) {
        // 已完成状态，没有数据表示两个文档完全一致
        return '两个文档完全一致';
      }
      // 其他状态显示暂无数据
      return '暂无数据';
    }
  },

  methods: {
    setFilter(filterType: 'all' | 'insert' | 'delete' | 'modify'): void {
      this.currentFilter = filterType;
    },
    selectDiff(item: CompareResult): void {
      this.$emit('select-diff', item);
    },

    handleRecognizeAgain() {
      this.$emit('recognizeAgain', this.taskId);
    }
  }
});
</script>

<template>
  <div class="result-section">
    <div class="result-header">
      <div class="section-title">
        <div class="title-icon result">🔍</div>
        <div class="flex-y-center flex-1 justify-between">
          <h3 class="!m-0">差异分析结果</h3>
          <NPopconfirm v-if="taskId" @positive-click="handleRecognizeAgain">
            确认重新执行差异识别吗？
            <template #trigger>
              <NButton :loading="isPolling" type="success">重新差异识别</NButton>
            </template>
          </NPopconfirm>
        </div>
      </div>
      <div class="stats-info">
        <div class="stat-item">
          <span class="stat-label">总计</span>
          <span class="stat-value total">{{ stats.total }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">新增</span>
          <span class="stat-value insert">{{ stats.insert }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">修改</span>
          <span class="stat-value modify">{{ stats.modify }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">删除</span>
          <span class="stat-value delete">{{ stats.delete }}</span>
        </div>

      </div>
      <div class="filter-controls">
        <div class="filter-buttons">
          <button
            v-for="filter in filters"
            :key="filter.type"
            class="filter-btn"
            :class="[{ active: currentFilter === filter.type }]"
            @click="setFilter(filter.type)"
          >
            {{ filter.label }}
          </button>
        </div>
      </div>
    </div>
    <div class="result-list">
      <NSpin :show="isPolling" description="重新识别差异中..." class="h-full" content-class="h-full">
        <DiffItem
          v-for="item in filteredResults"
          :key="item.id"
          :item="item"
          :is-selected="!!(selectedDiff && selectedDiff.id === item.id)"
          @click="selectDiff(item)"
        />

        <NEmpty v-if="filteredResults.length === 0" class="h-full flex-center" :description="emptyDescription" />
      </NSpin>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.result-section {
  width: 420px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e8e8e8;

  .result-header {
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    h3 {
      margin: 0 0 16px 0;
      color: #262626;
      font-size: 18px;
      font-weight: 600;
    }
  }
}

.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  .title-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    font-weight: bold;
    &.result {
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }
  }
  h3 {
    margin: 0;
    color: #262626;
    font-size: 18px;
    font-weight: 600;
  }
}

.stats-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e8e8e8;
  margin-top: 12px;
}

.stat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 6px;
}

.stat-label {
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

.stat-value {
  font-size: 16px;
  font-weight: 700;
  color: #262626;
  &.total {
    color: #1890ff;
  }
  &.insert {
    color: #52c41a;
  }
  &.delete {
    color: #ff4d4f;
  }
  &.modify {
    color: #faad14;
  }
}

.filter-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  .filter-label {
    font-size: 12px;
    color: #666;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .filter-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    .filter-btn {
      padding: 8px 16px;
      border: 1px solid #d9d9d9;
      border-radius: 6px;
      background: white;
      color: #666;
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
      transition: all 0.3s;
      min-width: 60px;
      text-align: center;
      &:hover {
        border-color: #1890ff;
        color: #1890ff;
        background: #f0f8ff;
      }
      &.active {
        background: #1890ff;
        border-color: #1890ff;
        color: white;
        box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
      }
    }
  }
}

.result-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: #fafafa;
}

/* 滚动条样式 */
.result-list::-webkit-scrollbar {
  width: 8px;
}

.result-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.result-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.result-list::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .result-section {
    width: 380px;
  }
}

@media (max-width: 768px) {
  .result-section {
    width: 100%;
  }
}
</style>
