<template>
  <div>
    <n-card>
      <headSearch :info="search" @search="handleSearch" @reset="handleSearch" />
      <data-table
        ref="tableRef"
        :columns="columns"
        :request="loadDataTable"
        :row-key="(row) => row.id"
        :scroll-x="1200"
        size="large"
      />
    </n-card>
  </div>
  <!-- 新增、编辑弹窗 -->
  <ReportDrawer v-model:visible="drawerShow" :type="drawerType" :data="rowData" />
</template>

<script>
import search from './tools/search.js'
import table from './tools/table.js'
import headSearch from '@/components/Search/index.vue'
import dataTable from '@/components/DataTable/index.vue'
import ReportDrawer from './components/ReportDrawer.vue'
import { fetchReportList } from '@/api/report/river.js'
import { unref, toRefs, reactive, onUnmounted } from 'vue'

export default {
  name: 'RiverReports',
  components: { dataTable, ReportDrawer, headSearch },
  setup() {
    const data = reactive({
      ...toRefs(table),
      search
    })

    const loadDataTable = async(res) => {
      const _params = {
        ...unref(data.searchParams),
        ...res
      }
      return await fetchReportList(_params)
    }

    onUnmounted(() => {
      data.searchParams = null
    })

    return {
      ...toRefs(data),
      loadDataTable
    }
  }
}
</script>
<style scoped lang='scss'>
.n-button + .n-button {
  margin-left: 10px;
}
</style>
