<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: 500px;"></web-view> -->
      <video id="video-element" controls=""></video>
    </view>
  </view>
</template>
<script>
  // import flvjs from "@/node_modules/flv.js/dist/flv.min.js"
  // import 'es6-promise/auto';
  // import flvjs from "flv.js"
  export default{
    props:{
      stcd:String,
      source:String,
      default:''
    },
    data() {
      return {
        value: "",
        list:[],
        webURL:'',
        urls:"",
        flv:null
      }
    },
    methods: {
      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){
            console.log(data.data);
            this.urls = data.data;
            this.webURL="/static/h5Player/webplayer.html?cameraIndexCode="+id+"&cameraUrl="+data.data
            this.flv.updateConfig({ url: data.data })
            this.flv.load()
          }
        }catch(e){
          uni.$showMsg()
        }
      },
      change(e) {
         console.log("e:", e);
         this.getVideoSrc(e)
     },
     creatFlvElement(){
        const videoElement = document.getElementById('video-element'); // 获取视频元素
         const flvPlayer = flvjs.createPlayer({
           type: 'flv',
           url: '' // WebSocket 流地址
         });
         
         flvPlayer.attachMediaElement(videoElement); // 将播放器与视频元素绑定
         flvPlayer.load(); // 加载视频流
         flvPlayer.play(); // 播放视频
         this.flv = flvPlayer;
     }
    },
    mounted() {
      this.getList()
      // this.creatFlvElement()
    }
  }
</script>

<style lang="scss" scoped>
  .spjk-box{
    .select-bar{
      margin: 10px 15px;
    }
  }
</style>
