<template>
  <a-badge
    :count="videoCallCount"
    :offset="[0, 10]"
    :class="{'bell-animation': videoCallCount > 0}"
    class="notification-badge"
    show-zero
    color="#1abb9c"
  >
    <a-button
      shape="circle"
      type="text"
      class="notification-trigger"
      @click="showVideoCallList"
    >
      <template #icon>
        <bell-outlined :style="{ fontSize: '18px', color: '#595959' }" />
      </template>
    </a-button>
  </a-badge>

  <Modal v-model:show="videoCallListModal">
    <template #header>
      等待中的呼叫队列
    </template>
    <div v-if="videoCallCount > 0">
      <ul class="list-group">
        <li
          v-for="videoCallData in videoCallDatas"
          :key="videoCallData.uid"
          class="list-group-item"
          :class="{'active' : videoCallData === selectedVideoCallData}"
        >
          {{ videoCallData.name }}
          <span
            class="badge"
            @click="receiveVideoCall(videoCallData)"
          >接听</span>
        </li>
      </ul>
    </div>
  </Modal>

  <Modal
    ref="videoCallModal"
    @cancel="videoCallModalClose"
  >
    <template #header>
      视频呼叫
    </template>
    <div>
      <VideoCall
        v-if="selectedVideoCallData != null && selectedVideoCallData != ''"
        ref="videoCall"
        :caller="false"
        :connection-id="selectedVideoCallData.uid"
      />
      <div class="clearfix" />
    </div>
  </Modal>
</template>

<script>

import Common from '../common/Common.js';
import ChatVideo from '../resource/call/ChatVideo.js';

import VideoCall from '../widget/VideoCall.vue';
import { BellOutlined } from '@ant-design/icons-vue';
export default {

  components: {
    VideoCall,BellOutlined,
  },
  data: function () {
    return {
      'videoCallCount': 0,	// 呼叫数量
      'videoCallDatas': [],	// 视频呼叫内容
      'selectedVideoCallData': '',	// 选择的视频呼叫
      videoCallListModal: false,
      videoCallModal: false,
    };
  },


  mounted: function () {
    let _self = this;

    // 延时3秒以后再
    // setTimeout(()=> {
    //   // 1. 查询登录用户是否有权限接收呼叫
    //   ChatVideo.canReceiveCall().then(successData => {
    //     if (successData == true) {
    //       console.log('登录用户有权限接收呼叫。');
    //       // 2. 如果有权限接收呼叫，则定时接收呼叫
    //       _self.stasticTimer = setInterval(function () {
    //         _self.countVideoCall();
    //       }, 1000);
    //     } else {
    //       console.log('登录用户没有权限接收呼叫。');
    //     }
    //   }, errorData => {
    //     Common.processException(errorData);
    //   });
    // }, 3000);
    
  },

  beforeUnmount: function () {
    var _self = this;
    if (_self.stasticTimer) {
      clearInterval(_self.stasticTimer);
    }
  },


  methods: {
    /**
         * 查询视频呼叫的数据
         */
    countVideoCall: function () {
      var _self = this;

      ChatVideo.listConnection().then(successData => {
        if (successData == null || successData.length == 0) {
          _self.videoCallCount = 0;
          _self.videoCallDatas.splice(0, _self.videoCallDatas.length);
        } else {
          // 呼叫数量
          _self.videoCallCount = successData.length;

          // 视频呼叫内容
          _self.videoCallDatas.splice(0, _self.videoCallDatas.length);

          for (var i = 0; i < successData.length; i++) {
            _self.videoCallDatas[i] = successData[i];
          }
        }
      }, errorData => {
        // Common.processException(errorData);
      });
    },

    /**
         * 显示视频呼叫队列
         */
    showVideoCallList: function () {
      this.videoCallListModal = true;
    },

    /**
         * 接收视频呼叫
         */
    receiveVideoCall: function (videoCallData) {
      var _self = this;
      this.videoCallListModal = false;
      this.selectedVideoCallData = videoCallData;
      _self.videoCallModal = true;
      this.$nextTick(function () {
        this.$refs.videoCall.open();
      });
    },

    /**
         * 视频模态框关闭
         */
    videoCallModalClose: function () {
      if (this.$refs.videoCall) {
        this.$refs.videoCall.close();
      }
    },
  },

};
</script>

<style scoped>
.notification-badge {
  margin-right: 8px;
}

.bell-animation {
  animation: bell-shake 0.8s cubic-bezier(.36,.07,.19,.97) infinite;
  transform-origin: top center;
}

@keyframes bell-shake {
  10%, 90% { transform: rotate(-10deg); }
  20%, 80% { transform: rotate(12deg); }
  30%, 50%, 70% { transform: rotate(-15deg); }
  40%, 60% { transform: rotate(15deg); }
}

.notification-trigger {
  padding: 0 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all 0.3s;
}

.notification-trigger:hover {
  background-color: rgba(22,119,255,0.1);
}
</style>


