<script setup lang="ts">
import { useConfigStore, useUserStore } from "@/store";
import { dayjs } from "@/plugin/index";
import Config from '@/config/index'
import CheckoutSkeleton from "./components/checkout-skeleton.vue";
import ChangePhone from "./components/change-phone.vue";
import PriceDetail from "./components/price-detail.vue";
import VisitMethod from "@/components/visit-method/index.vue";
import {ref} from "vue";
import {
  appMerchantCartListByMerchantIdPost,
  appMerchantCartCalculateSavingsPost,
  appMerchantDetailMerchantIdGet,
  appUserAddressListPost,
  type MerchantCartVo,
  type MerchantVo,
  appMerchantOrderCalculatePriceCartPost,
  appUserCardSelectDefaultPost, appMerchantOrderCreateOrderCartPost, appMerchantOrderPayOrderPost,
  appMerchantOrderCreateOrderCartBatchPost,
  appMerchantOrderCalculatePriceCartBatchPost,
  appMerchantCartListMerchantPost,
  appMerchantOrderPayOrderBatchPost
} from "@/service";
import useEventEmit from "@/hooks/useEventEmit";
import {EventEnum} from "@/constant/enums";
import { getDistanceInMiles} from "@/utils/utils";
const { t } = useI18n();
const configStore = useConfigStore();
const userStore = useUserStore();

// 送达偏好
const visitMethodRef = ref();
// value 与 visit-method 组件保持一致：0-亲自送达 1-放门口
const visitMethod = ref({
  value: 1,
  label: t("components.visit.putItAtTheDoor"),
});
function chooseVisitMethod() {
  visitMethodRef.value?.onOpen(visitMethod.value.value);
}
function handleVisitMethodConfirm(data: { value: number; label: string }) {
  visitMethod.value = data;
}

// 联系方式(这里默认值取用户信息的手机号区号)
const contact = ref({
  phone: userStore.userInfo.phone,
  areaCode: "+1",
});
const changePhoneRef = ref<InstanceType<typeof ChangePhone>>();
function openChangePhone() {
  if (changePhoneRef.value) {
    changePhoneRef.value.onOpen(contact.value);
  }
}
function confirmPhone(data: { phone: string; areaCode: string }) {
  contact.value = data;
  formData.value.phone = data.phone;
}

// 配送时间 1 即刻配送 2 预约配送
// 当前业务仅支持预约配送，默认值设置为 2
const deliveryTimeType = ref(2);
// 配送时间配置
const deliveryMinutes = ref(0); // 预计送达时间（分钟）
// 自取时间配置
const selfPickupMinutes = ref(0); // 自取时间（分钟）
const deliveryWindowMinutes = ref(30); // 配送时间窗口（分钟）
// 预约配送日期配送
const userSelectedDeliveryTimeDate = ref(null);
// 预约自取时间
const userSelectedSelfPickupTimeDate = ref(null);
// 显示用的配送时间(即刻配送=当前时间加预计时间)(预约配送=预约时间+预计时间分钟)
const showDeliveryTime = computed(() => {
  // 配送
  if (deliveryTimeType.value === 1) {
    // 即刻配送：当前时间 + 预计送达时间
    let time = 0
    if(deliveryMethod.value === 0) {
      time = deliveryMinutes.value
    } else {
      time = selfPickupMinutes.value
    }
    const deliveryStart = dayjs().add(Number(time), "minute");
    const deliveryEnd = deliveryStart.add(
        deliveryWindowMinutes.value,
        "minute"
    );

    return `${deliveryStart.format("HH:mm")}-${deliveryEnd.format("HH:mm")}`;
  }
  if (deliveryTimeType.value === 2) {
    return deliveryMethod.value === 0 ? userSelectedDeliveryTimeDate : '123';
  }
  return "";
});
// 切换配送时间点击事件（目前仅支持预约配送）
function toggleDeliveryTimeType(type: number) {
  // 统一设置为预约配送
  deliveryTimeType.value = 2;

  // 跳转到时间选择页面
  const businessHours = (storeDetail.value as any)?.businessHours;
  const url = businessHours
    ? `/pages/address/reservation-time?storeBusinessHours=${encodeURIComponent(
        businessHours
      )}`
    : "/pages/address/reservation-time";

  uni.navigateTo({
    url,
  });
}

const diyTime = ref({})
useEventEmit(EventEnum.CHOOSE_APPOINTMENT_TIME, (data) => {
  console.log('CHOOSE_APPOINTMENT_TIME', data)
  if(data) {
    diyTime.value = data;
    deliveryTimeType.value = 2

    // 配送还是自取
    if(deliveryMethod.value === 0) {
      userSelectedDeliveryTimeDate.value =
        dayjs(data.date).format('MM-DD') +
        (data.timeSlot ? ' ' + data.timeSlot : '');
    } else {
      userSelectedSelfPickupTimeDate.value =
        dayjs(data.date).format('MM-DD') +
        (data.timeSlot ? ' ' + data.timeSlot : '');
    }
  }
})

// 设置配送时间（分钟）
const setDeliveryMinutes = (minutes: number) => {
  deliveryMinutes.value = minutes;
};

// 设置配送时间窗口（分钟）
const setDeliveryWindowMinutes = (minutes: number) => {
  deliveryWindowMinutes.value = minutes;
};

const deliveryMethod = ref(0);
// 配送方式
const showDeliverySwitch = ref(false)
const deliveryMethodOptions = [
  t("pages-store.store.delivery"),
  t("pages-store.store.pickup"),
];
function handleClickSegmented(index: number) {
  console.log("切换配送方式:", index);
  if(+storeDetail.value.deliveryService !== 1 && index === 0) {
    uni.showToast({
      title: t('pages-store.store.toast.deliveryService'),
      icon: 'none'
    })
    return
  }
  if(+storeDetail.value.selfPickup !== 1 && index === 1) {
    uni.showToast({
      title: t('pages-store.store.toast.selfPickup'),
      icon: 'none'
    })
    return
  }

  if(index !== deliveryMethod.value) {
    deliveryMethod.value = index
    // 重置配送类型为预约配送
    deliveryTimeType.value = 2
    void appMerchantOrderCalculatePriceCart()
  }
}

// 折叠面板
const collapseValue = ref([""]);

// 单个订单的小费
const selectedTipIndex = ref(0);
const diyTipValue = ref('')
// 批量订单：每个店铺的小费索引映射 merchantId -> tipIndex
const merchantTipIndexMap = ref<Record<string, number>>({})
// 批量订单：每个店铺的自定义小费值映射 merchantId -> diyTipValue
const merchantDiyTipValueMap = ref<Record<string, string>>({})

const tipOptions = ref([
  {
    label: "$3",
    value: 3,
  },
  {
    label: "$5",
    value: 5,
  },
  {
    label: "$10",
    value: 10,
  },
]);

// 单个订单的小费选择
function selectedTipChange(item: any) {
  if(item.value === selectedTipIndex.value) return
  diyTipValue.value = ''
  selectedTipIndex.value = item.value
  void appMerchantOrderCalculatePriceCart()
}

// 批量订单：选择某个店铺的小费
function selectedTipChangeForMerchant(merchantId: string, item: any) {
  if(item.value === merchantTipIndexMap.value[merchantId]) return
  merchantDiyTipValueMap.value[merchantId] = ''
  merchantTipIndexMap.value[merchantId] = item.value
  void appMerchantOrderCalculatePriceCart()
}

// 单个订单的自定义小费确认（金额，单位：美元）
function handleConfirmTip() {
  // 如果未填写其他小费金额，失去焦点时默认填充为 0
  const val = String(diyTipValue.value || '').trim()
  if (!val) {
    diyTipValue.value = '0'
  }
  // 使用自定义小费时，选中"其他"这一项
  if (selectedTipIndex.value !== 0) {
    selectedTipIndex.value = 0
  }
  void appMerchantOrderCalculatePriceCart()
}

// 批量订单：确认某个店铺的自定义小费（金额，单位：美元）
function handleConfirmTipForMerchant(merchantId: string) {
  const val = String(merchantDiyTipValueMap.value[merchantId] || '').trim()
  if (!val) {
    merchantDiyTipValueMap.value[merchantId] = '0'
  }
  // 使用自定义小费时，选中"其他"这一项
  if (merchantTipIndexMap.value[merchantId] !== 0) {
    merchantTipIndexMap.value[merchantId] = 0
  }
  void appMerchantOrderCalculatePriceCart()
}

