<script setup name="DiscoverResult">
import { getCurrentInstance, reactive, ref, toRefs } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

import { useRouter } from 'vue-router'
import useAppStore from '@/store/modules/app'
import usePermissionStore from '@/store/modules/permission'
import { changeRoute } from '@/utils/switchRoute'

import DomainRuleDialog from './modules/DomainRuleDialog.vue'
import MatchPreviewDialog from './modules/MatchPreviewDialog.vue'

const appStore = useAppStore()
const permissionStore = usePermissionStore()
const router = useRouter()
const emit = defineEmits(['page'])
const { proxy } = getCurrentInstance()

const props = defineProps({
  listItem: {
    type: Object,
    default: () => ({})
  }
})
function pageProjectManage() {
  changeRoute()

  router.push({
    path: '/project/Project'
  })
}
// 折叠面板激活项
const activeNames = ref('gen_table')

// gen_table 数据
const genTableData = ref([
  { index: 1, field: 'business_name', fieldDesc: '', samplingInfo: '0/0/0%', dataDomain: '设置', discoveryRule: '', status: '未确认' },
  { index: 2, field: 'business_name...', fieldDesc: '', samplingInfo: '0/0/0%', dataDomain: '设置', discoveryRule: '', status: '未确认' },
  { index: 3, field: 'class_name', fieldDesc: '', samplingInfo: '0/0/0%', dataDomain: '设置', discoveryRule: '', status: '未确认' },
  { index: 4, field: 'create_by', fieldDesc: '', samplingInfo: '0/0/0%', dataDomain: '设置', discoveryRule: '', status: '未确认' },
  { index: 5, field: 'create_time', fieldDesc: '', samplingInfo: '0/0/0%', dataDomain: '设置', discoveryRule: '', status: '未确认' },
  { index: 6, field: 'function_author', fieldDesc: '', samplingInfo: '0/0/0%', dataDomain: '设置', discoveryRule: '', status: '未确认' }
])

// 其他表格数据
const allTableNames = ref([
  { name: 'gen_table', sensitiveCount: 1 },
  { name: 'ry.gen_table_column', sensitiveCount: 0 },
  { name: 'ry.sys_config', sensitiveCount: 0 },
  { name: 'ry.sys_dept', sensitiveCount: 1 },
  { name: 'ry.sys_dict_data', sensitiveCount: 0 },
  { name: 'ry.sys_dict_type', sensitiveCount: 0 },
  { name: 'ry.sys_job', sensitiveCount: 0 },
  { name: 'ry.sys_job_log', sensitiveCount: 0 },
  { name: 'ry.sys_logininfor', sensitiveCount: 0 },
  { name: 'ry.sys_menu', sensitiveCount: 0 }
])

const selectAll = ref(false)
/**
 * 显示敏感字段切换
 */
const displaySensitive = ()=>{
  console.log('显示敏感字段切换')
}

/**
 * 批量设置规则
 */
const batchSettingRules = ()=>{
  console.log('批量设置规则')
}
/**
 * 确认所有
 */
const confirmAll = ()=>{
  console.log('确认所有')
}
/**
 * 取消所有
 */
const cancelAll = ()=>{
  console.log('取消所有')
}
/**
 * 保存
 */
const handleSave = ()=>{
  console.log('保存')
}
/**
 * 后退
 */
const handleBack = ()=>{
  console.log('后退')
}

const handleChangeTableByCollapse = ()=>{
  console.log('切换表格显示方式')
}

const domainRuleDialogRef = ref()
const domainRuleDialogVisible = ref(false)
const currentRowData = ref(null)

// 打开设置弹窗
const openSettingDialog = (row) => {
  currentRowData.value = row
  // 方法1：使用ref调用子组件方法
  // domainRuleDialogRef.value?.openDialog()
  
  // 方法2：或者直接控制visible
  domainRuleDialogVisible.value = true
}

// 处理规则确认
const handleRuleConfirm = (ruleData) => {
  console.log('选择的规则:', ruleData)
  if (currentRowData.value) {
    currentRowData.value.discoveryRule = ruleData.ruleLabel
    currentRowData.value.dataDomain = ruleData.domainLabel
    // 同时保存value值用于下次打开时回显
    currentRowData.value.discoveryRuleValue = ruleData.rule
    currentRowData.value.dataDomainValue = ruleData.domain
  }
}



