<template>
  <div class="correspondence">
    <div class="top-box">
      <div class="title">融合通信</div>
      <div class="icon-box flex" style="height: initial;">
        <div
          class="item"
          v-for="item in deptsList"
          :key="item.id"
          @click="handleDepsUser(item.id, item)"
        >
          <img src="/src/assets/images/r-icon-1.png" />
          <view class="item-name">{{ item.name }}</view>
        </div>
        <div
            class="item"
            @click="goItc()"
        >
          <img src="/src/assets/images/r-icon-1.png" />
          <view class="item-name">三峡之巅广播</view>
        </div>
      </div>
    </div>
    <div class="bom-box">
      <Title2 title="最近联系" />
      <div class="table">
        <div class="header">
          <div>人员姓名</div>
          <div>部门</div>
          <div>时间</div>
        </div>
        <div class="list">
          <div class="item" v-for="(item, index) in recordList" :key="index">
            <div>{{ item.nickname }}</div>
            <div>{{ item.department }}</div>
            <div>{{ item.time }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <el-dialog :title="gridTitle" center v-model="dialogTableVisible">
      <div class="bom-box">
        <div class="table">

          <div class="header">
            <div>姓名</div>
            <div>部门</div>
            <div>职位</div>
            <div>电话号码</div>
            <div>操作</div>
          </div>
          <div class="list">
            <div class="item" v-for="(item, index) in gridData" :key="index">
              <div>{{ item.nickName }}</div>
              <div>{{ item.depthName }}</div>
              <div>{{ item.postName }}</div>
              <div>{{ item.phoneNumber }}</div>
              <div>
                <img @click="doCallTel(item)" class="tel-ico" src="@/assets/images/tel-icon.png" />
                <!-- <img @click="doCallVoice(item)" class="voice-ico" src="@/assets/images/voice-icon.png" /> -->
                <img @click="doCallVideo(item)" class="sp-ico" src="@/assets/images/sp-icom.png" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
	<el-dialog :title="'三峡之巅广播'" center v-model="dialogTableVisible2">
	  <div class="bom-box bom-box2">
	    <div class="table2">
			<!-- <div class="header-title">三峡之巅广播</div> -->
			<iframe style="width:100%;height:100%;" src="http://192.168.0.2:81/"></iframe>
	    </div>
	  </div>
	</el-dialog>
<!-- 	<el-dialog :title="'三峡之巅广播'" top="0" @close="closeTh" width="1200px"  center v-model="dialogTableVisible3">

	</el-dialog> -->
	<div v-show="dialogTableVisible3" class="videoPrefecture_video" id="videoPrefecture">
		<img src="/src/assets/images/close.png" @click="closeTh" class="closeCall" alt="" />
			  <div class="flex-hj" :class="callType!=3?'tell-flex':''">
				  <video  id="youVideo" class="oneVideo"></video>
				  <div class="hj-box" v-if="callType==3">
					  <div v-if="progressVal!=='通话中'">
						  <img src="/src/assets/images/hj-1.png" class="hj-ico" alt="" />
						  <div>{{progressVal=='未通话'?'呼叫中...':progressVal}}</div>
					  </div>

				  </div>
				  <div class="hj-box " v-else>
					  <img src="/src/assets/images/hj-1.png" class="hj-ico" alt="" />
					  <div>{{progressVal=='未通话'?'呼叫中...':progressVal}}</div>
				  </div>
			  </div>
				  <div class="gd-ico" >
					 <el-button type="success" @click="doCallVideo()" v-if="progressVal=='呼叫停止'||progressVal=='呼叫失败'" round>重拨</el-button>
					 <!-- <el-button type="success" round>解除保持</el-button> -->
					 <el-button type="success" @click="ansWerPhone()" v-else-if="thState" round>接听</el-button>
					 <el-button type="danger" @click="closeTh" v-else round>挂断</el-button>

				  </div>
	        <video id="meVideo" :class="callType==3?'':'callVideo'" class="twoVideo"></video>
	       <span class="glyphicon glyphicon-volume-down"></span>
	       <span class="glyphicon glyphicon-off"></span>
	</div>
  </div>
</template>

<script setup>
  import { getComDeptsApi, getComDeptUsersApi, getComRecordApi } from '@/api/common'
  import {useWebSocket} from "@/hooks/socket.js";
  import {mode, proSocketBaseUrl, socketBaseUrl} from "@/utils/config.js";
  import MyWebrtc from '@/assets/com/webrtc.js';
  let deptsList = ref([])
  let dialogTableVisible = ref(false)
  let dialogTableVisible2 = ref(false)
  let dialogTableVisible3 = ref(false)
  let callType = ref(3)
  let dialogComVideo = ref(false)
  const webrtcInstance = new MyWebrtc()
  const getComDepts = async () => {
    let res = await getComDeptsApi()
    deptsList.value = res.data
  }
  let recordList = ref([])
  const getComRecord = async () => {
    let res = await getComRecordApi()
    recordList.value = res.data
  }
  let gridData = ref([])
  let gridTitle = ref('')
  const goItc = () => {
	  dialogTableVisible2.value = true
    // location.href="http://192.168.0.2:81/";
  }
  let progressVal = ref(null)
  let timer = ref(null)
  watch(
    () => dialogTableVisible.value,
    (val) => {
	  // comRegister();


    }
  )
  const doCallTel = (item) => {
	  callType.value = 1
    dialogTableVisible3.value=true;
	nextTick(()=>{
		webrtcInstance.JsSip_VoiceCall('15123854798',true);
	})
  }
  const doCallVoice = (item) => {
	  callType.value = 2
	  dialogTableVisible3.value=true;

	  nextTick(()=>{
		  webrtcInstance.JsSip_VoiceCall('854798',false);
	  })

  }
  const doCallVideo = (item) => {
	  callType.value = 3
	  dialogTableVisible3.value = true;
	  nextTick(()=>{
		  webrtcInstance.JsSip_VoiceCall('854798',true);
	  })
  }
  // 接听
  const ansWerPhone = ()=> {
  	//调用语音接听方法
	  nextTick(()=>{
		webrtcInstance.VoiceAnsWter();
		thState.value = false
	  })
  }
  const huangUp = ()=>{
	  // clearInterval(timer.value)
	  //调用挂断方法
	  dialogTableVisible3.value = false;
	  webrtcInstance.JsSip_hangUpPhone();

  }
  const closeTh = ()=>{
	  huangUp()
  }

  const handleDepsUser = async (id, item) => {
    gridTitle.value = item.name
    dialogTableVisible.value = true
    let res = await getComDeptUsersApi({ id })
    gridData.value = res.data
  }
  const comRegister = () => {
	//初始化
	nextTick(()=>{
		webrtcInstance.jssipAgent('111','192.168.77.8','7066','Admin1246246',null,null,null);
		// console.log(webrtcInstance.changeAgent)
		webrtcInstance.changeAgent.on('newRTCSession',(res)=>{
			timer.value = setInterval(()=>{
				 progressVal.value = webrtcInstance.callPoneState()
				 // console.log(progressVal.value,'progressVal.value')
				 if(progressVal.value.includes('来电')){
					 dialogTableVisible3.value = true;
					 thState.value = true
				 }else if( progressVal.value == '呼叫停止'){
					 thState.value = false
					 // dialogTableVisible3.value = false;
					 // clearInterval(timer.value)
				 }else if( progressVal.value == '已挂断'){
					 thState.value = false
					 closeTh()
				 }else{
					 thState.value = false
				 }
			},1000)
		})

	})
  }
  let thState = ref(false)
  onMounted(() => {
    getComDepts()
    getComRecord()
	comRegister()
	return false
	timer.value = setInterval(()=>{
		 progressVal.value = webrtcInstance.callPoneState()
		 console.log(progressVal.value,'progressVal.value')
		 if(progressVal.value.includes('来电')){
			 dialogTableVisible3.value = true;
			 thState.value = true
		 }else if( progressVal.value == '呼叫停止'){
			 thState.value = false
			 dialogTableVisible3.value = false;
			 // clearInterval(timer.value)
		 }else if( progressVal.value == '已挂断'){
			 thState.value = false
			 closeTh()
		 }else{
			 thState.value = false
		 }
	},1000)
  })
</script>

<style lang="scss" scoped>
	.th-box{
		margin:0 auto;
	}
	.callVideo{
		opacity: 0 !important;
	}
	.flex-hj{
		display: flex;
		align-items: center;
		position:relative;
		// width:1050px;
		// height:900px;
		text-align: center;
	}
	.tell-flex{
		margin:0 auto;
	}
	.hj-box{
		text-align: center;
		position:absolute;
		left:0;
		width:100%;
		color:#fff;
		font-size:vw(40);
		.hj-ico{
			width:vw(200);
			margin-bottom:vh(20);
		}

	}
	.closeCall{
		position:absolute;
		right:0;
		top:10px;
		z-index: 6000;
	}
	.videoPrefecture_video{
		position:relative;
		min-height:600px;
		position: absolute;
		background: url('/src/assets/images/map-bg-2.png') no-repeat top center;
		top:50%;

		left:50%;
		transform: translate(-50%,-50%);
		z-index: 4999;
		.oneVideo{
			width:100%;
			height:100%;
		}
		.twoVideo{
			position:absolute;
			bottom:20px;
			right:20px;
		}
		.gd-ico{
			position:absolute;
			right:50px;
			top:50px;
		}
	}
	:deep(.el-dialog__headerbtn .el-dialog__close){
		color:#fff;
		font-size:40px;
		position:relative;
		top:15px;
		right:15px;
	}
  :deep(.el-dialog) {
    background: url('/src/assets/images/map-bg-2.png') no-repeat top center;
    background-size: 100% 100%;
  }
  :deep(.el-dialog__title) {
    color: #fff;
    font-weight: bold;
  }
  .tel-ico {
    width: vw(30);
    cursor: pointer;
    margin-right: vw(20);
  }
  .voice-ico{
    width: vw(35);
    cursor: pointer;
    margin-right: vw(20);
  }
  .sp-ico {
    width: vw(40);
    cursor: pointer;
  }
  .item-name {
    width: 90%;
    text-align: center;
	line-height: 1.6;
	font-size:vw(18);
  }
  .sp-img {
    width: vw(100);
  }
  .correspondence {
    margin: vw(8);
    width: vw(300);
    // height: vh(1070);
	height: 100%;
    background-image: url('@/assets/images/bg-1.png');
    background-size: 100% 100%;
  }
  .bom-box2{
	  // margin-top:vh(10);
	  min-width:vw(900);
	  height:vh(800);
	  .header-title{
		  font-size:vw(24);
		  color:#fff;
		  text-align:center;
		  font-weight:bold;
		  margin-bottom:vh(20);
	  }
  }
  .bom-box {
	  .table2{
		  width:100%;
		  height:vh(740);
	  }
    .table {
      width: 100%;
      margin-top: vh(20);
      .header {
        height: vh(28);
        font-weight: 400;
        font-size: font-vw(20);
        color: #fff;
        display: flex;
        background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
        & > div {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .list {
        overflow-y: auto;
        height: vh(490);
        /* 滚动条整体样式 */
        &::-webkit-scrollbar {
          width: vw(4); /* 滚动条的宽度 */
        }
        /* 滚动条轨道 */
        &::-webkit-scrollbar-track {
          background: 'transparent'; /* 轨道的背景色 */
        }
        /* 滚动条滑块 */
        &::-webkit-scrollbar-thumb {
          background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
          border-radius: 5px; /* 滑块的圆角 */
        }
        .item {
          height: vh(50);
          font-weight: 400;
          font-size: font-vw(14);
          color: #f1f7ff;
          display: flex;
          &:nth-child(2n + 1) {
            background: linear-gradient(
              90deg,
              rgba(0, 150, 255, 0) 0%,
              rgba(0, 150, 255, 0.22) 100%
            );
          }
          & > div {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap; /* 保证文本在一行内显示 */
            overflow: hidden; /* 隐藏溢出的内容 */
            text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
          }
        }
      }
    }
    .title {
      span {
        margin-left: vw(30);
        font-weight: 800;
        font-size: font-vw(15);
        line-height: vh(26);
        text-align: center;
        font-style: normal;
        text-transform: none;
        background: linear-gradient(90deg, #ffffff 0%, #5cb5ff 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
      }
    }
  }
  .top-box {
    width: 100%;
    height: vh(500);
	height:50%;
    .icon-box {
      font-weight: 400;
      font-size: font-vw(14);
      color: #ffffff;
      line-height: vh(16);
      flex-wrap: wrap;
      .item {
        cursor: pointer;
        width: 50%;
        margin-top: vh(40);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        &:nth-child(3n) {
          margin-right: 0;
        }
        & > img {
          width: vw(54);
          height: auto;
        }
      }
    }
    .title {
      width: vw(260);
      height: vh(26);
      text-align: center;
      line-height: vh(26);
      margin-left: vw(32.5);
      font-size: font-vw(22);
      font-weight: 800;
      color: #fff;
      background-image: url('@/assets/images/title-1.png');
      background-size: 100% 100%;
    }
  }
</style>