// 是否选择了配送周卡
const isWeeklyDelivery = ref(false);
// 切换配送周卡
const toggleWeeklyDelivery = (value: boolean) => {
  if(value === isWeeklyDelivery.value) return
  isWeeklyDelivery.value = value;
  void appMerchantOrderCalculatePriceCart()
};

// 价格明细
const priceDetailRef = ref<InstanceType<typeof PriceDetail>>();
// 打开价格明细
const openPriceDetail = () => {
  priceDetailRef.value?.onOpen(priceData.value, cartSavingsData.value?.savings || 0);
};

function navigateTo(url: string) {
  uni.navigateTo({ url })
}

// 支付参数
const payMethodOptions = ref({
  orderId: '',
  cardId: '',
  payMethod: 1, // 支付方式 1信用卡 2余额
  payPassword: '',
})
useEventEmit(EventEnum.CHOOSE_PAYMENT_METHOD, (data) => {
  if(data) {
    if(data.payMethod === 1) {
      payMethodOptions.value.cardId = data.cardId
      payMethodOptions.value.cardNumber = data.cardNumber
      payMethodOptions.value.payMethod = 1
    } else {
      payMethodOptions.value.payMethod = 2
    }
  }
})


const storeId = ref('')
const orderType = ref('') // 订单类型：batch-批量下单，normal-普通下单
const batchCartIds = ref([]) // 批量下单的购物车ID列表
const formData = ref<CreateOrderCartBo>({
  orderRemark: '',
  phone: '',
  receiveMethod: 0,
  startScheduledTime: 0,
  endScheduledTime: 0,
  tipDiscount: 0,
  weeklyDeliveryFee: 0,
})
// 是否需要餐具
const needTableware = ref(false)

async function safeAwait<T>(label: string, task: () => Promise<T>): Promise<T | undefined> {
  try {
    return await task()
  } catch (e) {
    console.error(`[checkout] ${label} failed`, e)
    return undefined
  }
}
onLoad(async (options: any)=> {
  loading.value = true

  try {
    // 判断是批量下单还是普通下单
    if(options.type == 'batch' && options.cartIds) {
      // 批量下单模式
      orderType.value = 'batch'
      batchCartIds.value = options.cartIds.split(',')
      console.log("下单类型",options.type);

      // 默认取用户信息中的手机号作为收货手机号
      formData.value.phone = userStore.userInfo.phone || ''
      contact.value.areaCode = userStore.userInfo.areaCode || ''

      // 严格按顺序执行
      await safeAwait('getAddressList', getAddressList)
      await safeAwait('getBatchCartInfo', getBatchCartInfo)
      await safeAwait('appUserCardSelectDefault', appUserCardSelectDefault)
    } else if(options.storeId) {
      // 普通下单模式
      orderType.value = 'normal'
      storeId.value = options.storeId as string
      formData.value.orderRemark = options.orderRemark as string

      needTableware.value = options.needTableware === 'true'

      // 默认取用户信息中的手机号作为收货手机号
      formData.value.phone = userStore.userInfo.phone || ''
      contact.value.areaCode = userStore.userInfo.areaCode || ''

      // 严格按顺序执行
      await safeAwait('getAddressList', getAddressList)
      await safeAwait('getCartInfo', getCartInfo)
      await safeAwait('getStoreDetail', getStoreDetail)
      await safeAwait('appUserCardSelectDefault', appUserCardSelectDefault)
    }
  } finally {
    loading.value = false
  }
})

onShow(async ()=> {
  // 刷新地址，并在必要时重新计算价格
  await safeAwait('getAddressList', getAddressList)
  const hasCart =
    orderType.value === 'batch'
      ? (batchCartIds.value?.length || 0) > 0
      : (cartDataList.value?.length || 0) > 0
  if (hasCart) {
    await safeAwait('appMerchantOrderCalculatePriceCart', appMerchantOrderCalculatePriceCart)
  }
})

// 页面加载状态
const loading = ref(true);
onMounted(() => {
  userStore.getUserInfo()
  const currentHour = dayjs().hour();
  if (currentHour >= 11 && currentHour <= 14) {
    setDeliveryMinutes(60);
  } else if (currentHour >= 17 && currentHour <= 20) {
    // 晚餐高峰期，配送时间延长
    setDeliveryMinutes(50);
  } else {
    // 非高峰期，正常配送时间
    setDeliveryMinutes(40);
  }
});

const cartDataList = ref<MerchantCartVo[]>([])
async function getCartInfo() {
  const res: any = await appMerchantCartListByMerchantIdPost({
    params: {
      merchantId: storeId.value,
    }
  })

  console.log('购物车列表', res)
  cartDataList.value = res.data

  // 购物车有菜品，查询菜品会员折扣价 + 计算价格（严格串行）
  if(cartDataList.value.length > 0) {
    await appMerchantCartCalculateSavings()
    await appMerchantOrderCalculatePriceCart()
  }
}

// 批量下单：查询购物车详情
async function getBatchCartInfo() {
  try {
    // 根据购物车ID列表，按店铺分组查询
    const cartIds = batchCartIds.value
    console.log('批量购物车ID列表', cartIds)
    
    // 1. 先获取所有店铺列表
    const merchantRes = await appMerchantCartListMerchantPost({});
    console.log('批量模式-购物车店铺列表', merchantRes);
    
    if (!merchantRes.data || merchantRes.data.length === 0) {
      cartDataList.value = [];
      return;
    }
    
    // 2. 对每个店铺查询完整的商品信息
    const merchantPromises = merchantRes.data.map(async (merchant: any) => {
      try {
        const cartRes = await appMerchantCartListByMerchantIdPost({
          params: {
            merchantId: merchant.id
          }
        });
        console.log(`批量模式-店铺 ${merchant.merchantName} 的商品列表`, cartRes);
        
        // 只保留选中的商品（根据 cartIds 过滤）
        const filteredItems = (cartRes.data || []).filter((item: any) => 
          cartIds.includes(String(item.id))
        );
        
        // 如果该店铺有选中的商品，才返回
        if (filteredItems.length > 0) {
          return {
            ...merchant,
            merchantCartVoList: filteredItems
          };
        }
        return null;
      } catch (error) {
        console.error(`获取店铺 ${merchant.id} 商品失败`, error);
        return null;
      }
    });
    
    // 3. 等待所有店铺的商品信息加载完成，并过滤掉 null
    const results = await Promise.all(merchantPromises);
    cartDataList.value = results.filter(item => item !== null);
    console.log('批量模式-最终购物车数据', cartDataList.value);
    
    // 批量模式：查询菜品会员折扣价 + 计算价格（严格串行）
    if(cartIds.length > 0) {
      await appMerchantCartCalculateSavings()
      await appMerchantOrderCalculatePriceCart()
    }
  } catch (error) {
    console.error('获取批量购物车详情失败', error)
    cartDataList.value = [];
  }
}

// 查询菜品会员折扣价
const cartSavingsData = ref({})
async function appMerchantCartCalculateSavings() {
  const cartIds = orderType.value == 'batch' ? batchCartIds.value : cartDataList.value.map(item => item.id)
  const res: any = await appMerchantCartCalculateSavingsPost({
    body: cartIds
  })
  console.log('菜品会员折扣价', res)
  cartSavingsData.value = res.data
}

