<template>
  <div class="right-panel">
    <div class="right-panel-title">
      <span>参会人</span>
      <!--      <i class="icon icon-close" @click="setRightPanelVisible"></i>-->
    </div>
    <el-tabs v-model="rightPanelActiveName">
      <!-- tab:调度中 -->
      <el-tab-pane :label="tabsLabelConnecting" name="1">
        <div class="room-member-list">
          <div class="room-member-list-item">
            <div class="info">
              <el-avatar :size="40" :src="session.selfUserInfo.portrait">
                <div class="avatar">{{ session.selfUserInfo.name }}</div>
              </el-avatar>
              <div class="name">
                <span class="value">{{ session.selfUserInfo.displayName }}</span>
                <span class="tag">{{ participantDesc(session.selfUserInfo) }}</span>
              </div>
            </div>
            <div class="stream-controller">
              <!-- 禁用音频轨道 -->
              <i title="取消静音" v-if="session.audioMuted" class="btn btn-mute" @click="handleMuteAudio"></i>
              <!-- 启用音频轨道 -->
              <i title="静音" v-if="!session.audioMuted" class="btn btn-unmute" @click="handleMuteAudio"></i>
              <!-- 禁用视频轨道 -->
              <i
                title="开启视频"
                v-if="!session.audioOnly && session.videoMuted"
                class="btn btn-videoOn"
                @click="handleMuteVideo"
              ></i>
              <!-- 启用视频轨道 -->
              <i
                title="关闭视频"
                v-if="!session.audioOnly && !session.videoMuted"
                class="btn btn-videoOff"
                @click="handleMuteVideo"
              ></i>
            </div>
          </div>
          <div
            class="room-member-list-item"
            v-for="(item, index) in memberList.filter((x) => x.state !== 'DISCONNECTED')"
            :key="index"
          >
            <div class="info">
              <el-avatar :size="40" :src="item.portrait">
                <div class="avatar">{{ item.nameSlice }}</div>
              </el-avatar>
              <div class="name">
                <span class="value">{{ participantName(item) }}</span>
                <span v-if="participantDesc(item)" class="tag">{{ participantDesc(item) }}</span>
              </div>
            </div>
            <div class="stream-controller">
              <span v-if="item.isSpeaking" style="color: #ffffff; font-size: 10px">正在讲话...</span>
              <!-- 举手 -->
              <i class="btn btn-handup" v-if="item.action === 'handUp' || item.action === 'cheese'"></i>
              <!-- 禁用音频轨道 -->
              <i title="静音" v-if="item._isAudience || item._isAudioMuted" class="btn btn-mute" @click="memberMute(item)"></i>
              <!-- 启用音频轨道 -->
              <i title="取消静音" v-else class="btn btn-mute" @click="memberUnmute(item)"></i>
              <!-- 禁用视频轨道 -->
              <i
                title="关闭视频"
                v-if="item._isAudience || item._isVideoMuted"
                class="btn btn-videoOn"
                @click="memberVideoOff(item)"
              ></i>
              <!-- 启用视频轨道 -->
              <i title="开启视频" v-else class="btn btn-videoOff" @click="memberVideoOn(item)"></i>
              <!-- 移除成员 -->
              <i title="移除" class="btn btn-kick-out" @click="kickOut(item)"></i>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <!-- tab:已结束 -->
      <el-tab-pane :label="tabsLabelDisconnecting" name="2">
        <div class="room-member-list">
          <div
            class="room-member-list-item"
            v-for="(item, index) in memberList.filter((x) => x.state === 'DISCONNECTED')"
            :key="index"
          >
            <div class="info">
              <el-avatar :size="40" :src="item.portrait">
                <div class="avatar">{{ item.nameSlice }}</div>
              </el-avatar>
              <div class="name">
                <span class="value">{{ participantName(item) }}</span>
                <span v-if="participantDesc(item)" class="tag">{{ participantDesc(item) }}</span>
              </div>
            </div>
            <div class="stream-controller">
              <span v-if="item.timeout" class="state-disconnected" style="color: #e2594e; font-size: 14px">未连上</span>
              <span v-if="item.beKickOut" class="state-disconnected" style="color: #e2594e; font-size: 14px">移除</span>
              <span v-if="!item.beKickOut && item.hangup" class="state-disconnected" style="color: #e2594e; font-size: 14px"
                >已挂断</span
              >
              <!-- 重拨 -->
              <i class="btn btn-recall" @click="recall(item)"></i>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="right-panel-bottom">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="right-panel-bottom-btn" @click="muteAll">全员静音</div>
        </el-col>
        <el-col :span="12">
          <div class="right-panel-bottom-btn" @click="unMuteAll">解除全员静音</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-button
            class="right-panel-bottom-btn-full"
            type="primary"
            @click="pickupVisible = true"
            :disabled="memberList.length >= 5"
            >添加成员</el-button
          >
        </el-col>
      </el-row>
    </div>
    <el-dialog
      :visible.sync="pickupVisible"
      title="添加成员"
      width="586px"
      custom-class="dialog-pick-up"
      :close-on-press-escape="false"
      :modal="false"
      append-to-body
      @open="onOpen"
    >
      <div class="transfer">
        <!-- 候选 -->
        <div class="transfer-left">
          <el-input class="transfer-left-query" placeholder="搜索" v-model="pickupName" @input="queryPickup"></el-input>
          <div class="transfer-left-list">
            <div class="transfer-left-list-item" v-for="(item, index) in pickupMemberList" :key="index">
              <el-checkbox v-model="item.checked">
                <div class="info">
                  <el-avatar :size="30">
                    <div class="avatar">{{ item.nameSlice }}</div>
                  </el-avatar>
                  <span class="name">{{ item.name }}</span>
                </div>
              </el-checkbox>
            </div>
          </div>
        </div>
        <div class="transfer-right">
          <div class="transfer-right-header">
            <span class="count">已选：{{ allMembers.filter((x) => !x.active && x.checked).length }}人</span>
            <span class="clear" @click="clearPickup">清空</span>
          </div>
          <div class="transfer-right-list">
            <div
              class="transfer-right-list-item"
              v-for="(item, index) in allMembers.filter((x) => !x.active && x.checked)"
              :key="index"
            >
              <div class="info">
                <el-avatar :size="30">
                  <div class="avatar">{{ item.nameSlice }}</div>
                </el-avatar>
                <span class="name">{{ item.name }}</span>
              </div>
              <i class="icon-remove" @click="item.checked = false"></i>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="pickupVisible = false">取 消</el-button>
        <el-button type="primary" @click="addMembers">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import store from "@/store.js";
