<script setup lang="ts">
import {appMerchantOrderDetailPost, type MerchantOrderVo} from "@/service";
import {formatTimestampWithMonthName} from "@/utils/utils";
const {t} = useI18n()

const orderId = ref('')
onLoad((options) => {
  if(options.id) {
    orderId.value = options.id;
    appMerchantOrderDetail()
  }
})
const loading = ref(true)
const orderDetail = ref<MerchantOrderVo>()
function appMerchantOrderDetail() {
  loading.value = true;
  appMerchantOrderDetailPost({
    params: {
      orderId: orderId.value,
    }
  }).then((res: any)=> {
    console.log('订单详情', res)
    orderDetail.value = res.data
    // 是自取订单还是配送订单 1-派送 2-自取 orderDetail.value.receiveMethod
    if(res.data && res.data.merchantOrderDishVoList.length > 0) {
      merchantDishReviewList.value = orderDetail.value?.dishReviewVoList?.map((review, index) => {
        // 获取对应索引的merchantDishVo（数组一一对应，索引相同）
        const dish = orderDetail.value?.merchantOrderDishVoList?.[index]?.merchantDishVo || {};

        // 映射目标字段
        return {
          dishId: review.dishId || dish.id || '', // 优先取评价中的dishId，无则取商品的id
          dishImage: dish.dishImage?.split(',')[0] || '', // 商品图片（来自merchantDishVo）
          dishName: dish.dishName || '', // 商品名称（来自merchantDishVo）
          dishDescription: dish.dishDescription || '', // 商品描述（来自merchantDishVo）
          rating: review.rating || 0, // 评价分数（来自dishReviewVo）
          content: review.content || '', // 评价内容（来自dishReviewVo）
          images: review.images || '', // 评价图片（来自dishReviewVo）
          createTime: formatTimestampWithMonthName(review.createTime) || '',
        };
      })

      console.log('merchantDishReviewList', merchantDishReviewList.value)
    }
  }).finally(() => {
    loading.value = false;
  })
}
// 是自取订单还是配送订单
const isSelfPickup = computed(()=> {
  return orderDetail.value?.receiveMethod === 2
})

const merchantDishReviewList = ref([
  {
    dishId: '', // 菜品ID
    dishImage: '',
    dishName: '',
    dishDescription: '',
    rating: 0,
    content: '',
    images: '',
    createTime: '',
  }
])
</script>

<template>
  <view>
    <!-- 导航栏 -->
    <navbar customClass="!bg-transparent" />

    <view class="pl-30rpx pt-20rpx text-46rpx lh-46rpx font-bold text-#333 mb-52rpx">{{ t('pages-store.view-reviews.viewTitle') }}</view>

    <!-- 配送员评价信息 -->
    <view v-if="!isSelfPickup" class="bg-white mb-20rpx px-30rpx py-40rpx">
      <text class="text-36rpx lh-36rpx text-#333 font-500 block mb-34rpx">{{ t('pages-store.view-reviews.deliveryDriver') }}</text>

      <view class="bg-#F7F7F7 h-100rpx rounded-16rpx pl-16rpx flex items-center mb-28rpx">
        <image
            :src="orderDetail?.deliveryAvatar"
            mode="aspectFill"
            class="w-80rpx h-80rpx rounded-full mr-20rpx"
        />
        <text class="text-28rpx lh-28rpx text-#333">{{ orderDetail?.deliveryFirstName }} {{ orderDetail?.deliverySurname }}</text>
      </view>

      <!-- 评分 -->
      <view>
        <view v-if="orderDetail?.deliveryReviewVo?.rating" class="flex items-center">
          <wd-rate v-model="orderDetail.deliveryReviewVo.rating" size="24rpx" space="10rpx" color="#D1D1D1" active-color="#333" />
          <text class="text-24rpx lh-24rpx text-#333 font-500 ml-10rpx pt-4rpx">{{ orderDetail?.deliveryReviewVo?.rating }}{{ t('common.point') }}</text>
        </view>
        <view class="text-22rpx lh-22rpx text-#999 mt-14rpx">{{ formatTimestampWithMonthName(orderDetail?.deliveryReviewVo?.createTime) }}</view>
      </view>

      <!-- 标签 -->
      <view class="flex flex-wrap gap-16rpx mt-24rpx mb-20rpx">
        <view
            v-for="tag in orderDetail?.deliveryReviewVo?.tags.split(',')"
            :key="tag"
            class="bg-#00A76D/18 h-42rpx rounded-42rpx px-16rpx center text-24rpx text-#333"
        >
          {{ tag }}
        </view>
      </view>

      <view class="text-28rpx lh-28rpx text-#333">
        {{ orderDetail?.deliveryReviewVo?.content }}
      </view>

      <!-- 图片 -->
      <view class="flex items-center gap-32rpx mt-20rpx">
        <template v-for="item in orderDetail?.deliveryReviewVo?.images.split(',')">
          <wd-img width="202rpx" height="202rpx" radius="12rpx" mode="aspectFill" :src="item" :enable-preview="true" />
        </template>
      </view>
    </view>

    <view class="bg-white py-40rpx">
      <text class="px-30rpx text-36rpx lh-36rpx text-#333 font-500 block mb-34rpx">{{ t('pages-store.view-reviews.goods') }}</text>

      <template v-for="item in merchantDishReviewList">
        <view class="mb-20rpx pb-30rpx px-30rpx last:mb-0 border-b-1rpx border-b-solid border-b-#D8D8D8 last:border-none">
          <view class="bg-#F7F7F7 h-100rpx rounded-16rpx pl-16rpx pr-24rpx flex items-center mb-28rpx">
            <image
                :src="item.dishImage"
                mode="aspectFill"
                class="w-80rpx h-80rpx rounded-16rpx mr-20rpx shrink-0"
            />
            <view class="h-80rpx mt-10rpx">
              <text class="text-28rpx text-#333 line-clamp-1">{{ item.dishName }}</text>
              <view class="text-24rpx lh-24rpx text-#999 mt-12rpx line-clamp-1">{{ item.dishDescription }}</view>
            </view>
          </view>

          <!-- 评分 -->
          <view>
            <view class="flex items-center">
              <wd-rate v-model="item.rating" size="24rpx" space="10rpx" color="#D1D1D1" active-color="#333" />
              <text class="text-24rpx lh-24rpx text-#333 font-500 ml-10rpx pt-4rpx">{{ item.rating }}{{ t('common.point') }}</text>
            </view>
            <view class="text-22rpx lh-22rpx text-#999 mt-14rpx">{{ item.createTime }}</view>
          </view>

          <view class="text-28rpx lh-28rpx text-#333 mt-28rpx">
            {{ item.content }}
          </view>

          <!-- 图片 -->
          <view class="flex items-center gap-32rpx mt-20rpx">
            <template v-for="img in item.images.split(',')">
              <wd-img width="202rpx" height="202rpx" radius="12rpx" mode="aspectFill" :src="img" :enable-preview="true" />
            </template>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>

<style>
page {
  background-color: #F6F6F6;
}
</style>