// 获取商家详情信息
// 商家是否支持配送
const storeIsDeliveryService = computed(()=> {
  if(!storeDetail.value) return false
  return +storeDetail.value.deliveryService === 1
})
// 商家是否支持自提
const storeIsSelfPickup = computed(()=> {
  if(!storeDetail.value) return false
  return +storeDetail.value.selfPickup === 1
})
const storeDetail = ref<MerchantVo>({})
// 用户距离商家的距离信息
const storeDistance = ref(null)
async function getStoreDetail() {
  const res: any = await appMerchantDetailMerchantIdGet({
    params: {
      merchantId: storeId.value,
    }
  })

  console.log('商家详情', res)
  storeDetail.value = res.data as MerchantVo

  // 配送时间(是否支持配送)
  if(+storeDetail.value.deliveryService === 1) {
    // 配送时间
    deliveryMinutes.value = res.data.deliveryTime || 0
  }
  if(+storeDetail.value.selfPickup === 1) {
    // 自提时间
    selfPickupMinutes.value = res.data.pickupTime
  }
  // 商户的经纬度存在,并且用户的经纬度也存在
  if(res.data.latitude && res.data.longitude && userStore.userLocation.latitude && userStore.userLocation.longitude) {
    let distance = getDistanceInMiles(res.data.latitude, res.data.longitude, userStore.userLocation.latitude, userStore.userLocation.longitude)
    console.log('距离商家距离', distance)
    storeDistance.value = distance
  }

  // 判断配送和自取的开通状态
  const hasDelivery = +storeDetail.value.deliveryService === 1
  const hasPickup = +storeDetail.value.selfPickup === 1

  if (!hasDelivery && !hasPickup) {
    // 两个都没开通，不显示切换组件
    showDeliverySwitch.value = false
  } else if (!hasDelivery && hasPickup) {
    // 只开通自取，默认选中自取
    deliveryMethod.value = 1
    showDeliverySwitch.value = true
  } else if (hasDelivery && !hasPickup) {
    // 只开通配送，默认选中配送
    deliveryMethod.value = 0
    showDeliverySwitch.value = true
  } else {
    // 两个都开通，默认选中配送
    deliveryMethod.value = 0
    showDeliverySwitch.value = true
  }
}

const priceData = ref({})
async function appMerchantOrderCalculatePriceCart() {
  // 优先使用新选择的地址id
  const targetAddressId = selectedAddressId.value || currentAddressId.value
  // if(!targetAddressId) return
  
  const cartIds = orderType.value == 'batch' ? batchCartIds.value : cartDataList.value.map(item => item.id)
  
  // 批量模式使用批量计算价格接口
  if(orderType.value == 'batch') {
    // 构建 merchantCouponMap: { merchantId: couponId }
    const couponMap: Record<string, number> = {}
    Object.keys(merchantCouponMap.value).forEach(merchantId => {
      if(merchantCouponMap.value[merchantId]?.id) {
        couponMap[merchantId] = merchantCouponMap.value[merchantId].id
      }
    })
    
    // 构建 merchantTipMap: { merchantId: tipAmount } (小费金额，单位：美元)
    const tipMap: Record<string, number> = {}
    cartDataList.value.forEach((merchant: any) => {
      const merchantId = String(merchant.id)
      if(deliveryMethod.value === 1) {
        // 自取订单不需要小费
        tipMap[merchantId] = 0
      } else {
        // 配送订单需要小费
        const diyTip = merchantDiyTipValueMap.value[merchantId]
        const tipIndex = merchantTipIndexMap.value[merchantId] || 0
        if(diyTip) {
          // 自定义小费金额（美元）
          tipMap[merchantId] = Number(diyTip) || 0
        } else if(tipIndex > 0) {
          // 选择固定金额选项
          tipMap[merchantId] = tipIndex
        } else {
          tipMap[merchantId] = 0
        }
      }
    })
    
    const res: any = await appMerchantOrderCalculatePriceCartBatchPost({
      body: {
        addressId: targetAddressId,
        cartIds: cartIds,
        receiveMethod: deliveryMethod.value === 0 ? 1 : 2,
        merchantCouponMap: couponMap,
        merchantTipMap: tipMap, // 小费金额（美元）
        phone: formData.value.phone,
        areaCode: contact.value.areaCode,
      }
    })
    console.log('批量购物车下单价格', res)
    priceData.value = res.data
  } else {
    // 普通模式使用单店铺计算价格接口
    // 计算小费金额（美元）
    let tipAmount = 0
    if(deliveryMethod.value === 0) {
      // 配送订单需要小费
      if(diyTipValue.value) {
        tipAmount = Number(diyTipValue.value) || 0
      } else if(selectedTipIndex.value > 0) {
        tipAmount = selectedTipIndex.value
      }
    }
    
    const res: any = await appMerchantOrderCalculatePriceCartPost({
      body: {
        addressId: targetAddressId,
        cartIds: cartIds,
        receiveMethod: deliveryMethod.value === 0 ? 1 : 2,
        couponId: couponInfo.value ? couponInfo.value.id : '',
        tipDiscount: tipAmount, // 小费金额（美元），自取订单不需要小费
        // weeklyDeliveryFee: isWeeklyDelivery.value ? 1 : 2, // 是否支付周配送费(1-是 2-否)
        phone: formData.value.phone,
        areaCode: contact.value.areaCode,
      }
    })
    console.log('购物车下单价格', res)
    priceData.value = res.data
  }
}

// 获取用户地址列表
const addressesList = ref([])
// 当前选中的地址id
const currentAddressId = ref('')
// 新选择的地址id（优先使用）
const selectedAddressId = ref('')
// 当前选中的地址信息
const addressInfo = computed(()=> {
  if(addressesList.value.length === 0) return {}
  // 优先使用新选择的地址id，如果没有则使用默认的地址id
  const targetId = selectedAddressId.value || currentAddressId.value
  return addressesList.value.find(item => String(item.id) === String(targetId)) || {};
});

async function getAddressList() {
  const res: any = await appUserAddressListPost({
    params: {
      pageNum: 1,
      pageSize: 100,
    }
  })
  console.log('获取用户地址列表', res)
  addressesList.value = res.rows
  if(addressesList.value.length > 0) {
    currentAddressId.value = addressesList.value[0].id

    let data = addressesList.value[0]

    // 回显送达偏好（deliveryType: 1-亲自送达 2-放门口）
    if(+data.deliveryType === 1) {
      visitMethod.value.label = t('components.visit.leaveItToMePersonally')
      visitMethod.value.value = 0
    }
    if(+data.deliveryType === 2) {
      visitMethod.value.label = t('components.visit.putItAtTheDoor')
      visitMethod.value.value = 1
    }
  }
}

function chooseAddress() {
  // 优先使用新选择的地址id
  const targetAddressId = selectedAddressId.value || currentAddressId.value
  uni.navigateTo({
    url: '/pages-store/pages/order/choose-address?id=' + targetAddressId,
    events: {
      // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
      acceptDataFromOpenedPage: function(data) {
        console.log('获取被打开页面传送到当前页面的数据', data)
        // 将新选择的地址id存储到selectedAddressId中
        selectedAddressId.value = data.data
        
        // 回显送达偏好（deliveryType: 1-亲自送达 2-放门口）
        if(+data.deliveryType === 1) {
          visitMethod.value.label = t('components.visit.leaveItToMePersonally')
          visitMethod.value.value = 0
        }
        if(+data.deliveryType === 2) {
          visitMethod.value.label = t('components.visit.putItAtTheDoor')
          visitMethod.value.value = 1
        }

        // 重新计算价格
        void appMerchantOrderCalculatePriceCart()
      },
    },
  })
}

function appUserCardSelectDefault() {
  return appUserCardSelectDefaultPost({}).then((res: any)=> {
    console.log('查询用户默认信用卡', res)
    payMethodOptions.value.cardId = res.data?.cardId || ''
    payMethodOptions.value.cardNumber = res.data?.cardNumber || ''
    return res
  })
}

// 是否显示周配送费选项
const isShowWeeklyDelivery = computed(()=> {
  let time = userStore?.userInfo?.weeklyDeliveryExpire;
  // 如果值为null，返回true
  if (time === null) return true;
  // 如果值不存在（如undefined），也返回true（根据你的需求可调整）
  if (!time) return true;
  // 检测是否到期：已过期返回true，未过期返回false
  return dayjs().isAfter(dayjs(Number(time)));
})

