<template>
    <view @touchmove.prevent.stop>
        <u-popup :show="showpop" mode="bottom" :round="10" @close="close" :closeable="true" :safeAreaInsetBottom="true"
            @touchmove.prevent.stop>
            <view class="h-[70vh] px-[24rpx] bg-page pb-[20rpx]" @touchmove.prevent.stop>
                <view class="font-500 text-center text-[32rpx] leading-[104rpx] box-border h-[104rpx]">详细信息</view>
                <scroll-view :scroll-x="true" scroll-with-animation
                    :scroll-into-view="'id' + (subActive > 3 ? subActive - 2 : 0)">
                    <view class="flex py-[22rpx] whitespace-nowrap" v-if="packageList.length > 1">
                        <view :id="'id' + index" class="text-[26rpx] leading-[36rpx] mr-[30rpx] text-[#626779]"
                            :class="{ '!text-primary class-select': item.id == current }"
                            v-for="(item, index) in packageList" :key="index" @click="handleClick(item, index)">
                            包裹{{ Number(index) + 1 }}
                        </view>
                    </view>
                </scroll-view>
                <view class="parcel" style="height: 53vh;">
                    <view class="h-[56vh] flex flex-col items-center justify-center"
                        v-if="!showList.data">
                        <text class="nc-iconfont nc-icon-daishouhuoV6xx text-[180rpx] text-[#bfbfbf]"></text>
                        <view class="text-[28rpx] text-[#bfbfbf] leading-8">暂无物流信息～～</view>
                    </view>
                    <scroll-view v-else :scroll-y="true" style="height:53vh;padding: 20rpx;box-sizing: border-box;"
                        class="bg-white rounded-md">
                        <u-steps :current="0" dot direction="column" activeColor="var(--primary-color)">
                            <template v-for="(item, index) in showList.data" :key="index + 'id'">
                                <u-steps-item :title="item.context" :desc="item.time"></u-steps-item>
                            </template>
                        </u-steps>
                    </scroll-view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getMaterialflowList } from '@/addon/shop/api/order';

const showpop = ref(false)
const packageList = ref<any>([])
const showList = ref<any>({})
const loadList = async (params: any) => {
    let data: any = await getMaterialflowList(params)
    if(data.data){
        showList.value = data
    }
}
const current = ref(0)
const subActive = ref(0)

const open = (params: any) => {
    current.value = params.id
    if (params.logisticNo) {
        loadList({ logisticNo: params.logisticNo })
    }
    showpop.value = true
}

const close = () => {
    showpop.value = false
}
const handleClick = (item: any, index: any) => {
    current.value = item.id
    subActive.value = index
    if (item.logisticNo) {
        let params = {
            logisticNo: item.logisticNo
        }
        loadList(params)
    }else{
        showList.value = {}
    }
}
defineExpose({
    packageList,
    open
})
</script>

<style lang="scss" scoped>
.parcel :deep(.u-text__value) {
    font-size: 24rpx !important;
    line-height: 42rpx !important;
}

.parcel :deep(.u-steps-item__content) {
    margin-left: 20rpx !important;
}

.class-select {
    position: relative;
    font-weight: 500;

    &::before {
        content: "";
        position: absolute;
        bottom: -6rpx;
        height: 4rpx;
        background-color: $u-primary;
        width: 26rpx;
        left: 50%;
        transform: translateX(-50%);
    }
}
</style>
