<template>
  <box
    componentkey="LEDCamera"
    title="LED屏画面监测摄像头"
  >
    <camera-player
      :key="item.identifier"
      :class="{ 'u-pointer': canClick && item.onlineStatus }"
      :camera="item"
      @click.native="onClick"
    >
      <div
        class="o-video-footer l-flex--row"
        @click.stop
      >
        <!-- <div class="l-flex__auto c-sibling-item u-ellipsis">
          {{ item.name }}
        </div> -->
      </div> </camera-player></box>
</template>

<script>
import CameraPlayer from '@/components/external/camera/CameraPlayer'
import { getCameras } from '@/api/external'
import Box from './Box'
export default {
  components: {
    Box,
    CameraPlayer
  },
  props: {
    device: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      cameraType: 2,
      item: {},
      canClick: false
    }
  },
  created () {
    this.getCameras()
  },
  methods: {
    getCameras () {
      const key = Date.now()
      this.$key = key
      getCameras({
        deviceId: this.device.id,
        cameraType: this.cameraType
      })
        .then(({ data }) => {
          if (!data.length) { return }
          if (key === this.$key) {
            data = data.map(({ thirdPartyDevice }) => thirdPartyDevice)
          }
          this.item = data[0]// 取一个
          console.log('first')
        })
    },
    onClick () {
      if (!this.canClick) { return }
      console.log('click')
    }
  }
}
</script>

<style></style>