const passwordInputRef = ref(null)
const resOrderId = ref('')
const resOrderIds = ref([]) // 批量下单返回的订单ID列表
function handleGoSettle() {
  // 优先使用新选择的地址id
  const targetAddressId = selectedAddressId.value || currentAddressId.value
  if(!targetAddressId) {
    uni.showToast({
      title: t('pages-store.checkout.pleaseSelectAddress'),
      icon: 'none'
    })
    return
  }
  if(payMethodOptions.value.payMethod === 1 && !payMethodOptions.value.cardId) {
    uni.showToast({
      title: t('pages-store.checkout.pleaseSelectCreditCard'),
      icon: 'none'
    })
    return
  }

  // 仅支持预约配送：必须先选择预约时间
  if (deliveryTimeType.value === 2 && (!diyTime.value.startTime || !diyTime.value.endTime)) {
    uni.showToast({
      title: t('pages-store.checkout.chooseTime'),
      icon: 'none'
    })
    return
  }
  
  // 批量下单
  if(orderType.value == 'batch') {
    if(resOrderIds.value.length === 0) {
      // 构建 merchantCouponMap: { merchantId: couponId }
      const couponMap: Record<string, number> = {}
      Object.keys(merchantCouponMap.value).forEach(merchantId => {
        if(merchantCouponMap.value[merchantId]?.id) {
          couponMap[merchantId] = merchantCouponMap.value[merchantId].id
        }
      })
      
      // 构建 merchantTipMap: { merchantId: tipAmount } (小费金额，单位：美元)
      const tipMap: Record<string, number> = {}
      cartDataList.value.forEach((merchant: any) => {
        const merchantId = String(merchant.id)
        if(deliveryMethod.value === 1) {
          // 自取订单不需要小费
          tipMap[merchantId] = 0
        } else {
          // 配送订单需要小费
          const diyTip = merchantDiyTipValueMap.value[merchantId]
          const tipIndex = merchantTipIndexMap.value[merchantId] || 0
          if(diyTip) {
            // 自定义小费金额（美元）
            tipMap[merchantId] = Number(diyTip) || 0
          } else if(tipIndex > 0) {
            // 选择固定金额选项
            tipMap[merchantId] = tipIndex
          } else {
            tipMap[merchantId] = 0
          }
        }
      })
      
      let data = {
        addressId: targetAddressId,
        phone: formData.value.phone,
        areaCode: contact.value.areaCode,
        cartIds: batchCartIds.value,
        merchantCouponMap: couponMap,
        merchantTipMap: tipMap,
        deliveryMethod: visitMethod.value.label, // 派送方式(如放门口或者交到顾客手中)
        deliveryType: deliveryTimeType.value, // 1-立即交付 2-预约交付
        orderRemark: formData.value.orderRemark,
        receiveMethod: deliveryMethod.value === 0 ? 1 : 2, // 收货方式(1-派送 2-自取)
        startScheduledTime: '', //
        endScheduledTime: '', //
        needTableware: needTableware.value ? 1 : 2, // 餐具  1是 2否
      }

      // 如果是预约派送
      if(deliveryTimeType.value === 1) {
        const result = getTimeStamps(showDeliveryTime.value);
        data.startScheduledTime = result.startTimestamp
        data.endScheduledTime = result.endTimestamp
      } else {
        data.startScheduledTime = diyTime.value.startTime
        data.endScheduledTime = diyTime.value.endTime
      }
      console.log('批量下单参数', data)
      appMerchantOrderCreateOrderCartBatchPost({
        body: data
      }).then(res=> {
        console.log('批量下单成功', res)
        resOrderIds.value = res.data.orderIds || []
        // 如果是余额支付,弹出支付密码弹窗
        if(payMethodOptions.value.payMethod === 2) {
          passwordInputRef.value?.showPasswordInput()
        } else {
          appMerchantOrderPayOrderBatch()
        }
      })
    } else {
      // 如果是余额支付,弹出支付密码弹窗
      if(payMethodOptions.value.payMethod === 2) {
        passwordInputRef.value?.showPasswordInput()
      } else {
        appMerchantOrderPayOrderBatch()
      }
    }
  } else {
    // 普通下单
    if(!resOrderId.value) {
      // 计算小费金额（美元）
      let tipAmount = 0
      if(deliveryMethod.value === 0) {
        // 配送订单需要小费
        if(diyTipValue.value) {
          tipAmount = Number(diyTipValue.value) || 0
        } else if(selectedTipIndex.value > 0) {
          tipAmount = selectedTipIndex.value
        }
      }
      
      let data = {
        addressId: targetAddressId,
        phone: formData.value.phone,
        areaCode: contact.value.areaCode,
        cartIds: cartDataList.value.map(item => item.id),
        couponId: couponInfo.value ? couponInfo.value.id : '',
        deliveryMethod: visitMethod.value.label, // 派送方式(如放门口或者交到顾客手中)
        deliveryType: deliveryTimeType.value, // 1-立即交付 2-预约交付
        orderRemark: formData.value.orderRemark,
        receiveMethod: deliveryMethod.value === 0 ? 1 : 2, // 收货方式(1-派送 2-自取)
        startScheduledTime: '', //
        endScheduledTime: '', //
        tipDiscount: tipAmount, // 小费金额（美元），自取订单不需要小费
        // weeklyDeliveryFee: isWeeklyDelivery.value ? 1 : 2, // 是否支付周配送费(1-是 2-否)
        needTableware: needTableware.value ? 1 : 2, // 餐具  1是 2否
      }

      // 如果是预约派送
      if(deliveryTimeType.value === 1) {
        const result = getTimeStamps(showDeliveryTime.value);
        data.startScheduledTime = result.startTimestamp
        data.endScheduledTime = result.endTimestamp
      } else {
        data.startScheduledTime = diyTime.value.startTime
        data.endScheduledTime = diyTime.value.endTime
      }
      console.log('下单参数', data)
      appMerchantOrderCreateOrderCartPost({
        body: data
      }).then(res=> {
        console.log('下单成功', res)
        resOrderId.value = res.data || ''
        // 如果是余额支付,弹出支付密码弹窗
        if(payMethodOptions.value.payMethod === 2) {
          passwordInputRef.value?.showPasswordInput()
        } else {
          appMerchantOrderPayOrder()
        }
      })
    } else {
      // 如果是余额支付,弹出支付密码弹窗
      if(payMethodOptions.value.payMethod === 2) {
        passwordInputRef.value?.showPasswordInput()
      } else {
        appMerchantOrderPayOrder()
      }
    }
  }
}

function payPawSuccess(password: string) {
  payMethodOptions.value.payPassword = password
  if(orderType.value === 'batch') {
    appMerchantOrderPayOrderBatch()
  } else {
    appMerchantOrderPayOrder()
  }
}

function appMerchantOrderPayOrder() {
  appMerchantOrderPayOrderPost({
    body: {
      ...payMethodOptions.value,
      orderId: resOrderId.value
    }
  }).then(res=> {
    console.log('支付结果', res)
    uni.showToast({
      title: t('pages-store.checkout.paymentSuccess'),
      icon: 'none'
    })

    setTimeout(()=> {
      // 支付成功后跳转到当前订单详情页
      if (resOrderId.value) {
        uni.reLaunch({
          url: `/pages-store/pages/order/index?id=${resOrderId.value}`
        })
      } else {
        uni.navigateBack({
          delta: 2,
        })
      }
    }, 500)
  })
}

// 批量订单支付
function appMerchantOrderPayOrderBatch() {
  // 使用批量支付接口
  appMerchantOrderPayOrderBatchPost({
    body: {
      orderIds: resOrderIds.value,
      cardId: payMethodOptions.value.cardId,
      payMethod: payMethodOptions.value.payMethod,
      payPassword: payMethodOptions.value.payPassword
    }
  }).then(res=> {
    console.log('批量支付结果', res)
    uni.showToast({
      title: t('pages-store.checkout.paymentSuccess'),
      icon: 'none'
    })

    setTimeout(()=> {
      // 批量支付后，优先跳转到第一笔订单详情；若无订单ID则返回
      const firstOrderId = resOrderIds.value && resOrderIds.value.length > 0 ? resOrderIds.value[0] : ''
      if (firstOrderId) {
        uni.redirectTo({
          url: `/pages-store/pages/order/index?id=${firstOrderId}`
        })
      } else {
        uni.navigateBack({
          delta: 2,
        })
      }
    }, 500)
  }).catch(err => {
    console.error('批量支付失败', err)
    uni.showToast({
      title: '支付失败',
      icon: 'none'
    })
  })
}

