<!--
  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)
  }
  // timer.value = setTimeout(() => {
  //   var iframe: any = document.querySelector('#player-iframe')
  //   if (iframe?.attachEvent) {
  //     iframe.attachEvent('onload', () => {
  //       // iframe加载完毕以后执行操作
  //       loading.value = false
  //     })
  //   }
  //   else {
  //     iframe.onload = () => {
  //       // iframe加载完毕以后执行操作
  //       loading.value = false
  //     }
  //   }
  // })
}
// 弹窗关闭
watch(() => dialogFormVisible.value, (newVal) => {
  if (!newVal) {
    loading.value = true
    iframeUrl.value = ''
    clearTimeout(timer.value)
    console.log('通话关闭')
  }
})
// 刷新
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>
    <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" 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>