<script setup name="DiscoverProcess">
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 WaterWaveChart from './modules/WaterWaveChart.vue'
// import AddDiscoveryDialog from './modules/AddDiscoveryDialog.vue' // 引入新增发现任务弹窗

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

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

  router.push({
    path: '/project/Project'
  })
}

// 进度数据
const progress = ref(100) // 100% 进度
const completedCount = ref(20) // 已完成表数量
const totalCount = ref(20) // 总表数量

// 执行失败数据
const failureData = ref([
  {
    category: '数据连接',
    severity: '高',
    executeTime: '2025-08-23 10:30'
  },
  {
    category: '权限验证',
    severity: '中',
    executeTime: '2025-08-23 10:25'
  },
  {
    category: '资源限制',
    severity: '低',
    executeTime: '2025-08-23 10:20'
  }
])

// 已完成数据
const completedData = ref([
  { discoveryNo: 1, tableName: 'gen_table', schema: 'ry', discoveryTime: '2025-08-23 04:15:23' },
  { discoveryNo: 2, tableName: 'gen_table_column', schema: 'ry', discoveryTime: '2025-08-23 04:15:24' },
  { discoveryNo: 3, tableName: 'sys_config', schema: 'ry', discoveryTime: '2025-08-23 04:15:25' },
  { discoveryNo: 4, tableName: 'sys_dept', schema: 'ry', discoveryTime: '2025-08-23 04:15:26' },
  { discoveryNo: 5, tableName: 'sys_dict_data', schema: 'ry', discoveryTime: '2025-08-23 04:15:27' },
  { discoveryNo: 6, tableName: 'sys_dict_type', schema: 'ry', discoveryTime: '2025-08-23 04:15:28' },
  { discoveryNo: 7, tableName: 'sys_job', schema: 'ry', discoveryTime: '2025-08-23 04:15:29' },
  { discoveryNo: 8, tableName: 'sys_job_log', schema: 'ry', discoveryTime: '2025-08-23 04:15:30' },
  { discoveryNo: 9, tableName: 'sys_logininfor', schema: 'ry', discoveryTime: '2025-08-23 04:15:31' },
  { discoveryNo: 10, tableName: 'sys_menu', schema: 'ry', discoveryTime: '2025-08-23 04:15:32' },
  { discoveryNo: 11, tableName: 'sys_notice', schema: 'ry', discoveryTime: '2025-08-23 04:15:33' },
  { discoveryNo: 12, tableName: 'sys_oper_log', schema: 'ry', discoveryTime: '2025-08-23 04:15:34' },
  { discoveryNo: 13, tableName: 'sys_post', schema: 'ry', discoveryTime: '2025-08-23 04:15:35' },
  { discoveryNo: 14, tableName: 'sys_role', schema: 'ry', discoveryTime: '2025-08-23 04:15:36' }
])

// 严重性标签类型
const getSeverityType = (severity) => {
  const types = {
    '高': 'danger',
    '中': 'warning',
    '低': 'info'
  }
  return types[severity] || 'info'
}

// 查看结果处理
const handleCatResult = () => {
  console.log('查看详细结果')
  emit('page','discoverResult')
}
</script>

<template>
  <div class="app-container scroller">
    <PageTitle :back="true" @back="pageProjectManage">
      <template #title>
        返回项目管理
      </template>

    </PageTitle>
    
    <div class="app-container__body">

      <div class="discovery-progress-container">
        <div class="layout-container">
          <!-- 左侧区域 -->
          <div class="left-panel">
            <!-- 水波纹进度图表 -->
            <div class="chart-section">
              <div class="chart-container">
                <WaterWaveChart :usage="progress" color="#1890ff" />
              </div>
              
              <div>完成表数:{{ completedCount }}</div>
            </div>
            
            <!-- 执行失败表格 -->
            <div class="failure-table-section">
              <div class="section-header">
                <span class="title">执行失败</span>
              </div>
              <el-table
                :data="failureData"
                style="width: 100%"
                height="300px"
                empty-text="暂无数据"
                :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
              >
                <el-table-column prop="category" label="类别" min-width="120" />
                <el-table-column prop="severity" label="严重性" min-width="100">
                  <template #default="{ row }">
                    <el-tag :type="getSeverityType(row.severity)" size="small">
                      {{ row.severity }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="executeTime" label="执行时间" min-width="140" />
              </el-table>
            </div>
          </div>

          <!-- 右侧区域 -->
          <div class="right-panel">
            <div class="completed-table-section">
              <div class="section-header">
                <span class="title">已完成</span>
                <el-button
                  type="primary"
                  @click="handleCatResult"
                >查看结果</el-button>
              </div>
              <el-table
                :data="completedData"
                height="600px"
                style="width: 100%"
                :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
                empty-text="暂无数据"
              >
                <el-table-column prop="discoveryNo" label="发现序号" width="100" align="center" />
                <el-table-column prop="tableName" label="发现表名" min-width="150" />
                <el-table-column prop="schema" label="SCHEMA" width="100" />
                <el-table-column prop="discoveryTime" label="发现时间" width="160" />
              </el-table>
            </div>
          </div>
        </div>
      </div>

    </div>



  </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-progress-container {
  padding: 20px;
  background: #f5f7fa;
  // min-height: 100vh;
}

.layout-container {
  display: flex;
  gap: 20px;
  // height: calc(100vh - 100px);
}

.left-panel {
 flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.right-panel {
  flex: 1;
  min-width: 0; 
}

.chart-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  height: 300px;
  display: flex;
  align-items: center;
  padding-right: 40px;
  .chart-container {
    height: 100%;
    flex: 1;
  }
}

.failure-table-section,
.completed-table-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.section-header {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
  }
}

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

// // 右侧表格特殊样式
// .completed-table-section {
//   :deep(.el-table) {
//     .el-table__header-wrapper {
//       th {
//         background: #1890ff;
//         // color: white;
//       }
//     }
//   }
// }

// // 响应式设计
// @media (max-width: 1200px) {
//   .layout-container {
//     flex-direction: column;
//     height: auto;
//   }
  
//   .left-panel,
//   .right-panel {
//     flex: none;
//   }
// }
</style>