import conferenceManager from "@/ui/voip/conference/conferenceManager";
import ConferenceInviteMessageContent from "@/wfc/av/messages/conferenceInviteMessageContent";
import Message from "@/wfc/messages/message";
import ForwardType from "@/ui/main/conversation/message/forward/ForwardType";

export default {
  name: "ConferenceMemberListView",
  props: {
    participants: {
      type: Array,
      required: true,
    },
    session: {
      type: Object,
      required: true,
    },
    memberList: {
      type: Array,
      default() {
        return [];
      },
    },
    allMembers: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      conferenceManager: conferenceManager,
      rightPanelActiveName: "1",
      pickupVisible: false,
      pickupMemberList: [],
      pickupName: "",
      message: null,
    };
  },
  computed: {
    handUpParticipantList() {
      let applyList = this.conferenceManager.handUpMembers;
      return store.getUserInfos(applyList);
    },
    tabsLabelConnecting() {
      return `调度中（${this.memberList.filter((x) => x.state !== "DISCONNECTED").length}）`;
    },
    tabsLabelDisconnecting() {
      return `断联（${this.memberList.filter((x) => x.state === "DISCONNECTED").length}）`;
    },
  },
  methods: {
    recall() {},
    muteAll() {},
    unMuteAll() {},
    onOpen() {
      let callSession = this.session;
      let inviteMessageContent = new ConferenceInviteMessageContent(
        callSession.callId,
        conferenceManager.conferenceInfo.owner,
        callSession.title,
        callSession.desc,
        callSession.startTime,
        callSession.audioOnly,
        callSession.defaultAudience,
        callSession.advance,
        callSession.pin
      );
      console.log("invite", inviteMessageContent);
      this.message = new Message(null, inviteMessageContent);
      this.pickupMemberList = this.allMembers.filter((x) => !x.active);
    },
    queryPickup(val) {
      if (val) {
        this.pickupMemberList = this.allMembers.filter((x) => {
          return x.name.indexOf(val) >= 0 && !x.active;
        });
      } else {
        this.pickupMemberList = this.allMembers.filter((x) => !x.active);
      }
    },
    clearPickup() {
      this.allMembers.forEach((member) => {
        if (!member.active) {
          member.checked = false;
        }
      });
    },
    addMembers() {
      const members = this.allMembers.filter((x) => !x.active && x.checked);
      console.log("addMembers", members);
      if (!members || members.length === 0) {
        return;
      }
      const users = members.map((x) => {
        return {
          uid: x.tencentUserId,
          displayName: x.name,
        };
      });
      if (users.length + this.memberList.length <= 5) {
        users.forEach((user) => {
          store.forwardByCreateConversation(ForwardType.NORMAL, [user], [this.message], "");
          const member = this.allMembers.find((x) => x.tencentUserId === user.uid);
          if (member) this.memberList.push({ ...member, state: "CONNECTING" });
        });
        console.log("addMembers", this.memberList);
        this.$emit("update:memberList", [...this.memberList]);
        this.pickupVisible = false;
      } else {
        this.$store.commit("showMessage", { message: "最多选择5名被调度人" });
      }
    },
    participantName(user) {
      let name = "";
      if (user.groupAlias) {
        name = user.groupAlias;
      } else if (user.friendAlias) {
        name = user.friendAlias;
      } else if (user.displayName) {
        name = user.displayName;
      } else {
        name = user.name;
      }
      return name;
    },
    participantDesc(user) {
      let desc = "";
      if (user.uid === conferenceManager.selfUserId || user.tencentUserId === conferenceManager.selfUserId) {
        desc = "我";
        if (
          user.uid === conferenceManager.conferenceInfo.owner ||
          user.tencentUserId === conferenceManager.conferenceInfo.owner
        ) {
          desc += "、主持人";
        }
      } else if (
        user.uid === conferenceManager.conferenceInfo.owner ||
        user.tencentUserId === conferenceManager.conferenceInfo.owner
      ) {
        desc = "主持人";
      } else if (user._isScreenSharing) {
        desc = "屏幕共享";
      }
      return desc;
    },
    memberMute() {},
    memberUnmute() {},
    memberVideoOff() {},
    memberVideoOn() {},
    kickOut(user) {
      console.log("kick out", user);
      this.$alert(`确认将${this.participantName(user)}移除会议?`, "", {}).then(() => {
        this.session.kickoffParticipant(user.tenantImUserId);
      });
    },
    handleMuteAudio() {
      let enable = !!this.session.audioMuted;
      this.session.selfUserInfo._isAudioMuted = !enable;
      this.session.setAudioEnabled(enable);
    },
    handleMuteVideo() {
      let enable = !!this.session.videoMuted;
      this.session.selfUserInfo._isVideoMuted = !enable;
      this.session.setVideoEnabled(enable);
    },
  },
};
</script>