const matchPreviewDialogRef = ref()
const matchPreviewDialogVisible = ref(false)
const currentRowDataPreview = ref(null)

// 模拟匹配数据
const matchedData = ref([
  { value: '15888888888' },
  { value: '15888888888' },
  { value: '15888888888' },
  { value: '15888888888' },
  { value: '15888888888' },
  { value: '15888888888' },
  { value: '15888888888' },
  { value: '15888888888' },
  { value: '15888888888' },
  { value: '15888888888' }
])

const unmatchedData = ref([]) // 空数组，显示"暂无数据"

// 打开匹配预览弹窗
const handleMatch = (row) => {
  console.log('匹配预览:', row)
  currentRowDataPreview.value = row
  
  // 根据行数据获取匹配结果（这里需要根据实际业务逻辑实现）
  // const matchResult = getMatchResult(row)
  // matchedData.value = matchResult.matched
  // unmatchedData.value = matchResult.unmatched
  
  // 打开弹窗
  matchPreviewDialogVisible.value = true
}

// 获取匹配结果的方法（需要根据实际业务实现）
const getMatchResult = (row) => {
  // 这里应该是您的业务逻辑，返回匹配和不匹配的数据
  return {
    matched: matchedData.value,
    unmatched: unmatchedData.value
  }
}





</script>

<template>
  <div class="app-container scroller">
    <PageTitle :back="true" @back="pageProjectManage">
      <template #title>
        返回项目管理
      </template>
      <template #buttons>
        <el-button
          type="success"
          @click="batchSettingRules"
        > 
         批量设置规则
        </el-button>
        <el-button
          type="primary"
          @click="confirmAll"
        > 
          确认所有
        </el-button>
        <el-button
          type="danger"
          @click="cancelAll"
        > 
          取消所有
        </el-button>
        <el-button
          type="success"
          @click="handleSave"
        > 
          保存
        </el-button>
        <el-button
          type="info"
          @click="handleBack"
        > 
          后退
        </el-button>

        <el-checkbox style="margin-left: 10px;" v-model="selectAll" @change="displaySensitive" class="select-all-checkbox">仅显示敏感字段</el-checkbox>
        
      </template>
    </PageTitle>
    
    <div class="app-container__body">

      <div class="discovery-report-container">
        <!-- 上方：发现任务执行报告概览 -->
        <div class="report-overview">
          <h2 class="report-title">发现任务执行报告</h2>
          <div class="overview-cards">
            <el-descriptions :column="4" border>
              <el-descriptions-item label="任务运行时间">
                <span class="highlight-text">911毫秒</span>
              </el-descriptions-item>
              <el-descriptions-item label="任务总对象数">
                <span class="highlight-text">20</span>
              </el-descriptions-item>
              <el-descriptions-item label="发现敏感对象数(表/文件)">
                <span class="highlight-text">2</span>
              </el-descriptions-item>
              <el-descriptions-item label="任务总列数">
                <span class="highlight-text">225</span>
              </el-descriptions-item>
              <el-descriptions-item label="发现敏感列数">
                <span class="highlight-text">2</span>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>

        <!-- 下方：详细数据表格 -->
        <div class="detailed-data">
          <el-collapse v-model="activeNames" accordion @change="handleChangeTableByCollapse">
            <!-- 第一个表格 -->
            <el-collapse-item :name="item.name" v-for="(item, index) in allTableNames" :key="index">
              <template #title>
                <span class="collapse-title">{{ item.name }}</span>
                <span class="sensitive-count">{{item.sensitiveCount}}个敏感数据</span>
              </template>
              <el-table :data="genTableData" height="300px" style="width: 100%;">
                <el-table-column prop="index" label="序号" width="60" align="center" fixed />
                <el-table-column prop="field" label="字段" min-width="120" />
                <el-table-column prop="fieldDesc" label="字段说明" min-width="150" />
                <el-table-column label="采样数/有效采样数/匹配率" min-width="180">
                  <template #default="{ row }">
                    {{ row.samplingInfo }}
                  </template>
                </el-table-column>
                <el-table-column prop="dataDomain" label="数据域" min-width="100">
                  <template #default="scope">
                    <el-button 
                      v-if="scope.row.discoveryRule" 
                      type="primary" 
                      plain
                      size="small"
                      @click="openSettingDialog(scope.row)"
                    >
                      {{ scope.row.discoveryRule }}
                    </el-button>
                    <el-button 
                      v-else 
                      plain
                      type="primary" 
                      size="small"
                      @click="openSettingDialog(scope.row)"
                    >
                      设置
                    </el-button>
                  </template>
                </el-table-column>
                <el-table-column prop="discoveryRule" label="数据发现规则" min-width="150" />
                <el-table-column prop="status" label="梳理" min-width="100">
                  <template #default>
                    <el-tag size="small">未确认</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作" min-width="120" align="center" fixed="right">
                  <template #default="scope">
                    <el-button type="primary" size="small" @click="handleMatch(scope.row)">匹配预览</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-collapse-item>

          </el-collapse>
        </div>
      </div>

    </div>

    <DomainRuleDialog
      v-model="domainRuleDialogVisible"
      :selected-data="currentRowData ? {
        domain: currentRowData.dataDomainValue,
        rule: currentRowData.discoveryRuleValue
      } : {}"
      @confirm="handleRuleConfirm"
    />
    <!-- 匹配预览弹窗 -->
    <MatchPreviewDialog
      v-model="matchPreviewDialogVisible"
      :matched-data="matchedData"
      :unmatched-data="unmatchedData"
    />

  </div>
