<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'
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);

}


function pageProjectManage() {
  router.push({
    path: '/projectManage'
  })
}
/**
 * 删除多余列
 */
function deleteUnnecessaryColumns(){
  console.log('删除多余列')
}
/**
 * 批量加密
 */
function bulkEncryption(){
  console.log('批量加密')
}
/**
 * 批量解密
 */
function batchDecryption() {
  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"/>

          
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>


  </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;
}
</style>