<template>
  <view class="visitor-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>

    <!-- 标签切换栏 -->
    <view class="tab-bar">
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'waiting' }"
        @click="activeTab = 'waiting'"
      >
        等待来访
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'visited' }"
        @click="activeTab = 'visited'"
      >
        已到访
      </view>
    </view>

    <!-- 访客列表 -->
    <scroll-view class="list-container" scroll-y>
      <!-- 列表项：根据标签切换显示对应数据 -->
      <view 
        class="visitor-item" 
        v-for="(item, index) in filterdList" 
        :key="index"
      >
        <!-- 访客基本信息 -->
        <view class="item-header">
          <text class="visitor-name" :class="item.status">来访者：{{ item.visitorName }}</text>
          <text class="status-tag" :class="item.status">{{ item.statusText }}</text>
        </view>

        <!-- 有效期/到访时间 -->
        <view class="item-row">
          <text class="label" :class="item.status">{{ item.status === 'waiting' ? '有效期' : '到访时间' }}：</text>
          <text class="value" :class="item.status">{{ item.startTime }}至{{item.endTime}}</text>
        </view>

        <!-- 联系方式 -->
        <view class="item-row">
          <text class="label" :class="item.status">联系方式：</text>
          <text class="value" :class="item.status">{{ item.phone }}</text>
        </view>

        <!-- 车牌号 -->
        <view class="item-row">
          <text class="label" :class="item.status">车牌号：</text>
          <text class="value" :class="item.status">{{ item.carNumber }}</text>
        </view>

        <!-- 时间+查看详情 -->
        <view class="item-footer">
          <text class="time-text" :class="item.status">时间：{{ item.createTime }}</text>
          <view class="detail-btn" @click="viewDetail(item)">
            <text>查看详情</text>
            <uni-icons type="arrowright" size="14"></uni-icons>
          </view>
        </view>
      </view>
	  <!-- 空状态 -->
	  <view v-if="filterdList.length === 0" class="empty-state">
	  	<uni-icons type="info" size="30" color="#ccc"></uni-icons>
	  	<text class="empty-text">
	  		{{ activeTab === 'waiting' ? '暂无等待到访数据' : '暂无已到访数据' }}
	  	</text>
	  </view>
    </scroll-view>

    <!-- 新增邀请按钮 -->
    <view class="add-btn" @click="addInvitation">
      <!-- <uni-icons type="plus" size="18" color="#fff"></uni-icons> -->
      <text class="add-text">新增邀请+</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getVisitorList } from '../api/api.js'

// 激活的标签（waiting=等待来访，visited=已到访）
const activeTab = ref('waiting')

// 访客列表数据
const visitorList = ref([])

// 后端数据映射到前端
const mapData = (list) => {
  if (!Array.isArray(list)) return []
  return list.map(item => {
    const status = item.status === 1 || item.status === '1' ? 'visited' : 'waiting'
    return {
      ...item,
      visitorName: item.visitorName,
      status,
      statusText: status === 'visited' ? '已到访' : '等待来访',
      startTime: item.startTime,
      endTime: item.endTime,
      phone: item.visitorPhone,
      carNumber: item.carNum,
      createTime: item.createTime || ''
    }
  })
}

// 获取访客列表
const fetchVisitorList = async () => {
	const userId = uni.getStorageSync('userId')
	let params = {userId:userId}
  try {
    const res = await getVisitorList(params)
    visitorList.value = mapData(res.data || [])
	// console.log('222222',visitorList.value)

  } catch (e) {
    console.error('获取访客列表失败:', e)
  }
}

onLoad(() => {
  fetchVisitorList()
})

// 根据标签筛选列表
const filterdList = computed(() => {
  return visitorList.value.filter(item => item.status === activeTab.value)
})
// 返回上一页
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 viewDetail = (item) => {
  uni.navigateTo({
    url: `/pageSubPack/visitor/visitor-detail?id=${item.id}` // 传 id 到详情页
  })
}

// 新增邀请
const addInvitation = () => {
  uni.navigateTo({
    url: '/pageSubPack/visitor/visitor-add'
  })
}
</script>

<style scoped>
/* 页面整体样式 */
.visitor-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;
}

.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-bar {
  display: flex;
}
.tab-item {
  /* flex: 1; */
  display: flex;
  text-align: left;
  padding: 20px 40px 0px 0px;
  font-size: 16px;
  color: #666;
  position: relative;
}
.tab-item.active {
  color: #007aff;
  font-weight: 500;
}
/* 激活标签下划线 */
.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 33%;
  transform: translateX(-50%);
  width: 64px;
  height: 4px;
  border-radius: 6rpx;
  background-color: #2F77FD;
  /* background-color: linear-gradient(to bottom, #2F77FD, #CEDFFF); */
}

/* 列表容器 */
.list-container {
  height: calc(100vh - 220px); /* 预留导航、标签、按钮高度 */
}

/* 访客列表项 */
.visitor-item {
  background-color: #fff;
  margin: 25px 0px;
  padding: 15px;
  border-radius: 8px;
}
/* 列表项头部（姓名+状态） */
.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.visitor-name {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}
.visitor-name.visited{
	color: #999;
}
.status-tag {
  font-size: 14px;
  padding: 2px 8px;
  border-radius: 12px;
}
.status-tag.waiting {
  color: #2F77FD;
  /* background-color: #fff8e6; */
}
.status-tag.visited {
  color: #999999;
  /* background-color: #e6fffa; */
}

/* 列表项行数据 */
.item-row {
  display: flex;
  margin-bottom: 8px;
  font-size: 14px;
}
.label {
  color: #222;
  min-width: 80px;
}
.value {
  color: #333;
  flex: 1;
}
.label.visited{
	color: #999;
}
.value.visited{
	color: #999;
}
.time-text.visited{
	color: #999;
}
/* 列表项底部（时间+查看详情） */
.item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  /* border-top: 1px solid #f5f5f5; */
}
.time-text {
  font-size: 28rpx;
  /* color: #666; */
}
.detail-btn {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
}
/* 空状态 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;
	color: #ccc;
}

.empty-text {
	font-size: 32rpx;
	color: #999;
	margin-top: 20rpx;
	margin-bottom: 10rpx;
}

/* 新增邀请按钮 */
.add-btn {
  position: fixed;
  bottom: 20px;
  left: 15px;
  right: 15px;
  height: 44px;
  line-height: 44px;
  background-color: #007aff;
  color: #fff;
  border-radius: 8px;
  text-align: center;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.add-text {
  margin-left: 5px;
  font-size: 28rpx;
}
</style>