<template>
  <div class="callingNotification_content">
    <div class="left">
      <div class="icon">
        <img :src="currentIcon" width="32" height="32" />
      </div>
    </div>
    <div class="right">
      <div class="name">
        {{ getName }}
      </div>
      <div class="fixed">
        <div class="icon">
          <img
            v-if="call_mode === 0"
            src="@/assets/images/webPuc/svgs/phone_off_small.svg"
            width="12"
            height="12"
          />
          <img
            v-if="call_mode > 0"
            src="@/assets/images/webPuc/svgs/video_off_small.svg"
            width="12"
            height="9"
          />
        </div>
        <div class="text">
          {{ calling }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { computed, toRef } from 'vue';

  const props = defineProps({
    callInfo: {
      type: Object,
      required: true,
    },
    calling: {
      type: String,
      required: true,
    },
    getName: {
      type: String,
      required: true,
    },
  });
  const callInfo = toRef(props, 'callInfo');
  const calling = toRef(props, 'calling');
  const getName = toRef(props, 'getName');

  const {
    attribute: { call_mode },
  } = callInfo.value;

  const currentIcon = computed(() => {
    return require('@/assets/images/webPuc/svgs/avatar_call_online_small.svg');
  });
</script>

<style lang="scss" scoped>
  .callingNotification_content {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .left {
      margin-right: 8px;
    }
    .right {
      .name {
        margin-bottom: 5px;
        font-size: 14px;
      }
      .fixed {
        display: flex;
        align-items: center;
        .icon {
          margin-right: 5px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .text {
          font-size: 12px;
          color: var(--color-text-2);
        }
      }
    }
  }
</style>
