<template>
	<div class="layer-group">
		<modulen
			:loading="loading"
			:error="error"
			:info="bsMeta && bsMeta['utilities']"
		>
			<template #title> 道路巡查事件 </template>
			<div class="w-full">
			<div class="road-video">
          <div class="road-select">
            <el-select
              v-model="cameraIndexCode"
              placeholder="选择车辆"
              size="mini"
              @change="changeVehicle"
              :popper-append-to-body="false"
            >
              <el-option
                v-for="(item,value) in vehicleLists"
                :key="value"
                :label="item.tag"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>

          <!-- 视频 -->
            <div v-if="showVideo">
          <div :id="elId" class="videocont"></div>
            </div>
           <div class="control" v-show="url && !loading">
      <i :class="pause ? 'el-icon-video-play' : 'el-icon-video-pause'" @click.stop="playPause" ></i>
      <i class="el-icon-full-screen" @click.stop="fullScreen"></i>
            </div>
              <div class="loading" v-show="loading">
                <span>视频加载中..</span>
              </div>
            <!-- 视频 -->


				</div>
				<div class="flex items-center justify-between">
					<div
						class="road-item"
						v-for="(item, index) in eventData"
						:key="`events_${index}`"
					>
						<span class="title">{{ item.title }}</span>
						<span class="value">{{ item.value }}</span>
					</div>
				</div>
                
			</div>
		</modulen>
	</div>
</template>

<script>
import { mapState } from 'vuex';
import { getDlxcEventCount,getVideoCameraResourceCar,getVideoUrls } from "@/api/operationMonitor";

let idx = 100;
let errorMsg = {
  "0x12f900003": "仅回放支持该功能",
  "0x12f900004": "普通模式不支持该功能",
  "0x12f900005": "高级模式不支持该功能",
  "0x12f900006": "播放库报错",
  "0x12f900007": "Decoder.js加载失败",
  "0x12f910000": "websocket连接失败，请核对取流URL",
  "0x12f910010": "取流失败",
  "0x12f910011": "流中断",
  "0x12f910014": "没有音频数据",
  "0x12f910015": "未找到对应websocket",
  "0x12f910016": "websocket不在连接状态",
  "0x12f910017": "不支持智能信息展示",
  "0x12f910020": "单帧回放时不能暂停",
  "0x12f910021": "已是最大倍速",
  "0x12f910022": "已是最小倍速",
  "0x12f920000": "储存空间配额失败",
  "0x12f920001": "请求文件系统失败",
  "0x12f920002": "获取文件失败",
  "0x12f920003": "创建writer失败",
  "0x12f920004": "写数据失败",
  "0x12f930000": "内存不足",
  "0x12f950000": "采集音频失败，可能是在非https/localhost域下使用对讲导致",
  "0x12f950001": "对讲不支持这种音频编码格式",
  "0x02200404": "取流失败",
};
export default {

  computed: {
    ...mapState({
      mapConfig: state => state.map.config,
      boundaryLineFace: state => state.map.boundaryLineFace,
      selectRoadId: state => state.road.selectRoadId,
    }),
  },
  watch: {
 
  },
  data() {
    return {
      plate:"", //车牌
      url:'1',
      loading: false,
      player: null,
      elId: "",
      msg: "",
      pause: true,
      showVideo: true,
      videoUrl: '1',
      autoPlay:true,
      cameraIndexCode:"",


      cameraIndexCode: '',
      vehicleLists:[],
      marker: null,
      eventData: [],
      provinceData: [{
        zb: [106.574179, 29.504607],
        id: 'CQ',
        zoom: 6.5
      }, {
        zb: [102.928995, 30.52487],
        id: 'SC',
        zoom: 5.4
      }, {
        zb: [101.593103, 25.353375],
        id: 'YN',
        zoom: 5.5
      }, {
        zb: [106.641243, 27.10797],
        id: 'GZ',
        zoom: 6.3
      }, {
        zb: [117.229929, 32.325398],
        id: 'AH',
        zoom: 6
      }]
    }
  },
  created() {

    this.getVehicleData()
    this.elId = `playWnd_${idx++}`;
  },
  mounted() {
      this.getTag()
    this.createPlayer();
  },
  beforeUnmount() {
    this.stopVideo();
  },


  methods: {
    async getVehicleData() {
      const { msgContent } = await getDlxcEventCount({sectionId: '30', queryDate: ''})
      const finished = msgContent.find(i => i.sstatus === '完成')
      const canceled = msgContent.find(i => i.sstatus === '取消')
      this.eventData = [
        {
          title: '完成巡查事件',
          value: finished?.count,
        },
        {
          title: '巡查中车辆',
          value: 0,
        },
        {
          title: '未确认事件',
          value: canceled?.count,
        },
      ]
    },

    async getTag(){
      const resTag = await getVideoCameraResourceCar(this.plate);
       this.vehicleLists=resTag.msgContent
       this.cameraIndexCode= resTag.msgContent[0].id
       console.log(189,resTag);
  
    //    const resUrl = await getVideoUrls(this.cameraIndexCode);
    //    console.log(190,resUrl);
       this.videoUrl ="ws://183.64.175.153:559/openUrl/sniFtkY"
       this.url ="ws://183.64.175.153:559/openUrl/sniFtkY"
          this.play();
    },


   async changeVehicle(val){
           this.cameraIndexCode=val
        //    const resurl = await getVideoUrls(this.cameraIndexCode);
        //    console.log(200,resurl);
           this.videoUrl="ws://183.64.175.153:559/openUrl/sn2ukVi"
            // 赋值给播放器
           this.play();
    },
      // 创建实例
    createPlayer() {
      const { elId, autoPlay } = this;
      const _that = this
      this.player = new window.JSPlugin({
        szId: elId,
        szBasePath: "/",
        // iMaxSplit: 1,
        // iCurrentSplit: 1,
        openDebug: true,
        // iWidth: 370,
        // iHeight: 180,
        oStyle: {
          borderSelect: "none",
        },
      });
      // 事件回调绑定
      this.player.JS_SetWindowControlCallback({
        pluginErrorHandler: (iWndIndex, iErrorCode, oError) => {
          //插件错误回调
          console.log("232 ", iWndIndex, iErrorCode, oError);
          console.log('插件错误回调')
          this.msg = errorMsg[iErrorCode]
            ? errorMsg[iErrorCode]
            : `错误码：${iErrorCode}`;
          this.playStop();
          this.showVideo = false
        //   setTimeout(() => {
        //     this.reloadUrl()
        //   }, 1000);
        },
        performanceLack: () => {
          console.log('性能不足')
        }
      });
      if (autoPlay) {
        this.play();
      }
    },
    // 重新获取新的地址并重新加载组件
    // async reloadUrl() {
    //   this.showVideo = true
    //   console.log(254,this.code);
    //   const resurl = await getVideoCameraResourceCar(this.plate);
    //   console.log(257,resurl);
    //   if (resurl.data) {
    //     this.videoUrl = resurl.data
    //     this.createPlayer()
    //   }
    // },
    // 播放
    play() {
      let { player, videoUrl } = this;
      console.log(263,videoUrl);
      if (!videoUrl) {
        this.msg = "视频加载失败";
        return;
      }
      this.loading = true;
      this.player.JS_Play(videoUrl, { playURL: videoUrl }, 0).then(
        (res) => {
          this.pause = false;
          this.loading = false;
        },
        (e) => {
          console.error(e);
          this.pause = true;
          this.loading = false;
        }
      );
    },
    // 播放暂停切换
    playPause() {
      if (this.pause) {
        // 播放
        console.log(this.pause);
        this.play();
      } else {
        // 暂停
        this.playStop();
      }
    },
    // 暂停视频播放
    playStop() {
      if (this.loading) {
        this.loading = false;
      }
      if (!this.player) {
        return;
      }
      this.player.JS_Stop().then(
        () => {
          this.pause = true;
        },
        (e) => {
          console.error(e);
        }
      );
    },
    stopVideo() {
      this.playStop();
      this.msg = "";
      this.player = null;
    },
    // 全屏
    fullScreen() {
      this.player.JS_FullScreenDisplay(true).then(
        () => {
          console.log(`wholeFullScreen success`);
        },
        (e) => {
          console.error(e);
        }
      );
    },
   
  }
}
</script>

