<script lang="ts" setup>
import StarRating from './components/star-rating/star-rating.vue';
import {appMerchantOrderDetailPost} from '@/service';
import {formatTimestampWithMonthName} from '@/utils/utils';
import type {MerchantDishReviewVo, MerchantOrderVo} from '@/service/types';

const {t} = useI18n()

// 路由参数-订单ID
const orderId = ref('')
// 订单详情
const orderDetail = ref<MerchantOrderVo>()
// 加载状态
const loading = ref(false)

onLoad((options) => {
  if (options.id) {
    orderId.value = options.id as string
    getOrderDetail()
  } else {
    uni.navigateBack()
  }
})

function getOrderDetail() {
  loading.value = true
  appMerchantOrderDetailPost({
    params: {orderId: orderId.value}
  }).then((res: any) => {
    orderDetail.value = res.data
  }).finally(() => {
    loading.value = false
  })
}

// 仅展示菜品评价列表，关联并展示菜品信息
type DishReviewItem = {
  review: MerchantDishReviewVo
  dishName: string
  dishImageUrl: string
  reviewImages: string[]
  reviewTimeText: string
}

const dishReviewList = computed<DishReviewItem[]>(() => {
  const reviews = orderDetail.value?.dishReviewVoList || []
  const dishes = orderDetail.value?.merchantOrderDishVoList || []
  return reviews.map((rv: any) => {
    const matchedDish = dishes.find(d => d.id === rv.merchantOrderDishId || d.dishId === rv.dishId)
    const dishName = matchedDish?.merchantDishVo?.dishName || ''
    const dishImageUrl = (matchedDish?.merchantDishVo?.dishImage || '').split(',')[0] || ''
    const reviewImages = (rv.images || '').split(',').filter(Boolean)
    const reviewTimeText = rv.createTime ? formatTimestampWithMonthName(Number(rv.createTime)) : ''
    return {review: rv, dishName, dishImageUrl, reviewImages, reviewTimeText}
  })
})
</script>

<template>
  <view class="">
    <!-- 顶部状态栏和导航 -->
    <navbar :title="t('pages-user.order.viewReview')"></navbar>

    <!-- 评价内容区域 -->
    <view class="px-30rpx pt-24rpx">
      <template v-if="dishReviewList.length">
        <view v-for="(item, idx) in dishReviewList" :key="idx" class="mb-24rpx">
          <!-- 商品信息卡片 -->
          <view class="flex items-center bg-#F7F7F7 rounded-6rpx py-10rpx px-16rpx">
            <!-- 商品图片 -->
            <view class="w-80rpx h-80rpx shrink-0 rounded-10rpx mr-20rpx">
              <image
                  v-if="item.dishImageUrl"
                  :src="item.dishImageUrl"
                  class="w-full h-full object-cover rounded-10rpx"
                  mode="aspectFill"
              />
            </view>
            <!-- 商品信息 -->
            <view class="flex-1">
              <text class="text-28rpx font-normal text-#333333 block mb-12rpx">{{ item.dishName }}</text>
              <text class="text-24rpx font-normal text-#999999">{{ item.reviewTimeText }}</text>
            </view>
          </view>

          <!-- 评价详情卡片 -->
          <view class="">
            <!-- 星级评分 -->
            <view class="rating-section flex items-center my-20rpx">
              <StarRating :disabled="true" :modelValue="item.review.rating || 0" :showScore="false"/>
              <text class="text-24rpx font-normal text-#FF6E1A ml-10rpx">{{
                  (item.review.rating || 0)
                }}{{ t('pages-user.order.score') }}
              </text>
            </view>

            <!-- 评价文字 -->
            <text class="text-24rpx font-normal text-#666666 leading-32rpx">{{ item.review.content || '' }}</text>

            <!-- 评价图片 -->
            <view v-if="item.reviewImages.length" class="review-images flex gap-20rpx mt-20rpx mb-14rpx">
              <view
                  v-for="(image, index) in item.reviewImages"
                  :key="index"
                  class="image-item w-160rpx h-160rpx rounded-16rpx overflow-hidden bg-#f0f0f0"
              >
                <image
                    :src="image"
                    class="w-full h-full object-cover"
                    mode="aspectFill"
                />
              </view>
            </view>
          </view>
        </view>
      </template>
      <view v-else class="text-26rpx text-#999999">{{ t('pages-user.order.noReview') }}</view>
    </view>
  </view>
</template>
<style>
page {
  background-color: #fff;
}
</style>