<template>
  <view class="repair-page">
	<view class="status_bar"></view>
    <!-- 顶部导航栏 -->
	<view class="nav-bar">
	  <view class="nav-left" @tap="goBack">
	     <image src="/static/首页/arr-left.png" style="width: 48rpx; height: 48rpx;"></image>
	  </view>
	  <view class="nav-title">在线报修</view>
	  <view class="nav-right"></view>
	</view>

    <!-- 报修类型Tab -->
    <view class="repair-type-tabs">
      <view 
        class="type-tab" 
        :class="{ active: activeType === 'public' }"
        @click="publicClick"
      >
	  <image src="/static/在线报修/公共报修.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="/static/在线报修/个人报修.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">标题标题标题</text>
          <text class="item-status" :class="item.statusClass">{{ item.status }}</text>
        </view>

        <!-- 标签 -->
        <view class="item-tags">
          <text class="tag">公共报修</text>
          <text class="tag">路灯</text>
        </view>

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

        <!-- 图片占位（可替换为图片组件） -->
        <view class="item-imgs">
          <view class="img-placeholder" v-for="i in 3" :key="i">
            <!-- <uni-icons type="image" size="20" color="#ccc"></uni-icons> -->
			<image src="/static/logo.png" style="width: 100%;height: 100%;"></image>
          </view>
        </view>

        <!-- 时间和详情 -->
        <view class="item-footer">
          <text class="item-time">{{ item.time }}</text>
          <text class="detail-btn" @click="goDetail(item)">报修详情</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';

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

// 模拟报修列表数据（根据activeStatus过滤）
const repairList = computed(() => {
	let statusText = ""
	let statusClass = ""
	if(activeStatus.value === 'pending'){
		statusText = '待派单',
		statusClass = 'pending'
	} else if(activeStatus.value === 'assigned'){
		statusText = '已派单',
		statusClass = 'assigned'
	}else{
		statusText = '已完成',
		statusClass = 'completed'
	}
  // 原始数据
  const mockData = [
    {
      status: statusText,
      statusClass: statusClass,
      content: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
      time: '2023-08-01 10:05:46'
    },
	{
	  status: statusText,
	  statusClass: statusClass,
	  content: '西门的门禁不好用了，草坪有好多的草，话题也应高擦了',
	  time: '2025-08-01 10:05:46'
	}
  ];
  return mockData;
});

function publicClick(){
	activeType.value = 'public'
	uni.navigateTo({
		url:"/pages/online-repair/publicRepair"
	})
};
function personalClick(){
	activeType.value = 'personal'
	uni.navigateTo({
		url:"/pages/online-repair/personalRepair"
	})
}
// 返回上一页
const goBack = () => {
  uni.navigateBack()
}
// 跳转报修详情
const goDetail = (item) => {
	// const itemStr = encodeURIComponent(JSON.stringify(item))
  uni.navigateTo({
    url: `/pages/online-repair/repairDetail?item = ${encodeURIComponent(JSON.stringify(item))}`
  });
};
</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;
}
/* 报修类型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;
  margin-right: 20rpx;
}
.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;
  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: 20%;
  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;
}
.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: 8px;
  margin-bottom: 10px;
}
.tag {
  /* background-color: #e3f2fd; */
    color: #999999;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #999999;
}

/* 内容 */
.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;
}

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