<script setup name="ProjectManageList">
import { getCurrentInstance, reactive, ref, toRefs } from 'vue'
import { ElMessage } from 'element-plus'
import QueryForm from './QueryForm.vue'
// import ProjectEditDialog from './ProjectEditDialog.vue'
// import DownloadPluginDialog from './DownloadPluginDialog.vue'
// import ExportDialog from './ExportDialog.vue'
import { useRouter } from 'vue-router'

import useAppStore from '@/store/modules/app'
import usePermissionStore from '@/store/modules/permission'
const appStore = useAppStore()
const permissionStore = usePermissionStore()
const router = useRouter()
const emit = defineEmits(['page'])
const { proxy } = getCurrentInstance()

function onReset(formQuery) {
  console.log('onReset')
  formQuery.resetFields()
  handleQuery()
}
function onQuery() {
  handleQuery()
}
// 搜索按钮操作
function handleQuery() {
  console.log('queryParams',queryParams.value)
  queryParams.value.pageNum = 1
  getList()
}
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 8
  }
})
// 表格数据
const { queryParams } = toRefs(data)



const total = ref(3)
const loading = ref(false)
// 查询列表
function getList() {
  loading.value = true


  setTimeout(() => {
      loading.value = false
  }, 3000);

}
const tableData = ref([
  {
    id: '1',
    index: 1,
    dataSource: '若依配...',
    schema: 'ry',
    tableName: 'sys_user',
    fieldName: 'phone...',
    fieldType: 'VARCHAR...',
    comment: '手机号码',
    algorithm: '姓名加密规则',
    secretKey: '姓名加...',
    description: '',
    status: '加密完成'
  },
  {id: '2',
    index: 2,
    dataSource: '若依配...',
    schema: 'ry',
    tableName: 'sys_user',
    fieldName: 'user_n...',
    fieldType: 'VARCHAR...',
    comment: '用户名昵称',
    algorithm: '姓名加密规则',
    secretKey: '姓名加...',
    description: '',
    status: '加密完成'
  }
]);
function pageProjectManage() {

  let filterMenus = appStore.navStatus.type === 'manage' ? appStore.allnavList.filter(item => item.type === '1') : appStore.allnavList.filter(item => item.type === '2')
  // 设置导航菜单
  appStore.setNav(filterMenus)

  permissionStore.setSidebarRouters(filterMenus)

  let type = appStore.navStatus.type === 'manage' ? 'project' : 'manage'

  appStore.setNavStatus({type: type})

  router.push({
    path: '/projectManage'
  })
}
/**
 * 删除多余列
 */
function deleteUnnecessaryColumns(){
  console.log('删除多余列')
}
/**
 * 批量加密
 */
function bulkEncryption(){
  console.log('批量加密')
}
/**
 * 批量解密
 */
function batchDecryption() {
  console.log('批量解密')
}
// 弹窗控制
const dialogVisible = ref(false);
const detailData = ref({
  fieldName: '',
  status: '',
  startTime: '',
  endTime: '',
  totalRows: 0,
  processedRows: 0,
  rejectedRows: 0
});
function handleDetail(val) {
  // 这里根据实际数据结构调整
  detailData.value = {
    id: '123',
    fieldName:  'phonenumber',
    status:  '解密完成',
    startTime: '2025-08-21 16:55:...',
    endTime: '2025-08-21 16:56:...',
    totalRows: 4,
    processedRows: 0,
    rejectedRows: 0
  };
  dialogVisible.value = true;
}
// 查看日志
const showLog = () => {
  console.log('查看日志');


  dialogVisibleLog.value = true;
  // 这里可以打开日志弹窗或跳转到日志页面
};
const dialogVisibleLog = ref(false);
const logData = ref('12312312312312312')


const downLoad = () => {
  console.log('下载日志');
};


</script>

