<template>
  <div>
    <n-card>
      <!-- 搜索 -->
      <headSearch :info="search" @search="handleSearch" @reset="handleSearch" />

      <!-- 表格 -->
      <data-table
        ref="tableRef"
        :columns="columns"
        :row-key="(row) => row.id"
        :request="loadDataTable"
        size="large"
        @update:checked-row-keys="handleCheck"
      >
        <template #tableTitle>
          <n-button v-if="permissionList.includes('task:all:create')" type="primary" @click="handleModal"> {{ getPermissionLabel('task:all:create') }} </n-button>
        </template>
      </data-table>
    </n-card>
  </div>

  <!-- 新增、编辑弹窗 -->
  <UserModal v-if="modalShow" v-model:visible="modalShow" :type="modalType" :data="rowData" @reload="handleSearch" />

  <!-- 详情 - 抽屉 -->
  <n-drawer v-model:show="showDraw" :width="'calc(100vw - 210px)'" :placement="'right'" resizable>
    <n-drawer-content closable>
      <draw-comp :detail="detail" @close="showDraw = false;handleSearch()" />
    </n-drawer-content>
  </n-drawer>

</template>

<script>
import { search, getPlatform } 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 DrawComp from './components/DrawComp.vue'
import UserModal from './components/UserModal.vue'
import { getTaskList } from '@/api/task/index'
import { unref, ref, toRefs, reactive, onUnmounted } from 'vue'
import { useUserStore } from '@/store/modules/user'
import { usePermissionStore } from '@/store/modules/permission'

export default {
  name: 'TaskManage',
  components: { dataTable, UserModal, headSearch, DrawComp },
  setup() {
    getPlatform()
    const permissionStore = usePermissionStore()// 按钮权限
    const data = reactive({
      ...toRefs(table),
      ...toRefs(search),
      permissionList: permissionStore.accessPermissionCodes

    })
    const getPermissionLabel = (code) => {
      return permissionStore.accessPermissions.find((item) => {
        return item.code === code
      })?.name || ''
    }

    const status = ['任务待分配', '任务已分配', '飞手已接单', '任务飞行中', '任务已完成']

    const loadDataTable = async(res) => {
      const _params = {
        ...unref(data.searchParams),
        ...res
      }
      const temp = await getTaskList(_params)
      // 将状态由数字改成文字
      temp.data.records = temp.data.records.map(it => ({
        ...it,
        statusName: status[(it.status / 5) - 1]
      }))
      return temp
    }
    const roleType = useUserStore().userInfo.type // 1管理员，2飞手
    // 新增
    function handleModal() {
      data.rowData = null
      data.modalType = 'create'
      data.modalShow = true
    }

    // 选择表格数据
    const selectedIds = ref([])
    function handleCheck(rowKeys) {
      selectedIds.value = rowKeys
    }

    // 批量删除
    // function deleteComplex() {
    //   if (selectedIds.value.length) {
    //     data.deleteData(selectedIds.value)
    //   } else {
    //     $message.warning('请至少选中一条数据')
    //   }
    // }

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

    return {
      ...toRefs(data),
      loadDataTable,
      handleModal,
      selectedIds,
      // deleteComplex,
      getPermissionLabel,
      handleCheck,
      roleType
    }
  },
  methods: {

  }
}
</script>

<style scoped lang='scss'>
.n-button+.n-button {
  margin-left: 10px;
}

:deep(.n-drawer-body-content-wrapper) {
  background-color: rgba(240, 242, 245, 0.8);
}
</style>
