<template>
    <swiper
        class="swiperCont"
        :current="1"
        active-class="swiper-active"
        previous-margin="20rpx"
        next-margin="380rpx"
        @change="swiperChange"
    >
        <swiper-item v-for="(item, index) in currentAllRelatedFlights" :key="item.flightNo">
            <view class="swiperItem">
                <view class="title">{{ item.flightNo }}</view>
                <view class="flex swiperInfo">
                    <text>{{ item.depStn }}</text>
                    <image class="renderTime" :src="FlightImage" />
                    <text>{{ item.arrStn }}</text>
                </view>
                <view class="flex swiperInfo">
                    <text>{{ item.stdChn }}</text>
                    <text>{{ item.staChn }}</text>
                </view>
            </view>
        </swiper-item>
    </swiper>


</template>

<script setup>
import { ref } from 'vue'
import useFlightSupportStore from 'mocp/store/flight-support'
import { storeToRefs } from 'pinia'
import { cloneDeep } from 'lodash'
import FlightImage from 'mocpStatic/image/monitor/flight-pane.png'

const ps = defineProps({
    currentAllRelatedFlights: {
        type: Array,
        default: []
    }
})

const swiperChange = (e) => {
    console.log(e, e.detail.current)
}
</script>
<style lang="scss" scoped>
@import '../constants/details';
</style>
