<script setup>
  import * as CallLib from '@/uni_modules/RongCloud-CallWrapper/lib/index'
  import { ref, watch } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { TUIUserService } from '@tencentcloud/chat-uikit-engine-lite'
  import { useUI } from '../../utils/use-ui'
  import { navigateBack } from '../../utils/router'

  CallLib.init({})
  const { showLoading, hideLoading } = useUI()
  const callBackground = ref('/static/images/public/random2.png')
  /** 呼叫用户信息 */
  const callerInfo = ref({})
  /** 通话状态 */
  const isRinging = ref(true)
  /** 控制按钮状态 */
  const activeBtn = ref(null)
  /**
   * 拨打状态
   * call: 发起呼叫
   * answer: 接听
   * dialogue: 对话中
   */
  const callState = ref('')

  CallLib.onCallReceived(res => {
    console.log(
      'Engine:OnCallReceived=>' + '监听通话呼入, 目标id=>',
      res.data.targetId
    )
  })

  CallLib.onCallOutgoing(res => {
    console.log(
      '主叫端拨出电话后，通过回调 onCallOutgoing，通知当前 call 的详细信息',
      res
    )
  })

  CallLib.onCallConnected(res => {
    console.log(res)
    console.log(
      'Engine:OnCallConnected=>' +
        '已建立通话通话接通时，通过回调 onCallConnected 通知当前 call 的详细信息',
      res
    )
  })

  CallLib.onRemoteUserJoined(res => {
    console.log(
      'Engine:OnRemoteUserJoined=>' +
        '主叫端拨出电话，被叫端收到请求后，加入通话，被叫端Id为=>',
      res.data.userId
    )
  })

  /** 挂断电话 */
  const isDisconnected = ref(true)
  CallLib.onCallDisconnected(res => {
    console.log(
      'Engine:OnCallDisconnected=>' + '挂断成功, 挂断原因=>',
      res.data.reason
    )
    isDisconnected.value = false
  })

  watch(
    () => isDisconnected.value,
    v => {
			navigateBack()
    }
  )

  CallLib.onRemoteUserRinging(res => {
    console.log(
      '主叫端拨出电话，被叫端收到请求，发出振铃响应时触发，对端Id为=>',
      res.data.userId
    )
  })

  CallLib.onError(res => {
    console.log('通话过程中，发生异常，异常原因=>', res.data.reason)
  })

  /** 按钮状态 */
  const cutFn = show => {
    if (show) {
      // 接听电话 dialogue
      CallLib.enableMicrophone(true)
      CallLib.accept()
      callState.value = 'dialogue'
    } else {
      //取消接听，返回上一页
      CallLib.hangup()
      navigateBack()
    }
  }

  onLoad(async e => {
    callState.value = e.type
    console.log(e.type)
    showLoading()
    const res = await TUIUserService.getUserProfile({
      userIDList: [e.userID]
    })
    hideLoading()
    callerInfo.value = res.data[0]
    if (e.type === 'call') {
      CallLib.enableMicrophone(true)
      CallLib.startSingleCall(callerInfo.value.userID, 0, 'answer')
    }
    console.log('===好友信息', res)
  })
</script>

