<template>
  <div class="dialogBox">
    <div class="title">
      <span class="mc">{{ title }}</span>
      <span class="close" @click="close">
        <el-icon :size="22"><CircleClose /></el-icon>
      </span>
    </div>
    <ul class="shebeiList" ref="scollVideo">
      <li v-for="item in videoList.list" :key="item.id">
        <div> {{ item.sbmc }} </div>
        <div class="top">
          <span class="other">{{ item.distance ? item.distance.toFixed(0) : 0 }}m</span>
          <span>
            <button class="dp-default small" v-if="!item.isPlay" @click="handlePlay(item)"> 播放 </button>
            <button class="dp-default small" v-if="item.isPlay" @click="closePlay(item.id)" > 关闭 </button>
          </span>
        </div>
        <div class="address">
          <img src="@/assets/images/situationPresentation/dingwei.png" />
          <span>{{ item.dzmc }}</span>
        </div>
        <div class="videoBox" v-if="item.isPlay">
          <VideoPay key="item.id" :vId="'sb_'+index" :sbbh="item.sbbh"></VideoPay>
        </div>
      </li>
      <el-empty
        description="没有数据"
        :image-size="0.1"
        v-if="!loading && videoList.list.length <= 0"
      />
    </ul>
  </div>
</template>

<script setup>
import { http } from "@/api/service";
// import VideoPay from "@/components/wsVideoSenior/wsPlayOne/index";  //ws播放高阶
// import VideoPay from "@/components/videoOne/index"; //ws播放
import VideoPay from "@/components/wsVideoSenior/wsIframe/index"; //iframe播放
import { getZbVideoList, getVideoSdList } from "@/api/dpApi/video.js";
import {
  ref,
  defineEmits,
  onMounted,
  reactive,
  onUnmounted,
  defineProps,
  getCurrentInstance
} from "vue";
const { proxy } = getCurrentInstance();
import emitter from "@/utils/eventBus.js";
const loading = ref(false);
const page = ref(1);
const total = ref(0);
//周边视频列表
const videoList = reactive({
  list: []
});
const scollVideo = ref(null);
const props = defineProps({
  //某条预警详情
  info: Object,
  //弹框标题
  title: String
});
const emit = defineEmits(["close"]);
onMounted(() => {
  //打开周边视频
  _getZbVideoList(props.info);
  scroll();
  emitter.on("closeVideo", (res) => {
    emit("close", res);
  });
});
onUnmounted(() => {
  emitter.off("closeVideo");
});
//关闭
function close() {
  emit("close", false);
}

// 获取地址
function getws(item) {
  let pramas = {
    cameraIndexCode: item.sbbh
  };
  http.getSpWs(pramas).then((res) => {
    item.src = "http://80.75.112.18:56233?ws=" + res.url;
  });
}

//获取视频列表
function _getZbVideoList(info) {
  if (info.jd && info.wd) {
    let data = {
      jd: info.jd,
      wd: info.wd,
      radius: 300,
      sblx: "01"
    };
    loading.value = true;
    if (props.title == "周边视频") {
      getZbVideoList(data).then((res) => {
        videoList.list = res || [];
        loading.value = false; })
      .catch(() => {
        loading.value = false;
      });
    } else {
      //获取视频随动列表
      data.pageSize = 4;
      data.pageNum = 1;
      getVideoSdList(data).then((res) => {
        videoList.list = res.records ? res.records : [];
        videoList.list.forEach(item=> { v.isPlay = false; });
        loading.value = false;
      }).catch(() => {
        loading.value = false;
      });
    }
  } else {
    proxy.$message({type: "warning", message: "获取经纬度失败"});
  }
}

// 处理播放
function handlePlay(item) {
  if (!item.sbbh) return proxy.$message({ type: "info", message: "暂无视频" });
  SPPUC.rdCard(item.sbbh, 1, ["60%", "40%"]);
}

// 关闭播放
function closePlay(id) {
  videoList.list.forEach((item) => {
    if (item.id == id) {
      item.isPlay = false;
    }
  });
}

//触底加载
function scroll() {
  let scrollTargetBox = scollVideo.value;
  scrollTargetBox.onscroll = (e) => {
    var scrollHeight = scrollTargetBox.scrollHeight; //251
    var scrollTop = scrollTargetBox.scrollTop; //0-18
    var clientHeight = scrollTargetBox.clientHeight; //233
    if (scrollHeight - clientHeight == scrollTop) {
      //滚动条滚到最底部
      if (videoList.list.length < total.value) {
        page.value++;
        _getZbVideoList(props.info);
      }
    }
  };
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";
.dialogBox{
  padding: 0 0 10px 0;
  box-sizing: border-box;
  .title {
    border-bottom: 1px solid #275288;
    margin-bottom: 6px;
    .mc { margin-left: 10px; }
  }
  .shebeiList {
    padding: 4px 10px;
    box-sizing: border-box;
    max-height: 700px;
    overflow: hidden;
    overflow-y: auto;
    li{
      border: 1px solid #275288;
      padding: 4px 10px;
      box-sizing: border-box;
      margin-bottom: 4px;
      .top{
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .address{
      line-height: 30px;
        img{
          margin-right: 10px;
        }
      }
    }
  }
  .videoBox{
    margin: 0 10px;
    border: 1px solid#2b4462;
    background: #000;
    height: 200px;
    margin-bottom: 8px;
    >img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
