<template>
  <div>
    <n-card>
      <HeadSearch :info="search" @search="handleSearch" @reset="handleSearch" />
      <DataTable
        ref="tableRef"
        :columns="columns"
        :row-key="(row) => row.id"
        :request="loadDataTable"
        size="large"
      />
    </n-card>
  </div>

  <AssignModal v-if="modalShow" v-model:visible="modalShow" :data="rowData" @reload="handleSearch" />
  <QuestionDrawer v-model:visible="detailDrawer" :data="rowData" />

</template>

<script>
import table from './tools/table.js'
import { search } from './tools/search.js'
import HeadSearch from '@/components/Search/index.vue'
import DataTable from '@/components/DataTable/index.vue'
import AssignModal from './components/AssignModal.vue'
import QuestionDrawer from './components/QuestionDrawer.vue'
import { reactive, unref, toRefs, onUnmounted } from 'vue'
import { getOrderList } from '@/api/order/index.js'

export default {
  name: 'TaskAll',
  components: { HeadSearch, DataTable, AssignModal, QuestionDrawer },
  setup() {
    const data = reactive({
      search,
      ...toRefs(table)
    })

    /**
     * @description: 加载表格数据
     * @param {*} res
     * @return {*}
     */
    const loadDataTable = async(res) => {
      const _params = {
        ...unref(data.searchParams),
        ...res
      }
      return await getOrderList(_params)
    }

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

    return {
      ...toRefs(data),
      loadDataTable
    }
  }
}

</script>
<style scoped lang='scss'>
</style>
