<!-- 报事记录 -->
<template>
  <scroll-view class="content" scroll-y="true" refresher-enabled
    :refresher-triggered="isRefreshing"
    @refresherrefresh="refreshData"
    @scrolltolower="loadMore">
    <view class="conItem" v-for="(item, index) in repairList" :key="index">
      <view class="conItemTitle">
        <image src="/static/img/维修列表里.png" class="titleImg"></image>
        <text class="titleName"
          >{{ item.apartmentName }}{{ item.position }}</text
        >
      </view>
      <view class="conItemCon">
        <view class="repairInfo">
          <view class="infoRow">
            <text class="label">报修物品：</text>
            <text class="value">{{ item.repairItem }}</text>
          </view>
          <view class="infoRow">
            <text class="label">故障问题：</text>
            <text class="value">{{ item.faultDescribe }}</text>
          </view>
          <view class="infoRow">
            <text class="label">图片/视频：</text>
            <image
              :src="item.image"
              class="problemImage"
              mode="aspectFill"
            ></image>
          </view>
          <view class="infoRow">
            <text class="label">报修人：</text>
            <text class="value">{{ item.graduateName }}</text>
          </view>
          <view class="infoRow">
            <text class="label">报修人电话：</text>
            <text class="value">{{ item.telephone }}</text>
          </view>
          <view class="infoRow">
            <text class="label">上报时间：</text>
            <text class="value">{{ item.createTime }}</text>
          </view>
        </view>
        <view class="actionButtons">
          <button class="btn process" @click="handleProcess(item)">处理</button>
          <button class="btn dispatch" @click="handleDispatch(item)">
            派单
          </button>
        </view>
      </view>
    </view>
     <view style="text-align: center" v-if="isLoading">加载中...</view>
     <view v-else-if="repairList.length <= 0" class="no-data"> 暂无数据~ </view>
  </scroll-view>
</template>

<script>
import { listRepair } from "@/pages/api";
export default {
  data() {
    return {
      isRefreshing: false,

      repairList: [],
      noMore: false,
      isLoading: false,
      repairList: [],
      form: {
        pageNum: 1,
        pageSize: 10,
      },
      total: "",
    };
  },
  onLoad() {
    this.getList();
  },
  methods: {
    async getList() {
      const res = await listRepair(this.form);
      if (res.code === 200) {
        this.repairList = res.rows;
        this.total = res.total;
        if (res.total <= this.form.pageSize * this.form.pageNum) {
          this.noMore = true;
        }
        this.isLoading = false;
        this.isRefreshing = false;
        if (this.form.pageNum == 1) {
          this.repairList = res.rows;
        } else {
          this.repairList = [...this.repairList, ...res.rows];
        }
      }
    },
      refreshData() {
      this.isRefreshing = true;
      this.noMore = false; // 新增
      this.repairList = [];
      this.form.pageNum = 1; // 重置页码到第一页
      this.getList();
    },
     loadMore() {
      if (this.isLoading || this.noMore) return; // 新增 noMore 判断
      this.isLoading = true;
      this.form.pageNum++;
      this.getList();
    },
       previewImage(item, index) {
      uni.previewImage({
        current: index,
        urls: item.map((item) => item.url),
        success: (res) => {
          console.log("预览成功");
        },
        fail: (err) => {
          console.log("预览失败", err);
        },
      });
    },
    handleProcess(item) {
      uni.navigateTo({
        url: `/pagesA/bxPage/bxHandle?id=${item.id}`,
      });
    },
    handleDispatch(item) {
      console.log("派单", item);
      // 派单逻辑
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100vh;
  background-color: rgba(248, 248, 248, 1);
  padding: 20rpx;
  box-sizing: border-box;
}

.conItem {
  width: 100%;
  border-radius: 10rpx;
  background-color: rgba(255, 255, 255, 1);
  margin-bottom: 20rpx;
  padding: 20rpx;
  box-sizing: border-box;
}

.conItemTitle {
  display: flex;
  width: 100%;
  margin-bottom: 20rpx;
  align-items: center;
}

.titleImg {
  width: 38rpx;
  height: 38rpx;
}

.titleName {
  color: rgba(0, 0, 0, 1);
  font-size: 28rpx;
  text-align: left;
  margin-left: 10rpx;
  font-weight: bold;
}

.conItemCon {
  width: 100%;
}

.repairInfo {
  width: 100%;
  background-color: rgba(249, 249, 249, 1);
  padding: 20rpx;
  box-sizing: border-box;
  border-radius: 10rpx;
}

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

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

.value {
  color: rgba(0, 0, 0, 1);
  font-size: 26rpx;
  flex: 1;
}

.problemImage {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-top: 5rpx;
}

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

.btn {
  width: 130rpx;
  height: 52rpx;
  line-height: 46rpx;
  border-radius: 52rpx;
  background-color: rgba(255, 255, 255, 1);
  color: rgba(8, 179, 179, 1);
  font-size: 28rpx;
  text-align: center;
  font-family: AlibabaPuHui-regular;
  border: 2rpx solid rgba(8, 179, 179, 1);
}

.dispatch {
  border-color: #ff8c00;
  color: #ff8c00;
}
</style>
