<template>
  <view class="content">
    <!-- 顶部切换标签 -->
    <view class="tab-container">
      <view
        class="tab-item"
        :class="{ active: tabValue === 0 }"
        @click="switchTab(0)"
      >
        <text class="tab-text">待处理</text>
      </view>
      <view
        class="tab-item"
        :class="{ active: tabValue === 1 }"
        @click="switchTab(1)"
      >
        <text class="tab-text">处理中</text>
      </view>
      <view
        class="tab-item"
        :class="{ active: tabValue === 2 }"
        @click="switchTab(2)"
      >
        <text class="tab-text">已处理</text>
      </view>
      <view
        class="tab-item"
        :class="{ active: tabValue === 3 }"
        @click="switchTab(3)"
      >
        <text class="tab-text">不予处理</text>
      </view>
    </view>

    <!-- 下拉刷新容器 -->
    <scroll-view
      class="scroll-container"
      scroll-y="true"
      refresher-enabled="true"
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
      @scrolltolower="onLoadMore"
      :style="{ height: 'calc(100vh - 120rpx)' }"
    >
      <!-- 提醒列表 -->
      <view class="reminder-list">
        <!-- 空状态 -->
        <view v-if="reminderList.length === 0 && !loading" class="empty-state">
          <text class="empty-text">暂无数据</text>
        </view>

        <!-- 提醒项目列表 -->
        <view
          v-for="(item, index) in reminderList"
          :key="index"
          class="reminder-item"
          @click="handleItemClick(item)"
        >
          <!-- 卡片头部 -->
          <view class="card-header">
            <view class="header-left">
              <image
                :src="getTypeIcon(item.feedbackType)"
                class="type-icon"
              ></image>
              <text class="type-name">{{
                getTypeName(item.feedbackType)
              }}</text>
            </view>
          </view>

          <!-- 卡片内容 -->
          <view class="card-content">
            <view class="info-row">
              <text class="label">问题描述：</text>
              <text class="value">{{ item.faultDescribe }}</text>
            </view>
            <view class="info-row" v-if="item.images && item.images.length > 0">
              <text class="label">图片：</text>
              <view class="image-container">
                <image
                  v-for="(img, imgIndex) in item.images"
                  :key="imgIndex"
                  :src="img.url"
                  class="problem-image"
                  mode="aspectFill"
                  @click.stop="previewImage(item.images, imgIndex)"
                ></image>
              </view>
            </view>
            <view class="info-row">
              <text class="label">位置：</text>
              <text class="value">{{ item.position || "" }}</text>
            </view>
            <view class="info-row">
              <text class="label">上报人：</text>
              <text class="value">{{ item.graduateName || "" }}</text>
            </view>
            <view class="info-row">
              <text class="label">上报人电话：</text>
              <text class="value">{{ item.telephone || "" }}</text>
            </view>
            <view class="info-row">
              <text class="label">上报时间：</text>
              <text class="value">{{ item.createTime }}</text>
            </view>
          </view>

          <!-- 操作按钮 -->
          <view class="action-buttons" >
            <button class="btn process" @click.stop="handleProcess(item)">
              处理
            </button>
          </view>
        </view>
      </view>
      <!-- 加载更多提示 -->
      <view v-if="loading" class="loading-more">
        <text>加载中...</text>
      </view>

      <!-- 没有更多数据提示 -->
      <view v-if="noMore && reminderList.length > 0" class="no-more">
        <text>没有更多数据了</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { listReport } from "@/pages/api";
