<template>
    <swiper
        class="swiperCont"
        :current="filterDetailsCurrentIndex || 0"
        active-class="swiper-active"
        previous-margin="20rpx"
        next-margin="380rpx"
        @change="swiperChange"
    >
        <swiper-item v-for="item in filterDetailsList" :key="item.id">
            <view class="swiperItem">
                <view class="title">{{ item.flightNo }}</view>
                <view class="flex swiperInfo">
                    <text>{{ item.depStn }}</text>
                    <image class="renderTime" :src="fly01" />
                    <text>{{ item.arrStn }}</text>
                </view>
                <view class="flex swiperInfo">
                    <text>{{ timeStampFormat(item.stdChn, {format: 'HH:mm'}) }}</text>
                    <text>{{ timeStampFormat(item.staChn, {format: 'HH:mm'}) }}</text>
                </view>
            </view>
        </swiper-item>
    </swiper>


</template>

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

const flightSupportStore = useFlightSupportStore()
const {filterDetailsList, filterDetailsCurrentIndex} = storeToRefs(flightSupportStore)
const ps = defineProps({
    filterDetailsList: {
        type: Array,
        default: []
    }
})

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