<template>
    <global-page
        ref="paging"
        title="航班保障"
        isDataList
        refresherEnabled
        loadingMoreEnabled
        auto
        :params="getSearchData"
        showNavRight
        navRightType="icon"
        navRightIcon="saixuan-01"
        @handleRightClick="handleRightClick"
        :api="getFlyToAppletsApi"
        localPaging
        :pageSize="20"
        :transformData="transformData"
    >
        <template #default="{ item }">
            <view class="inforDisclosureItem flex">
                <TableTow :itemMsg="item" />
            </view>
        </template>

        <template v-slot:top>
            <view class="flex listTopTab text-center">
                <view v-for="item of getSelectedList" :key="item.id" class="topTabItem" :style="{ flex: item.flex }">
                    {{ item.label }}
                    <!--<up-icon
                        v-if="item.keyValue == 'time' || item.keyValue == 'staChn'"
                        @click="sortClick(item)"
                        class="sortIcon"
                        name="arrow-down"
                        color="#4e5969"
                        size="10"
                    />-->
                    <!--arrow-down-->
                </view>
            </view>
        </template>
        <template v-slot:bottom>
            <view class="flex flex-between listScreenClass">
                <global-icon @tap="toCustom" icon="saixuan-01" />
                <up-subsection
                    class="listScreenRT"
                    :list="listScreen"
                    :current="getSearchData.isOut"
                    mode="subsection"
                    bgColor="#f00"
                    activeColor="#165DFF"
                    inactiveColor="#165DFF"
                    @change="subsectionChange"
                />
            </view>
        </template>
    </global-page>
</template>

<script setup>
import { ref } from 'vue'
import { getFlyToAppletsApi } from 'mocp/api/flight-support'
import useFlightSupportStore from 'mocp/store/flight-support'
import { storeToRefs } from 'pinia'
import TableTow from './components/TableRow.vue'
import { finishedStatus } from 'mocp/utils/getFlightList'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import { currentInBoundModeForFlightTablePage, allInBoundMode } from './utils/currentInBoundMode'

const paging = ref(null)
const flightSupportStore = useFlightSupportStore()
const { searchData, getSearchData, listScreen, getSelectedList, listTab } = storeToRefs(flightSupportStore)

const handleRightClick = () => {
    uni.$mocpJump.navigateTo('/panel/flight-support/components/Screen')
}

const transformData = (data) => {
    const currentTime = Date.now()
    const listMsg = data
        ?.reduce(
            (q, w) => {
                if (finishedStatus.includes(w.status)) {
                    w.isFinished = true
                    q[2].push(w)
                } else {
                    if (q[0].status === 'DEP') {
                        w.isDepartured = true
                        q[1].push(w)
                    } else {
                        q[0].push(w)
                    }
                }
                return q
            },
            [[], [], []]
        )
        .map((q, w) => {
            if (w === 0) {
                q.sort((a, s) => {
                    return Math.abs(currentTime - a.stdChn) - Math.abs(currentTime - s.stdChn)
                })
            }
            return q
        })
        .flat()
    console.log('@@listMsg', listMsg)
    return listMsg
}

const sortClick = (e) => {
    console.log(e)
}
const toCustom = () => {
    uni.$mocpJump.navigateTo('/panel/flight-support/components/Custom')
}

const subsectionChange = (e) => {
    if (searchData.value.isOut == e) return
    currentInBoundModeForFlightTablePage.value = e
    const ind = listTab.value.findIndex((item) => item.label == '出发地' || item.label == '目的地')
    const isCurrentIn = currentInBoundModeForFlightTablePage.value == allInBoundMode.In
    if (ind > -1) {
        listTab.value[ind].label = isCurrentIn ? '出发地' : '目的地'
    }
    paging.value.reload()
    searchData.value.isOut = e
}

uni.$on('screenReload', () => {
    paging.value?.reload()
})
onLoad(() => {
    flightSupportStore.setTerminal()
})
onUnload(() => {
    uni.$off('screenReload')
})
</script>

<style scoped lang="scss">
@import './constants/flightSupportList';
</style>
