<template>
  <view class="visual-monitoring-page">
    <!-- 固定头部 -->
    <view class="fixed-header">
      <text class="header-title">移动式检修车间</text>
    </view>
    
    <!-- 内容区域 -->
    <view class="tabbar-content">
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoLoaded: false,
      isRecording: false,
      cameraStatus: {
        text: '离线',
        class: 'offline'
      },
      recordingStatus: {
        text: '未录制',
        class: 'inactive'
      },
      qualityIndex: 1,
      qualityOptions: ['低', '中', '高', '超高清'],
      durationIndex: 2,
      durationOptions: ['5分钟', '10分钟', '30分钟', '1小时', '持续录制'],
      autoSave: true,
      historyList: [
        {
          time: '2025-09-29 15:45:33',
          duration: '10:30',
          size: '125MB'
        },
        {
          time: '2025-09-29 14:20:15',
          duration: '5:45',
          size: '68MB'
        },
        {
          time: '2025-09-29 13:10:22',
          duration: '15:20',
          size: '189MB'
        }
      ]
    }
  },
  onLoad() {
    console.log('视觉监控页面加载')
  },
  onShow() {
    console.log('📱 视觉监控页面显示，触发页面更新')
    // 可以在这里添加重新连接摄像头等逻辑
  },
  methods: {
    connectCamera() {
      uni.showLoading({
        title: '连接中...'
      })
      
      setTimeout(() => {
        uni.hideLoading()
        this.videoLoaded = true
        this.cameraStatus = {
          text: '在线',
          class: 'online'
        }
        uni.showToast({
          title: '摄像头连接成功',
          icon: 'success'
        })
      }, 2000)
    },
    toggleRecording() {
      this.isRecording = !this.isRecording
      this.recordingStatus = {
        text: this.isRecording ? '录制中' : '未录制',
        class: this.isRecording ? 'recording' : 'inactive'
      }
      
      uni.showToast({
        title: this.isRecording ? '开始录制' : '停止录制',
        icon: 'success'
      })
    },
    takeSnapshot() {
      uni.showToast({
        title: '拍照成功',
        icon: 'success'
      })
    },
    toggleFullscreen() {
      uni.showToast({
        title: '全屏功能开发中',
        icon: 'none'
      })
    },
    onQualityChange(e) {
      this.qualityIndex = e.detail.value
    },
    onDurationChange(e) {
      this.durationIndex = e.detail.value
    },
    onAutoSaveChange(e) {
      this.autoSave = e.detail.value
    },
    playVideo(item) {
      uni.showToast({
        title: `播放 ${item.time}`,
        icon: 'none'
      })
    },
    downloadVideo(item) {
      uni.showToast({
        title: `下载 ${item.time}`,
        icon: 'success'
      })
    },
    deleteVideo(item) {
      uni.showModal({
        title: '确认删除',
        content: `确定要删除 ${item.time} 的录制文件吗？`,
        success: (res) => {
          if (res.confirm) {
            const index = this.historyList.indexOf(item)
            this.historyList.splice(index, 1)
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            })
          }
        }
      })
    },
    clearHistory() {
      uni.showModal({
        title: '确认清空',
        content: '确定要清空所有录制历史吗？',
        success: (res) => {
          if (res.confirm) {
            this.historyList = []
            uni.showToast({
              title: '清空成功',
              icon: 'success'
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.visual-monitoring-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.camera-status {
  background: white;
  border-radius: 12rpx;
  padding: 25rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
  display: flex;
  gap: 30rpx;
}

.status-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.status-icon {
  font-size: 48rpx;
}

.camera-icon {
  color: #666;
}

.recording-icon {
  color: #ff4444;
}

.status-info {
  display: flex;
  flex-direction: column;
  gap: 5rpx;
}

.status-label {
  font-size: 24rpx;
  color: #666;
}

.status-value {
  font-size: 28rpx;
  font-weight: bold;
  
  &.online {
    color: #4caf50;
  }
  
  &.offline {
    color: #999;
  }
  
  &.recording {
    color: #ff4444;
  }
  
  &.inactive {
    color: #666;
  }
}

.video-container {
  background: white;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
  overflow: hidden;
}

.video-placeholder {
  padding: 60rpx;
  text-align: center;
}

.placeholder-image {
  width: 300rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
  border-radius: 10rpx;
}

.placeholder-text {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 30rpx;
}

.connect-button {
  background-color: #3f51b5;
  color: white;
  padding: 20rpx 40rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
}

.video-player {
  padding: 30rpx;
  text-align: center;
}

.video-text {
  display: block;
  font-size: 32rpx;
  color: #333;
  margin-bottom: 30rpx;
}

.video-controls {
  display: flex;
  gap: 20rpx;
  justify-content: center;
}

.control-button {
  background-color: #3f51b5;
  color: white;
  padding: 15rpx 30rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
}

.monitoring-settings {
  background: white;
  border-radius: 15rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}

.settings-header {
  margin-bottom: 30rpx;
}

.settings-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.setting-label {
  font-size: 28rpx;
  color: #333;
}

.picker-view {
  display: flex;
  align-items: center;
  gap: 10rpx;
  padding: 15rpx 20rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
  border: 2rpx solid #e0e0e0;
}

.picker-arrow {
  color: #999;
  font-size: 20rpx;
}

.recording-history {
  background: white;
  border-radius: 15rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
  overflow: hidden;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

.history-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.clear-button {
  background-color: #ff4444;
  color: white;
  padding: 10rpx 20rpx;
  border-radius: 6rpx;
  font-size: 24rpx;
}

.history-list {
  height: 400rpx;
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 2rpx solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
}

.history-info {
  display: flex;
  flex-direction: column;
  gap: 5rpx;
}

.history-time {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.history-duration {
  font-size: 24rpx;
  color: #666;
}

.history-actions {
  display: flex;
  gap: 15rpx;
}

.action-button {
  background-color: #3f51b5;
  color: white;
  padding: 8rpx 16rpx;
  border-radius: 6rpx;
  font-size: 22rpx;
  
  &.delete {
    background-color: #ff4444;
  }
}
</style>