<template>
  <!-- 来电接听界面 -->
  <view class="incoming-call">
    <!-- 背景模糊层 -->
    <view class="blur-background" v-if="callBackground">
      <image
        :src="callBackground"
        mode="aspectFill"
        class="bg-image"
      ></image>
      <view class="bg-overlay"></view>
    </view>

    <!-- 主内容区 -->
    <view class="caller-info">
      <view class="caller-avatar-container">
        <view class="caller-avatar" :class="{ 'avatar-ring': isRinging }">
          <image
            v-if="callerInfo?.avatar"
            :src="callerInfo?.avatar"
            class="avatar-image"
          ></image>
          <uni-icons
            v-else
            type="contact-filled"
            size="50"
            color="#fff"
          ></uni-icons>
        </view>
      </view>
      <text class="caller-name">
        {{ callerInfo?.nick || callerInfo?.userID }}
      </text>
      <text class="call-type">
        {{ callState === 'call' ? '语音呼叫中...' : '对话中...' }}
      </text>
      <!-- <text class="call-status">未接听</text> -->
    </view>

    <!-- 控制按钮 -->
    <view class="incoming-controls">
      <view class="incoming-control" @click="cutFn(false)">
        <view
          class="call-btn decline-btn"
          :class="{ 'btn-active': activeBtn === 'decline' }"
        >
          <uni-icons type="closeempty" size="32" color="#fff"></uni-icons>
        </view>
        <text class="btn-text">拒绝</text>
      </view>

      <view
        v-if="callState === 'answer'"
        class="incoming-control"
        @click="cutFn(true)"
      >
        <view
          class="call-btn accept-btn"
          :class="{ 'btn-active': activeBtn === 'accept' }"
        >
          <uni-icons
            type="checkmarkempty"
            size="28"
            color="#fff"
          ></uni-icons>
        </view>
        <text class="btn-text">接听</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .incoming-call {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #000;

    .blur-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;

      .bg-image {
        width: 100%;
        height: 100%;
        filter: blur(20px);
        opacity: 0.6;
      }

      .bg-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
      }
    }

    .caller-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding-top: 100rpx;
      z-index: 1;

      .caller-avatar-container {
        position: relative;
        margin-bottom: 40rpx;

        .caller-avatar {
          width: 180rpx;
          height: 180rpx;
          border-radius: 50%;
          background: linear-gradient(135deg, #1aad19, #129611);
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;

          .avatar-image {
            width: 100%;
            height: 100%;
          }

          &.avatar-ring {
            animation: ringPulse 1.5s infinite;
          }
        }
      }

      .caller-name {
        font-size: 48rpx;
        color: #fff;
        font-weight: 500;
        margin-bottom: 20rpx;
      }

      .call-type {
        font-size: 32rpx;
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: 10rpx;
      }

      .call-status {
        font-size: 28rpx;
        color: rgba(255, 255, 255, 0.7);
      }

      .call-timer {
        margin-top: 30rpx;
        padding: 10rpx 30rpx;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 30rpx;

        .timer-text {
          font-size: 32rpx;
          color: #fff;
          font-weight: 500;
        }
      }
    }

    .incoming-controls {
      display: flex;
      justify-content: space-around;
      padding: 80rpx 100rpx 120rpx;
      z-index: 1;

      .incoming-control {
        display: flex;
        flex-direction: column;
        align-items: center;

        .call-btn {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 20rpx;
          transition: all 0.2s;

          &.decline-btn {
            background-color: #f43f3b;

            &.btn-active {
              transform: scale(0.9);
              background-color: #d93632;
            }
          }

          &.accept-btn {
            background-color: #07c160;

            &.btn-active {
              transform: scale(0.9);
              background-color: #06ad56;
            }
          }
        }

        .btn-text {
          font-size: 28rpx;
          color: #fff;
        }
      }
    }

    .action-bar {
      position: absolute;
      bottom: 60rpx;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: space-around;
      padding: 0 60rpx;
      z-index: 1;

      .action-item {
        display: flex;
        flex-direction: column;
        align-items: center;

        .action-icon {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          background-color: rgba(255, 255, 255, 0.2);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 20rpx;
          transition: all 0.3s;

          &.active {
            background-color: rgba(255, 255, 255, 0.4);
          }
        }

        .action-text {
          font-size: 24rpx;
          color: #fff;
        }
      }
    }
  }

  @keyframes ringPulse {
    0% {
      box-shadow: 0 0 0 0 rgba(26, 173, 25, 0.4);
    }

    70% {
      box-shadow: 0 0 0 30rpx rgba(26, 173, 25, 0);
    }

    100% {
      box-shadow: 0 0 0 0 rgba(26, 173, 25, 0);
    }
  }

  /* 响应式调整 */
  @media (max-height: 600px) {
    .incoming-controls {
      padding: 40rpx 100rpx 80rpx !important;
    }

    .action-bar {
      bottom: 40rpx !important;
    }
  }
</style>
