<template>
  <div class="page-container">
    <div class="page-header">
      <span class="title">RTSP 流播放</span>
    </div>

    <!-- 配置区域 -->
    <div class="config-section">
      <el-form label-width="120px">
        <el-form-item label="RTSP 地址">
          <el-input
            v-model="rtspConfig.rtspUrl"
            placeholder="rtsp://username:password@ip:port/stream"
            style="width: 600px"
          />
        </el-form-item>
        <el-form-item label="转换服务地址">
          <el-input v-model="rtspConfig.proxyUrl" placeholder="http://localhost:8080/stream" style="width: 400px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="playRtsp">播放</el-button>
        </el-form-item>
        <el-alert type="info" :closable="false" style="margin-top: 10px">
          RTSP 流需要通过服务端转换为 HLS/WebRTC 后才能在浏览器播放
        </el-alert>
      </el-form>
    </div>

    <!-- 播放器区域 -->
    <div class="player-wrapper">
      <div class="player-section">
        <div v-if="!currentSrc" class="player-placeholder">
          <el-icon :size="60" color="#ddd">
            <VideoPlay />
          </el-icon>
          <p>请输入 RTSP 转换服务地址并点击播放</p>
        </div>
        <VideoPlayer
          v-else
          ref="playerRef"
          player-type="hls"
          :src="currentSrc"
          :autoplay="playConfig.autoplay"
          :muted="playConfig.muted"
          :controls="true"
          @play="onPlay"
          @pause="onPause"
          @error="onError"
          @loadedmetadata="onLoaded"
        />
      </div>

      <!-- PTZ 云台控制 -->
      <div class="ptz-section">
        <h4>云台控制</h4>
        <PTZController :config="ptzConfig" />
        <el-form label-width="80px" size="small" style="margin-top: 15px">
          <el-form-item label="摄像头IP">
            <el-input v-model="ptzConfig.host" placeholder="192.168.0.64" />
          </el-form-item>
          <el-form-item label="用户名">
            <el-input v-model="ptzConfig.username" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="ptzConfig.password" type="password" show-password />
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 播放控制 -->
    <div class="control-section">
      <el-space wrap>
        <el-button type="primary" @click="handlePlay">播放</el-button>
        <el-button @click="handlePause">暂停</el-button>
        <el-button type="danger" @click="handleStop">停止</el-button>
        <el-button @click="handleScreenshot">截图</el-button>
        <el-button @click="handleFullscreen">全屏</el-button>

        <el-divider direction="vertical" />

        <el-switch v-model="playConfig.muted" active-text="静音" inactive-text="有声" />
        <el-switch v-model="playConfig.autoplay" active-text="自动播放" inactive-text="手动" />
      </el-space>
    </div>

    <!-- 当前状态 -->
    <div class="status-section">
      <el-descriptions title="当前状态" :column="2" border>
        <el-descriptions-item label="RTSP 地址">
          <el-text truncated style="max-width: 400px">{{ rtspConfig.rtspUrl || '-' }}</el-text>
        </el-descriptions-item>
        <el-descriptions-item label="转换服务地址">
          <el-text truncated style="max-width: 400px">{{ currentSrc || '-' }}</el-text>
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 日志区域 -->
    <div class="log-section">
      <div class="log-header">
        <h4>事件日志</h4>
        <el-button size="small" @click="logs = []">清空</el-button>
      </div>
      <div class="log-content">
        <div v-for="(log, index) in logs" :key="index" class="log-item" :class="log.type">
          <span class="time">{{ log.time }}</span>
          <span class="message">{{ log.message }}</span>
        </div>
        <div v-if="logs.length === 0" class="log-empty">暂无日志</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { VideoPlay } from '@element-plus/icons-vue'
import VideoPlayer from '@/components/VideoPlayer.vue'
import PTZController from '@/components/PTZController.vue'
import type { PTZConfig } from '@/api/ptz'

const playerRef = ref<InstanceType<typeof VideoPlayer>>()

// RTSP 配置
const rtspConfig = reactive({
  rtspUrl: '',
  proxyUrl: ''
})

