<template>
  <view class="repair-page">
	<view class="status_bar"></view>
    <!-- 顶部导航栏 -->
	<view class="nav-bar">
	  <view class="nav-left" @tap="goBack">
	     <image src="http://47.104.199.163:9090/images/home/arr-left.png" style="width: 18px; height: 18px;"></image>
	  </view>
	  <view class="nav-title">在线报修</view>
	  <view class="nav-right"></view>
	</view>

    <!-- 报修类型Tab -->
	<scroll-view class="scroll-container" scroll-y="true"
		:lower-threshold="100">
    <view class="repair-type-tabs">
      <view 
        class="type-tab" 
        :class="{ active: activeType === 'public' }"
        @click="publicClick"
		style="margin-right: 20rpx;"
      >
	  <image src="http://47.104.199.163:9090/images/repair/publicRepair.png" style="width: 100%;height: 100%;"></image>
        <!-- <uni-icons type="staff" size="24" color="#fff"></uni-icons> -->
        <!-- <text class="type-text">公共报修</text> -->
      </view>
      <view 
        class="type-tab" 
        :class="{ active: activeType === 'personal' }"
        @click="personalClick"
      >
		<image src="http://47.104.199.163:9090/images/repair/personalRepair.png" style="width: 100%;height: 100%;"></image>
        <!-- <uni-icons type="person" size="24" color="#fff"></uni-icons> -->
        <!-- <text class="type-text">个人报修</text> -->
      </view>
    </view>
	
	<view style="margin: 14px 0px;">
		<text class="repair-title">报修记录</text>
	</view>

    <!-- 报修记录状态Tab -->
    <view class="record-status-tabs">
      <text 
        class="status-tab" 
        :class="{ active: activeStatus === 'pending' }"
        @click="activeStatus = 'pending'" >
        待派单
      </text>
      <text 
        class="status-tab" 
        :class="{ active: activeStatus === 'assigned' }"
        @click="activeStatus = 'assigned'"
      >
        已派单
      </text>
      <text 
        class="status-tab" 
        :class="{ active: activeStatus === 'completed' }"
        @click="activeStatus = 'completed'"
      >
        已完成
      </text>
    </view>

    <!-- 报修列表 -->
    <view class="repair-list">
      <view class="repair-item" v-for="(item, index) in repairList" :key="index">
        <!-- 标题和状态 -->
        <view class="item-header">
          <text class="item-title">{{ item.item || '暂无标题' }}</text>
          <text class="item-status" :class="item.statusClass">{{ item.status }}</text>
        </view>

        <!-- 标签 -->
        <view class="item-tags" v-if="item.projectTypeStr">
          <text class="tag" v-if="item.projectTypeStr">{{item.projectTypeStr}}</text>
		  <text class="tag">{{ item.maintenanceItemName }}</text>
        </view>

        <!-- 内容 -->
        <view class="item-content">
          {{ item.problem || '' }}
        </view>

        <!-- 图片 -->
        <view class="item-imgs" v-if="item.imageList && item.imageList.length">
          <view class="img-placeholder" v-for="(img, idx) in item.imageList" :key="idx">
            <image :src="typeof img === 'string' ? img : img.img" style="width: 100%;height: 100%;"></image>
          </view>
        </view>

        <!-- 时间和详情 -->
        <view class="item-footer">
          <text class="item-time">{{ item.orderDate || '' }}</text>
          <text class="detail-btn" @click="goDetail(item)">报修详情</text>
        </view>
      </view>
	  <!-- 空状态 -->
	  <view v-if="repairList.length === 0" class="empty-state">
	    <uni-icons type="info" size="30" color="#ccc"></uni-icons>
	    <text class="empty-text">暂无数据</text>
	  </view>
    </view>
	</scroll-view>
  </view>
</template>

<script setup>
import { ref, watch } from 'vue';
import { onLoad,onUnload } from '@dcloudio/uni-app';
import { getQueryRepair } from '../api/api.js';

// 报修类型（public:公共报修，personal:个人报修）
const activeType = ref('public');
// 报修状态（pending:待派单，assigned:已派单，completed:已完成）
const activeStatus = ref('pending');

const repairList = ref([]);
const loading = ref(false);
const pageNum = ref(1);
const pageSize = ref(10);
const maintenanceItemId = ref('');

// 状态映射
const statusMap = {
	pending: { text: '待派单', class: 'pending', value: '0' },
	assigned: { text: '已派单', class: 'assigned', value: '1' },
	completed: { text: '已完成', class: 'completed', value: '2' }
};

const getStatusInfo = (val) => {
	if (val === '0' || val === 0) return statusMap.pending;
	if (val === '1' || val === 1) return statusMap.assigned;
	if (val === '2' || val === 2) return statusMap.completed;
	return null;
};

// 获取报修列表
const fetchRepairList = async () => {
	const villageId = uni.getStorageSync('currentVillageId');
	if (!villageId || villageId === '0') {
		uni.showToast({ title: '请先选择小区', icon: 'none' });
		return;
	}

	loading.value = true;
	try {
		const params = {
			villageId,
			// maintenanceItemId: maintenanceItemId.value,
			pageSize: pageSize.value,
			pageNum: pageNum.value,
			problemStatus: statusMap[activeStatus.value].value
		};
		const res = await getQueryRepair(params);
		// console.log('接口返回:', res);
		if (res.code === 200) {
			const list = res.rows || [];
			repairList.value = list.map(item => {
				const statusInfo = getStatusInfo(item.problemStatus);
				const images = item.problemImageUrl ? item.problemImageUrl.split(',').filter(Boolean) : [];
				if (statusInfo) {
					return { ...item, status: statusInfo.text, statusClass: statusInfo.class, imageList: images };
				}
				return { ...item, imageList: images };
			});
		} else {
			uni.showToast({ title: res.msg || '获取失败', icon: 'none' });
		}
	} catch (e) {
		uni.showToast({ title: '网络异常', icon: 'none' });
	} finally {
		loading.value = false;
	}
};

