<template>
  <el-form inline class="query-form" ref="queryForm"  @submit.prevent="getData">
    <el-form-item v-for="column in uniCons" :key="column.ucId"
                  :label="column.ucName" :prop="column.ucName">
      <el-input :placeholder="column.ucDescribe" :type="column.ucType" v-model="column.query" clearable
                ></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getData" :icon="Search">搜索</el-button>
      <el-button @click="handleReset" :icon="Refresh">重置</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="tableData" v-loading="tableLoading" :max-height="tableHeight" v-tabh>
    <el-table-column v-for="column in uniColumns" :key="column.prop" :prop="column.prop"
                     :label="column.label" align="center"/>
  </el-table>
  <paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
          :total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
</template>

<script setup>
import {Search, Refresh} from '@element-plus/icons-vue'
import {getPageInfo,getPageData} from "@/api/custom-query/query-page";
import {reactive} from "vue";
import Paging from "@/components/pagination/index.vue";

const router = useRouter()
let path = router.currentRoute.value.path.split("/")
const queryId = reactive(path[path.length-1])
const queryForm = ref([])
const tableData = ref([])
const uniCons = ref([])
const uniColumns = ref([])
const tableLoading = ref(true)
const total = ref()
const pageInfo = reactive({
  pageNum: 1,
  pageSize: 10,
})
const tableHeight = ref(document.documentElement.scrollHeight - 245 + 'px')

const initPage = () => {
  tableLoading.value = true
  getPageInfo(queryId,pageInfo).then(res=>{
    let data = res.data
    uniColumns.value = data.uniColumns
    uniCons.value = data.uniCons
    let table = data.table
    tableData.value = table.rows
    total.value = table.total
    tableLoading.value = false

  })
}


const changeInput = (val,column) => {
  console.log(val,column)

}

const getData = () => {
  tableLoading.value = true
  let queryData = []
  uniCons.value.forEach(con=>{
    if (con.query){
      let queryItem = {
        query:con.query,
        ucId: con.ucId
      }
      queryData.push(queryItem)
    }
  })
  tableLoading.value = true
  getPageData(pageInfo,{list:queryData,queryId}).then(res=>{
    let data = res.data
    tableData.value = data.rows
    total.value = data.total
    tableLoading.value = false
  })
}
//重置搜索
const handleReset = () => {
  uniCons.value.forEach(con=>{
    con.query=''
  })
  getData()
}
//切换每页显示条数
const handleSizeChange = (val) => {
  pageInfo.pageSize = val
  getData()
}

//点击页码进行分页功能
const handleCurrentChange = (val) => {
  pageInfo.pageNum = val
  getData()
}

initPage()

</script>

<style scoped>

</style>
