<template>
  <el-dialog
    title="视频监控信息"
    :visible.sync="dialogVisible"
    width="40%"
    top="20vh"
    :modal-append-to-body="false"
    @close="closevideo"
    @open="open"
    @opened="openvideo"
  >
    <div class="widget-flowvideoanalysis" v-html="videohtml"></div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import videojs from 'video.js'
import { videoList_api } from '@/api/APIs'
export default {
  name: 'VideoMonitor', //视频监控
  data() {
    return {
      dialogVisible: false,
      layername: 'rideolyn',
      myPlayer: null,
      videoAddress: null,
      videohtml: ''
    }
  },
  methods: {
    /**
     * 添加模型
     */
    addModel() {
      videoList_api()
        .then((res) => {
          const result = res
          const videos = result.result
          let viewer = window.viewer
          for (var i = 0; i < videos.length; i++) {
            const lon = videos[i]['longitude']
            const lat = videos[i]['latitude']
            var geom = this.getGeometry(videos[i], [lon, lat])
            var entity = new Cesium.Entity(geom)
            viewer.entities.add(entity)
          }

          if (!this.handler) this.addModelClick(videos)
        })
        .catch((err) => {
          console.log(err)
        })
    },
    /**
     * 获取geometry
     */
    getGeometry(info, pt) {
      var temp_position = []
      let temp_pt1 = Cesium.Cartesian3.fromDegrees(pt[0], pt[1])
      temp_position.push(temp_pt1)
      var point_temp = Cesium.Cartesian3.fromDegrees(pt[0], pt[1])
      temp_position.push(point_temp)
      var geometry = {
        id: info['id'],
        name: this.layername,
        position: temp_pt1,
        label: {
          text: '',
          font: 'bold 12pt fangsong',
          fillColor: new Cesium.Color(255, 0, 0, 1.0),
          style: Cesium.LabelStyle.FILL,
          scale: 1,
          outlineWidth: 2,
          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          pixelOffset: new Cesium.Cartesian2(18, -18)
        },
        billboard: {
          image: require('@/views/widgets/DisplayControlList/images/rideo.png'),
          width: 36,
          height: 36,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
        },
        polyline: {
          positions: temp_position,
          show: false,
          material: new Cesium.Color(255, 0, 0, 1.0),
          width: 2.0
        }
      }
      return geometry
    },
    /**
     * 添加click事件
     * @param videos 视频信息列表
     */
    addModelClick(videos) {
      let viewer = window.viewer
      let that = this
      this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
      this.handler.setInputAction(
        function (movement) {
          var pick = window.viewer.scene.pick(movement.position)
          if (Cesium.defined(pick)) {
            const video = that.$_.find(videos, function (e) {
              return e['id'] === pick.id.id
            })
            if (!video) return
            that.dialogVisible = true
            that.videoAddress = video
          }
        }.bind(this),
        Cesium.ScreenSpaceEventType.LEFT_CLICK
      )
    },
    closevideo() {
      if (this.myPlayer) {
        this.myPlayer.dispose() // 该方法会重置videojs的内部状态并移除dom
        this.videohtml = ''
      }
      this.dialogVisible = false
    },
    open() {
      this.videohtml =
        '<video id="my-video" loop="-1" style="width:725px;height:400px" class="video-js videoanalysis vjs-big-play-centered" controls preload="auto"poster="" data-setup="{}"></video>'
    },
    openvideo() {
      setTimeout(() => {
        this.$nextTick(() => {
          this.initCameraStream()
        })
      }, 300)
    },
    /**
     * 视频流初始化
     * @param videoUrl 视频信息
     */
    initCameraStream() {
      let videoUrl = this.videoAddress
      if (!videoUrl) return
      const url =
        'http://' +
        videoUrl['cameraIp'] +
        ':' +
        videoUrl['cameraPort'] +
        '/live/cameraid/' +
        videoUrl['dahuaCameraid'] +
        '%24' +
        videoUrl['dahuaChannel'] +
        '/substream/1.m3u8'
      this.myPlayer = videojs('my-video', {
        errorDisplay: false,
        bigPlayButton: false
      }) //初始化视频
      this.myPlayer.src({
        src: url,
        type: 'application/x-mpegURL'
      }) //重置video的src
      this.myPlayer.play()
    },
    /**
     * 删除指定图层
     */
    removeAll() {
      var viewer = window.viewer
      var models = viewer.entities.values
      for (var i = 0; i < models.length; ) {
        var m = models[i]
        var mattr = m.name
        if (mattr == this.layername) {
          viewer.entities.remove(m)
        } else {
          i++
        }
      }
    },
    /**
     * 清除事件
     */
    clearHandler() {
      if (this.handler && !this.handler.isDestroyed()) this.handler.destroy()
    },
    removeSource() {
      this.removeAll()
      this.clearHandler()
    }
  }
}
</script>

<style lang="scss" scoped>
.widget-flowvideoanalysis {
  height: 100%;
  .videoanalysis {
    width: 100%;
    height: 100%;
  }
  .video-js .vjs-big-play-button {
    font-size: 3em;
    line-height: 1.5em;
    height: 1.5em;
    width: 1.5em;
    display: none;
    position: absolute;
    border: 0em solid #fff;
    padding: 0;
    cursor: pointer;
    opacity: 1;
    background-color: #2b333f;
    border-radius: 0.7em;
    -o-transition: all 0.4s;
    transition: all 0.4s;
  }
}
</style>