<template>
    <global-page
        title="航班保障"
        isDataList
        refresherEnabled
        loadingMoreEnabled
        auto
        ref="paging"
        :params="searchData"
        showNavRight
        navRightType="icon"
        navRightIcon="saixuan-01"
        @handleRightClick="handleRightClick"
        :api="getFlyToAppletsApi"
        :padding="24"
        localPaging
    >
        <template #="{ dataList }">
            <view
                v-for="(item, index) in dataList"
                :key="item.id"
                class="inforDisclosureItem flex mocp-bg-fill-4">
                <view class="top">
                    <view class="flex">{{ item.flightNo }}****{{ item.airlineCode }}</view>
                </view>
            </view>
        </template>

        <template v-slot:top>
            <view class="flex listTopTab">
                <view v-for="item of getSelectedList" :key="item.label" class="topTabItem">
                    {{ item.label }}
                </view>
            </view>
        </template>
        <template v-slot:bottom>
            <view class="flex flex-between listScreenClass">
                <global-icon icon="saixuan-01" />
                <up-subsection
                    class="listScreenRT"
                    :list="listScreen"
                    :current="1"
                    mode="subsection"
                    bgColor="#f00"
                    activeColor="#165DFF"
                    inactiveColor="#165DFF"
                />
            </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'


const flightSupportStore = useFlightSupportStore()
const getSelectedList = flightSupportStore.getSelectedList()
console.log(flightSupportStore.getSelectedList())
const { searchData, listTab, listScreen, listScreenCurrent } = storeToRefs(flightSupportStore)
const handleRightClick = () => {
    console.log(listTab, listScreen, listScreenCurrent)
    // uni.$mocpJump.navigateTo('/panel/flight-support/components/screen')
}


</script>

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