<template>
  <div class="ptt-client">
    <!-- 对讲 -->
    <div class="ptt-talk">
      <div class="top">
        <div class="info">当前组：{{ groupInfo.name }}</div>
        <div class="info">讲话人：{{ userInfo.displayName }}</div>
        <div class="info">
          状态：<span :class="userTalking ? 'talking' : ''">{{ userTalking ? "正在讲话" : "空闲" }}</span>
        </div>
        <i class="icon-hangup" @click="close"></i>
      </div>
      <div
        class="bottom"
        :class="userTalking ? 'talking' : ''"
        @mousedown="requestPttTalk(true)"
        @mouseup="requestPttTalk(false)"
      ></div>
    </div>
    <!-- 临时组 -->
    <div v-if="memberList.length > 0" class="group-info">
      <div class="title">{{ groupInfo.name }}</div>
      <div class="group-list">
        <div class="group-count">
          <span>选择了{{ memberList.length }}个用户</span>
        </div>
        <div class="group-member" v-for="item in memberList" :key="item.uid">
          <span>{{ item.displayName }}</span>
          <span class="talking" v-if="item.talking">正在说话...</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import store from "@/store.js";
import wfc from "@/wfc/client/wfc";
import EventType from "@/wfc/client/wfcEvent";
import ConversationInfo from "@/wfc/model/conversationInfo";
import { requestPttTalk } from "@/utils/wfc";
import pttClient from "@/wfc/ptt/client/pttClient";
import PttEventType from "@/wfc/ptt/client/pttEventType";

export default {
  name: "pttClient",
  props: {
    conversationInfo: {
      type: ConversationInfo,
      required: true,
    },
  },
  data() {
    return {
      groupMemberUserInfos: store.getConversationMemberUsrInfos(this.conversationInfo.conversation),
      userTalking: false,
    };
  },
  computed: {
    memberList() {
      return [...this.groupMemberUserInfos].filter((member) => member.uid !== wfc.getUserId());
    },
    groupInfo() {
      return wfc.getGroupInfo(this.conversationInfo.conversation.target, false);
    },
    userInfo() {
      return wfc.getUserInfo(wfc.getUserId(), false, this.conversationInfo.conversation.target);
    },
  },
  methods: {
    onUserInfosUpdate() {
      this.groupMemberUserInfos = store.getConversationMemberUsrInfos(this.conversationInfo.conversation);
      console.log("ptt group onUserInfosUpdate", this.groupMemberUserInfos);
    },
    requestPttTalk(request) {
      this.userTalking = request;
      requestPttTalk(this.conversationInfo.conversation, request);
    },
    close() {
      this.$emit("close");
    },
  },
  mounted() {
    wfc.eventEmitter.on(EventType.UserInfosUpdate, this.onUserInfosUpdate);
    wfc.eventEmitter.on(EventType.GroupMembersUpdate, this.onUserInfosUpdate);
    pttClient.eventEmitter.on(PttEventType.userStartTalking, (conversation, userId) => {
      console.log("ptt client userStartTalking", conversation, userId);
      this.groupMemberUserInfos.forEach((member) => {
        member.talking = member.uid === userId;
        this.userTalking = member.uid === wfc.getUserId();
      });
      this.$forceUpdate();
    });
    pttClient.eventEmitter.on(PttEventType.userEndTalking, (conversation, userId) => {
      this.groupMemberUserInfos.forEach((member) => {
        if (member.uid === userId) member.talking = false;
        if (member.uid === wfc.getUserId()) this.userTalking = false;
      });
      this.$forceUpdate();
    });
    wfc.getGroupMembers(this.conversationInfo.conversation.target, true);

    let userInfo = wfc.getUserInfo(wfc.getUserId(), false, this.conversationInfo.conversation.target);
    console.log(userInfo);
    let groupInfo = wfc.getGroupInfo(this.conversationInfo.conversation.target, false);
    console.log(groupInfo);
    console.log("ptt group mounted", this.groupMemberUserInfos);
    console.log("ptt conversationInfo mounted", this.conversationInfo);
  },

  beforeDestroy() {
    wfc.eventEmitter.removeListener(EventType.UserInfosUpdate, this.onUserInfosUpdate);
    wfc.eventEmitter.removeListener(EventType.GroupMembersUpdate, this.onUserInfosUpdate);
  },
};
</script>

<style scoped lang="scss">
.ptt-client {
  display: flex;
  justify-content: space-between;
  height: 253px;
  .ptt-talk {
    height: 100%;
    width: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .top {
      width: 100%;
      height: 82px;
      background: #fafafa;
      border-radius: 3px 3px 3px 3px;
      opacity: 1;
      border: 1px solid #d9d9d9;
      position: relative;
      padding: 13px 10px 0 10px;
      .info {
        font-size: 10px;
        font-weight: 400;
        color: #3d3d3d;
        line-height: 14px;
        margin-bottom: 10px;
      }
      .talking {
        color: #0e70ff;
      }
      .icon-hangup {
        display: block;
        width: 32px;
        height: 32px;
        background: url(~@/assets/images/wfc/挂断.png) no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
        position: absolute;
        top: 25px;
        right: 10px;
      }
    }
    .bottom {
      width: 100%;
      height: 164px;
      background: url(~@/assets/images/wfc/语音关闭-2.png) no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
      &.talking {
        background: url(~@/assets/images/wfc/语音开启.png) no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  .group-info {
    height: 100%;
    width: 248px;
    background: #ffffff;
    border-radius: 3px 3px 3px 3px;
    opacity: 1;
    border: 1px solid #d9d9d9;
    .title {
      width: 100%;
      height: 41px;
      background: #ffffff;
      border-bottom: 1px solid #d9d9d9;
      padding-left: 13px;
      display: flex;
      align-items: center;
    }
    .group-list {
      width: 100%;
      height: calc(100% - 41px);
      overflow-y: auto;
      overflow-x: hidden;
      padding: 3px 6px;
      .group-count {
        width: 100%;
        height: 26px;
        background: #ddebff;
        font-size: 10px;
        font-weight: 400;
        color: #0e70ff;
        display: flex;
        align-items: center;
        padding: 0 13px;
      }
      .group-member {
        width: 100%;
        height: 26px;
        background: #ffffff;
        border-bottom: 1px solid #dcdfe6;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 13px;
        font-size: 10px;
        font-weight: 400;
        color: #303133;
        line-height: 14px;
        .talking {
          height: 14px;
          font-size: 10px;
          font-weight: 400;
          color: #ff8503;
          line-height: 14px;
        }
      }
    }
  }
}
</style>