<template>
  <div class="app-container scroller">
    <PageTitle :back="true" @back="pageProjectManage">
      <template #title>
        返回项目管理
      </template>
      <template #buttons>
        <el-button
          type="primary"
          @click="deleteUnnecessaryColumns"
        > 
          删除多余列
        </el-button>
        <el-button
          type="primary"
          @click="bulkEncryption"
        > 
          批量加密
        </el-button>
        <el-button
          type="primary"
          @click="batchDecryption"
        > 
          批量解密
        </el-button>
      </template>
    </PageTitle>
    
    <div class="app-container__body">
      <div>
        <query-form
          ref="QueryFormRef"
          v-model="queryParams"
          @query="onQuery"
          @reset="onReset"/>

          <div class="warning-alert">
            <div class="warning-content flex-container align-center">
              <el-icon color="#f33"><Warning /></el-icon>
              <span class="warning-text">警告：存在未加密字段，请完成历史数据加密操作，否则无法正常使用插件！</span>
            </div>
          </div>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
          >
            <el-table-column prop="index" label="序号" width="60" align="center" />
            <el-table-column prop="dataSource" label="数据源名" width="120" show-overflow-tooltip />
            <el-table-column prop="schema" label="SCHEMA" width="100" align="center" />
            <el-table-column prop="tableName" label="表名" width="120" show-overflow-tooltip />
            <el-table-column prop="fieldName" label="字段名" width="120" show-overflow-tooltip />
            <el-table-column prop="fieldType" label="字段类型" width="120" show-overflow-tooltip />
            <el-table-column prop="comment" label="注释" min-width="120" show-overflow-tooltip />
            <el-table-column prop="algorithm" label="加密算法" min-width="150" show-overflow-tooltip />
            <el-table-column prop="secretKey" label="密钥" width="120" show-overflow-tooltip />
            <el-table-column prop="description" label="描述信息" width="120" show-overflow-tooltip />
            <el-table-column prop="status" label="执行状态" width="120" align="center">
              <template #default="scope">
                <el-tag :type="scope.row.status === '加密完成' ? 'success' : 'warning'">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100" align="center" fixed="right">
              <template #default="scope">
                <el-button type="primary" size="small" @click="handleDetail(scope.row.id)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  <!-- 详情弹窗 -->
  <el-dialog
    v-model="dialogVisible"
    title="数据详情"
    width="50%"
  >
    <el-descriptions 
      border
      :column="1"
      size="large"
      class="detail-container"
    >
      <el-descriptions-item label="字段名">
        {{ detailData.fieldName || 'phonenumber' }}
      </el-descriptions-item>
      
      <el-descriptions-item label="状态">
        <el-tag :type="detailData.status === '解密完成' ? 'success' : 'warning'">
          {{ detailData.status || '解密完成' }}
        </el-tag>
      </el-descriptions-item>
      
      <el-descriptions-item label="开始时间">
        {{ detailData.startTime || '2025-08-21 16:55:...' }}
      </el-descriptions-item>
      
      <el-descriptions-item label="结束时间">
        {{ detailData.endTime || '2025-08-21 16:56:...' }}
      </el-descriptions-item>
      
      <el-descriptions-item label="加密/解密总行数">
        {{ detailData.totalRows || 4 }}
      </el-descriptions-item>
      
      <el-descriptions-item label="已加密/解密行数">
        {{ detailData.processedRows || 0 }}
      </el-descriptions-item>
      
      <el-descriptions-item label="拒绝条数">
        {{ detailData.rejectedRows || 0 }}
      </el-descriptions-item>
    </el-descriptions>
    
    <template #footer>
      <el-button type="primary" @click="showLog">查看日志</el-button>
    </template>
  </el-dialog>


    <el-dialog
      v-model="dialogVisibleLog"
      title="日志"
      width="50%"
    >

    <div class="flex-container flex-wrap" v-html="logData">

    </div>
    <template #footer>
      <el-button type="primary" @click="downLoad">下载</el-button>
    </template>
  </el-dialog>

  </div>
</template>

<style lang="scss" scoped>
.table-item {
  margin-top: var(--container-pd);
  margin-bottom: 20px;
}

.item-content {
  margin: 8px 0;
  .label {
    width: 80px;
    color: #888;
  }
}

.flex-container { 
  display: flex;
}

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

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

.flex1 {
  flex: 1;
}
.flex-wrap {
  flex-direction: wrap;
}
.warning-alert {
  width: 100%;
  padding: 12px 16px;
  margin: 10px 0;
  border: 2px solid #f56c6c;
  border-radius: 4px;
  background-color: #fef0f0;
  display: flex;
  align-items: center;
}
.warning-text {
  color: #606266;
  font-size: 14px;
  margin-left: 10px;
}
</style>