function getTimeStamps(timeStr: string) {
  // 验证输入是否为空
  if (!timeStr || typeof timeStr !== 'string') {
    throw new Error('输入必须是有效的时间字符串，格式如 "HH:mm-HH:mm"');
  }

  // 验证格式是否正确
  const timeFormatRegex = /^([01]\d|2[0-3]):([0-5]\d)-([01]\d|2[0-3]):([0-5]\d)$/;
  if (!timeFormatRegex.test(timeStr)) {
    throw new Error('时间格式不正确，请使用 "HH:mm-HH:mm" 格式，例如 "17:57-18:27"');
  }

  // 分割时间字符串
  const [startTimeStr, endTimeStr] = timeStr.split('-');

  // 获取当前日期
  const today = dayjs().format('YYYY-MM-DD');

  // 解析开始和结束时间
  const startTime = dayjs(`${today} ${startTimeStr}`);
  const endTime = dayjs(`${today} ${endTimeStr}`);

  // 验证时间是否有效
  if (!startTime.isValid()) {
    throw new Error(`开始时间 ${startTimeStr} 无效`);
  }

  if (!endTime.isValid()) {
    throw new Error(`结束时间 ${endTimeStr} 无效`);
  }

  // 验证结束时间是否晚于开始时间
  if (endTime.isBefore(startTime)) {
    throw new Error('结束时间不能早于开始时间');
  }

  // 返回时间戳（毫秒）
  return {
    startTimestamp: startTime.valueOf(),
    endTimestamp: endTime.valueOf()
  };
}

/**
 * CreateOrderCartBo
 */
export interface CreateOrderCartBo {
  /**
   * 配送地址id
   */
  addressId?: number;
  /**
   * 区号
   */
  areaCode?: string;
  /**
   * 购物车id列表
   */
  cartIds?: number[];
  /**
   * 优惠券id
   */
  couponId?: number;
  /**
   * 派送方式(如放门口或者交到顾客手中)
   */
  deliveryMethod?: string;
  /**
   * 交付时间类型(1-立即交付 2-预约交付)
   */
  deliveryType?: number;
  /**
   * 订单备注
   */
  orderRemark?: string;
  /**
   * 手机号
   */
  phone: string;
  /**
   * 收货方式(1-派送 2-自取)
   */
  receiveMethod: number;
  /**
   * 预约时间- 开始
   */
  startScheduledTime?: number;
  /**
   * 预约时间- 结束
   */
  endScheduledTime?: number;
  /**
   * 小费比例
   */
  tipDiscount?: number;
  /**
   * 是否支付周配送费(1-是 2-否)
   */
  weeklyDeliveryFee?: number;
  [property: string]: any;
}

// 单个订单的优惠券信息
const couponInfo = ref(null)
// 批量订单：每个店铺的优惠券映射 merchantId -> couponInfo
const merchantCouponMap = ref<Record<string, any>>({})
// 批量订单：每个店铺的小费映射 merchantId -> tipAmount (小费金额，单位：美元)
const merchantTipMap = ref<Record<string, number>>({})
// 批量订单：每个店铺的小费比例映射 merchantId -> tipPercent (小费比例，0-100)
const merchantTipPercentMap = ref<Record<string, number>>({})

function navigateToCoupon(merchantId?: string) {
  const targetMerchantId = merchantId || storeId.value
  uni.navigateTo({
    url: '/pages-user/pages/coupon/list?id=' + targetMerchantId,
    events: {
      // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
      selectedCoupon: function(data) {
        console.log(data)
        if(data) {
          if(orderType.value === 'batch' && merchantId) {
            // 批量模式：存储到对应店铺的优惠券映射
            merchantCouponMap.value[merchantId] = data
          } else {
            // 单个订单模式
            couponInfo.value = data
          }
          // 重新计算价格
          void appMerchantOrderCalculatePriceCart()
        }
      },
    },
  })
}
function handleClose(merchantId?: string) {
  if(orderType.value === 'batch' && merchantId) {
    // 批量模式：清除对应店铺的优惠券
    delete merchantCouponMap.value[merchantId]
  } else {
    // 单个订单模式
    couponInfo.value = null
  }
  // 重新计算价格
  void appMerchantOrderCalculatePriceCart()
}
</script>

