<template>
  <Module
    class="vio-contrl-mod"
    :loading="loading"
    :error="error"
    :info="bsMeta && bsMeta['utilities']"
  >
    <template #title>视频列表</template>
    <div class="videocont">
      <!-- @click="handleShowVideo(item.url, item.name)" -->
      <div
        v-for="(item, index) in monitorList"
        :key="index"
        class="gridBox"
        :class="index > 3 ? 'gridBoxm' : 'gridBoxs'"
        :style="{ border: item.name ? 'none' : '1px dashed #f5f5f5' }"
      >
        <!-- <div v-if="item.name"> -->
        <videoPlayerList
          :url="item.url"
          :code="item.code"
          :size="index > 3 ? 'm' : 's'"
        ></videoPlayerList>

        <!-- <div class="tips" v-if="item.name">
          <span>{{ item.name }}</span>
        </div> -->
        <!-- </div> -->
      </div>
      <el-dialog :title="videoname" v-model="videoVisible" width="740px">
        <div>
          <div class="player" v-if="url">
            <videoPlayer :url="url"></videoPlayer>
          </div>
        </div>
      </el-dialog>
    </div>
  </Module>
</template>
<script lang="jsx">
import { getRoadVideoListByCode } from '@/api/operation';
import { monitors, getVideoUrl } from "@/api/operation";
import videoPlayer from "./newLayerContrl/components/videoPlayer.vue";
import videoPlayerList from "./videoPlayer/videoPlayList.vue";
export default {
  components: { videoPlayer, videoPlayerList },
  data() {
    return {
      pageNo: 1,
      pageSize: 8,
      url: "",
      text: "",
      monitorList: [{
        name: '',
        url: '',
        code: ''
      },{
        name: '',
        url: '',
        code: ''
      },{
        name: '',
        url: '',
        code: ''
      }, {
        name: '',
        url: '',
        code: ''
      }, {
        name: '',
        url: '',
        code: ''
      }],
      videoVisible: false,
      videoname: '',
      url: '',
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
     async getData() {
      const { selectedRoadRoadNo, pageNo, pageSize, text } = this;
      let _that = this;
      let params = {
        pageNo: pageNo,
        pageSize: pageSize,
        t: {
          content: text,
          // content: '大路服务区左区鹰眼球机全景',
        },
      };
      // if 有缓存和5个视频都不为空
      let istrim = true
      if(localStorage.getItem("monitorList")) {
         const ismonitorList = JSON.parse(localStorage.getItem("monitorList"))
        //  const wk = ismonitorList.filter(item => item.url == '' ? false)
         ismonitorList.forEach(ele => {
           if(ele.url == '') {
             istrim = false
           }
         })
      }
      if(localStorage.getItem("monitorList") && istrim){
        const strList = JSON.parse(localStorage.getItem("monitorList"))
        console.log(strList)
        strList.forEach( async (ele, index) => {
            const resurl = await getVideoUrl(ele.code);
            if (resurl && resurl.success && resurl.data) {
              _that.monitorList[index].url = resurl.data
              _that.monitorList[index].name = ele.name
              _that.monitorList[index].code = ele.code
            }
          });
      } else {
        this.loading = true;
        //先获取前4个摄像头
        let res = await monitors(params);
        console.log(res.records)
        this.loading = false;
        let videolist = []
        if (res.searchCount && res.records) {
          videolist = res.records.slice(0, 4);
          videolist.forEach( async (ele, index) => {
            const resurl = await getVideoUrl(ele.cameraIndexCode);
              if (resurl && resurl.success && resurl.data) {
                _that.monitorList[index].url = resurl.data
                _that.monitorList[index].name = ele.name
                _that.monitorList[index].code = ele.cameraIndexCode
              }
          });

          // 再获取大路服务区左区鹰眼球机全景
          const obj = {
            pageNo: pageNo,
            pageSize: pageSize,
            t: {
              content: '大路服务区左区鹰眼球机全景',
            },
          }

          let res1 = await monitors(obj);
          if (res1.searchCount && res1.records) {
            res1.records.forEach( async (ele, index) => {
            const resurl = await getVideoUrl(ele.cameraIndexCode);
              if (resurl && resurl.success && resurl.data) {
                _that.monitorList[4].url = resurl.data
                _that.monitorList[4].name = ele.name
                _that.monitorList[4].code = ele.cameraIndexCode
              }
            });
          }
          // 存储在播视频列表
          localStorage.setItem("monitorList", JSON.stringify(this.monitorList));

          // 当获取完8个视频后， 再去加载一下地图。（因为8个视频全部加载完之后，地图就不显示了, 8个以下的视频就没问题）
          // if(this.monitorList.length === 8) {
          //   setTimeout(() => {
          //     this.$emit('doinitmap')
          //   }, 5000);
          // }
        }
      }

      // this.getUrl()
    },
    async handleShowVideo(url, name) {
      if(!name) return
      this.loading = true;
      this.url = url;
      this.videoname = name;
      // const res = await getVideoUrl(deviceCode);
      // this.loading = false;
      // if (res && res.success && res.data) {
      //   this.url = res.data;
      // } else {
      //   this.url = null;
      // }
      this.videoVisible = true;
    },
    // 接受dropdown.vue点开视频弹窗的视频
    doPushMoniter(num, data) {
      this.monitorList[num] = data
      localStorage.setItem("monitorList", JSON.stringify(this.monitorList));
    }
  }
};
</script>
<style lang="postcss" scoped>
.vio-contrl-mod {
  /* margin-top: 50px; */
  width: 600px;
  padding-left: 0;
  /* position: absolute;
  top: 60px;
  right: 20px; */
}
.videocont {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.gridBox {
  margin-left: 10px;
  position: relative;
  background: rgba(0, 0, 0, 0.3);
  /* background: #05121a; */
  margin-top: 15px;
}
.gridBoxs {
  width: 275px;
  height: 200px;
}
.gridBoxm {
  width: 550px;
  height: 400px;
  margin-left: 15px;
}
.tips {
  text-align: center;
  position: absolute;
  left: 0;
  bottom: 0;
  /* padding: 15px 10px; */
  line-height: 30px;
  width: 100%;
  height: 30px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
}
</style>
