<script setup lang="ts">
import {
  appMerchantOrderOrderListPost,
  type MerchantOrderVo
} from "@/service";
import {callPhone, formatTimestampWithWeekday} from "@/utils/utils";
import {OrderCancelStatus, OrderStatus} from "@/constant/enums";
import {useUserStore} from "@/store";
import HomeSkeleton from "@/pages/home/components/tabbar-home/components/home-skeleton.vue";
const userStore = useUserStore();
const { t } = useI18n();
const props = defineProps<{
  currentIndex: number
  status: null | number | string
}>()

watch(() => props.currentIndex, (newVal, oldVal) => {
  if (newVal === props.status && !firstLoaded.value) {
    paging.value?.refresh()
  }
}, {
  deep: true,
})

const {paging, dataList, loading, queryList, firstLoaded} = usePage<MerchantOrderVo[]>((pageNum, pageSize)=>{
  if(userStore.isLogin) {
    return appMerchantOrderOrderListPost({
      params: {
        pageNum,
        pageSize,
      },
      body: {
        userPort: 1,
        orderStatusList: props.status ? [Number(props.status + 1)] : [],
      }
    })
  } else {
    return new Promise(resolve => {
      resolve([])
    })
  }
})

function handleClick(item: any) {
  uni.navigateTo({
    url: '/pages-store/pages/order/index?id=' + item.id
  })
}

function reload() {
  paging.value?.reload()
}

function refresh() {
  paging.value?.refresh()
}

defineOptions({
  name: 'OrderSwiperList',
})

defineExpose({
  reload,
  refresh,
})
</script>