<template>
  <navbar />
  <view
    class="animate-in fade-in animate-ease-out animate-duration-300"
    v-show="loading"
  >
    <!-- 骨架屏 -->
    <CheckoutSkeleton
  /></view>
  <view
    class="animate-in fade-in animate-ease-in animate-duration-300"
    v-if="!loading"
  >
    <!-- 页面标题 -->
    <view class="px-30rpx pt-20rpx">
      <view class="text-46rpx font-bold text-#333 mb-52rpx">{{ t("pages-store.checkout.title") }}</view>

      <!-- 配送方式选择 -->
      <!-- <l-segmented
        @click="handleClickSegmented"
        :value="deliveryMethod"
        :options="deliveryMethodOptions"
        shape="round"
        bg-color="#F2F2F2"
        active-color="#333"
      /> -->
    </view>

    <!-- 地址信息 -->
    <view class="mt-4rpx">
      <view
        class="animate-in fade-in animate-ease-out animate-duration-300"
        v-show="deliveryMethod === 0"
      >
        <!-- 收货地址 -->
        <view @click="chooseAddress" class="flex-center-sb border-bottom py-36rpx px-30rpx">
          <!-- 地址图标 -->
          <view class="flex items-center">
            <image
              src="@img/chef/145.png"
              mode="aspectFill"
              class="w-44rpx h-44rpx shrink-0 relative z-1"
            />
            <!-- 地址信息 -->
            <view v-if="addressesList.length > 0 && addressInfo" class="ml-28rpx">
              <view
                class="text-32rpx lh-32rpx font-500 text-#333 block mb-8rpx"
                >
                <text class="line-clamp-1">{{ addressInfo.formattedAddress }}</text>
              </view>
              <view class="text-28rpx lh-28rpx text-#6D6D6D">{{
                  addressInfo.displayName
              }}</view>
            </view>
            <view v-else class="ml-28rpx text-32rpx lh-32rpx font-500 text-#333">{{ t('pages-store.checkout.addAddress') }}</view>
          </view>
          <image
            src="@img/chef/142.png"
            mode="aspectFill"
            class="w-32rpx h-32rpx shrink-0"
          />
        </view>
        <!-- 配送偏好 -->
        <view
          @click="chooseVisitMethod"
          class="flex-center-sb border-bottom py-36rpx px-30rpx"
        >
          <view class="flex items-center">
            <image
              src="@img/chef/1333.png"
              mode="aspectFill"
              class="w-44rpx h-44rpx shrink-0 relative z-1"
            />
            <view class="ml-28rpx text-32rpx lh-32rpx font-500 text-#333">
              {{ visitMethod.label }}
            </view>
          </view>
          <image
            src="@img/chef/142.png"
            mode="aspectFill"
            class="w-32rpx h-32rpx shrink-0"
          />
        </view>
        <!-- 联系电话 -->
        <view
          @click="openChangePhone"
          class="flex-center-sb border-bottom py-36rpx px-30rpx"
        >
          <view class="flex items-center">
            <image
              src="@img/chef/1334.png"
              mode="aspectFill"
              class="w-44rpx h-44rpx shrink-0 relative z-1"
            />
            <view class="ml-28rpx text-32rpx lh-32rpx font-500 text-#333">
              {{ contact.areaCode }} {{ formData.phone }}
            </view>
          </view>
          <image
            src="@img/chef/142.png"
            mode="aspectFill"
            class="w-32rpx h-32rpx shrink-0"
          />
        </view>
      </view>
      <view
        class="animate-in fade-in animate-ease-in animate-duration-300"
        v-show="deliveryMethod === 1"
      >
        <!-- 门店地址 -->
        <view class="flex items-center border-bottom py-36rpx px-30rpx">
          <image
            src="@img/chef/1337.png"
            mode="aspectFill"
            class="w-44rpx h-44rpx shrink-0 relative z-1"
          />
          <view class="ml-28rpx">
            <text class="text-32rpx lh-32rpx font-500 text-#333 block mb-8rpx"
              >{{ storeDetail?.merchantName }}</text
            >
            <text class="text-28rpx lh-28rpx text-#6D6D6D line-clamp-1"
              >{{ storeDetail?.merchantAddress }}</text
            >
          </view>
        </view>
        <!-- 门店距离 -->
        <view class="flex items-center border-bottom py-36rpx px-30rpx">
          <image
            src="@img/chef/145.png"
            mode="aspectFill"
            class="w-44rpx h-44rpx shrink-0 relative z-1"
          />
          <view class="ml-28rpx">
            <text
              class="text-32rpx lh-32rpx font-500 text-#333 block mb-8rpx"
              >{{ t("pages-store.checkout.distance") }}</text
            >
            <text class="text-28rpx lh-28rpx text-#6D6D6D">
              <template v-if="storeDistance">
                {{ storeDistance }} {{ t('common.mile') }}
              </template>
              <template v-else>{{ t('pages-store.checkout.enableLocationForDistance') }}</template>
            </text>
          </view>
        </view>
      </view>

      <!-- 个人配送选项 -->
      <view class="flex-center-sb py-36rpx px-30rpx">
        <view class="flex items-center">
          <image
            src="@img/chef/146.png"
            mode="aspectFill"
            class="w-44rpx h-44rpx shrink-0 relative z-1"
          />
          <view class="ml-28rpx text-32rpx lh-32rpx font-500 text-#333">
            <template v-if="deliveryMethod === 0">
              {{ t("pages-store.checkout.deliveryTime") }}
            </template>
            <template v-if="deliveryMethod === 1">
              {{ t('pages-store.checkout.pickupTime') }}
            </template>
          </view>
        </view>
        <!-- 时间 -->
        <view class="text-32rpx lh-32rpx font-500 text-#333">
          <!--配送-->
          <template v-if="deliveryMethod === 0">
            <!--即刻配送-->
            <template v-if="deliveryTimeType === 1">
              {{ showDeliveryTime }}
            </template>
            <template v-else>
              {{ userSelectedDeliveryTimeDate }}
            </template>
          </template>
          <!--自取-->
          <template v-if="deliveryMethod === 1">
            <!--即刻配送-->
            <template v-if="deliveryTimeType === 1">
              {{ showDeliveryTime }}
            </template>
            <template v-else>
              {{ userSelectedSelfPickupTimeDate }}
            </template>
          </template>
        </view>
      </view>
      <!--配送：当前业务仅支持预约配送；batch 模式也要展示预约入口-->
      <template v-if="(storeIsDeliveryService || orderType === 'batch') && deliveryMethod === 0">
        <view class="pb-36rpx px-30rpx">
          <view
            @click="toggleDeliveryTimeType(2)"
            :class="[deliveryTimeType === 2 ? 'border-#333' : 'border-#D8D8D8']"
            class="w-full h-152rpx text-28rpx lh-28rpx border-solid border-1px rounded-20rpx center"
          >
            <view class="text-center">
              <view class="text-#333 mb-12rpx">
                {{ t("pages-store.checkout.appointmentDelivery") }}
              </view>
              <view class="text-#7D7D7D">
                <template v-if="!userSelectedDeliveryTimeDate">
                  {{ t("pages-store.checkout.chooseTime") }}
                </template>
                <template v-else>
                  {{ userSelectedDeliveryTimeDate }}
                </template>
              </view>
            </view>
          </view>
        </view>
      </template>
      <!--自取：当前业务仅支持预约自取；batch 模式同样展示预约入口 -->
      <template v-if="(storeIsSelfPickup || orderType === 'batch') && deliveryMethod === 1">
        <view class="pb-36rpx px-30rpx">
          <view
            @click="toggleDeliveryTimeType(2)"
            :class="[deliveryTimeType === 2 ? 'border-#333' : 'border-#D8D8D8']"
            class="w-full h-152rpx text-28rpx lh-28rpx border-solid border-1px rounded-20rpx center"
          >
            <view class="text-center">
              <view class="text-#333 mb-12rpx">
                {{ t('pages-store.checkout.appointmentPickup') }}
              </view>
              <view class="text-#7D7D7D">
                <template v-if="!userSelectedSelfPickupTimeDate">
                  {{ t("pages-store.checkout.chooseTime") }}
                </template>
                <template v-else>
                  {{ userSelectedSelfPickupTimeDate }}
                </template>
              </view>
            </view>
          </view>
        </view>
      </template>
    </view>

    <!-- 分隔线 -->
    <view class="w-full h-10rpx bg-#F6F6F6"></view>

    <!-- 订单信息摘要 -->
    <view class="pt-36rpx pb-36rpx" v-if="orderType === 'normal' && cartDataList.length > 0">
      <text
        class="px-30rpx text-32rpx lh-32rpx font-500 text-#333 block mb-10rpx"
        >{{ t("pages-store.checkout.orderInfoSummary") }}</text
      >

      <wd-collapse v-model="collapseValue">
        <wd-collapse-item name="item3">
          <template #title="{ expanded, disabled, isFirst }">
            <view class="flex-center-sb">
              <view class="flex items-center">
                <image
                  class="w-80rpx h-80rpx rounded-50% mr-24rpx"
                  :src="storeDetail?.logo"
                  mode="aspectFill"
                />
                <view>
                  <view class="text-30rpx lh-30rpx text-#333 font-500"
                    >{{ storeDetail?.merchantName }}</view
                  >
                  <view
                    class="text-28rpx lh-28rpx text-#7D7D7D font-400 mt-16rpx"
                    >{{ cartDataList.length }} {{ t('pages-user.cart.items') }}</view
                  >
                </view>
              </view>
              <image
                :class="[expanded ? 'rotate--90' : 'rotate-90']"
                src="@img/chef/142.png"
                mode="aspectFill"
                class="w-32rpx h-32rpx shrink-0 transition-all duration-300"
              />
            </view>
          </template>
          <template v-for="(item , index) in cartDataList">
            <view
              class="w-full border-bottom h-136rpx flex-center-sb pl-46rpx pr-30rpx"
            >
              <view class="flex items-center">
                <view
                  class="w-48rpx h-48rpx rounded-8rpx bg-#F2F2F2 center mr-40rpx"
                  >{{ index + 1 }}</view
                >
                <view>
                  <view class="text-32rpx lh-32rpx text-#333 font-500"
                    >{{ item.merchantDishVo?.dishName }}</view
                  >
                  <view v-if="item.sideDishList?.length > 0"
                    class="text-28rpx lh-28rpx text-#7D7D7D font-400 mt-12rpx"
                    >
                    <template v-for="dish in item.sideDishList">
                       <text class="mr-6rpx">{{ dish.merchantSideDishItemVo?.name }}</text>
                       <text class="text-#00A76D mx-6rpx">+${{ dish.merchantSideDishItemVo?.price }}</text>
                    </template>
                  </view>
                </view>
              </view>
              <view class="text-32rpx lh-32rpx text-#333 font-500">${{ item.merchantDishVo?.discountPrice }}</view>
            </view>
          </template>
        </wd-collapse-item>
      </wd-collapse>
    </view>
    
    <!-- 批量模式：多店铺列表 -->
    <view class="pt-36rpx pb-36rpx" v-if="orderType === 'batch' && cartDataList.length > 0">
      <text
        class="px-30rpx text-32rpx lh-32rpx font-500 text-#333 block mb-20rpx"
        >{{ t("pages-store.checkout.orderInfoSummary") }}</text
      >
      <view class="px-30rpx">
        <view
          v-for="(merchant, merchantIndex) in cartDataList"
          :key="merchant.id"
          class="mb-20rpx rounded-16rpx border-1rpx border-solid border-[#E8E8E8] overflow-hidden"
        >
          <!-- 店铺头部 -->
          <view class="p-20rpx flex items-center bg-#F6F6F6">
            <image
              class="w-60rpx h-60rpx rounded-50% mr-20rpx"
              :src="merchant.logo"
              mode="aspectFill"
            />
            <view>
              <view class="text-28rpx lh-28rpx text-#333 font-500"
                >{{ merchant.merchantName }}</view
              >
              <view
                class="text-24rpx lh-24rpx text-#7D7D7D font-400 mt-8rpx"
                >{{ merchant.merchantCartVoList.length }} {{ t('pages-user.cart.items') }}</view
              >
            </view>
          </view>

          <!-- 商品列表 -->
          <view class="px-20rpx">
            <view
              v-for="(item, itemIndex) in merchant.merchantCartVoList"
              :key="item.id"
              class="py-20rpx flex items-start"
              :class="itemIndex < merchant.merchantCartVoList.length - 1 ? 'border-bottom border-[#F2F2F2]' : ''"
            >
              <!-- 商品图片 -->
              <image
                :src="item.merchantDishVo?.dishImage?.split(',')[0]"
                mode="aspectFill"
                class="w-100rpx h-100rpx shrink-0 rounded-12rpx"
              ></image>

              <!-- 商品信息 -->
              <view class="ml-16rpx flex-1">
                <view class="text-[#333333] text-26rpx lh-36rpx font-500 line-clamp-2">{{
                    item.merchantDishVo?.dishName
                }}</view>
                
                <!-- 配菜信息 -->
                <view class="text-[#7D7D7D] text-22rpx lh-26rpx mt-8rpx" v-if="item.sideDishList?.length > 0">
                  <template v-for="dish in item.sideDishList">
                    <text class="mr-6rpx">
                      {{ dish?.merchantSideDishItemVo?.name || '' }}
                    </text>
                    <text v-if="dish?.merchantSideDishItemVo?.price" class="text-#00A76D mr-10rpx">+${{ dish?.merchantSideDishItemVo?.price }}</text>
                  </template>
                </view>

                <!-- 价格和数量 -->
                <view class="flex items-center justify-between mt-12rpx">
                  <view class="flex items-center">
                    <text class="text-[#333333] text-28rpx font-500"
                    >${{ item.merchantDishVo?.discountPrice }}</text>
                    <text
                      v-if="item.merchantDishVo?.originalPrice && item.merchantDishVo?.originalPrice !== item.merchantDishVo?.discountPrice"
                      class="text-[#7D7D7D] text-22rpx line-through ml-8rpx"
                    >${{ item.merchantDishVo?.originalPrice }}</text>
                  </view>
                  <view class="text-[#7D7D7D] text-22rpx">
                    x{{ item.count }}
                  </view>
                </view>
              </view>
            </view>
          </view>

          <!-- 批量模式：每个店铺的优惠券和小费选择 -->
          <view v-if="merchant.id" class="px-20rpx pb-20rpx border-top border-[#F2F2F2] mt-20rpx">
            <!-- 优惠券 -->
            <view @click="navigateToCoupon(String(merchant.id))" class="flex-center-sb py-24rpx gap-20rpx">
              <view class="flex-center-sb flex-1">
                <view class="flex items-center">
                  <image
                      src="@img/chef/105.png"
                      mode="aspectFill"
                      class="w-36rpx h-36rpx relative z-1"
                  />
                  <view class="ml-20rpx text-26rpx lh-26rpx font-500 text-#333">
                    {{ merchantCouponMap[String(merchant.id)] ? merchantCouponMap[String(merchant.id)].snapshotNameZh : t('pages-store.checkout.addCoupon') }}
                  </view>
                </view>
                <view v-if="merchantCouponMap[String(merchant.id)]" @click.stop="handleClose(String(merchant.id))" class="i-carbon:close-filled text-32rpx text-#7D7D7D"></view>
              </view>
              <image
                src="@img/chef/142.png"
                mode="aspectFill"
                class="w-24rpx h-24rpx shrink-0"
              />
            </view>

            <!-- 小费（仅配送时显示） -->
            <view v-if="deliveryMethod === 0" class="border-top border-[#F2F2F2] pt-24rpx">
              <view class="flex items-center mb-20rpx">
                <image
                    src="@img/chef/1335.png"
                    mode="aspectFill"
                    class="w-36rpx h-36rpx relative z-1"
                />
                <view class="ml-20rpx text-26rpx lh-26rpx font-500 text-#333">
                  {{ t('pages-store.checkout.chooseTips') }}
                </view>
              </view>

              <view class="flex-center-sb gap-16rpx">
                <view
                    v-for="(item, index) in tipOptions"
                    :key="index"
                    @click="selectedTipChangeForMerchant(String(merchant.id), item)"
                    :class="[
                      merchantTipIndexMap[String(merchant.id)] === item.value
                        ? 'border-#333'
                        : 'border-#D8D8D8',
                    ]"
                    class="flex-1 h-64rpx text-24rpx lh-64rpx text-#333 rounded-16rpx border-solid border-1px center"
                >
                  {{ item.label }}
                </view>
                <view
                    @click="selectedTipChangeForMerchant(String(merchant.id), { value: 0 })"
                    :class="[
                      merchantTipIndexMap[String(merchant.id)] === 0
                        ? 'border-#333'
                        : 'border-#D8D8D8',
                    ]"
                    class="flex-1 h-64rpx text-24rpx lh-64rpx text-#333 rounded-16rpx border-solid border-1px center"
                >
                  <view class="px-10rpx center">
                    <wd-input
                        no-border
                        use-prefix-slot
                        @blur="handleConfirmTipForMerchant(String(merchant.id))"
                        custom-class="!center !text-24rpx !bg-transparent flex-1 !text-center"
                        placeholderStyle="font-size: 24rpx;color: #333; text-align: center;"
                        :placeholder="t('pages-store.checkout.other')"
                        v-model="merchantDiyTipValueMap[String(merchant.id)]"
                        @confirm="handleConfirmTipForMerchant(String(merchant.id))"
                    >
                      <template #suffix>
                        <text v-if="merchantDiyTipValueMap[String(merchant.id)] && merchantDiyTipValueMap[String(merchant.id)].length > 0">$</text>
                      </template>
                    </wd-input>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 批量模式且没有数据时的提示 -->
    <view class="pt-36rpx pb-36rpx" v-if="orderType === 'batch' && cartDataList.length === 0">
      <text
        class="px-30rpx text-32rpx lh-32rpx font-500 text-#333 block mb-10rpx"
        >{{ t("pages-store.checkout.orderInfoSummary") }}</text
      >
      <view class="px-30rpx py-40rpx text-center">
        <text class="text-28rpx text-#7D7D7D">已选择 {{ batchCartIds.length }} 件商品</text>
      </view>
    </view>

    <view class="pt-36rpx pb-36rpx" >
      <!-- 单个订单模式：优惠券 -->
      <template v-if="orderType === 'normal'">
        <view @click="navigateToCoupon()" class="flex-center-sb border-bottom py-36rpx px-30rpx gap-20rpx">
          <view class="flex-center-sb flex-1">
            <view class="flex items-center">
              <image
                  src="@img/chef/105.png"
                  mode="aspectFill"
                  class="w-44rpx h-44rpx relative z-1"
              />
              <view class="ml-28rpx text-32rpx lh-32rpx font-500 text-#333">
                {{ couponInfo ? couponInfo.snapshotNameZh : t('pages-store.checkout.addCoupon') }}
              </view>
            </view>
            <view v-if="couponInfo" @click.stop="handleClose()" class="i-carbon:close-filled text-36rpx text-#7D7D7D"></view>
          </view>
          <image
            src="@img/chef/142.png"
            mode="aspectFill"
            class="w-32rpx h-32rpx shrink-0"
          />
        </view>
      </template>

      <!-- 单个订单模式：小费（仅配送时显示） -->
      <template v-if="orderType === 'normal' && deliveryMethod === 0">
        <view class="border-bottom py-36rpx px-30rpx">
          <view class="flex items-center mb-28rpx">
            <image
                src="@img/chef/1335.png"
                mode="aspectFill"
                class="w-44rpx h-44rpx relative z-1"
            />
            <view class="ml-28rpx text-32rpx lh-32rpx font-500 text-#333">
              {{ t('pages-store.checkout.chooseTips') }}
            </view>
          </view>

          <view class="flex-center-sb gap-22rpx">
            <view
                v-for="(item, index) in tipOptions"
                :key="index"
                @click="selectedTipChange(item)"
                :class="[
                selectedTipIndex === item.value
                  ? 'border-#333'
                  : 'border-#D8D8D8',
              ]"
                class="w-full h-72rpx text-28rpx lh-28rpx text-#333 rounded-20rpx border-solid border-1px center"
            >
              {{ item.label }}
            </view>
            <view
                @click="selectedTipChange({ value: 0 })"
                :class="[
                selectedTipIndex === 0
                  ? 'border-#333'
                  : 'border-#D8D8D8',
              ]"
                class="w-full h-72rpx text-28rpx lh-28rpx text-#333 rounded-20rpx border-solid border-1px center"
            >
              <view class="px-10rpx center">
                <wd-input
                    no-border
                    use-prefix-slot
                    @blur="handleConfirmTip"
                    custom-class="!center !text-30rpx !bg-transparent flex-1 !text-center"
                    placeholderStyle="font-size: 28rpx;color: #333; text-align: center;"
                    :placeholder="t('pages-store.checkout.other')"
                    v-model="diyTipValue"
                    @confirm="handleConfirmTip"
                >
                  <template #suffix>
                    <text v-if="diyTipValue.length > 0">$</text>
                  </template>
                </wd-input>
              </view>
            </view>
          </view>
        </view>
      </template>

        <!-- 配送费周卡 -->
