<template>
  <el-dialog
    v-model="dialogVisible"
    title="智能发现"
    width="500px"
    :before-close="handleClose"
  >
    <div class="smart-discovery-dialog">
      <!-- 表格内容 -->
      <div class="discovery-table">
        <el-table
          height="400"
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{ background: '#f5f7fa', color: '#606266', fontWeight: 'bold' }"
          empty-text="暂无发现版本"
        >
          <!-- 发现版本列 -->
          <el-table-column prop="version" label="发现版本" >
            <template #default="{ row }">
              <div class="version-info">
                <span class="version-label">任务版本：</span>
                <span class="version-value">{{ row.version }}</span>
              </div>
            </template>
          </el-table-column>

          <!-- 操作列 -->
          <el-table-column prop="action" label="操作" width="120" align="center">
            <template #default="{ row }">
              <el-button
                type="primary"
                link
                size="small"
                @click="handleSmartDiscover(row)"
                class="discover-btn"
              >
                智能发现
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

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

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

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  // 发现版本数据
  discoveryData: {
    type: Array,
    default: () => []
  }
})

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

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

// 表格数据
const tableData = ref([
  { version: '12123' }
])

// 处理智能发现
const handleSmartDiscover = (row) => {
  console.log('开始智能发现:', row.version)
  emit('discover', row)
  ElMessage.success(`开始对版本 ${row.version} 进行智能发现`)
  dialogVisible.value = false
}

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

// 监听外部传入的数据
watch(() => props.discoveryData, (newData) => {
  if (newData && newData.length > 0) {
    tableData.value = newData
  }
}, { immediate: true })

// 暴露方法
defineExpose({
  openDialog: (data = []) => {
    if (data && data.length > 0) {
      tableData.value = data
    }
    dialogVisible.value = true
  }
})
</script>

<style scoped lang="scss">
.smart-discovery-dialog {
  .discovery-table {
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
  }

  .version-info {
    padding: 8px 0;
    
    .version-label {
      color: #606266;
      font-size: 13px;
    }
    
    .version-value {
      color: #303133;
      font-weight: 500;
      font-size: 13px;
    }
  }

  .discover-btn {
    font-weight: 500;
    
    &:hover {
      color: #1890ff;
    }
  }

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

// 表格样式调整
:deep(.el-table) {
  border-radius: 4px;
  
  .el-table__header-wrapper {
    th {
      background: #f5f7fa !important;
    }
  }
  
  .el-table__body-wrapper {
    .el-table__row {
      &:hover {
        background-color: #f5f7fa;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .smart-discovery-dialog {
    .discovery-table {
      overflow-x: auto;
    }
    
    :deep(.el-table) {
      min-width: 300px;
    }
  }
}
</style>