<template>
  <el-dialog
    v-model="dialogVisible"
    title="查看匹配"
    width="900px"
    :before-close="handleClose"
  >
    <div class="match-preview-dialog">
      <div class="match-content">
        <!-- 左侧：匹配的数据 -->
        <div class="match-section">
          <div class="section-header">
            <span class="section-title">匹配的数据</span>
          </div>
          <el-table
            :data="matchedData"
            style="width: 100%"
            height="400"
            :header-cell-style="{ background: '#f0f7ff', color: '#606266', fontWeight: 'bold' }"
            empty-text="暂无匹配数据"
          >
            <el-table-column prop="value" label="匹配的数据" align="center">
              <template #default="{ row }">
                <span class="match-value">{{ row.value }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 右侧：不匹配的数据 -->
        <div class="match-section">
          <div class="section-header">
            <span class="section-title">不匹配的数据</span>
          </div>
          <el-table
            :data="unmatchedData"
            style="width: 100%"
            height="400"
            :header-cell-style="{ background: '#f0f7ff', color: '#606266', fontWeight: 'bold' }"
            empty-text="暂无数据"
          >
            <el-table-column prop="value" label="不匹配的数据" align="center">
              <template #default="{ row }">
                <span class="unmatch-value">{{ row.value }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

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

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  // 匹配的数据
  matchedData: {
    type: Array,
    default: () => []
  },
  // 不匹配的数据
  unmatchedData: {
    type: Array,
    default: () => []
  }
})

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

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

// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false
}

// 暴露方法
defineExpose({
  openDialog: () => {
    dialogVisible.value = true
  }
})
</script>

<style scoped lang="scss">
.match-preview-dialog {
  .match-content {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
  }

  .match-section {
    flex: 1;
    background: #fafafa;
    border-radius: 6px;
    overflow: hidden;
  }

  .section-header {
    background: #f0f7ff;
    padding: 12px 16px;
    border-bottom: 1px solid #dcdfe6;
    
    .section-title {
      font-size: 14px;
      font-weight: 600;
      color: #303133;
    }
  }

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

  .match-value {
    color: #52c41a;
    font-weight: 500;
  }

  .unmatch-value {
    color: #ff4d4f;
    font-weight: 500;
  }

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

// 响应式设计
@media (max-width: 768px) {
  .match-preview-dialog {
    .match-content {
      flex-direction: column;
    }
    
    .match-section {
      min-height: 200px;
    }
  }
}
</style>