<template>
  <div id="video-box">
    <el-row :gutter="20">
      <el-col :span="8">
        <div style="height: 80vh;overflow: scroll">
          <el-tree :props="props" :load="loadNode" @node-click="nodeClick" lazy />
        </div>
      </el-col>
      <el-col :span="16">
        <div v-if="videoUrl || form && form.parent == false">
          <player :videoUrl="videoUrl" fluent autoplay />
        </div>
        <template v-if="form && form.parent == false">
          <div style="margin: 40px 20px;">
            <el-form ref="form" :model="form" size="mini" label-width="100px">
              <!-- 操作按钮 + 云台 -->
              <div>
                <el-row :gutter="20" style="text-align: right;">
                  <el-col :span="4" style="text-align: left;">
                    <el-button @click="rePlay">查看回放</el-button>
                  </el-col>
                  <el-col :span="10" :offset="6">
                    <div class="control-wrapper">
                      <div class="control-btn control-top" @mousedown="ptzCamera('up')" @mouseup="ptzCamera('stop')">
                        <i class="el-icon-caret-top"></i>
                        <div class="control-inner-btn control-inner"></div>
                      </div>
                      <div class="control-btn control-left" @mousedown="ptzCamera('left')" @mouseup="ptzCamera('stop')">
                        <i class="el-icon-caret-left"></i>
                        <div class="control-inner-btn control-inner"></div>
                      </div>
                      <div class="control-btn control-bottom" @mousedown="ptzCamera('down')" @mouseup="ptzCamera('stop')">
                        <i class="el-icon-caret-bottom"></i>
                        <div class="control-inner-btn control-inner"></div>
                      </div>
                      <div class="control-btn control-right" @mousedown="ptzCamera('right')" @mouseup="ptzCamera('stop')">
                        <i class="el-icon-caret-right"></i>
                        <div class="control-inner-btn control-inner"></div>
                      </div>
                      <div class="control-round">
                        <div class="control-round-inner"><i class="fa fa-pause-circle"></i></div>
                      </div>
                      <div style="position: absolute; left: 7.25rem; top: 1.25rem" @mousedown="ptzCamera('zoomin')"
                        @mouseup="ptzCamera('stop')"><i class="el-icon-zoom-in control-zoom-btn"
                          style="font-size: 1.875rem;"></i></div>
                      <div style="position: absolute; left: 7.25rem; top: 3.25rem; font-size: 1.875rem;"
                        @mousedown="ptzCamera('zoomout')" @mouseup="ptzCamera('stop')"><i
                          class="el-icon-zoom-out control-zoom-btn"></i></div>
                      <div class="contro-speed" style="position: absolute; left: 4px; top: 7rem; width: 9rem;">
                        <el-slider v-model="controSpeed" :max="255"></el-slider>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div style="height: 40px;"></div>
              <!-- 机器信息 -->
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="主机编码：">
                    <el-input v-model="form.deviceId" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="设备编码：">
                    <el-input v-model="form.id" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="设备名称：">
                    <el-input v-model="form.basicData.name" disabled />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </template>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import wvpApi from '@/api/wvp'
import videoApi from '@/api/kd/video'
import player from '@/components/wvp/jessibuca'

export default {
  name: 'EVideoLive',
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  components: {
    player
  },
  data() {
    return {
      selectedMine: {},
      videoIdList: [],
      props: {
        label: 'label',
        isLeaf: 'leaf'
      },
      form: {},
      videoUrl: ''
    }
  },
  mounted() {
    // 进入页面就打开视频
    let deviceId = this.$route.query.deviceId
    let videoId = this.$route.query.videoId
    if (deviceId && videoId) {
      wvpApi.send('/wvp/api/play/start/' + deviceId + '/' + videoId, {
        method: 'get'
      }, res => {
        if (res.code == 0) {
          this.videoUrl = res.data.ws_flv
        }
      })
    }
    // 当前矿山
    const selectedMineJson = window.localStorage.getItem('kd.selected.mine')
    let noMine = false
    if (!selectedMineJson) {
      noMine = true
    } else {
      const selectedMine = JSON.parse(selectedMineJson)
      if (!selectedMine || selectedMine.enterpriseId !== this.user.enterpriseId) {
        noMine = true
      } else {
        this.selectedMine = selectedMine
      }
    }
    if (noMine) {
      this.$message.error('当前未选择矿山')
      this.$router.replace('/dashboard')
    }
    videoApi.getLink({
      mineType: this.selectedMine.mineType,
      mineId: this.selectedMine.id
    }).then(response => {
      this.videoIdList = response.results.map(mineVideo => mineVideo.videoId)
      console.log('list0', this.videoIdList)
    })
  },
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {// 根节点
        wvpApi.send('/wvp/api/device/query/devices', {
          method: 'get',
          params: {
            page: 1,
            count: 1000
          }
        }, res => {
          if (res.code == 0) {
            let list = res.data.list
            list.forEach(e => {
              e.leaf = false
              e.label = e.deviceId
              e.name = e.deviceId
            })
            resolve(list)
          }
        })
      } else {// 子节点
        let parentId = ''
        if (node.data.basicData && node.data.basicData.channelId) {
          parentId = node.data.basicData.channelId
        } else if (node.data.deviceId) {
          parentId = node.data.deviceId
        }
        wvpApi.send('/wvp/api/device/query/tree/' + node.data.deviceId, {
          method: 'get',
          params: {
            page: 1,
            count: 1000,
            parentId: parentId,
            onlyCatalog: false
          }
        }, res => {
          if (res.code == 0) {
            let list = res.data.list
            list = list.filter(e => {
              e.leaf = !e.parent
              e.label = e.name
              if (e.leaf && this.videoIdList.indexOf(e.id) < 0) {
                return false
              }
              return true
            })
            resolve(list)
          }
        })
      }
    },
    nodeClick(data, node, el) {
      if (data.parent == false) {
        this.form = JSON.parse(JSON.stringify(data))
        let id = this.form.id
        // 查询视频
        this.videoUrl = ''
        wvpApi.send('/wvp/api/play/start/' + data.deviceId + '/' + data.id, {
          method: 'get'
        }, res => {
          if (res.code == 0) {
            if (this.form.id == id) {
              this.videoUrl = res.data.ws_flv
            }
          }
        })
      }
    },
    ptzCamera(command) {
      console.log('云台控制：' + command);
      wvpApi.send('/wvp/api/ptz/control/' + this.form.deviceId + '/' + this.form.id + '?command=' + command + '&horizonSpeed=' + this.controSpeed + '&verticalSpeed=' + this.controSpeed + '&zoomSpeed=' + this.controSpeed, {
        method: 'post'
      }, res => {
        console.log(res);
      })
    },
    rePlay() {
      this.$router.push({
        path: '/e/video/replay',
        query: {
          deviceId: this.form.deviceId,
          channelId: this.form.id
        }
      })
    },
  }
}
</script>

