<template>
  <view class="feedback-container">
    <NavBar title="反馈上报" @back="goBack" />

    <!-- 状态筛选 -->
    <view class="filter-bar">
      <view
        v-for="(option, index) in statusOptions"
        :key="index"
        class="filter-item"
        :class="{ active: activeStatus === option.value }"
        @click="handleStatusChange(option.value)">
        <text>{{ option.label }}</text>
      </view>
    </view>

    <!-- 反馈列表 -->
    <view class="feedback-list" v-if="list.length > 0">
      <view class="feedback-item" v-for="(item, index) in list" :key="index" @click="viewDetail(item)">
        <view class="item-header">
          <view class="item-left">
            <text class="item-user">{{ item.userName || item.nickName || '匿名用户' }}</text>
            <text class="item-time">{{ formatTime(item.createTime) }}</text>
          </view>
          <text class="status-tag" :style="getStatusStyle(item.status)">{{ fmtDictName('Feedback.status', item.status) }}</text>
        </view>
        <view class="item-content">
          <text class="content-text">{{ item.content || item.feedback || '-' }}</text>
          <view class="item-images" v-if="item.images && item.images.length > 0">
            <image
              v-for="(img, i) in item.images"
              :key="i"
              :src="img"
              mode="aspectFill"
              class="feedback-img"
              @click.stop="previewImage(img, item.images)" />
          </view>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <view class="load-more" v-if="list.length > 0">
      <text class="load-more-text" v-if="loadMoreStatus === 'more'">上拉加载更多</text>
      <text class="load-more-text" v-else-if="loadMoreStatus === 'loading'">正在加载...</text>
      <text class="load-more-text" v-else>没有更多数据了</text>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="list.length === 0 && !loading">
      <view class="empty-icon-wrapper">
        <AppIcon name="message-circle" size="48" color="#CCCCCC" />
      </view>
      <text class="empty-text">暂无反馈记录</text>
    </view>

    <!-- 加载中 -->
    <view class="loading-state" v-if="loading && list.length === 0">
      <view class="loading-spinner"></view>
      <text class="loading-text">加载中...</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { onReachBottom } from '@dcloudio/uni-app'
import { getFeedbackList } from '../../api/system.js'
import { formatTime, fmtDictName, getDictColor } from '../../utils/index.js'
import dictUtil, { loadDicts } from '../../utils/dict.js'

const list = ref([])
const loading = ref(true)
const page = ref(1)
const pageSize = ref(10)
const hasMore = ref(true)
const loadMoreStatus = ref('more')
const activeStatus = ref('')

const statusOptions = computed(() => dictUtil.getDictFilterOptions('Feedback.status'))

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

const getStatusStyle = (status) => {
  const color = getDictColor('Feedback.status', status)
  if (color) return { color, backgroundColor: `${color}1A` }
  return {}
}

const loadData = async (isLoadMore = false) => {
  if (!isLoadMore) {
    page.value = 1
    list.value = []
    hasMore.value = true
    loadMoreStatus.value = 'more'
  } else {
    loadMoreStatus.value = 'loading'
  }
  loading.value = true
  try {
    const params = { pageNum: page.value, pageSize: pageSize.value }
    if (activeStatus.value !== '') params.status = activeStatus.value

    const res = await getFeedbackList(params)
    if (res && res.code === 200) {
      const data = res.data
      const records = data.records || data.list || data
      const total = data.total || 0
      const totalPages = Math.ceil(total / pageSize.value)
      hasMore.value = page.value < totalPages
      loadMoreStatus.value = hasMore.value ? 'more' : 'noMore'
      if (isLoadMore) {
        list.value = [...list.value, ...records]
        page.value++
      } else {
        list.value = records
        page.value = 2
      }
    }
  } catch (e) {
    console.error('加载反馈列表失败:', e)
  } finally {
    loading.value = false
  }
}

const loadMore = () => { if (hasMore.value && !loading.value && loadMoreStatus.value !== 'loading') loadData(true) }

onReachBottom(() => { loadMore() })
const handleStatusChange = (status) => { activeStatus.value = status; loadData() }

const viewDetail = (item) => {
  // 简单显示反馈详情
  uni.showModal({
    title: '反馈详情',
    content: item.content || item.feedback || '暂无内容',
    showCancel: false
  })
}

const previewImage = (url, urls) => {
  uni.previewImage({ urls, current: url })
}

onMounted(async () => { await loadDicts(); loadData() })
</script>

<style scoped>
.feedback-container {
  min-height: 100vh;
  background-color: #F5F7FA;
  padding-bottom: 100rpx;
}
.filter-bar {
  display: flex;
  padding: 16rpx 20rpx;
  background-color: #FFFFFF;
  gap: 16rpx;
}
.filter-item {
  padding: 10rpx 24rpx;
  background-color: #F5F5F5;
  border-radius: 20rpx;
  font-size: 24rpx;
  color: #666666;
}
.filter-item.active {
  background: #C6171E;
  color: #FFFFFF;
}

.feedback-list {
  padding: 20rpx;
}
.feedback-item {
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
}
.item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16rpx;
}
.item-user {
  font-size: 28rpx;
  font-weight: 600;
  color: #1A1A1A;
  display: block;
}
.item-time {
  font-size: 22rpx;
  color: #999999;
  margin-top: 4rpx;
  display: block;
}
.status-tag {
  font-size: 22rpx;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-weight: 500;
}
.content-text {
  font-size: 26rpx;
  color: #333333;
  line-height: 1.6;
}
.item-images {
  display: flex;
  gap: 12rpx;
  margin-top: 16rpx;
  overflow-x: auto;
}
.feedback-img {
  width: 160rpx;
  height: 160rpx;
  border-radius: 12rpx;
  flex-shrink: 0;
}

.load-more { display: flex; justify-content: center; padding: 30rpx 0; }
.load-more-text { font-size: 26rpx; color: #999999; }
</style>