export default {
  data() {
    return {
      tabValue: 0, // 默认选中待处理
      refreshing: false,
      loading: false,
      noMore: false,
      pageNum: 1,
      pageSize: 10,
      unreadCount: 0,
      reminderList: [],
      // 类型配置
      typeConfig: [
        {
          value: 1,
          name: "报修",
          icon: "/static/img/维修列表里.png",
        },
        {
          value: 2,
          name: "报事",
          icon: "/static/img/列表里图标.png",
        },
        {
          value: 3,
          name: "投诉",
          icon: "/static/img/问题投诉列表里.png",
        },
        {
          value: 4,
          name: "建议",
          icon: "/static/img/巡检记录列表里.png",
        },
        {
          value: 5,
          name: "其他",
          icon: "/static/img/问题投诉列表里.png",
        },
      ],
    };
  },
  onLoad() {
    this.loadReminderList();
  },
  onShow() {
    // 页面显示时刷新数据
    this.refreshData();
  },
  computed: {
    // 计算未读消息数量
    unreadCount() {
      return this.reminderList.filter((item) => item.hasUnread).length;
    },
  },
  methods: {
    onChange(name) {
      this.tabValue = name;
      console.log(name);
    },

    // 刷新数据
    refreshData() {
      this.pageNum = 1;
      this.noMore = false;
      this.loadReminderList(true);
    },

    // 切换标签
    switchTab(value) {
      this.tabValue = value;
      this.pageNum = 1;
      this.noMore = false;
      this.reminderList = [];
      this.loadReminderList(true);
    },

    // 获取类型名称
    getTypeName(type) {
      const name = this.typeConfig.find((item) => item.value === type)?.name;
      return name || "";
    },

    // 获取类型图标
    getTypeIcon(type) {
      const icon = this.typeConfig.find((item) => item.value === type)?.icon;
      return icon || "/static/img/巡检记录列表里.png";
    },

    // 预览图片
    previewImage(images, index) {
      uni.previewImage({
        current: index,
        urls: images.map((img) => img.url),
        success: (res) => {
          console.log("预览成功");
        },
        fail: (err) => {
          console.log("预览失败", err);
        },
      });
    },

    // 处理按钮点击
    handleProcess(item) {
      console.log("处理项目:", item);
      uni.navigateTo({
        url: `/pagesA/bsPage/bsHandle?id=${item.id}`,
      });
    },

    // 加载提醒列表
    async loadReminderList(isRefresh = false) {
      if (this.loading) return;

      this.loading = true;

      try {
        const res = await listReport({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          state:
            this.tabValue == 0
              ? 0
              : this.tabValue == 1
              ? 1
              : this.tabValue == 2
              ? 2
              : 3, // 0: 待处理, 1: 已处理, 2: 不予处理
        });

        if (res.code === 200) {
          const data = res.rows || [];

          if (isRefresh) {
            this.reminderList = data;
            this.pageNum = 1;
          } else {
            this.reminderList = [...this.reminderList, ...data];
          }

          // 判断是否还有更多数据
          if (data.length < this.pageSize) {
            this.noMore = true;
          }
        }
      } catch (error) {
        console.error("加载提醒列表失败:", error);
      } finally {
        this.loading = false;
        this.refreshing = false;
      }
    },

    // 下拉刷新
    async onRefresh() {
      this.pageNum = 1;
      this.refreshing = true;
      this.noMore = false;
      await this.loadReminderList(true);
    },

    // 上拉加载更多
    async onLoadMore() {
      if (this.noMore || this.loading) return;

      this.pageNum++;
      await this.loadReminderList();
    },

    // 处理项目点击
    async handleItemClick(item) {
      console.log("点击提醒项目:", item);

      try {
        // 调用API标记为已读
        if (item.hasUnread) {
          await markReminderRead(item.id);
          item.hasUnread = false;
        }
      } catch (error) {
        console.error("标记已读失败:", error);
        // 即使API失败，也更新本地状态
        item.hasUnread = false;
      }
    },

    // 格式化时间
    formatTime(time) {
      const now = new Date();
      const targetTime = new Date(time);
      const diff = now - targetTime;
      const oneDay = 24 * 60 * 60 * 1000;

      if (diff < oneDay && targetTime.toDateString() === now.toDateString()) {
        return "今天";
      } else {
        return targetTime
          .toLocaleString("zh-CN", {
            year: "numeric",
            month: "2-digit",
            day: "2-digit",
            hour: "2-digit",
            minute: "2-digit",
            second: "2-digit",
          })
          .replace(/\//g, "-");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
}

.tab-container {
  display: flex;
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
}

.tab-item {
  flex: 1;
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
}

.tab-item.active {
  color: #08b3b3;
}

// .tab-item.active::after {
//   content: '';
//   position: absolute;
//   bottom: -20rpx;
//   left: 50%;
//   transform: translateX(-50%);
//   width: 60rpx;
//   height: 4rpx;
//   background-color: #08B3B3;
//   border-radius: 2rpx;
// }

.tab-text {
  font-size: 32rpx;
  font-weight: 500;
  color: #666;
}

.tab-item.active .tab-text {
  color: #08b3b3;
  font-weight: 600;
}

.pageNum-header {
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
  position: sticky;
  top: 0;
  z-index: 100;
  position: relative;
}

.pageNum-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.unread-badge {
  position: absolute;
  top: 10rpx;
  right: 30rpx;
  background-color: #f44336;
  color: #fff;
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
  min-width: 32rpx;
  text-align: center;
}

.scroll-container {
  width: 100%;
}

.reminder-list {
  padding: 20rpx;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 16rpx;
  margin: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.reminder-item {
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.reminder-item:active {
  transform: scale(0.98);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.reminder-item-line {
  height: 1rpx;
  background-color: #f0f0f0;
  width: 80%;
}

.reminder-item:active {
  transform: scale(0.98);
  box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.header-left {
  display: flex;
  align-items: center;
}

.type-icon {
  width: 38rpx;
  height: 38rpx;
  margin-right: 10rpx;
}

.type-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.card-content {
  background-color: #f9f9f9;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.info-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15rpx;
  line-height: 1.5;
  flex-wrap: wrap;
}

.info-row:last-child {
  margin-bottom: 0;
}

.label {
  color: #a9afba;
  font-size: 28rpx;
  min-width: 156rpx;
  flex-shrink: 0;
  text-align: right;
}

.value {
  color: #333;
  font-size: 26rpx;
  flex: 1;
}

.image-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  margin-top: 5rpx;
}

.problem-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-bottom: 10rpx;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20rpx;
  width: fit-content;
  margin-left: auto;
}

.btn {
  width: 130rpx;
  height: 52rpx;
  line-height: 46rpx;
  border-radius: 52rpx;
  background-color: #fff;
  color: #08b3b3;
  font-size: 28rpx;
  text-align: center;
  font-family: AlibabaPuHui-regular;
  border: 2rpx solid #08b3b3;
}

.btn.process {
  border-color: #08b3b3;
  color: #08b3b3;
}

.loading-more,
.no-more {
  text-align: center;
  padding: 30rpx;
  color: #999;
  font-size: 26rpx;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 30rpx;
  color: #999;
}

.empty-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style>