<style lang="scss" scoped>
@import "~/styles/viewport-convert.scss";
.road-video{
  position: relative;
	// width: 100%;
	// height: 180px;
     width: vw(368) !important;
  height: vh(205) !important;
	margin: 14px 0;
  border: 2px solid #00a1ff;
	& > img {
		width: 100%;
		height: 100%;
	}
  & > .cm-map{
    z-index: 10;
  }

  .road-select {
    width: 130px;
    height: 20px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 12;

    ::v-deep(input::placeholder) {
      color: #94c2e2;
      font-size: 14px;
    }
    ::v-deep(.el-input__inner) {
      color: #94c2e2;
      background: #1b406c;
      border: none;
      font-size: 14px;
    }
    ::v-deep(.el-select__popper.el-popper) {
      background: rgba(5, 15, 45, 0.7) ;
      color: white;
    }
  }
}
.road-video::before {
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: 10px;
    width: calc(100% - 20px);
    content: "";
    border-top: 2px solid #016886;
    border-bottom: 2px solid #016886;
    z-index: 0;
}
.road-video::after {
    position: absolute;
    top: 10px;
    right: -2px;
    left: -2px;
    height: calc(100% - 20px);
    content: "";
    border-right: 2px solid #016886;
    border-left: 2px solid #016886;
    z-index: 0;
}
.road-item {
	width: 110px;
	height: 60px;
	background: url(@/assets/images/newLayerContrl/methed.png) no-repeat;
	background-size: 100% 100%;
	@apply flex items-center justify-center flex-col;
	& > .title {
		color: '#94A8C6';
		font-size: 12px;
	}
	& > .value {
		font-size: 20px;
		font-weight: blod;
	}
}

// 视频


.layer-group{
  position: relative;
}
.videocont {
  width: vw(368) !important;
  height: vh(205) !important;
}

  .loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .control {
    position: absolute;
    right: 0;
    bottom: 15px;
    font-size: 16px;
    padding: 5px;
    cursor: pointer;
    i {
      padding: 0 5px;
    }
    z-index: 99;
  }

    .info {
    position: absolute;
    // top: 50%;
    // left: 50%;
    // transform: translate(-50%, -50%);
  }
</style>