<style scoped lang="scss">
.right-panel {
  //width: 340px;
  //height: calc(100% - 41px);
  height: 100%;
  background: #1e1e1e;
  //position: absolute;
  //right: 0;
  //top: 41px;
  z-index: 2;
  ::v-deep .el-tabs__header {
    margin-bottom: 0;
  }
  &-title {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    span {
      font-size: 20px;
      font-family: PingFang SC-Regular, PingFang SC, serif;
      font-weight: 400;
      color: #ffffff;
      line-height: 24px;
    }
    .icon {
      display: block;
      width: 16px;
      height: 16px;
      cursor: pointer;
      &-close {
        background: url("~@/assets/images/conversation/关闭 1.png") no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  &-bottom {
    width: 100%;
    height: 148px;
    background: #1e1e1e;
    border-top: 1px solid #2f2f2f;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    &-btn {
      width: 100%;
      height: 38px;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #666666;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC, serif;
      font-weight: 400;
      color: #ffffff;
      cursor: pointer;
      &:hover,
      &-active {
        background: rgba(255, 255, 255, 0.08);
      }
      &-full {
        width: 100%;
        height: 38px;
      }
    }
  }
}
.room-member-list {
  width: 100%;
  height: 400px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px 8px;
  &-item {
    width: 100%;
    height: 66px;
    border-radius: 8px 8px 8px 8px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    &:hover {
      background: #2b2b2b;
    }
    .info {
      display: flex;
      .avatar {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
        //margin-right: 16px;
        background: #0e71ff;
        font-size: 16px;
        font-weight: 400;
        color: #ffffff;
        //margin-right: 8px;
        img {
          width: 100%;
          height: auto;
        }
      }
      .name {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        margin-left: 8px;
        .value {
          font-size: 12px;
          line-height: 20px;
          font-family: PingFang SC-Regular, PingFang SC, serif;
          font-weight: 400;
          color: #ffffff;
        }
        .tag {
          height: 20px;
          padding: 0 2px;
          background: #4c4c4c;
          border-radius: 4px 4px 4px 4px;
          font-size: 12px;
          font-family: PingFang SC-Regular, PingFang SC, serif;
          font-weight: 400;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
    .stream-controller {
      display: flex;
      align-items: center;
      .btn {
        width: 24px;
        height: 24px;
        cursor: pointer;
        margin-left: 16px;
        &-handup {
          background: url("~@/assets/images/conversation/举手.png") no-repeat;
          background-size: 100% 100%;
        }
        &-mute {
          background: url("~@/assets/images/conversation/静音1.png") no-repeat;
          background-size: 100% 100%;
        }
        &-unmute {
          background: url("~@/assets/images/conversation/开麦.png") no-repeat;
          background-size: 100% 100%;
        }
        &-videoOn {
          background: url("~@/assets/images/conversation/关闭摄像.png") no-repeat;
          background-size: 100% 100%;
        }
        &-videoOff {
          background: url("~@/assets/images/conversation/打开摄像.png") no-repeat;
          background-size: 100% 100%;
        }
        &-kick-out {
          background: url("~@/assets/images/conversation/移除.png") no-repeat;
          background-size: 100% 100%;
        }
        &-recall {
          background: url("~@/assets/images/conversation/拨通.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
}
::v-deep .dialog-pick-up {
  background: transparent;
  border-radius: 8px;
  .el-dialog__header {
    height: 46px;
    background: #0f71ff;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #2f2f2f;
    padding: 0 16px;
    display: flex;
    align-items: center;
    .el-dialog__title {
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC, serif;
      font-weight: 400;
      color: #ffffff;
    }
    .el-dialog__headerbtn {
      top: 15px;
      right: 16px;
      .el-dialog__close {
        color: #ffffff;
      }
    }
  }
  .el-dialog__body {
    background: #1e1e1e;
    padding: 16px;
    .transfer {
      width: 100%;
      height: 499px;
      display: grid;
      grid-template-columns: repeat(2, 50%);
      grid-auto-rows: 100%;
      background: #1e1e1e;
      border: 1px solid #333333;
      border-radius: 8px;
      &-left,
      &-right {
        height: 100%;
      }
      &-left {
        padding: 12px;
        &-query {
          margin-bottom: 12px;
          .el-input__inner {
            width: 100%;
            height: 38px;
            background: #000000;
            border-radius: 8px 8px 8px 8px;
            border: 1px solid #2b2b2b;
            color: #ffffff;
            &::placeholder {
              font-size: 14px;
              font-family: PingFang SC-Regular, PingFang SC, serif;
              font-weight: 400;
              color: #999999;
            }
          }
        }
        &-list {
          width: 100%;
          height: calc(100% - 50px);
          overflow-x: hidden;
          overflow-y: auto;
          &-item {
            width: 100%;
            height: 46px;
            border-radius: 8px 8px 8px 8px;
            //cursor: pointer;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            &:hover,
            &-active {
              width: 100%;
              background: #2b2b2b;
            }
            .info {
              display: flex;
              align-items: center;
              .avatar {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                overflow: hidden;
                //margin-right: 16px;
                background: #0e71ff;
                font-size: 12px;
                font-weight: 400;
                color: #ffffff;
                //margin-right: 8px;
                img {
                  width: 100%;
                  height: auto;
                }
              }
              .name {
                font-size: 12px;
                line-height: 20px;
                font-family: PingFang SC-Regular, PingFang SC, serif;
                font-weight: 400;
                color: #ffffff;
                margin-left: 12px;
              }
            }
          }
        }
      }
      &-right {
        border-left: 1px solid #333333;
        padding: 0 12px;
        &-header {
          width: 100%;
          height: 62px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .count {
            font-size: 14px;
            font-family: PingFang SC-Regular, PingFang SC, serif;
            font-weight: 400;
            color: #ffffff;
          }
          .clear {
            font-size: 14px;
            font-family: PingFang SC-Regular, PingFang SC, serif;
            font-weight: 400;
            color: #0f71ff;
            cursor: pointer;
          }
        }
        &-list {
          width: 100%;
          height: calc(100% - 62px);
          overflow-x: hidden;
          overflow-y: auto;
          &-item {
            width: 100%;
            height: 46px;
            border-radius: 8px 8px 8px 8px;
            //cursor: pointer;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
            &:hover,
            &-active {
              width: 100%;
              background: #2b2b2b;
            }
            .info {
              display: flex;
              align-items: center;
              .avatar {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                overflow: hidden;
                //margin-right: 16px;
                background: #0e71ff;
                font-size: 12px;
                font-weight: 400;
                color: #ffffff;
                //margin-right: 8px;
                img {
                  width: 100%;
                  height: auto;
                }
              }
              .name {
                font-size: 12px;
                line-height: 20px;
                font-family: PingFang SC-Regular, PingFang SC, serif;
                font-weight: 400;
                color: #ffffff;
                margin-left: 12px;
              }
            }
            .icon-remove {
              width: 12px;
              height: 12px;
              display: block;
              cursor: pointer;
              background: url("~@/assets/images/conversation/关闭 2.png") no-repeat;
              background-size: 100% 100%;
            }
          }
        }
      }
    }
  }
  .el-dialog__footer {
    background: #1e1e1e;
    height: 70px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .el-button {
      width: 120px;
      height: 38px;
      font-size: 14px;
      &--default {
        color: #ffffff;
        background: transparent;
        border: 1px solid #666666;
      }
    }
  }
}
::v-deep .el-tabs {
  .el-tabs__nav {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    width: 100%;
    .el-tabs__item {
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      &.is-active {
        color: #0f71ff;
      }
    }
    .el-tabs__active-bar {
      background-color: #0f71ff;
    }
  }
  .el-tabs__nav-wrap::after {
    background-color: #2f2f2f;
  }
}
</style>
