<template>
  <mescroll-body @init="mescrollInit" :down="{ use: true, minAngle: angle }" @down="downCallback" @up="upCallback">
    <view class="suggest-record-container">
      <view class="record-item" v-for="(item, index) in listData" :key="index">
        <view class="record-item-header" :class="{ borderBottom: item.status === 1 }" :style="{ paddingBottom: item.status === 0 ? '0' : '24rpx' }">
          <view class="title u-line-2">{{ item.content }}</view>
          <view class="pic-list">
            <view class="pic-wrap" v-for="(pic, index) in item.albumPics" :key="index">
              <image :src="pathPre + pic" mode="aspectFill" @click="previewImage(item.albumPics, index)" />
            </view>
          </view>
          <view class="time-status-wrap">
            <view class="time-text">{{ item.publishAt }}</view>
            <view class="status-text" :class="{ warning: item.status === 0 }">{{ item.status === 1 ? '已完结' : '待反馈' }}</view>
          </view>
        </view>
        <view class="record-item-bottom" v-if="item.status === 1">
          <view class="bottom-title-text">{{ item.feedback }}</view>
          <view class="bottom-time-text">{{ item.feedbackAt }}</view>
        </view>
      </view>
    </view>
  </mescroll-body>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad, onPageScroll } from '@dcloudio/uni-app'
import { getQuestionFeedbackList } from '@/api/home'
import { useListLoader } from '@/composables/useListLoader'
import { useGlobal } from '@/composables/index'

const { pathPre } = useGlobal()

const angle = ref(45)
// 监听页面滚动
onPageScroll((e) => {
  if (e.scrollTop > 80) {
    angle.value = 90
  } else {
    angle.value = 45
  }
})

// 图片预览功能
const previewImage = (pics: string[], currentIndex: number) => {
  // 将图片路径转换为完整路径
  const fullImageList = pics.map((pic) => pic)

  // 调用uni的图片预览API
  uni.previewImage({
    current: fullImageList[currentIndex], // 当前显示图片的http链接
    urls: fullImageList, // 需要预览的图片http链接列表
    loop: true // 是否可循环预览
  })
}

// 列表加载
const { listData, upCallback, downCallback, handleSearch, mescrollInit } = useListLoader({
  apiFn: getQuestionFeedbackList,
  initialParams: {
    parkId: uni.getStorageSync('parkId')
  }
})
</script>

<style lang="scss" scoped>
.suggest-record-container {
  box-sizing: border-box;
  width: 100%;
  padding: 34rpx 28rpx;
  .record-item {
    box-sizing: border-box;
    padding: 34rpx 34rpx 38rpx 34rpx;
    background-color: #fff;
    border-radius: 14rpx;
    margin-bottom: 24rpx;
    .record-item-header {
      box-sizing: border-box;
      &.borderBottom {
        border-bottom: 1rpx solid #f4f5f9;
      }
      .title {
        font-size: 28rpx;
        color: #333;
        font-weight: 600;
      }
      .pic-list {
        display: flex;
        align-items: center;
        margin-top: 20rpx;
        .pic-wrap {
          width: 139rpx;
          height: 139rpx;
          border-radius: 8rpx;
          background-color: #f4f5f9;
          margin-right: 24rpx;
          image {
            width: 139rpx;
            height: 139rpx;
            border-radius: 8rpx;
          }
        }
      }
      .time-status-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 22rpx;
        .time-text {
          font-size: 25rpx;
          color: #999;
        }
        .status-text {
          font-size: 25rpx;
          color: #999;
          &.warning {
            color: #ff7024;
          }
        }
      }
    }
    .record-item-bottom {
      box-sizing: border-box;
      padding-top: 26rpx;
      .bottom-title-text {
        font-size: 28rpx;
        font-weight: 500;
        line-height: 42rpx;
        margin-bottom: 20rpx;
        color: #999;
      }
      .bottom-time-text {
        font-size: 25rpx;
        color: #999;
      }
    }
  }
}
</style>