</template>

<style lang="scss" scoped>


  .flex-container { 
    display: flex;
  }

  .align-center {
    align-items: center;
  }

  .justify-between {
    justify-content: space-between;
  }

  .flex1 {
    flex: 1;
  }
  .flex-wrap {
    flex-direction: wrap;
  }



.discovery-report-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

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

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

.overview-content {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.main-cards {
  flex: 1;
}

.sensitive-column-card {
  background: #f0f7ff;
  border: 1px solid #1890ff;
  border-radius: 6px;
  padding: 20px;
  min-width: 150px;
  text-align: center;
  
  .card-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .card-label {
    color: #606266;
    font-size: 14px;
  }
  
  .card-value {
    color: #1890ff;
    font-size: 24px;
    font-weight: 600;
  }
}

:deep(.el-descriptions) {
  .el-descriptions__header {
    display: none;
  }
  
  .el-descriptions__body {
    background: #f0f7ff;
    border-radius: 6px;
    
    .el-descriptions__table {
      tbody {
        tr {
          background: transparent;
          
          &:hover {
            background: #e6f7ff;
          }
        }
      }
    }
  }
}

.highlight-text {
  color: #1890ff;
  font-weight: 600;
  font-size: 16px;
}

.detailed-data {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

:deep(.el-collapse) {
  border: none;
  
  .el-collapse-item {
    margin-bottom: 12px;
    
    &__header {
      background: #f0f7ff;
      border: 1px solid #1890ff;
      border-radius: 4px;
      padding: 0 16px;
      height: 48px;
      font-weight: 600;
      
      .collapse-title {
        color: #303133;
        font-size: 14px;
      }
      
      .sensitive-count {
        color: #1890ff;
        margin-left: 12px;
        font-size: 13px;
        font-weight: normal;
      }
    }
    
    &__wrap {
      border: none;
    }
    
    &__content {
      padding: 0;
      border: 1px solid #e0e0e0;
      border-top: none;
      border-radius: 0 0 4px 4px;
    }
  }
}

// 表格样式
:deep(.el-table) {
  border-radius: 0 0 4px 4px;
  
  .el-table__header-wrapper {
    th {
      background: #f0f7ff;
      color: #606266;
      font-weight: 600;
      
      .cell {
        font-weight: 600;
      }
    }
  }
  
  .el-table__body-wrapper {
    .el-table__row {
      &:nth-child(even) {
        background-color: #fafafa;
      }
      
      &:hover {
        background-color: #f5f7fa;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .discovery-report-container {
    padding: 12px;
  }
  
  .report-overview {
    padding: 16px;
  }
  
  .overview-content {
    flex-direction: column;
  }
  
  .sensitive-column-card {
    width: 100%;
  }
  
  :deep(.el-descriptions) {
    .el-descriptions__body {
      .el-descriptions__table {
        tbody {
          tr {
            display: flex;
            flex-wrap: wrap;
            
            .el-descriptions__cell {
              flex: 1 0 50%;
              min-width: 120px;
            }
          }
        }
      }
    }
  }
}
</style>