<template>
  <transition name="fade">
    <div
      v-if="visible"
      class="camera-pip"
      :style="{ top: position.top + 'px', left: position.left + 'px', zIndex: zIndex }"
      @mousedown.stop="bringToFront"
    >
      <div class="camera-pip__header" @mousedown.stop.prevent="onDragStart">
        <span class="camera-pip__title">{{ title || '摄像头预览' }}</span>
        <div class="camera-pip__actions">
          <el-button type="text" icon="el-icon-minus" @click.stop="minimize" />
          <el-button type="text" icon="el-icon-close" @click.stop="close" />
        </div>
      </div>
      <div class="camera-pip__body" v-show="!minimized">
        <!-- 如果有错误，显示错误信息 -->
        <div v-if="error" class="pip-error">
          <i class="el-icon-warning"></i>
          <p>{{ error }}</p>
          <el-button size="mini" type="primary" @click="$emit('retry')">重试</el-button>
        </div>
        <!-- 如果正在加载或没有源，显示加载状态 -->
        <div v-else-if="!src" class="pip-loading">
          <i class="el-icon-loading"></i>
          <p>正在启动视频流...</p>
        </div>
        <!-- 如果有源，显示播放器 -->
        <CameraPlayer v-else :src="src" :type="type" @error="handlePlayerError" />
      </div>
    </div>
  </transition>
</template>

<script>
import CameraPlayer from '@/components/CameraPlayer'

let zIndexSeed = 3000

export default {
  name: 'CameraPipPlayer',
  components: { CameraPlayer },
  props: {
    src: { type: String, default: '' },
    type: { type: String, default: 'hls' },
    title: { type: String, default: '' },
    visible: { type: Boolean, default: false },
    error: { type: String, default: null } // 新增：错误信息
  },
  data() {
    return {
      position: { top: 80, left: 80 },
      dragging: false,
      dragOffset: { x: 0, y: 0 },
      minimized: false,
      zIndex: zIndexSeed++
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.bringToFront()
        this.minimized = false
      }
    }
  },
  mounted() {
    window.addEventListener('mousemove', this.onDrag)
    window.addEventListener('mouseup', this.onDragEnd)
  },
  beforeDestroy() {
    window.removeEventListener('mousemove', this.onDrag)
    window.removeEventListener('mouseup', this.onDragEnd)
  },
  methods: {
    onDragStart(e) {
      this.dragging = true
      this.dragOffset.x = e.clientX - this.position.left
      this.dragOffset.y = e.clientY - this.position.top
    },
    onDrag(e) {
      if (!this.dragging) return
      const maxLeft = window.innerWidth - 320 // width of pip
      const maxTop = window.innerHeight - 240 // height of pip
      let left = e.clientX - this.dragOffset.x
      let top = e.clientY - this.dragOffset.y
      if (left < 0) left = 0
      if (top < 0) top = 0
      if (left > maxLeft) left = maxLeft
      if (top > maxTop) top = maxTop
      this.position.left = left
      this.position.top = top
    },
    onDragEnd() {
      this.dragging = false
    },
    bringToFront() {
      this.zIndex = ++zIndexSeed
    },
    close() {
      this.$emit('close')
    },
    minimize() {
      this.minimized = !this.minimized
    },
    handlePlayerError(errorMsg) {
      // 如果播放器内部出错，显示在 PiP 中
      this.$emit('player-error', errorMsg)
      // 也可以直接设置 error prop（如果父组件支持）
      // 但为了保持响应式，我们通过事件通知父组件
    }
  }
}
</script>

<style scoped>
.camera-pip {
  position: fixed;
  width: 320px;
  height: 240px;
  background: #1f1f1f;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  overflow: hidden;
  cursor: default;
}

.camera-pip__header {
  height: 32px;
  background: #303133;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 8px;
  cursor: move;
  user-select: none;
}

.camera-pip__title {
  flex: 1;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.camera-pip__actions {
  display: flex;
  align-items: center;
}

.camera-pip__actions .el-button {
  color: #fff;
  padding: 4px 8px;
}

.camera-pip__actions .el-button:hover {
  background: rgba(255, 255, 255, 0.1);
}

.camera-pip__body {
  width: 100%;
  height: calc(100% - 32px);
  background: #000;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.pip-loading,
.pip-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #fff;
  text-align: center;
  padding: 20px;
}

.pip-loading i {
  font-size: 24px;
  margin-bottom: 12px;
  animation: rotating 2s linear infinite;
}

.pip-error {
  color: #f56c6c;
}

.pip-error i {
  font-size: 24px;
  margin-bottom: 12px;
}

.pip-error p {
  margin: 12px 0;
  font-size: 13px;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>