<template>
  <div>
    <n-card>
      <HeadSearch
        ref="searchRef"
        :info="search"
        @search="handleSearch"
        @reset="handleSearch"
        @change="handleChange"
      />
      <DataTable
        ref="tableRef"
        :columns="columns"
        :row-key="(row) => row.id"
        :request="loadDataTable"
        size="large"
      >
        <template #tableTitle>
          <n-button
            type="primary"
            @click="handleModal"
          > 新建 </n-button>
          <!-- <n-popconfirm
            negative-text="取消"
            positive-text="确认"
            @positive-click="deleteComplex"
          >
            <template #trigger>
              <n-button type="primary"> 删除 </n-button>
            </template>
            确认要删除选中数据吗?
          </n-popconfirm> -->
        </template>
      </DataTable>
    </n-card>
  </div>

  <!-- 新增、编辑弹窗 -->
  <TaskModal
    v-if="modalShow"
    v-model:visible="modalShow"
    :type="modalType"
    :data="rowData"
    @reload="handleSearch"
  />
  <!-- 直播抽屉 -->
  <LiveDrawer
    v-model:visible="liveDrawer"
    :data="rowData"
  />
  <!-- 轨迹回放 -->
  <DemandDrawer
    v-model:visible="demandDrawer"
    :data="rowData"
  />
  <!-- 问题核实 -->
  <VerifyDrawer
    v-model:visible="verifyDrawer"
    :data="rowData"
  />

</template>

<script>
import table from './tools/table.js'
import { search, getAirOptions, getLineOptions, clearLineOptions } from './tools/search.js'
import HeadSearch from '@/components/Search/index.vue'
import DataTable from '@/components/DataTable/index.vue'
import TaskModal from './components/TaskModal.vue'
import LiveDrawer from './components/LiveDrawer.vue'
import DemandDrawer from './components/DemandDrawer.vue'
import VerifyDrawer from './components/VerifyDrawer.vue'
import { reactive, ref, unref, toRefs, onUnmounted, onMounted } from 'vue'
import { getTaskList } from '@/api/task/index.js'
import { useRoute } from 'vue-router'
export default {
  name: 'TaskAll',
  components: { HeadSearch, DataTable, TaskModal, LiveDrawer, DemandDrawer, VerifyDrawer },
  setup() {
    const route = useRoute()
    const rowInfo = route.query.rowInfo
    getAirOptions()
    const searchRef = ref()
    const data = reactive({
      ...toRefs(search),
      ...toRefs(table),
      airportId: null
    })

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

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

    function handleChange(value) {
      const { airportId } = value
      if (data.airportId !== airportId) {
        if (!airportId) {
          clearLineOptions()
        } else {
          data.airportId = airportId
          getLineOptions(airportId)
        }
        searchRef.value.setFormValue({ inspectionLine: null })
      }
    }
    onMounted(() => {
      if (rowInfo) {
        data.rowData = rowInfo
        data.liveDrawer = true
      }
    })
    onUnmounted(() => {
      data.searchParams = null
    })

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

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