<script setup lang="ts">
import { getOrderEvaluateListApi, getOrderEvaluateTabsApi } from '@/api/order'
import { ref } from 'vue'
// 必须导入需要用到的页面生命周期（即使在当前页面上没有直接使用到）
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import useZPaging from '@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js'
import type { orderEvaluateListResult } from '@/types/order'
import type { TabItem } from '@/types/global'
import { fullUrl, onShowRefreshData, previewImg } from '@/utils/common'

const props = defineProps<{
  goods_id: string
}>()

const paging = ref()
// 类似mixins，如果是页面滚动务必要写这一行，并传入当前ref绑定的paging，注意此处是paging，而非paging.value
useZPaging(paging)

const tabList = ref<TabItem[]>([])
const tabIndex = ref(0)
const tabsChange = (index: number) => {
  tabIndex.value = index
  paging.value.reload()
}

const dataList = ref<orderEvaluateListResult[]>([])
const queryList = async (page: number, page_size: number) => {
  const res = await getOrderEvaluateListApi({
    page,
    page_size,
    goods_id: props.goods_id,
    type: tabList.value[tabIndex.value]?.value ?? '',
  })
  paging.value.complete(res.result.data)
}

const getTabList = async () => {
  const res = await getOrderEvaluateTabsApi({
    goods_id: props.goods_id,
  })
  tabList.value = res.result.map((item) => ({
    ...item,
    disabled: false,
    badge: { count: item.count },
  }))
}

const groupedImages = (imageList: string[]) => {
  if (imageList.length <= 0) return []

  const groups = []
  const images = imageList.map((item) => fullUrl(item))

  for (let i = 0; i < images.length; i += 3) {
    groups.push(images.slice(i, i + 3))
  }

  return groups
}

onShowRefreshData(() => {
  getTabList()
})
</script>

<template>
  <z-paging ref="paging" v-model="dataList" @query="queryList" :safe-area-inset-bottom="true">
    <template #top>
      <z-tabs
        :list="tabList"
        @change="tabsChange"
        :current="tabIndex"
        :badge-style="{ backgroundColor: '#c3c3c3' }"
      />
    </template>
    <view class="evaluate panel" v-for="(item, index) in dataList" :key="index">
      <view class="top">
        <shop-user-avatar class="portrait" :url="item.user_avatar" width="70" />
        <text class="name">{{ item.user_name }}</text>
        <text class="time">{{ item.create_time }}</text>
      </view>
      <view class="rate">
        <uni-rate :value="item.score" :size="18" readonly />
        <text class="spec">{{ item.goods_spec }}</text>
      </view>
      <text class="content">{{ item.content }}</text>
      <view class="content-img">
        <view class="image-group" v-for="(group, index) in groupedImages(item.images)" :key="index">
          <image
            v-for="(img, imgIndex) in group"
            :key="imgIndex"
            :src="img"
            mode="aspectFill"
            @click="previewImg(img, item.images)"
            :class="{
              'first-image': imgIndex === 0 && group.length > 1,
              'last-image': imgIndex === group.length - 1 && group.length > 1,
              'single-image': group.length === 1,
              'middle-image': imgIndex !== 0 && imgIndex !== group.length - 1,
            }"
          />
        </view>
      </view>
      <view class="bot"> </view>
    </view>
  </z-paging>
</template>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #f4f4f4;
}

.panel {
  margin-top: 10rpx;
  background-color: #fff;
  padding: 20rpx;
  margin: 20rpx;
  border-radius: 20rpx;

  .top {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;

    .portrait {
      width: 70rpx;
      height: 70rpx;
      border-radius: 50%;
      margin-right: 10px;
    }

    .name {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 28rpx;
    }

    .time {
      font-size: 24rpx;
    }
  }

  .rate {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;

    .spec {
      ::before {
        content: '|';
        margin: 0 10rpx;
      }

      color: #666;
      font-size: 20rpx;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
  }

  .content {
    display: flex;
    padding-left: 7rpx;
    font-size: 26rpx;
    margin: 20rpx 0rpx;
  }

  .content-img {
    display: flex;
    flex-direction: column;
    margin-top: 10rpx;
  }

  .image-group {
    display: flex;
    width: 100%;
  }

  .image-group image {
    height: 200rpx;
    width: 33%;
    margin-right: 1.5%;
    margin-bottom: 10rpx;
    object-fit: cover;
    border-radius: 0;
  }

  .image-group image.single-image {
    border-radius: 20rpx;
  }

  .image-group image.first-image {
    border-top-left-radius: 20rpx;
    border-bottom-left-radius: 20rpx;
  }

  .image-group image.last-image {
    border-top-right-radius: 20rpx;
    border-bottom-right-radius: 20rpx;
  }

  .image-group image.middle-image {
    border-radius: 0;
  }

  .image-group image:last-child {
    margin-right: 0;
  }
}
</style>
