<template>
  <view class="spjk-box">
    <view class="select-bar">
        <uni-data-select
         v-model="value"
         :localdata="list"
         @change="change"
         :clear="false"
            >
        </uni-data-select>
    </view>
    <view class="video-box" v-if="this.list.length">
      <!-- <web-view :src="webURL" style="height: 400px;"></web-view> -->
      <iframe :src="webURL" :class="{'normal': show == 0,'active': show == 1}" frameborder="0" ref="videoFrame" :allowfullscreen="true"></iframe>
    </view>
  </view>
</template>
<script>
  export default{
    props:{
      stcd:String,
      source:String,
      default:''
    },
    data() {
      return {
        value: "",
        list:[],
        webURL:'',
        show:0
      }
    },
    methods: {
      receiveRenderData(e){
         this.show = e.data
      			},
      async getList(){
        try{
          const {data} = await uni.$http.get(
          `/gunshiApp/xfflood/stbprp/cctv/listByStcd/${this.stcd}`)
          if(data.code == 200){
            let newData;
            console.log("23",data.data);
            if(data.data.length > 0){
              newData = data.data.map(item => ({...item,value:item.camId,text:item.name}))
              this.list = [...newData];
              this.value = newData[0].value
              this.getVideoSrc(newData[0].camId)
            }
          }
        }catch(e){
          uni.$showMsg()
        }
      },
      async getVideoSrc(id){
        console.log(id);
        try{
          const {data} = await uni.$http.get(
          `/gunshiApp/xfflood/xfCctvB/preview/${id}`)
          if(data.code == 200){
            this.webURL="./static/h5Player/webplayer.html?cameraIndexCode="+id+"&cameraUrl="+data.data
          }
        }catch(e){
          uni.$showMsg()
        }
      },
      change(e) {
         console.log("e:", e);
         this.getVideoSrc(e)
     },
    },
    mounted() {
      this.getList()
      // this.creatFlvElement()
    }
  }
</script>

<script module="renderModal" lang="renderjs">
  export default {
    data() {
			return {
				dom: '',
			}
		},
    mounted() {
			this.dom = document.getElementById('iframe')
			// 接收iframe传过来的值
			window.addEventListener('message', (e)=> {
				var data = e.data;
				this.emitData(data) 
			});
		},
    methods: {
      emitData(e) {
        this.$ownerInstance.callMethod('receiveRenderData',e)
      },
  },
  }
</script>

<style lang="scss" scoped>
  .spjk-box{
    .select-bar{
      margin: 10px 15px;
    }
    .video-box{
      
    .normal{
      position: absolute;
      // width: 370px;
      // height: 300px;
      top: 170px;
      left: 0;
      width: 100vw;
      height: 100vh;
    }
    .active{
      position: absolute;
      width: 100vw;
      height: 100vh;
      top: -30px;
      left: 0;
    }
    }
  }
</style>
