<template>
  <div class="conference-simple-info-container">
    <p class="title">xxx的会议</p>
    <div class="info-item">
      <p class="name">会议号</p>
      <p class="value">{{ session.callId }}</p>
      <i class="icon-ion-ios-copy" @click="copyConferenceId"></i>
    </div>
    <div class="info-item">
      <p class="name">主持人</p>
      <p class="value">{{ hostName() }}</p>
    </div>
    <div class="info-item">
      <p class="name">会议链接</p>
      <p class="value single-line">{{ conferenceLink() }}</p>
      <i class="icon-ion-ios-copy" @click="copyConferenceLink"></i>
    </div>
  </div>
</template>

<script>
import WfcScheme from "../../../wfcScheme";
import wfc from "../../../wfc/client/wfc";
import { copyText } from "../../util/clipboard";
export default {
  name: "ConferenceSimpleInfoView",
  props: {
    session: {
      type: Object,
      required: true,
    },
  },
  methods: {
    conferenceLink() {
      return WfcScheme.buildConferenceLink(this.session.callId, this.session.pin);
    },
    hostName() {
      let userInfo = wfc.getUserInfo(this.session.host);
      return userInfo.displayName;
    },
    copyConferenceId() {
      copyText(this.session.callId);
    },
    copyConferenceLink() {
      copyText(this.conferenceLink());
    },
  },
};
</script>

<style scoped>
.conference-simple-info-container {
  background: white;
  padding: 5px 10px;
  width: 300px;
  border-radius: 2px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.title {
  padding-bottom: 10px;
}

.info-item {
  display: flex;
  font-size: 14px;
  align-items: center;
}

.info-item .name {
  width: 60px;
  min-width: 60px;
  font-size: 13px;
  color: #2d3033;
}

.info-item .value {
  flex: 1 1 auto;
  color: gray;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
