<template>
  <div class="scene-layer" id="iframediv">
    <!-- getUrlname() -->
    <!-- <iframe ref="lookLive" allow="geolocation; microphone; camera; midi; encrypted-media;" :src="url" ></iframe> -->
  </div>

  <com-dialog title="访问密码" enterText="确 定" v-model:show="confirm.show" @submit="loadData()" width="480" :showClose="false">
    <el-input v-model="confirm.psw" placeholder="请输入访问密码" @keydown.enter="loadData"></el-input>
  </com-dialog>

  <div v-if="showImg" class="img-layer">
    <i class="el-icon-close" @click="showImg = ''"></i>
    <img :src="showImg" alt="">
  </div>
</template>

<script>
import { fireDetailByPsw, getAttachListByPsw } from '@/request/config'
import axios from 'axios';
import comDialog from "@/components/dialog";
import { types } from '@/constant'

export default {
  data() {
    return { 
      detail: {

      },
      showImg: '',
      confirm: {show: false, psw: ''},
      list: [],
      showInfo: false,
      loadSuccess: false,
    }
  },
  watch: {
    'confirm.show'() {
      console.log(this.confirm.show, !this.showInfo)
      if (this.confirm.show || !this.showInfo) {
        this.$router.back()
      }
    },
  },
  computed: {
    url() {
      let ssurl = sessionStorage.getItem('initiator')
      const {sceneNum,id} = this.$route.query
      if(ssurl){
        return process.env.VUE_APP_DOMAIN + '/fire-rtc-live.html' + ssurl.substr(ssurl.indexOf('?') || 0)
      }
      if (sceneNum && id) {
        return process.env.VUE_APP_DOMAIN + '/fire-rtc-live.html?m=' + sceneNum +'&app=fire-control&p_id='+id+'&vlog#/'
      } else {
          console.log('url获取=>',this.$route)
        return 'javascript:void(0)'
      }
    },
    tableData() {
      let dataList = this.list || [];
      let cache = [];
      let data = types.reduce((t, c) => {
        let children = dataList.filter(
          (item) => c.name === item.attachmentType
        );
        t.push({ title: c.name, children });
        cache.push(...children);
        return t;
      }, []);

      data[data.length - 1].children.push(
        ...dataList.filter((item) => !cache.includes(item))
      );
      return data;
    },
  },
  methods: {
    getUrlname(){
      return window.location.origin + window.location.pathname
    },
    async loadData() {
      // if (!this.confirm.psw || this.confirm.psw.length === 0) return this.$message.error('请输入访问密码', '提示')
      let {data: detail} = await axios.get(fireDetailByPsw, {params: {projectId: this.$route.params.projectId, randCode: this.confirm.psw,type:1}})
      this.detail = detail

      let {data: list} = await axios.get(getAttachListByPsw, {params: {projectId: this.$route.params.projectId, randCode: this.confirm.psw,type:1}})
      this.list = list

      this.loadSuccess = true
      this.confirm.show = false
      this.showInfo = false  //不默认开启
    },
    goto(item) {
      if (item.type !== 1) {
        window.open(item.fileOssUrl)
      } else {
        this.showImg = item.fileOssUrl
      }
    },
    async handleMessage(event){
        if(event.data){
            const {liveStatus,url} = event.data
            url&&sessionStorage.setItem('initiator',url)
            if(liveStatus == 0){//已结束
                sessionStorage.removeItem('initiator')
            }
        }
        console.log('handleMessage===>',event)
    }
  },
  mounted() {
    window.addEventListener('message',this.handleMessage)
    var iframe = document.createElement('iframe'); 
    iframe.src=this.url;  
    iframe.width='100%';  
    iframe.height='100%';  
    iframe.name = this.getUrlname()
    if(iframe){
        iframe.allow = 'geolocation; microphone; camera; midi; encrypted-media;'
    }
    document.getElementById('iframediv').appendChild(iframe);
  },
  created(){

  },
  beforeDestroyed(){
    window.removeEventListener("message", this.handleMessage);
    sessionStorage.removeItem('initiator')
  },
  components: {
    "com-dialog": comDialog,
  }
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>