<!--        <view v-if="isShowWeeklyDelivery" class="border-bottom px-30rpx py-36rpx">-->
<!--          <view class="flex-center-sb">-->
<!--            <text class="text-32rpx lh-32rpx font-500 text-#333"-->
<!--            >{{ t('pages-store.checkout.tips') }}?</text-->
<!--            >-->
<!--            <view-->
<!--                class="flex items-center gap-50rpx text-32rpx lh-32rpx font-500 text-#333"-->
<!--            >-->
<!--              <view @click="toggleWeeklyDelivery(true)" class="flex items-center">-->
<!--                &lt;!&ndash; 单选按钮是 &ndash;&gt;-->
<!--                <image-->
<!--                    :src="-->
<!--                  isWeeklyDelivery-->
<!--                    ? '/static/images/chef/133.png'-->
<!--                    : '/static/images/chef/134.png'-->
<!--                "-->
<!--                    class="w-36rpx h-36rpx shrink-0 mr-10rpx"-->
<!--                    mode="aspectFit"-->
<!--                />-->
<!--                {{ t('pages-store.checkout.yes') }}-->
<!--              </view>-->
<!--              <view-->
<!--                  @click="toggleWeeklyDelivery(false)"-->
<!--                  class="flex items-center"-->
<!--              >-->
<!--                &lt;!&ndash; 单选按钮否 &ndash;&gt;-->
<!--                <image-->
<!--                    :src="-->
<!--                  !isWeeklyDelivery-->
<!--                    ? '/static/images/chef/133.png'-->
<!--                    : '/static/images/chef/134.png'-->
<!--                "-->
<!--                    class="w-36rpx h-36rpx shrink-0 mr-10rpx"-->
<!--                    mode="aspectFit"-->
<!--                />-->
<!--                {{ t('pages-store.checkout.no') }}-->
<!--              </view>-->
<!--            </view>-->
<!--          </view>-->
<!--          <view class="text-28rpx lh-28rpx text-#7D7D7D mt-24rpx">-->
<!--            {{ t('pages-store.checkout.tipsDesc') }}-->
<!--          </view>-->
<!--        </view>-->
      <!-- </template> -->

      <!-- 费用明细 -->
      <view class="border-bottom px-30rpx py-32rpx">
        <view class="flex-center-sb mb-40rpx text-32rpx lh-32rpx text-#333">
          <text>{{ t('pages-store.order.subtotal') }}</text>
          <text v-if="orderType === 'batch'">${{ priceData?.totalActualAmount || '0.00' }}</text>
          <text v-else>${{ priceData?.actualAmount || '0.00' }}</text>
        </view>
        <view class="flex-center-sb mb-40rpx text-32rpx lh-32rpx text-#333">
          <view @click="openPriceDetail" class="flex items-center">
            <text>{{ t('pages-store.order.taxesAndOtherFees') }}</text>
            <image
              src="@img/chef/1336.png"
              class="w-28rpx h-28rpx shrink-0 ml-10rpx mt-4rpx"
              mode="aspectFit"
            />
          </view>
          <view v-if="orderType === 'batch'">
            <text>${{ (Number(priceData?.totalTax || 0) + Number(priceData?.totalTip || 0) + Number(priceData?.totalDeliveryFee || 0)).toFixed(2) }}</text>
          </view>
          <view v-else>
            <text>${{ (Number(priceData?.tax || 0) + Number(priceData?.tip || 0) + Number(priceData?.deliveryFee || 0)).toFixed(2) }}</text>
          </view>
        </view>
        <view class="flex-center-sb text-32rpx lh-32rpx text-#333 font-500">
          <text>{{ t('pages-store.order.total') }}</text>
          <text v-if="orderType === 'batch'">${{ priceData?.totalPaidAmount || '0.00' }}</text>
          <text v-else>${{ priceData?.paidAmount || '0.00' }}</text>
        </view>
      </view>

      <!-- 支付方式 -->
      <view
          @click="navigateTo('/pages-user/pages/choose-paymethod/index')"
        class="flex-center-sb border-bottom text-32rpx lh-32rpx font-500 text-#333 py-36rpx px-30rpx"
      >
        <view class="flex items-center">
          <image
            src="@img/chef/138.png"
            class="w-44rpx h-44rpx mr-28rpx shrink-0"
            mode="aspectFit"
          />
          <text class="">
            <template v-if="payMethodOptions.payMethod === 1">{{ t('pages-user.choosePaymethod.creditCard') }}</template>
            <template v-else>{{ t('pages-user.choosePaymethod.wallet') }}</template>
          </text>
        </view>
        <view class="flex items-center">
          <view class="mr-12px">
            <template v-if="payMethodOptions.payMethod === 1">
              <!--判断用户是否有信用卡-->
              <text v-if="!payMethodOptions.cardId">{{ t("pages-user.member.creditCard") }}</text>
              <text v-else>{{ payMethodOptions.cardNumber }}</text>
            </template>
            <template v-else-if="payMethodOptions.payMethod === 2">
              <text>{{ t('pages-user.choosePaymethod.wallet') }}</text>
            </template>
          </view>
          <image
            src="@img/chef/142.png"
            class="w-32rpx h-32rpx shrink-0"
            mode="aspectFit"
          />
        </view>
      </view>
    </view>

    <view class="h-204rpx"></view>

    <!-- 底部支付按钮 -->
    <view class="fixed z-9 bottom-0 left-0 right-0 bg-white">
      <view @click="navigateTo('/pages-user/pages/member/index')" v-if="cartSavingsData && cartSavingsData.savings > 0" class="h-76rpx bg-#CE7138 pl-56rpx flex items-center">
        <image
          src="@img/chef/1289.png"
          class="mr-10rpx w-32rpx h-32rpx shrink-0"
        ></image>
        <text class="text-[#fff] text-24rpx lh-24rpx">
          {{ t('pages-store.store.use') }} {{ Config.appName }} {{ t('pages-store.store.tips3') }}  ${{ cartSavingsData?.savings }} {{ t('pages-store.store.discount') }}
        </text>
      </view>
      <view class="px-30rpx py-18rpx">
        <wd-button
            @click="handleGoSettle"
          custom-class="!h-92rpx !text-30rpx !text-#fff !lh-92rpx !rounded-16rpx"
          block
          >{{ t('common.goSettle') }}
        </wd-button>
        <!-- <wd-button
            v-if="showDeliverySwitch"
            @click="handleGoSettle"
          custom-class="!h-92rpx !text-30rpx !text-#fff !lh-92rpx !rounded-16rpx"
          block
          >{{ t('common.goSettle') }}
        </wd-button> -->
        <!-- <wd-button
            v-else
            custom-class="!h-92rpx !text-30rpx !text-#fff !lh-92rpx !rounded-16rpx"
            block
        >{{ t('pages-store.checkout.notActivated') }}
        </wd-button> -->
      </view>
      <view :style="[configStore.iosSafeBottomPlaceholder]"></view>
    </view>

    <!--  修改配送偏好  -->
    <visit-method ref="visitMethodRef" @confirm="handleVisitMethodConfirm" />
    <!-- 修改手机号 -->
    <change-phone ref="changePhoneRef" @confirm="confirmPhone" />
    <!-- 价格明细 -->
    <price-detail ref="priceDetailRef" />
    <password-container @success="payPawSuccess" ref="passwordInputRef" />
  </view>
</template>

<style>
page {
  background-color: #fff;
}
</style>
<style scoped lang="scss">
:deep(.wd-collapse-item) {
  &::after {
    display: none;
    background-color: transparent !important;
  }
}
:deep(.wd-collapse-item__header.is-expanded) {
  &::after {
    background-color: transparent !important;
  }
}
:deep(.wd-collapse-item__body) {
  padding: 0 !important;
}
</style>
