<!--
  Description: 通话弹窗
  Author: 李亚光
  Date: 2023-05-18
 -->
<script lang="ts" setup name="EditPerson">
import { RefreshRight } from '@element-plus/icons-vue'
import { urlAndKey } from '@/views/dashboard/video'
// 设备的实时视频页面 /#/realvideo?id={serialNumber}&appKey={appKey}&secretKey={secretKey}
// 语音通话页面 /#/Intercom?appKey={appKey}&secretKey={secretKey}
const dialogFormVisible = ref(false) // 对话框是否显示
const dialogStatus = ref('') // 对话框类
const loading = ref(true)
const timer = ref()
// 表头显示标题
const textMap: { [key: string]: string } = {
  video: '视频通话',
  voice: '语音对讲',
}
const baseUrl = urlAndKey.url
const baseParams = {
  id: '',
  appKey: urlAndKey.appKey,
  secretKey: urlAndKey.secretKey,

}
// 用于拼接url的query字符串参数
const getUrlToStr = (url: string, params: { [key: string]: string }) => {
  return params ? `${url}?${Object.keys(params).filter(key => params[key] || params[key] === 0).map(key => `${key}=${params[key]}`).toString().replace(/,/g, '&')}` : url
}
// iframe地址
const iframeUrl = ref('')
// 获取区域类型
const data = ref()
const initDialog = (flag: string, row: any) => {
  data.value = row
  dialogStatus.value = flag
  dialogFormVisible.value = true
  if (flag === 'video') {
    const url = `${baseUrl}/#/realvideo`
    baseParams.id = row.hatCode
    iframeUrl.value = getUrlToStr(url, baseParams)
  }
  else {
    const url = `${baseUrl}/#/Intercom`
    baseParams.id = ''
    iframeUrl.value = getUrlToStr(url, baseParams)
  }
  // navigator.getUserMedia = navigator.getUserMedia ||
  //   navigator.webkitGetUserMedia ||
  //   navigator.mozGetUserMedia ||
  //   navigator.msGetUserMedia;

  // if (navigator.getUserMedia) {
  //   console.log('支持获取麦克风权限')
  //   // 支持
  //   navigator.getUserMedia({ audio: true }, function onSuccess(stream) {
  //     console.log('已点击允许,开启成功');
  //   }, function onError(error) {
  //     console.log("错误：", error)
  //   })
  // } else {
  //   // 不支持
  //   console.log('不支持获取麦克风权限')
  // }
  timer.value = setTimeout(() => {
    () => {
      var iframe: any = document.querySelector('#player-iframe')
      if (iframe) {
        console.log(iframe, '获得iframe标签')
        iframe.allow = 'microphone *;camera *'
      }
    }
  })
}
// 弹窗关闭
watch(() => dialogFormVisible.value, (newVal) => {
  if (!newVal) {
    loading.value = true
    iframeUrl.value = ''
    clearTimeout(timer.value)
    console.log('通话关闭')
    window.WebSocket = null
  }
})
// 刷新
const refresh = () => {
  dialogFormVisible.value = false
  setTimeout(() => {
    initDialog(dialogStatus.value, data.value)
  })
}
defineExpose({
  initDialog,
})
</script>

<template>
  <el-dialog v-model="dialogFormVisible" append-to-body width="1000px" draggable :close-on-click-modal="false">
    <template #header>
      <div class="header">
        {{ textMap[dialogStatus] }}
        <el-icon style="margin-left: 15px;" class="icon" @click="refresh">
          <refresh-right />
        </el-icon>
      </div>
    </template>
    <iframe
      v-if="dialogFormVisible" id="player-iframe" allow="camera; microphone" frameborder="false" :src="iframeUrl"
      height="500" width="100%"
    />
    <!-- <div v-if="loading" v-loading="loading" style="width: 100%;height: 500px;"></div> -->
  </el-dialog>
</template>

<style lang="scss" scoped>
.el-dialog {
  width: 700px;
}

.header {
  display: flex;
  align-items: center;

  //  flex-direction: column;
  .icon {
    &:hover {
      cursor: pointer;
      color: #3d7eff;
    }
  }
}
</style>