<template>
  <view class="visitor-detail-page">
    <!-- 访客信息卡片 -->
    <view class="info-card">
      <view class="info-header">
        <text class="title">来访者：{{ visitorInfo.name }}</text>
        <text class="status {{ visitorInfo.status === 'visited' ? 'visited' : 'waiting' }}">
          {{ visitorInfo.status === 'visited' ? '已到访' : '等待来访' }}
        </text>
      </view>

      <uni-divider margin="10rpx 0"></uni-divider>

      <view class="info-list">
        <view class="info-item">
          <text class="label">来访地址：</text>
          <text class="value">{{ visitorInfo.address }}</text>
        </view>
        <view class="info-item">
          <text class="label">联系方式：</text>
          <text class="value">{{ visitorInfo.phone }}</text>
        </view>
        <!-- 车牌号可选显示 -->
        <view class="info-item" v-if="visitorInfo.carNumber">
          <text class="label">车牌号：</text>
          <text class="value">{{ visitorInfo.carNumber }}</text>
        </view>
        <view class="info-item">
          <text class="label">随行人数：</text>
          <text class="value">{{ visitorInfo.escortNum }}人</text>
        </view>
        <view class="info-item">
          <text class="label">有效期：</text>
          <text class="value">{{ visitorInfo.validTime }}</text>
        </view>
        <view class="info-item">
          <text class="label">邀请时间：</text>
          <text class="value">{{ visitorInfo.inviteTime }}</text>
        </view>
        <!-- 已到访状态显示到访时间 -->
        <view class="info-item" v-if="visitorInfo.status === 'visited'">
          <text class="label">到访时间：</text>
          <text class="value">{{ visitorInfo.visitTime }}</text>
        </view>
      </view>
    </view>

    <!-- 提示文字 -->
    <view class="tips-text">
      <view>预计来访时间盒预计离开时间间隔不能超过24小时</view>
      车辆停留请勿超出有效期，需及时驶出小区
    </view>

    <!-- 分享二维码按钮（仅等待来访状态显示） -->
    <view class="btn-wrap" v-if="visitorInfo.status === 'waiting'">
      <button class="share-btn" @click="goToQrcode">分享通行二维码</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import {onLoad} from '@dcloudio/uni-app'

// 访客信息（实际项目中从接口获取）
// const visitorInfo = ref({})
const visitorInfo = ref({
  name: '张三',
  status: 'waiting', // waiting:等待来访，visited:已到访
  address: '桂花园（别墅）2号楼2层',
  phone: '13866666666',
  carNumber: '京A88888', // 可传空隐藏
  escortNum: 0,
  validTime: '2023.06.30 10:00至2023.06.30 23:00',
  inviteTime: '2023年06月30日 09:35',
  visitTime: '2023年06月30日 14:32' // 已到访时显示
});


onLoad((option) =>{
	const infoStr = decodeURIComponent(JSON.stringify(option))
	// console.log('infoStr',infoStr)
	visitorInfo.value = infoStr.item
})
// 跳转到二维码页面
const goToQrcode = () => {
  uni.navigateTo({
    url: '/pages/visitor/qrcode-page'
  });
};
</script>

<style scoped>
.visitor-detail-page {
  background-color: #f8f8f8;
  min-height: 100vh;
}

.info-card {
  background: #fff;
  margin: 20rpx;
  padding: 20rpx;
  border-radius: 12rpx;
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.title {
  font-size: 32rpx;
  font-weight: 600;
}

.status {
  font-size: 28rpx;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
}

.waiting {
  color: #007aff;
  background: #e8f4ff;
}

.visited {
  color: #34c759;
  background: #e6fffa;
}

.info-list {
  margin-top: 20rpx;
}

.info-item {
  display: flex;
  margin-bottom: 16rpx;
  font-size: 28rpx;
}

.label {
  color: #666;
  width: 160rpx;
}

.value {
  color: #333;
  flex: 1;
}

.tips-text {
  margin: 0 20rpx;
  font-size: 24rpx;
  color: #999;
  line-height: 1.6;
}

.btn-wrap {
  margin: 40rpx 20rpx;
}

.share-btn {
  background-color: #007aff;
  color: #fff;
  border-radius: 8rpx;
  height: 88rpx;
  font-size: 32rpx;
}
</style>