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

import { useRouter } from 'vue-router'

import usePermissionStore from '@/store/modules/permission'
import { changeRoute } from '@/utils/switchRoute'

import WaterWaveChart from './modules/WaterWaveChart.vue'

import useAppStore from '@/store/modules/app'

import {
  tdataMonitorQuery
} from '@/api/discover'


const appStore = useAppStore()
const ajaxFlag = ref(true)

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

const props = defineProps({
  listItem: {
    type: Object,
    default: () => ({})
  }
})
function pageList() {
  emit('page','list')
  // changeRoute()

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

// 进度数据
const progress = ref(0) // 100% 进度
const tableSum = ref(0) // 已完成表数量
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 handleCatResult = () => {
  console.log('查看详细结果')


  appStore.setQueryData({
    taskid: appStore.queryData.taskid,
    resultid: appStore.queryData.resultid,
    datasystemid: appStore.queryData.datasystemid,
    discoverTaskName: appStore.queryData.discoverTaskName,
    icon: appStore.queryData.icon,
    breadPathData: [
      {
      path: appStore.queryData.breadPathData[0].path,
      label: appStore.queryData.breadPathData[0].label
      },
      {
      label: "查看结果"
      }
    ]
  });

  emit('page','discoverResult', { listItem: props.listItem,type: 'process'})
}

onMounted(() =>{
  getMonitorDataRequest()
})
const timeOutId = ref(null)
onBeforeUnmount(() =>{
  if (timeOutId.value) {
    clearTimeout(timeOutId.value);
    ajaxFlag.value = false
  }
})


const getMonitorDataRequest = () => { 
  tdataMonitorQuery({
    taskid: appStore.queryData.taskid || props.listItem.id,
    projectid: sessionStorage.getItem('projectId')
  }).then(res =>{
    const { statistics, errorlist, dbdatainfo } = res.data

    failureData.value = errorlist.map(item =>(({
      ...item,
      category:item.errorType,
      severity: item.seriousness,
      executeTime: item.excutionTime
    })))


    tableSum.value = statistics.tableSum
    if(statistics.count === 0){
      progress.value = 0
    }else{
      progress.value = ((statistics.tableSum / statistics.count) * 100).toFixed(2)
    }
    


    completedData.value = JSON.parse(dbdatainfo.message);
    console.log('completedData.value',completedData.value)


    if (ajaxFlag && (progress.value < 100)) {

      timeOutId.value = setTimeout(() => {
        getMonitorDataRequest();
      }, 1000)

    }
  })
}


</script>

<template>
  <div class="app-container scroller">
    <PageTitle :back="true" @back="pageList">
      <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 class="complete">完成表数:{{ tableSum }}</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" fixed="left" />
                <el-table-column prop="severity" label="严重性" min-width="100" />
                <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
                  v-show="progress > 100.00 || progress == 100.00"
                  type="primary"
                  @click="handleCatResult"
                >查看结果</el-button>
              </div>
              <el-table
                :data="completedData"
                height="612px"
                style="width: 100%"
                :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
                empty-text="暂无数据"
              >
                <el-table-column  label="发现序号" width="100" align="center" fixed>
                  <template #default="scope">{{ scope.$index + 1 }}</template>
                  </el-table-column>
                <el-table-column prop="dbType" label="发现表名" min-width="150" />
                <el-table-column prop="dbName" label="SCHEMA" width="100" />
                <el-table-column prop="createTime" label="发现时间" width="160"  fixed="right"/>
              </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;
}
.complete {
  width: 100px;
}
.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>