<template>
  <a-row>
    <a-col :span="24">
      <a-row :gutter="24">
        <a-col class="gutter-row" :span="12" v-for="value2 in formData.cams" :key="value2.id" style="text-align: center;">
          <div class="gutter-box" :id="value2.deployCode" style="width: 95%; margin: auto; padding-top: 10px">
            <div class="video_head" style="display: flex; justify-content: space-between; align-items: center;">
              <div class="video_tit">{{value2.deployDes}}</div>
              <a-button
                type="text"
                v-if="value2.deviceReverseIotUrl"
                @click="handleHisMonitor(value2)"
                style="color: #64c3a4;"
              >
                查看回放
              </a-button>
            </div>
            <div style="cursor: pointer" @click="handleMonitor(value2)">
              <img src="/resource/img/cameras.jpg" class="app-loading-logo" alt="Logo" style="width: 100%;"/>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-col>
  </a-row>
  <!--监控-->
  <MonitorDetailModal ref="monitorRegisterModal" @success="handleSuccess"/>
</template>

<script lang="ts" setup>
  import { ref, onMounted, reactive } from 'vue';
  import MonitorDetailModal from './MonitorModal.vue';
  import { getCamList } from '../deploy/SurvDeviceDeploy.api';
  const formData = reactive<Record<string, any>>({
    item: [],
    cams:[],
  });
  //注册model
  const monitorRegisterModal = ref();
  onMounted(() => {
    getCams();
  });

  /**
   * 查看监控
   */
  function handleMonitor(record) {
    // monitorRegisterModal.value.disableSubmit = false;
    monitorRegisterModal.value.statistic(record);
  }

  /**
   * 查看历史监控
   */
  function handleHisMonitor(record) {
    record.deviceIotUrl = record.deviceReverseIotUrl;
    monitorRegisterModal.value.statistic(record);
  }

  /**
   * 获取设备列表
   */
  function getCams() {
    getCamList().then((res) => {
      if (res.code == 200) {
        formData.item = res.result;
        res.result.forEach((val) => {
          val.deviceList.forEach((itm) => {
            formData.cams.push(itm)
          });
        });
      }
    });
  }


 function historyvideo(item) {
    this.lockVideoShow = true
    let videohtml =
      `<div style="width: 100%;height: 600px;margin:auto;"><div id="videos" style="width: 100%; height: 100%"></div></div>`
    this.$nextTick(() => {
      let dom = document.querySelector('#parent')
      dom.innerHTML = videohtml
      this.$forceUpdate()
      this.player = new EZUIKit.EZUIKitPlayer({
        id: 'videos', // 视频容器ID
        accessToken: item.ysToken,
        url: item.deviceIotUrlReserve,
        audio: 0,
        autoplay: true,
        // simple: 极简版; pcLive: pc直播; pcRec: pc回放; mobileLive: 移动端直播; mobileRec: 移动端回放;security: 安防版; voice: 语音版;
        template: 'security',
        // themeData: this.themeData,
        plugin: ['expend'], // 加载插件，talk-对讲
        width: 1160,
        height: 600
      })
    })
  }
</script>

<style lang="less" scoped>
.video_head {
  background: white;
  border: 1px solid #eee;
  border-radius: 4px 4px 0 0;
  padding: 0 12px;
  box-sizing: border-box;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;

  .video_tit {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .video_ctl {
    width: 24px;
    height: 40px;
    cursor: pointer;
    background: url('/camera/video_icon.png') no-repeat right center;
  }
}
</style>
