<script lang="ts" setup>
import {OrderStatus} from "@/constant/enums";
import {formatTimestampWithMonthName, thumbnailImg} from "@/utils/utils";

const {t} = useI18n()
const props = defineProps({
  item: {
    type: Object,
    default: () => ({})
  }
})

function navigateTo(url: string) {
  uni.navigateTo({url})
}
</script>

<template>
  <view @click="navigateTo('/pages-user/pages/order/index?id=' + item.id)">
    <view class="flex-center-sb">
      <view class="flex items-center">
        <image
            :src="thumbnailImg(item?.userVo?.avatar)"
            class="w-42rpx h-42rpx rounded-50% mr-6rpx"
            mode="aspectFill"
        />
        <view class="text-30rpx lh-30rpx text-#333 mr-10rpx">
          <text class="mr-6rpx">{{ item?.userVo?.firstName }} {{ item?.userVo?.surname }}</text>
          <text>{{ item?.phone }}</text>
        </view>
        <!--        <view class="px-10rpx h-32rpx bg-#FF6106 rounded-6rpx center text-22rpx lh-22rpx text-#fff">-->
        <!--        </view>-->
        <!--收货方式(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>
      <view class="text-30rpx lh-30rpx font-500 text-#00A76D">
        <template v-if="+item.orderStatus === OrderStatus.CANCELLED">{{ t('pages.order.cancel') }}</template>
        <template v-if="+item.orderStatus === OrderStatus.REFUNDED">{{ t('pages.order.refund') }}</template>
        <template v-if="+item.orderStatus === OrderStatus.HAS_PENDING_PAYMENT">{{ t('pages.order.CONF') }}</template>
        <template v-if="+item.orderStatus === OrderStatus.MERCHANT_ACCEPTED">{{ t('pages.order.ACPT') }}</template>
        <template v-if="+item.orderStatus === OrderStatus.DELIVERING">{{ t('pages.order.OTW') }}</template>
        <text class="!text-#333">
          <template v-if="+item.orderStatus === OrderStatus.COMPLETED">{{ t('pages.order.DCOMP') }}</template>
        </text>
      </view>
    </view>
    <view class="relative mt-22rpx pb-12rpx pr-196rpx">
      <scroll-view :scroll-x="true">
        <view class="flex">
          <template v-for="(food, index) in item.merchantOrderDishVoList" :key="index">
            <view class="mr-20rpx flex flex-col items-center w-120rpx !inline-block">
              <image
                  :src="food?.merchantDishVo?.dishImage?.split(',')[0]"
                  class="w-120rpx h-120rpx rounded-16rpx mb-26rpx"
                  mode="aspectFill"
              />
              <view class="text-24rpx lh-24rpx text-#7D7D7D line-clamp-1 w-120rpx">{{
                  food?.merchantDishVo?.dishName
                }}
              </view>
            </view>
          </template>
        </view>
      </scroll-view>
      <view
          class="absolute top--1rpx right--2rpx w-196rpx h-180rpx bg-#F6F6F6 flex flex-col items-center justify-center">
        <text class="text-34rpx lh-34rpx font-500 text-#333">${{ item.paidAmount }}</text>
        <view class="text-24rpx lh-24rpx mt-24rpx text-#7D7D7D">
          {{ t('common.itemNum') }}
          {{ item.merchantOrderDishVoList.length }}
          {{ t('common.item') }}
        </view>
      </view>
    </view>
    <view class="flex-center-sb">
      <text class="text-28rpx lh-28rpx text-#7D7D7D">{{ formatTimestampWithMonthName(item.endScheduledTime) }}</text>
      <slot name="rightBtn">
        <wd-button
            v-if="+item.receiveMethod === 1 && +item.orderStatus === OrderStatus.HAS_PENDING_PAYMENT"
            class="!h-56rpx !rounded-56rpx !text-28rpx text-#fff"
        >{{ t('pages-user.order.receiving') }}
        </wd-button>

        <!--配送订单 已经接单-->
        <wd-button
            v-if="+item.receiveMethod === 1 && +item.orderStatus === OrderStatus.MERCHANT_ACCEPTED"
            class="!h-56rpx !rounded-56rpx !text-28rpx text-#fff"
        >{{ t('pages-user.order.startDelivery') }}
        </wd-button>

        <!--配送订单 配送中-->
        <wd-button
            v-if="+item.receiveMethod === 1 && +item.orderStatus === OrderStatus.DELIVERING"
            class="!h-56rpx !rounded-56rpx !text-28rpx text-#fff"
        >{{ t('pages-user.order.delivered') }}
        </wd-button>

        <!--自取订单 未接单-->
        <wd-button
            v-if="+item.receiveMethod === 2 && +item.orderStatus === OrderStatus.HAS_PENDING_PAYMENT"
            class="!h-56rpx !rounded-56rpx !text-28rpx text-#fff"
        >{{ t('pages-user.order.receiving') }}
        </wd-button>
        <!--自取订单 已经接单-->
        <view v-if="+item.receiveMethod === 2 && +item.orderStatus === OrderStatus.MERCHANT_ACCEPTED"
              @click.stop="navigateTo('/pages-user/pages/scan-code/index')">
          <wd-button class="!h-56rpx !rounded-56rpx !text-28rpx text-#fff">
            {{ t('pages-user.order.writeOff') }}
          </wd-button>
        </view>
      </slot>
    </view>
  </view>
</template>

<style lang="scss" scoped>

</style>