<template>
  <div class="r-view-mgr">
    <template v-if="!adminShow">
      <div class="groudMgr-top">
        <i class="el-icon-arrow-left" @click="handleGroudMgr"></i>
        <span>设置</span>
        <i class="el-icon-close" @click="handleCloseCharSet"></i>
      </div>
      <div class="ad-wrap">
        <div class="ad-item" @click="adminShow = true">
          群管理员设置<i class="el-icon-arrow-right"></i>
        </div>
        <div class="ad-item" @click="$showInvite(5)">
          转让群主<i class="el-icon-arrow-right"></i>
        </div>
        <div class="ad-item" @click="addGroupAuth">
          申请群认证<i class="el-icon-arrow-right"></i>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="groudMgr-top">
        <i class="el-icon-arrow-left" @click="adminShow = false"></i>
        <span>群管理</span>
        <i class="el-icon-close" @click="handleCloseCharSet"></i>
      </div>
      <div class="groudMgr-admins">
        <div class="admins-add" @click="$showInvite(4)">
          <div class="add-fl">
            <i class="el-icon-circle-plus-outline"></i>添加群管理
          </div>
          <div class="add-fr">
            {{adminsList.length}}/{{membersArray.length}}
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
        <ul class="admin-list">
          <li class="admin-item" v-for="(item, key) in adminsList" :key="key">
            <img class="user-avatar" :src="item.cover_photo" v-if="item.cover_photo">
            <div class="user-avatar" v-else :class="`avatar_bg${item.user_id % 9}`" :data-name="item.nick_name.slice(0,2).toUpperCase()">
              </div>
            <span class="name">{{item.nick_name}}</span>
            <el-button @click="removeAdmin(item.user_id,item.nick_name)">移除</el-button>
          </li>
        </ul>
      </div>
    </template>
  </div>
</template>

<script>
import Vue from 'vue'
import { Button, MessageBox } from 'element-ui'
import { mapState } from 'vuex'
import API from '@/api'

Vue.component(Button.name, Button)

export default {
  name: 'chatGroudMgr',
  computed: {
    ...mapState({
      curGroupId: state => state.curSession,
      userId: state => state.userId,
      membersArray: state => state.group.membersArray,
      sessionList: state => state.chat.sessionList
    }),
    adminsList () {
      return this.membersArray.filter(v => {
        return v.is_admin == 1
      })
    }
  },
  data () {
    return {
      adminShow: false
    }
  },
  methods: {
    handleGroudMgr () {
      this.$emit('handleShowGroudMgr', 0)
    },
    handleCloseCharSet () {
      this.$emit('handleShowCharSet', 0)
      this.adminShow = false
    },
    removeAdmin (userId, nick) {
      MessageBox.confirm(`确定移除${nick}吗?`).then(() => {
        API.group
          .removeAdmin({
            admin_id: userId,
            group_id: this.curGroupId
          })
          .then(({ data }) => {
            this.$store.dispatch('getGroupInfo')
          })
      })
        .catch(e => {
          console.log(e)
        })
    },
    addGroupAuth () {
      API.group.groupAuth({
        group_id: this.curGroupId
      }).then(({ data }) => {
        let serverId = data.data.serverId
        // let serverId = 11
        let sessionId = this.userId > serverId
          ? `${serverId}-${this.userId}`
          : `${this.userId}-${serverId}`

        // 先判断serverId有没有在sessionList
        let isInSession = this.sessionList.some(v => {
          return v.session_id == sessionId
        })

        if (!isInSession) {
          // 没有就加入一个会话
          API.user.getOtherInfo({
            target_id: serverId
          }).then(({ data }) => {
            let userInfo = data.data
            let obj = {
              cover_photo: userInfo.cover_photo,
              is_group: '0',
              name: userInfo.nick_name,
              session_id: sessionId,
              unread: 0
            }
            this.$store.commit('addSessionItem', obj)
          })
        }

        this.$store.commit('changeSessionId', sessionId)
        this.$router.push({ path: `/pm/${sessionId}` })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>
