<template>
  <div class="call-card">
    <div class="title-wrap">
      <User :data="user_info" />
      <p class="title">{{ title }} {{ call_no_answer ? "，未接通" : "" }}</p>
    </div>
    <div class="time-wrap" v-if="time">
      <p class="time">通话时长：</p>
      <p class="time">{{ time }}</p>
    </div>
    <template v-if="!call_no_answer && attachment_files.url">
      <div
        class="mention"
        v-if="attachment_files.keywords && attachment_files.keywords.length !== 0"
      >
        <p>并提到了</p>
        <p class="key-word" v-for="(item, index) in attachment_files.keywords" :key="index">
          【{{ item }}】
        </p>
      </div>
      <div class="content-wrap" @click.stop="onClick">
        <div class="header">
          <p class="title">通话内容</p>
        </div>
        <div
          class="content"
          v-if="attachment_files.call_content && attachment_files.call_content.length !== 0"
        >
          <div
            v-for="(item, index) in attachment_files.call_content.slice(0, 4)"
            :key="index"
            class="talk-wrap"
          >
            <span :class="`point point-${item.speaker_id}`">
              {{ item.speaker_id + 1 }}
            </span>
            <span :class="`name name-${item.speaker_id}`"> 说话人{{ item.speaker_id + 1 }}: </span>
            <span class="talk">{{ item.final_sentence }}</span>
            <br v-if="index !== attachment_files.call_content.slice(0, 4).length - 1"/>
          </div>
        </div>
        <div v-else>
          <p class="talk">未识别到对话</p>
        </div>
        <div class="audio" v-if="attachment_files.url" @click.stop>
          <WlAudio :src="attachment_files.url" @onLoadedmetadata="onLoadedmetadata" />
        </div>
      </div>
      <div class="footer" v-if="data.reply_count && data.reply_count !== 0">
        <CardFooter>
          <template slot="footerRight">
            <CommentNumber :data="data.reply_count" />
          </template>
        </CardFooter>
      </div>
    </template>
  </div>
</template>

<script>
import User from "@RecordCard/components/Common/User/index.vue";
import CardFooter from "@RecordCard/components/Common/CardFooter/index.vue";
import CommentNumber from "@RecordCard/components/Common/CommentNumber/index.vue";
import WlAudio from "weiling-mobile-ui/lib/WlAudio/index";
import useCallDetail from "@RecordCard/hooks/useCallDetail";
import useGetEmployeeUrl from "@RecordCard/hooks/useGetEmployeeUrl";
export default {
  name: "Call",
  components: { User, CommentNumber, CardFooter, WlAudio },
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      audioRef: null,
    };
  },
  computed: {
    call_data() {
      const {
        materials: [call_data],
      } = this.data;
      return call_data;
    },
    attachment_files() {
      const { attachment_files = {} } = this.call_data;
      const [data] = attachment_files;
      return data;
    },
    call_no_answer() {
      const { call_status = 1 } = this.call_data;
      return parseInt(call_status) === 0;
    },
    title() {
      const {
        materials: [{ view_count = 0 }],
      } = this.data;
      const desc = "拨打电话";
      if (parseInt(view_count) === 1) {
        return `首次` + desc;
      } else return `第${view_count}次` + desc;
    },
    user_info() {
      const { user_info = {} } = this.data;
      const { id } = user_info;
      return {
        ...user_info,
        href: id ? useGetEmployeeUrl(user_info?.id) : "javascript:void(0)",
      };
    },
    time() {
      const { duration = "" } = this.attachment_files;
      if (!duration) return "";
      return this.formatTime(parseInt(duration) / 1000);
    },
  },
  methods: {
    formatTime(time) {
      const hour = parseInt(time / 3600);
      const minute = parseInt(time / 60);
      const second = time - hour * 3600 - minute * 60;
      const str = `${hour === 0 ? "" : hour > 9 ? hour : "0" + hour + "时"}${
        minute > 9 ? minute : "0" + minute
      }分${second > 9 ? second : "0" + second}秒`;
      return str;
    },
    onLoadedmetadata(audioRef) {
      this.audioRef = audioRef;
    },
    onClick() {
      const { call_content = [] } = this.attachment_files;
      if (call_content.length === 0) return;
      const { source_id = "" } = this.data;
      if (!this.audioRef) {
        window.location.href = useCallDetail(source_id, 0);
      } else {
        window.location.href = useCallDetail(source_id, this.audioRef.currentTime);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.call-card {
  padding: j(16px) 0;
  width: 100%;
  box-sizing: border-box;
  .title-wrap {
    @extend %flex-middle;
    .title {
      font-weight: 500;
      font-size: j(14px);
      color: #000000;
      margin-left: j(6px);
      flex-shrink: 0;
    }
  }
  .time-wrap {
    margin-top: j(9px);
    @extend %flex-middle;
    .pic-wrap {
      width: j(14px);
      height: j(14px);
      margin-right: j(4px);
      position: relative;
      top: 0.5px;
    }
    .time {
      font-weight: 400;
      font-size: j(12px);
      color: var(--wl-text-color-secondary-2, #919699);
    }
  }

  .mention {
    margin-top: j(16px);
    font-weight: 400;
    font-size: j(14px);
    color: var(--wl-text-color-primary-2, #4c4c4c);
    @include textEllipsis(2);
    p {
      display: inline-block;
    }
    .key-word {
      font-weight: 500;
      font-size: j(14px);
      color: var(--wl-success-color-focus, #44959a);
      margin-left: j(5px);
    }
  }
  .content-wrap {
    margin-top: j(12px);
    background-color: var(--wl-primary-color-lightest, #f7fbfe);
    border-radius: j(10px);
    padding: j(15px) j(18px);
    width: 100%;
    cursor: pointer;
    box-sizing: border-box;
    .header {
      margin-bottom: j(16px);
      justify-content: space-between;
      @extend %flex-middle;
      .title {
        font-weight: 500;
        font-size: j(14px);
        color: #000000;
      }
    }
    .ellipsis {
      &::after {
        content: "...";
        position: absolute;
        right: 0;
        bottom: 0;
        color: black;
        background-color: var(--wl-primary-color-lightest, #f7fbfe);
      }
    }
    .content {
      @include textEllipsis(3);
      position: relative;

      .talk-wrap {
        display: inline;
        span {
          display: inline-block;
        }
        .point {
          width: j(16px);
          height: j(16px);
          border-radius: 50%;
          align-items: center;
          justify-content: center;
          color: white;
          font-weight: 400;
          font-size: 12px;
          display: inline-flex;
          &-0 {
            background-color: var(--wl-primary-color,  #1c9fff);
          }
          &-1 {
            background-color: var(--wl-warning-color, #ff9444);
          }
        }
        .name {
          margin-left: j(3px);
          margin-right: j(3px);
          font-weight: 400;
          font-size: j(14px);
          color: var(--wl-primary-color,  #1c9fff);
          display: inline-block;
          &-0 {
            color: var(--wl-primary-color,  #1c9fff);
          }
          &-1 {
            color: var(--wl-warning-color, #ff9444);
          }
        }
        .talk {
          display: inline;
        }
      }
    }
    .audio {
      margin-top: j(16px);
      cursor: auto;
    }
    .talk {
      font-weight: 400;
      font-size: j(14px);
      color: var(--wl-text-color-primary-2, #494b4d);
      display: inline-block;
      flex: 1;
    }
  }
}
</style>
