<template>
  <div class="app-container scroller">
    <PageTitle :back="true" @back="pageProjectManage">
      <template #title>
        返回项目管理
      </template>
    </PageTitle>
    
    <div class="app-container__body">
      <div class="version-compare-container">
        <!-- 上方：任务版本选择 -->
        <div class="version-selection">
          <h2 class="section-title">任务详情</h2>
          <div class="version-cards">
            <el-checkbox-group style="font-size: unset;line-height: unset;" v-model="selectedVersions" :max="2" @change="handleVersionChange">
              <el-card 
                v-for="version in versionList" 
                :key="version.id"
                class="version-card"
                :class="{ 'card-selected': selectedVersions.includes(version.id) }"
              >
                <template #header>
                  <div class="card-header">
                    <el-checkbox :label="version.id">
                      <span class="version-name">{{ version.name }}</span>
                    </el-checkbox>
                  </div>
                </template>
                
                <div class="card-content">
                  <div class="info-item">
                    <span class="label">任务名称：</span>
                    <span class="value">{{ version.taskName }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">操作人：</span>
                    <span class="value">{{ version.operator }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">操作时间：</span>
                    <span class="value">{{ version.operateTime }}</span>
                  </div>
                </div>
              </el-card>
            </el-checkbox-group>
          </div>
        </div>

        <!-- 下方：对比结果 -->
        <div class="compare-result" v-if="selectedVersions.length === 2">
          <div class="filter-section">
            <div class="filter-item">
              <span class="filter-label">SCHEMA：</span>
              <el-select v-model="filters.schema" placeholder="请选择SCHEMA" clearable>
                <el-option
                  v-for="schema in schemaList"
                  :key="schema"
                  :label="schema"
                  :value="schema"
                />
              </el-select>
            </div>
            
            <div class="filter-item">
              <span class="filter-label">表：</span>
              <el-select v-model="filters.table" placeholder="请选择表" clearable>
                <el-option
                  v-for="table in tableList"
                  :key="table"
                  :label="table"
                  :value="table"
                />
              </el-select>
            </div>
            
            <div class="filter-item">
              <span class="filter-label">列：</span>
              <el-select v-model="filters.column" placeholder="请选择列" clearable>
                <el-option
                  v-for="column in columnList"
                  :key="column"
                  :label="column"
                  :value="column"
                />
              </el-select>
            </div>
          </div>

          <!-- 对比表格 - 按照图片修改表头 -->
          <div class="compare-table">
            <el-table
              :data="filteredTableData"
              style="width: 100%"
              :header-cell-style="{ background: '#f0f7ff', color: '#606266', fontWeight: 'bold' }"
              empty-text="暂无数据"
            >
              <!-- 基础信息列 -->
              <el-table-column prop="schema" label="SCHEMA" width="120" fixed align="center" />
              <el-table-column prop="tableName" label="表名" width="150" align="center" />
              <el-table-column prop="columnName" label="列名" width="150" align="center" />

              <!-- 数据域合并表头 -->
              <el-table-column label="数据域" align="center" header-align="center">
                <el-table-column 
                  :label="getVersionName(selectedVersions[0])" 
                  width="180"
                  align="center"
                >
                  <template #default="{ row }">
                    <span>{{ row[`dataDomain_${selectedVersions[0]}`] || '-' }}</span>
                  </template>
                </el-table-column>
                
                <el-table-column 
                  :label="getVersionName(selectedVersions[1])" 
                  width="180"
                  align="center"
                >
                  <template #default="{ row }">
                    <span>{{ row[`dataDomain_${selectedVersions[1]}`] || '-' }}</span>
                  </template>
                </el-table-column>
              </el-table-column>

              <!-- 数据域生成规则合并表头 -->
              <el-table-column label="数据域生成规则" align="center" header-align="center">
                <el-table-column 
                  :label="getVersionName(selectedVersions[0])" 
                  width="200"
                  align="center"
                >
                  <template #default="{ row }">
                    <span>{{ row[`rule_${selectedVersions[0]}`] || '-' }}</span>
                  </template>
                </el-table-column>
                
                <el-table-column 
                  :label="getVersionName(selectedVersions[1])" 
                  width="200"
                  align="center"
                >
                  <template #default="{ row }">
                    <span>{{ row[`rule_${selectedVersions[1]}`] || '-' }}</span>
                  </template>
                </el-table-column>
              </el-table-column>

              <!-- 是否确认合并表头 -->
              <el-table-column label="是否确认" align="center" header-align="center">
                <el-table-column 
                  :label="getVersionName(selectedVersions[0])" 
                  width="150"
                  align="center"
                >
                  <template #default="{ row }">
                    <el-tag 
                      :type="row[`confirmed_${selectedVersions[0]}`] ? 'success' : 'warning'"
                      size="small"
                    >
                      {{ row[`confirmed_${selectedVersions[0]}`] ? '已确认' : '未确认' }}
                    </el-tag>
                  </template>
                </el-table-column>
                
                <el-table-column 
                  :label="getVersionName(selectedVersions[1])" 
                  width="150"
                  align="center"
                >
                  <template #default="{ row }">
                    <el-tag 
                      :type="row[`confirmed_${selectedVersions[1]}`] ? 'success' : 'warning'"
                      size="small"
                    >
                      {{ row[`confirmed_${selectedVersions[1]}`] ? '已确认' : '未确认' }}
                    </el-tag>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <!-- 未选择足够版本时的提示 -->
        <div class="empty-state" v-else>
          <div class="empty-content">
            <el-empty description="请选择两个版本进行对比" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

// 选中的版本
const selectedVersions = ref([])

// 版本列表数据
const versionList = ref([
  {
    id: 'v1',
    name: '版本一',
    taskName: '1234',
    operator: 'admin',
    operateTime: '2025-08-23 09:16:34'
  },
  {
    id: 'v2',
    name: '版本二',
    taskName: '5678',
    operator: 'admin',
    operateTime: '2025-08-23 10:20:15'
  },
  {
    id: 'v3',
    name: '版本三',
    taskName: '9012',
    operator: 'admin',
    operateTime: '2025-08-23 11:30:45'
  }
])

// 筛选条件
const filters = ref({
  schema: '',
  table: '',
  column: ''
})

// 模拟筛选选项数据
const schemaList = ref(['schema1', 'schema2', 'schema3'])
const tableList = ref(['table1', 'table2', 'table3'])
const columnList = ref(['column1', 'column2', 'column3'])

// 表格数据
const tableData = ref([])

// 版本变化处理
const handleVersionChange = (selectedIds) => {
  if (selectedIds.length === 2) {
    fetchCompareData(selectedIds)
  } else {
    tableData.value = []
  }
}

// 获取版本名称
const getVersionName = (versionId) => {
  const version = versionList.value.find(v => v.id === versionId)
  return version ? version.name : versionId
}

// 模拟获取对比数据
const fetchCompareData = async (versionIds) => {
  console.log('获取对比数据，版本:', versionIds)
  
  try {
    const mockData = [
      {
        schema: 'schema1',
        tableName: 'table1',
        columnName: 'column1',
        dataDomain_v1: '个人信息',
        dataDomain_v2: '联系方式',
        rule_v1: '按身份证号字段查询',
        rule_v2: '按手机号字段查询',
        confirmed_v1: true,
        confirmed_v2: false
      },
      {
        schema: 'schema1',
        tableName: 'table1',
        columnName: 'column2',
        dataDomain_v1: '金融数据',
        dataDomain_v2: '金融数据',
        rule_v1: '按银行卡号字段查询',
        rule_v2: '按银行卡号字段查询',
        confirmed_v1: true,
        confirmed_v2: true
      },
      {
        schema: 'schema2',
        tableName: 'table2',
        columnName: 'column1',
        dataDomain_v1: '联系方式',
        dataDomain_v2: '个人信息',
        rule_v1: '按邮箱字段查询',
        rule_v2: '按身份证号字段查询',
        confirmed_v1: false,
        confirmed_v2: true
      }
    ]
    
    tableData.value = mockData
    ElMessage.success('对比数据加载成功')
  } catch (error) {
    ElMessage.error('获取对比数据失败')
  }
}

// 过滤后的表格数据
const filteredTableData = computed(() => {
  let data = tableData.value
  
  if (filters.value.schema) {
    data = data.filter(item => item.schema === filters.value.schema)
  }
  
  if (filters.value.table) {
    data = data.filter(item => item.tableName === filters.value.table)
  }
  
  if (filters.value.column) {
    data = data.filter(item => item.columnName === filters.value.column)
  }
  
  return data
})

// 监听筛选条件变化
watch(filters, () => {
  console.log('筛选条件变化:', filters.value)
}, { deep: true })
</script>

<style lang="scss" scoped>
.version-compare-container {
  padding: 20px;
  background: #f5f7fa;
}

.version-selection {
  background: white;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.section-title {
  margin: 0 0 20px 0;
  color: #303133;
  font-size: 20px;
  font-weight: 600;
}

.version-cards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.version-card {
  flex: 1;
  min-width: 280px;
  min-height: 180px;
  border: 2px solid #dcdfe6;
  transition: all 0.3s ease;
  
  &.card-selected {
    border-color: #1890ff;
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
  }
}

.card-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  
  :deep(.el-checkbox) {
    margin: 0;
    
    .el-checkbox__label {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }
}

.card-content {
  // padding: 16px;
}

.info-item {
  display: flex;
  // align-items: center;
  // margin-bottom: 12px;
  font-size: 14px;
  
  .label {
    color: #606266;
    font-weight: 500;
    // min-width: 70px;
  }
  
  .value {
    color: #303133;
  }
}

.compare-result {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.filter-section {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  
  .filter-label {
    font-size: 14px;
    color: #606266;
    font-weight: 500;
  }
}

.compare-table {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.empty-state {
  background: white;
  border-radius: 8px;
  padding: 60px 24px;
  text-align: center;
}

// 表头样式调整
:deep(.el-table) {
  .el-table__header-wrapper {
    .el-table__cell {
      background: #f0f7ff;
      
      &.is-leaf {
        border-bottom: 1px solid #e0e0e0;
      }
      
      .cell {
        white-space: nowrap;
        font-weight: bold;
        color: #606266;
      }
    }
  }
  
  // 嵌套表头样式
  .el-table__header {
    .el-table__cell {
      padding: 8px 0;
      
      &:not(.is-leaf) {
        background: #e6f7ff;
        font-size: 14px;
      }
    }
  }
}

:deep(.el-checkbox-group){
  display: flex;
  font-size: 14px;
  flex-wrap: wrap;
  .el-card {
    margin-left: 10px;
    margin-top: 10px;
  }
}
</style>