<template>
  <view class="h-full">
    <z-paging ref="paging" v-model="dataList" @query="queryList" :fixed="false" :auto="false">
      <view class="p-30rpx">
        <view
            v-show="loading"
            class="animate-in fade-in animate-ease-out animate-duration-300"
        >
          <template v-for="item in 3">
            <view class="w-full px-50rpx pt-43rpx pb-36rpx bg-white rounded-36rpx mb-30rpx last:mb-0">
              <!-- 头部时间和状态骨架屏 -->
              <view class="flex-center-sb mb-28rpx">
                <view class="w-280rpx h-34rpx skeleton-item rounded-8rpx"></view>
                <view class="w-120rpx h-34rpx skeleton-item rounded-8rpx"></view>
              </view>
              
              <!-- 商家信息骨架屏 -->
              <view class="flex items-center my-28rpx">
                <view class="w-32rpx h-32rpx skeleton-item rounded-6rpx mr-10rpx"></view>
                <view class="w-200rpx h-30rpx skeleton-item rounded-6rpx"></view>
                <view class="w-60rpx h-32rpx skeleton-item rounded-6rpx ml-20rpx"></view>
              </view>
              
              <!-- 轮播图骨架屏 -->
              <view class="mb-30rpx">
                <view class="w-100% h-508rpx skeleton-item rounded-36rpx mb-10rpx"></view>
                <view class="w-180rpx h-30rpx skeleton-item rounded-6rpx"></view>
              </view>
              
              <!-- 底部按钮区域骨架屏 -->
              <view class="flex-center-sb">
                <view class="w-56rpx h-56rpx skeleton-item rounded-28rpx"></view>
                <view class="flex items-center gap-20rpx">
                  <view class="w-170rpx h-64rpx skeleton-item rounded-64rpx"></view>
                  <view class="w-170rpx h-64rpx skeleton-item rounded-64rpx"></view>
                </view>
              </view>
            </view>
          </template>
        </view>
        <view
            class="animate-in fade-in animate-ease-in animate-duration-300"
            v-if="!loading"
        >
          <template v-for="(item,index) in dataList">
            <view @click="handleClick(item)" :class="[index === 0 ? '' : 'mt-30rpx']" class="w-full px-50rpx pt-43rpx pb-36rpx bg-white rounded-36rpx">
              <view class="flex-center-sb text-34rpx lh-34rpx font-bold">
                <text class="text-#333 tracking-[.04em]">{{ formatTimestampWithWeekday(item.endScheduledTime) }}</text>
                <text class="text-#00A76D tracking-[.04em] shrink-0">
                  <template v-if="
                  +item.refundStatus === OrderCancelStatus.APPLIED ||
                  +item.refundStatus === OrderCancelStatus.APPROVED ||
                  +item.refundStatus === OrderCancelStatus.REJECTED
                  ">
                    <template v-if="+item.refundStatus === OrderCancelStatus.APPLIED">
                      {{ t('pages-store.order.orderStatus.refund') }}
                    </template>
                    <template v-else-if="+item.refundStatus === OrderCancelStatus.APPROVED">
                      {{ t('pages-store.order.orderStatus.agreeRefund') }}
                    </template>
                    <template v-else-if="+item.refundStatus === OrderCancelStatus.REJECTED">
                      {{ t('pages-store.order.orderStatus.rejectRefund') }}
                    </template>
                  </template>
                  <template v-else>
                    <template v-if="item.orderStatus === OrderStatus.CANCELLED">{{ t('pages-store.order.orderStatus.cancelled') }}</template>
                    <template v-if="item.orderStatus === OrderStatus.PENDING_PAYMENT">{{ t('pages-store.order.orderStatus.pendingPayment') }}</template>
                    <template v-if="item.orderStatus === OrderStatus.HAS_PENDING_PAYMENT">{{ t('pages-store.order.orderStatus.hasPendingPayment') }}</template>
                    <!--配送订单-->
                    <template v-if="item.orderStatus === OrderStatus.MERCHANT_ACCEPTED">{{ t('pages-store.order.orderStatus.received') }}</template>
                    <template v-if="+item.receiveMethod === 1 && item.orderStatus === OrderStatus.DELIVERING">{{ t('pages-store.order.orderStatus.delivering') }}</template>
                    <template v-if="item.orderStatus === OrderStatus.COMPLETED">{{ t('pages-store.order.orderStatus.delivered') }}</template>

                    <!--商家拒绝接单-->
                    <template v-if="item.orderStatus === OrderStatus.MERCHANT_REJECTED">
                      <text class="text-#FF6106">{{ t('pages-store.store.orderStatus.rejected') }}</text>
                    </template>
                  </template>
                </text>
              </view>
              <view class="text-30rpx lh-30rpx text-#333 font-500 flex items-center my-28rpx ">
                <image src="@img/chef/126.png" class="w-32rpx h-32rpx mr-10rpx"></image>
                {{ item.merchantVo.merchantName }}
                <!--收货方式(1-派送 2-自取)-->
                <view v-if="+item.receiveMethod === 1" class="bg-#FF6106 rounded-6rpx h-32rpx text-#fff text-22rpx center px-10rpx ml-20rpx">
                  {{ t('pages.order.DEL') }}
                </view>
                <view v-if="+item.receiveMethod === 2" class="bg-#00A76D rounded-6rpx h-32rpx text-#fff text-22rpx center px-10rpx ml-20rpx">
                  {{ t('pages.order.PU') }}
                </view>
              </view>
              <swiper class="h-568rpx mb-30rpx" :autoplay="true">
                <swiper-item v-for="img in item.merchantOrderDishVoList">
                  <image
                      :src="img.merchantDishVo.dishImage?.split(',')[0]"
                      mode="aspectFill"
                      class="w-100% h-508rpx rounded-36rpx bg-common"
                  ></image>
                  <view class="mt-10rpx text-30rpx font-500 line-clamp-1">{{ img.merchantDishVo.dishName }}</view>
                </swiper-item>
              </swiper>
              <view class="flex-center-sb">
                <view>
                  <image v-if="+item.receiveMethod === 2" src="@img/chef/127.png" class="w-56rpx h-56rpx"></image>
                  <image @click.stop="callPhone(item.merchantVo.phone)" v-if="item.orderStatus >= OrderStatus.MERCHANT_ACCEPTED && +item.receiveMethod === 1" src="@img/chef/128.png" class="w-56rpx h-56rpx"></image>
                </view>
                <view class="flex items-center gap-20rpx font-500">
                  <template v-if="item.refundStatus !== OrderCancelStatus.APPLIED && item.refundStatus !== OrderCancelStatus.APPROVED">
                    <view v-if="item.orderStatus !== OrderStatus.CANCELLED && +item.orderStatus !== OrderStatus.COMPLETED && item.orderStatus !== OrderStatus.MERCHANT_REJECTED" class="w-170rpx h-64rpx center rounded-64rpx border-solid border-#666666 border-1rpx">{{ t('common.cancel') }}</view>
                    <view v-if="+item.receiveMethod === 2 && +item.orderStatus === OrderStatus.MERCHANT_ACCEPTED" class="w-170rpx h-64rpx center rounded-64rpx bg-#14181B text-28rpx text-#fff">{{ t('pages-store.order.writeOff') }}</view>
                    <view v-if="+item.orderStatus === OrderStatus.COMPLETED && item?.dishReviewVoList.length === 0" class="w-170rpx h-64rpx center rounded-64rpx bg-#14181B text-28rpx text-#fff">{{ t('common.evaluate') }}</view>
                  </template>
                </view>
              </view>
            </view>
          </template>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<style scoped lang="scss">

</style>