<template>
  <div class="call-no-answered">
    <User :data="data.user_info" />
    <p class="title">{{ title }}</p>
  </div>
</template>

<script>
import User from "@RecordCard/components/Common/User/index.vue";
export default {
  name: "CallNoAnswered",
  components: { User },
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    title() {
      const {
        materials: [{ view_count = 0 }],
      } = this.data;
      const desc = "拨打电话，对方未接听";
      if (view_count === 1) {
        return `首次` + desc;
      } else return `第${view_count}次` + desc;
    },
  },
};
</script>

<style lang="scss" scoped>
.call-no-answered {
  .title {
    font-weight: 500;
    font-size: j(14px);
    color: #000000;
  }
}
</style>