// 监听状态变化自动刷新
watch(activeStatus, () => {
	fetchRepairList();
});

function publicClick(){
	activeType.value = 'public'
	uni.navigateTo({
		url:"/pageSubPack/online-repair/publicRepair"
	})
};
function personalClick(){
	activeType.value = 'personal'
	uni.navigateTo({
		url:"/pageSubPack/online-repair/personalRepair"
	})
}
// 返回上一页
const goBack = () => {
  if(uni.getStorageSync('sourcePage') === "index"){
  	uni.switchTab({
  		url:"/pages/index/index"
  	})
  }else if(uni.getStorageSync('sourcePage') === "serviceIndex"){
  	uni.switchTab({
  		url:"/pages/serviceIndex/serviceIndex"
  	})
  }
  uni.removeStorageSync('sourcePage')

}
// 跳转报修详情
const goDetail = (item) => {
  uni.navigateTo({
    url: `/pageSubPack/online-repair/repairDetail?id=${item.id}`
  });
};

onLoad(() => {
	// maintenanceItemId.value = option.maintenanceProjectId || '' // 接收维修项目id
	fetchRepairList()
});
onUnload(() =>{
	
})
</script>

<style scoped>
/* 页面整体样式 */
.repair-page {
  background: linear-gradient(to bottom left, #E2F0FF 0%, #f9f9f9 50%);
  min-height: 100vh;
  padding: 0 40rpx;
}
  .status_bar {
	height: 32px;
	width: 100%;
 }
/* 顶部导航栏 */
.nav-bar {
  height: 90rpx;
  display: flex;
  align-items: center;
  /* padding: 0 30rpx; */
  color: #fff;
  position: sticky;
  top: 44px;
  z-index: 100;
  margin-bottom: 20px;
  /* box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.2); */
}

.nav-left {
  width: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 20rpx;
  color: #000;
}

.nav-right {
  width: 60rpx;
}
/* 滚动区域 */
.scroll-container {
	flex: 1;
	width: 100%;
	height: calc(100vh - 100px);
	overflow-y: auto;
	box-sizing: border-box;
}
/* 报修类型Tab */
.repair-type-tabs {
  display: flex;
  /* background-color: #fff; */
  /* padding: 10px; */
}
.type-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100px;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
}
.type-tab.active {
  background: linear-gradient(135deg, #1E88E5 0%, #64B5F6 100%);
}
.type-tab:not(.active) {
  background: linear-gradient(135deg, #4DB6AC 0%, #80CBC4 100%);
}
.type-text {
  margin-top: 5px;
}
.repair-title{
	color: #222222;
	font-size: 16px;
	font-weight: 600;
}

/* 报修状态Tab */
.record-status-tabs {
  display: flex;
  /* background-color: #fff; */
  /* margin-top: 10px; */
  /* padding: 0 15px; */
}
.status-tab {
  /* flex: 1; */
    display: flex;
    justify-content: flex-start;
    margin-right: 40rpx;
	padding: 0 20rpx;
	text-align: left;
	height: 40px;
	line-height: 40px;
	font-size: 15px;
	color: #666;
	position: relative;
}
.status-tab.active {
  color: #2F77FD;
  font-weight: bold;
}
.status-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 45px;
  height: 4px;
  border-radius: 4rpx;
  background-color: #1E88E5;
}

/* 报修列表 */
.repair-list {
  padding: 28rpx 0rpx;
}
.repair-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
}

/* 列表项头部 */
.item-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
}
.item-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  padding-right: 20rpx;
  width: 77%;
}
.item-status {
  font-size: 14px;
}
.item-status.pending {
  /* 待派单-红色 */
	color: #ffffff;
	background-color: #E34D59;
    border-radius: 20rpx;
    font-size: 12px;
    line-height: 22px;
    padding: 0px 10px;
}
.item-status.assigned {
  /* 已派单-绿色 */
  color: #ffffff;
  background-color: #09C2BD;
  border-radius: 20rpx;
  font-size: 12px;
  line-height: 22px;
  padding: 0px 10px;
}
.item-status.completed{
	color: #ffffff;
	background-color: #2F77FD;
	border-radius: 20rpx;
	font-size: 12px;
	line-height: 22px;
	padding: 0px 10px;
}

/* 标签 */
.item-tags {
  display: flex;
  gap: 2px;
  margin-bottom: 10px;
}
.tag {
    color: #999999;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #999999;
	margin-right: 8px;
}

/* 内容 */
.item-content {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 10px;
  /* background-color: #d7e4f5; */
}

/* 图片占位 */
.item-imgs {
  display: flex;
  /* gap: 12px; */
  margin-bottom: 10px;
}
.img-placeholder {
  width: 80px;
  height: 80px;
  background-color: #f5f5f5;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;
}
		
.empty-text {
	font-size: 32rpx;
	color: #999;
	margin-top: 20rpx;
	margin-bottom: 10rpx;
}

/* 底部时间和详情 */
.item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28rpx;
}
.item-time {
  color: #999;
}
.detail-btn {
  color:#2F77FD;
}
</style>