<style scoped>
.control-wrapper {
  position: relative;
  width: 6.25rem;
  height: 6.25rem;
  max-width: 6.25rem;
  max-height: 6.25rem;
  border-radius: 100%;
  margin-top: 1.5rem;
  margin-left: 0.5rem;
  float: left;
}

.control-panel {
  position: relative;
  top: 0;
  left: 5rem;
  height: 11rem;
  max-height: 11rem;
}

.control-btn {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 44%;
  height: 44%;
  border-radius: 5px;
  border: 1px solid #78aee4;
  box-sizing: border-box;
  transition: all 0.3s linear;
}

.control-btn:hover {
  cursor: pointer
}

.control-btn i {
  font-size: 20px;
  color: #78aee4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.control-btn i:hover {
  cursor: pointer
}

.control-zoom-btn:hover {
  cursor: pointer
}

.control-round {
  position: absolute;
  top: 21%;
  left: 21%;
  width: 58%;
  height: 58%;
  background: #fff;
  border-radius: 100%;
}

.control-round-inner {
  position: absolute;
  left: 13%;
  top: 13%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70%;
  height: 70%;
  font-size: 40px;
  color: #78aee4;
  border: 1px solid #78aee4;
  border-radius: 100%;
  transition: all 0.3s linear;
}

.control-inner-btn {
  position: absolute;
  width: 60%;
  height: 60%;
  background: #fafafa;
}

.control-top {
  top: -8%;
  left: 27%;
  transform: rotate(-45deg);
  border-radius: 5px 100% 5px 0;
}

.control-top i {
  transform: rotate(45deg);
  border-radius: 5px 100% 5px 0;
}

.control-top .control-inner {
  left: -1px;
  bottom: 0;
  border-top: 1px solid #78aee4;
  border-right: 1px solid #78aee4;
  border-radius: 0 100% 0 0;
}

.control-top .fa {
  transform: rotate(45deg) translateY(-7px);
}

.control-left {
  top: 27%;
  left: -8%;
  transform: rotate(45deg);
  border-radius: 5px 0 5px 100%;
}

.control-left i {
  transform: rotate(-45deg);
}

.control-left .control-inner {
  right: -1px;
  top: -1px;
  border-bottom: 1px solid #78aee4;
  border-left: 1px solid #78aee4;
  border-radius: 0 0 0 100%;
}

.control-left .fa {
  transform: rotate(-45deg) translateX(-7px);
}

.control-right {
  top: 27%;
  right: -8%;
  transform: rotate(45deg);
  border-radius: 5px 100% 5px 0;
}

.control-right i {
  transform: rotate(-45deg);
}

.control-right .control-inner {
  left: -1px;
  bottom: -1px;
  border-top: 1px solid #78aee4;
  border-right: 1px solid #78aee4;
  border-radius: 0 100% 0 0;
}

.control-right .fa {
  transform: rotate(-45deg) translateX(7px);
}

.control-bottom {
  left: 27%;
  bottom: -8%;
  transform: rotate(45deg);
  border-radius: 0 5px 100% 5px;
}

.control-bottom i {
  transform: rotate(-45deg);
}

.control-bottom .control-inner {
  top: -1px;
  left: -1px;
  border-bottom: 1px solid #78aee4;
  border-right: 1px solid #78aee4;
  border-radius: 0 0 100% 0;
}

.control-bottom .fa {
  transform: rotate(-45deg) translateY(7px);
}
</style>