<template>
  <el-dialog
    v-model="dialogVisible"
    title="查看匹配"
    width="900px"
    :before-close="handleClose"
  >
    <div class="match-preview-dialog">
      <div class="content-container">
        <!-- 左侧：匹配的数据 -->
        <div class="left-panel">
          <div class="panel-header">
            <h4>匹配的数据</h4>
            <span class="count-badge">{{ matchedData.length }}</span>
          </div>
          <div class="table-container">
            <el-table
              :data="matchedData"
              height="400"
              empty-text="暂无匹配数据"
              :header-cell-style="{ background: '#f0f7ff', color: '#606266' }"
            >
              <el-table-column
                type="index"
                label="序号"
                width="60"
                align="center"
              />
              <el-table-column
                prop="label"
                label="数据值"
                min-width="150"
                show-overflow-tooltip
              >
                <template #default="{ row }">
                  <span class="data-value">{{ row.label }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <!-- 分隔线 -->
        <div class="divider"></div>

        <!-- 右侧：不匹配的数据 -->
        <div class="right-panel">
          <div class="panel-header">
            <h4>不匹配的数据</h4>
            <span class="count-badge">{{ unmatchedData.length }}</span>
          </div>
          <div class="table-container">
            <el-table
              :data="unmatchedData"
              height="400"
              empty-text="暂无数据"
              :header-cell-style="{ background: '#f0f7ff', color: '#606266' }"
            >
              <el-table-column
                type="index"
                label="序号"
                width="60"
                align="center"
              />
              <el-table-column
                prop="label"
                label="数据值"
                min-width="150"
                show-overflow-tooltip
              >
                <template #default="{ row }">
                  <span class="data-value">{{ row.label }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>

      <!-- 底部按钮 -->
      <div class="dialog-footer">
        <el-button type="primary" @click="handleClose">关闭</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  matchedData: {
    type: Array,
    default: () => []
  },
  unmatchedData: {
    type: Array,
    default: () => []
  }
})

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

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 处理关闭
const handleClose = () => {
  dialogVisible.value = false
  emit('close')
}

// 监听对话框关闭，清空数据
watch(dialogVisible, (newVal) => {
  if (!newVal) {
    // 对话框关闭时，可以通过父组件清空数据
    emit('close')
  }
})
</script>

<style scoped lang="scss">
.match-preview-dialog {
  .content-container {
    display: flex;
    gap: 0;
    height: 450px;
  }

  .left-panel,
  .right-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f0f7ff;
    border-bottom: 1px solid #dcdfe6;
    
    h4 {
      margin: 0;
      font-size: 14px;
      font-weight: 600;
      color: #303133;
    }
    
    .count-badge {
      background: #1890ff;
      color: white;
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 500;
    }
  }

  .table-container {
    flex: 1;
    border: 1px solid #dcdfe6;
    border-top: none;
    border-radius: 0 0 4px 4px;
    overflow: hidden;
  }

  .divider {
    width: 1px;
    background: #dcdfe6;
    margin: 0 10px;
  }

  .data-value {
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 13px;
    color: #303133;
  }

  :deep(.el-table) {
    border: none;
    
    .el-table__header-wrapper {
      th {
        background: #f0f7ff !important;
        
        .cell {
          font-weight: 600;
        }
      }
    }
    
    .el-table__body-wrapper {
      .el-table__row {
        &:nth-child(even) {
          background-color: #fafafa;
        }
        
        &:hover {
          background-color: #f5f7fa;
        }
      }
    }
  }

  .dialog-footer {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .match-preview-dialog {
    .content-container {
      flex-direction: column;
      height: 600px;
    }
    
    .left-panel,
    .right-panel {
      flex: none;
      height: 250px;
    }
    
    .divider {
      width: 100%;
      height: 1px;
      margin: 10px 0;
    }
  }
}
</style>