<template>
  <view class="my-reports-page">
    <!-- 导航栏 -->
    <view class="nav-bar">
      <text class="nav-back" @click="goBack">‹</text>
      <text class="nav-title">我的报告</text>
      <view style="width:40px;"></view>
    </view>

    <!-- 网格相册 -->
    <view v-if="reportList.length > 0" class="gallery-grid">
      <view
        v-for="r in reportList"
        :key="r.id"
        class="gallery-item"
        @click="viewReport(r)"
      >
        <view class="gallery-cover">
          <image
            v-if="r.beforePhoto"
            :src="imgUrl(r.beforePhoto)"
            class="cover-img"
            mode="aspectFill"
          />
          <view v-else class="cover-placeholder">
            <text style="font-size:32px;">📷</text>
          </view>
          <!-- 叠加信息 -->
          <view class="gallery-overlay">
            <text class="overlay-name">🐾 {{ r.petName }}</text>
            <text class="overlay-service">{{ serviceEmoji(r.serviceType) }} {{ r.serviceType }}</text>
          </view>
        </view>
      </view>
    </view>

    <view v-if="!loading && reportList.length === 0" class="empty-wrap">
      <text class="empty-icon">📋</text>
      <text class="empty-text">暂无报告</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getReportList, imgUrl } from '../../../utils/api.js'

const userInfo = JSON.parse(uni.getStorageSync('petstore_user') || '{}')
const storeInfo = JSON.parse(uni.getStorageSync('petstore_store') || '{}')
const loading = ref(false)
const reportList = ref([])

const goBack = () => uni.navigateBack()

const serviceEmoji = (name) => {
  if (!name) return ''
  if (name.includes('洗澡') && name.includes('美容')) return '🛁✂️'
  if (name.includes('洗澡')) return '🛁'
  if (name.includes('美容')) return '✂️'
  if (name.includes('剪指甲')) return '💅'
  if (name.includes('驱虫')) return '🐛'
  return '✨'
}

const loadReports = async () => {
  loading.value = true
  const params = userInfo.role === 'boss'
    ? { storeId: storeInfo.id }
    : { userId: userInfo.id }
  const res = await getReportList(params)
  loading.value = false
  if (res.code === 200) reportList.value = res.data
}

const viewReport = (r) => {
  // #ifdef MP-WEIXIN
  const url = `/pages/report-view/reportView?token=${r.reportToken}`
  // #endif
  // #ifdef H5
  const url = `/pages/report-view/reportView?token=${r.reportToken}`
  // #endif
  uni.navigateTo({ url })
}

onMounted(() => loadReports())
</script>

<style scoped>
.my-reports-page { padding: 0 12px 20px; background: #f5f5f5; min-height: 100vh; }
.nav-bar {
  background: #fff;
  padding: 40px 16px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 12px;
}
.nav-back { font-size: 28px; color: #333; font-weight: 300; }
.nav-title { font-size: 16px; font-weight: 600; color: #333; }

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 4px;
}
.gallery-item {
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.gallery-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
}
.cover-img { width: 100%; height: 100%; }
.cover-placeholder {
  width: 100%;
  height: 100%;
  background: #f0ede8;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,0.65));
  color: #fff;
}
.overlay-name { font-size: 13px; font-weight: 600; display: block; }
.overlay-service { font-size: 11px; opacity: 0.9; margin-top: 2px; display: block; }

.empty-wrap { display: flex; flex-direction: column; align-items: center; padding: 80px 0; }
.empty-icon { font-size: 60px; }
.empty-text { font-size: 14px; color: #999; margin-top: 12px; }
</style>
