<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="2200"
        size="large"
      >
        <template #tableTitle>
          <n-button type="primary" @click="handleModal"> 新建 </n-button>
        </template>
      </data-table>
    </n-card>
  </div>

  <!-- 直播 -->
  <task-live v-model:visible="liveShow" :data="rowData" />
  <!-- 飞行坐标 -->
  <task-coordinate v-model:visible="coordinateShow" :data="rowData" />
  <!-- 任务详情 -->
  <task-detail v-model:visible="detailShow" :data="rowData" />
  <!-- 审核 -->
  <task-approve v-if="approveShow" v-model:visible="approveShow" :data="rowData" @reload="handleSearch" />
  <!-- 处理结果 -->
  <task-result v-model:visible="handleShow" :data="rowData" />
</template>

<script>
import headSearch from '@/components/Search/index.vue'
import dataTable from '@/components/DataTable/index.vue'
import TaskLive from './components/TaskLive.vue'
import TaskApprove from './components/TaskApprove.vue'
import TaskDetail from './components/TaskDetail.vue'
import TaskCoordinate from './components/TaskCoordinate.vue'
import TaskResult from './components/TaskResult.vue'
import { search, getRiverOptions } from './tools/search.js'
import table from './tools/table.js'
import { unref, toRefs, reactive, onUnmounted } from 'vue'
import { allTaskList } from '@/api/inspection/alltask.js'
export default {
  name: 'AllTask',
  components: { headSearch, dataTable, TaskLive, TaskApprove, TaskCoordinate, TaskDetail, TaskResult },
  setup() {
    getRiverOptions()
    const data = reactive({
      ...toRefs(table),
      search
    })

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

    // 新增
    function handleModal() {
      data.rowData = null
      data.modalType = 'create'
      data.modalShow = true
    }

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

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

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