// PTZ 配置
const ptzConfig = reactive<PTZConfig>({
  host: '192.168.0.64',
  username: 'admin',
  password: 'Wxc767718929',
  channel: 1
})

// 播放配置
const playConfig = reactive({
  autoplay: false,
  muted: true
})

// 当前播放状态
const currentSrc = ref('')

// 日志
interface LogItem {
  time: string
  type: 'info' | 'success' | 'error'
  message: string
}
const logs = ref<LogItem[]>([])

function addLog(message: string, type: LogItem['type'] = 'info') {
  const time = new Date().toLocaleTimeString()
  logs.value.unshift({ time, type, message })
  if (logs.value.length > 100) {
    logs.value.pop()
  }
}

// 播放 RTSP
function playRtsp() {
  if (!rtspConfig.proxyUrl) {
    ElMessage.warning('请输入转换服务地址')
    return
  }
  currentSrc.value = rtspConfig.proxyUrl
  addLog(`播放 RTSP (via proxy): ${rtspConfig.proxyUrl}`, 'success')
}

// 播放控制
function handlePlay() {
  playerRef.value?.play()
  addLog('播放', 'info')
}

function handlePause() {
  playerRef.value?.pause()
  addLog('暂停', 'info')
}

function handleStop() {
  playerRef.value?.stop()
  addLog('停止', 'info')
}

function handleScreenshot() {
  playerRef.value?.screenshot()
  addLog('截图', 'info')
}

function handleFullscreen() {
  playerRef.value?.fullscreen()
  addLog('全屏', 'info')
}

// 事件处理
function onPlay() {
  addLog('视频开始播放', 'success')
}

function onPause() {
  addLog('视频已暂停', 'info')
}

function onLoaded() {
  addLog('视频加载完成', 'success')
}

function onError(error: any) {
  addLog(`播放错误: ${JSON.stringify(error)}`, 'error')
}
</script>

<style lang="scss" scoped>
.page-container {
}

.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px 20px;
  background-color: var(--bg-container);
  border-radius: var(--radius-base);
  color: var(--text-primary);

  .title {
    font-size: 18px;
    font-weight: 600;
  }
}

.config-section {
  margin-bottom: 20px;
  padding: 20px;
  background-color: var(--bg-container);
  border-radius: var(--radius-base);
}

.player-wrapper {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.player-section {
  flex: 1;
  height: 500px;
  border-radius: var(--radius-base);
  overflow: hidden;
  background-color: #000;

  .player-placeholder {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);

    p {
      margin-top: 15px;
      font-size: 14px;
    }
  }
}

.ptz-section {
  width: 220px;
  padding: 15px;
  background-color: var(--bg-container);
  border-radius: var(--radius-base);

  h4 {
    margin: 0 0 15px;
    font-size: 14px;
    color: var(--text-primary);
  }
}

.control-section {
  padding: 15px 20px;
  background-color: var(--bg-container);
  border-radius: var(--radius-base);
  margin-bottom: 20px;
}

.status-section {
  margin-bottom: 20px;
  padding: 15px 20px;
  background-color: var(--bg-container);
  border-radius: var(--radius-base);
}

.log-section {
  padding: 15px 20px;
  background-color: var(--bg-container);
  border-radius: var(--radius-base);

  .log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    h4 {
      font-size: 14px;
      margin: 0;
      color: var(--text-primary);
    }
  }

  .log-content {
    max-height: 200px;
    overflow-y: auto;
    background-color: var(--bg-hover);
    border-radius: var(--radius-sm);
    padding: 10px;
  }

  .log-item {
    font-size: 12px;
    padding: 4px 0;
    border-bottom: 1px solid var(--border-color-light);
    color: var(--text-regular);

    &:last-child {
      border-bottom: none;
    }

    .time {
      color: var(--text-secondary);
      margin-right: 10px;
    }

    &.success .message {
      color: var(--color-success);
    }

    &.error .message {
      color: var(--color-danger);
    }
  }

  .log-empty {
    text-align: center;
    color: var(--text-secondary);
    font-size: 12px;
    padding: 20px 0;
  }
}
</style>
