<template>
  <div id="video-box">
    <el-row :gutter="20">
      <el-col :span="8">
        <div style="height: 80vh;overflow: scroll">
          <el-tree v-if="reTree" :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: 10px 20px;">
            <el-form ref="form" :model="form" size="mini" label-width="100px">
              <el-row v-if="hasFromChange(oldForm, form)">
                <el-col :span="24">
                  <div style="background-color: #fdf6ec;padding: 10px 20px;font-size: 14px;line-height: 18px;">
                    <span style="color: #E6A23C;">设备信息发生变化，</span>
                    <span style="color: #409EFF;text-decoration:underline;cursor: pointer;"
                      @click="refreshMineVideo">点击此处</span>
                    <span style="color: #E6A23C;">刷新监控设备信息。</span>
                  </div>
                </el-col>
              </el-row>
              <div style="height: 20px;"></div>
              <!-- 操作按钮 + 云台 -->
              <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-col :span="14">
                  <el-form-item label="所属矿山：">
                    <el-select v-model="mineIndex" placeholder="所属矿山" clearable class="filter-item" style="width: 250px;">
                      <el-option :key="0" label="不绑定矿山" :value="0" />
                      <el-option v-for="mine in mineList" :key="mine.index" :label="mine.name" :value="mine.index" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-button type="primary" @click="saveForm">保存</el-button>
                </el-col>
                <el-col :span="4">
                  <el-button @click="reForm">刷新主机</el-button>
                </el-col>
              </el-row>
              <div style="height: 40px;"></div>
            </el-form>
          </div>
        </template>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import wvpApi from '@/api/wvp'
import mineApi from '@/api/kd/mine'
import videoApi from '@/api/kd/video'
import player from '@/components/wvp/jessibuca.vue'

export default {
  name: 'CVideoLive',
  components: {
    player
  },
  data() {
    return {
      props: {
        label: 'label',
        isLeaf: 'leaf'
      },
      mineList: [],
      mineVideoList: [],
      reTree: false,
      form: {},
      oldForm: null,
      mineIndex: 0,
      videoUrl: '',
      controSpeed: 30
    }
  },
  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
        }
      })
    }
    // 矿山选项卡
    mineApi.getAllMine().then(response => {
      let i = 1
      response.results.forEach(x => { x.index = i++ })
      this.mineList = response.results
    })
    // 矿山绑定情况
    this.getMineVideoList()
  },
  methods: {
    hasFromChange(oldForm, form) {
      if (!oldForm) {
        return false
      }
      return oldForm.name != form.name
        || oldForm.deviceId != form.deviceId
        || oldForm.latitude != form.basicData.latitude
        || oldForm.latitudeGcj02 != form.basicData.latitudeGcj02
        || oldForm.latitudeWgs84 != form.basicData.latitudeWgs84
        || oldForm.longitude != form.basicData.longitude
        || oldForm.longitudeGcj02 != form.basicData.longitudeGcj02
        || oldForm.longitudeWgs84 != form.basicData.longitudeWgs84
    },
    getMineVideoList() {
      videoApi.getLink().then(response => {
        this.mineVideoList = response.results
        this.reTree = false
        this.$nextTick(() => {
          this.reTree = true
        })
      })
    },
    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.forEach(e => {
              e.leaf = !e.parent
              e.label = e.name
              if (e.leaf) {
                let hasMine = false
                this.mineVideoList.forEach(mineVideo => {
                  if (mineVideo.videoId == e.id) {
                    hasMine = true
                  }
                })
                if (hasMine == false) {
                  e.label = '（未绑定矿山）' + e.name
                }
              }
            })
            resolve(list)
          }
        })
      }
    },
    nodeClick(data, node, el) {
      if (data.parent == false) {
        this.form = JSON.parse(JSON.stringify(data))
        this.oldForm = null
        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
            }
          }
        })
        // 查询绑定矿山
        this.mineIndex = 0
        videoApi.getLink({
          videoId: id
        }).then(response => {
          if (response.results && response.results.length > 0) {
            let mineVideo = response.results[0]
            this.oldForm = mineVideo
            this.mineList.forEach(m => {
              if (m.id == mineVideo.mineId && m.mineType == mineVideo.mineType) {
                if (this.form.id == id) {
                  this.mineIndex = m.index// 显示当前绑定的矿山
                }
              }
            })
          }
        })
      }
    },
    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: '/c/video/replay',
        query: {
          deviceId: this.form.deviceId,
          channelId: this.form.id
        }
      })
    },
    reForm() {
      this.nodeClick(this.form)
      this.getMineVideoList()
    },
    saveForm() {
      let param = {}
      param.videoId = this.form.id
      param.name = this.form.name
      param.deviceId = this.form.deviceId
      param.latitude = this.form.basicData.latitude
      param.latitudeGcj02 = this.form.basicData.latitudeGcj02
      param.latitudeWgs84 = this.form.basicData.latitudeWgs84
      param.longitude = this.form.basicData.longitude
      param.longitudeGcj02 = this.form.basicData.longitudeGcj02
      param.longitudeWgs84 = this.form.basicData.longitudeWgs84
      if (this.mineIndex != 0) {
        param.mineType = this.mineList[this.mineIndex - 1].mineType
        param.mineId = this.mineList[this.mineIndex - 1].id
      }
      videoApi.link(param).then(() => {
        this.$message.success('保存成功')
      }).finally(() => {
        // this.reForm()
      })
    },
    refreshMineVideo() {
      let param = {}
      param.videoId = this.form.id
      param.name = this.form.name
      param.deviceId = this.form.deviceId
      param.latitude = this.form.basicData.latitude
      param.latitudeGcj02 = this.form.basicData.latitudeGcj02
      param.latitudeWgs84 = this.form.basicData.latitudeWgs84
      param.longitude = this.form.basicData.longitude
      param.longitudeGcj02 = this.form.basicData.longitudeGcj02
      param.longitudeWgs84 = this.form.basicData.longitudeWgs84
      videoApi.refreshLink(param).then(() => {
        this.$message.success('刷新成功')
      }).finally(() => {
        this.reForm()
      })
    }
  }
}
</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>