<!-- 群管理 -->
<template>
  <div class="setting">
        <div id="back-to-main" class="el-icon-arrow-left more-icon-3 cursor hide" @click="backToChart"></div>
        <div class="history-title">群管理</div>
        <div class="pd-15 setting-main">
            <div class="group-form">
                <div>
                    <div class="margin-tb-7 color-86909c">房间号：</div>
                    <div>
                        <span id="roomId" class="color-4E5969">{{clickItem.id}}</span>
                        <svg @click="copyRoomId(clickItem.id)" width="16" height="16" class="icon svg-icon float-r cursor" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1850"><path d="M149.3504 394.6496c16.0256 0 29.3376 11.8784 31.6416 27.2896l0.3584 4.7104-0.0512 480h416.0512c16.0256 0 29.3376 11.8784 31.6416 27.2896l0.3584 4.7104a32 32 0 0 1-27.2896 31.6928l-4.7104 0.3072h-448a32 32 0 0 1-31.6928-27.2384l-0.3072-4.7616v-512c0-17.664 14.336-32 32-32zM640 53.3504a32.6656 32.6656 0 0 1 18.7392 6.0416 25.6 25.6 0 0 1 1.024 0.768l0.6144 0.512a32.2048 32.2048 0 0 1 2.3552 2.1504l0.8704 0.8704 234.6496 256 1.024 1.2288c0.6656 0.768 1.28 1.536 1.8432 2.4064l-2.8672-3.584a32.1536 32.1536 0 0 1 8.0896 16.896l-1.024-4.4032 0.768 2.9184 0.256 1.4336 0.0512 0.6144a32.1536 32.1536 0 0 1 0.2048 2.4576l0.0512 1.6896v469.2992c0 17.7152-14.336 32-32 32H277.3504a32 32 0 0 1-32-32V85.3504c0-17.664 14.336-32 32-32z m-32.0512 63.9488H309.2992v661.3504h533.3504V373.2992H640a32 32 0 0 1-31.6416-27.2384l-0.3584-4.7104-0.0512-224.0512z m53.4016 448a32 32 0 0 1 4.7104 63.6928l-4.7104 0.3584h-256a32 32 0 0 1-4.7616-63.6928l4.7616-0.3072h256zM490.6496 394.7008a32 32 0 0 1 4.7616 63.6928l-4.7616 0.3072H405.3504a32 32 0 0 1-4.7616-63.6416l4.7616-0.3584h85.2992z m181.3504-227.072l-0.0512 141.7216h129.9456l-129.8944-141.7216z" p-id="1851"></path></svg>
                    </div>
                </div>
                <div>
                    <div class="margin-tb-7 color-86909c">房间名：</div>
                    <div>
                        <span id="roomName" class="color-4E5969">{{clickItem.name}}</span>
                    </div>
                </div>
            </div>
            <div style="padding: 15px 0px;">
                <el-input prefix-icon="el-icon-search" id="filter-group-users" v-model="filterText" size="small" class="form-control inline-block" placeholder="搜索" @input="filterGroupUserChange"/>
            </div>
            <div>
                <div class="add-people cursor border-box" @click="openPeopleListModal"><span class="mt-10 iconfont icon-tianjiaqunchengyuan"></span>添加成员</div>
            </div>
            <div id="group-users" v-loading="loading">
                <div v-for="(item,index) in groupPeopleShowData" :key="index">
                    <div v-if="groupCreateUserId === item.id" class="group-people flex">
                        <img :src="`${item.avatarImageUrl ? item.avatarImageUrl : require('../../../static/avatar.jpg')}`"/>
                        <div class="group-text">
                            <span class="ellipse ml-10">{{item.userName}}</span>
                            <span class="roomCreator">群主</span>
                            <span v-if="item.id === myUserId" class="room-people-myself">本人</span>
                        </div>
                    </div>
                    <div v-else class="group-people flex">
                        <img :src="`${item.avatarImageUrl ? item.avatarImageUrl : require('../../../static/avatar.jpg')}`"/>
                        <div class="group-text">
                            <span class="ellipse ml-10">{{item.userName}}</span>
                            <span v-if="groupCreateUserId === myUserId" title="移除" class="iconfont icon-qingliqunchengyuan cursor" @click="moveOutUser(item.id)"></span>
                            <span v-if="item.id === myUserId" class="room-people-myself">本人</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="setting-bottom">
                <div class="out-group cursor delete-group border-r" v-if="groupCreateUserId === myUserId" @click="deleteGroup">解散群</div>
                <div class="out-group  cursor" @click="outOfGroup">退出群</div>
            </div>
        </div>
    </div>
</template>

<script>
import {getGroupDetailApi, deleteGroupApi, deleteGroupUser, moveOutGroupUser} from '../../api/api.js'
export default {
  name: '',
  mixins: [],
  components: {},
  props: {
    clickItem: {
      Object,
      default: () => {}
    },
    myUserId: {
      String,
      default: ''
    },
    settingShow: {
      Boolean,
      default: false
    }
  },
  data () {
    return {
      backToChartShow: false,
      roomItem: {},
      groupPeopleData: [],
      groupPeopleShowData: [],
      groupCreateUserId: null,
      loading: false,
      filterText: ''
    }
  },
  watch: {
    clickItem (val) {
      if (val && this.settingShow) {
        this.getGroupDetail()
      }
    },
    settingShow (val) {
      if (val) {
        this.getGroupDetail()
      }
    }
  },
  computed: {},
  created () {},
  mounted () {},
  methods: {
    getGroupDetail () {
      let params = {
        id: this.clickItem.id
      }
      this.groupPeopleData = []
      this.groupPeopleShowData = []
      this.groupCreateUserId = null
      this.loading = true
      getGroupDetailApi(params).then(data => {
        this.groupPeopleData = data.users
        this.groupPeopleShowData = data.users
        this.groupCreateUserId = data.createdUserId
      }).finally(res => {
        this.loading = false
      })
    },
    backToChart () {
      this.$emit('update:settingShow', false)
    },
    // 复制粘贴房间号
    copyRoomId () {
      let target = document.querySelector('#roomId')
      this.getSelect(target)
      document.execCommand('copy')
    },
    // 选中图片
    getSelect (targetNode) {
      if (window.getSelection) {
        // chrome等主流浏览器
        let selection = window.getSelection()
        let range = document.createRange()
        range.selectNode(targetNode)
        selection.removeAllRanges()
        selection.addRange(range)
      } else if (document.body.createTextRange) {
        // ie
        let range = document.body.createTextRange()
        range.moveToElementText(targetNode)
        range.select()
      }
    },
    filterGroupUserChange (val) {
      this.groupPeopleShowData = this.groupPeopleData.filter(el => {
        return el.userName.indexOf(val) > -1
      })
    },
    openPeopleListModal () {
      this.$emit('addPeopleGroup', this.groupPeopleData)
    },
    deleteGroup () {
      this.$confirm('此操作将解散该群, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          groupId: this.clickItem.id,
          userId: this.myUserId
        }
        deleteGroupApi(params).then(data => {
          this.$message.success('已成功解散该群')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    outOfGroup () {
      this.$confirm('此操作将退出该群, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          groupId: this.clickItem.id,
          userId: this.myUserId
        }
        deleteGroupUser(params).then(data => {
          this.$message.success('已成功退出该群')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    moveOutUser (id) { // 移出群成员
      this.$confirm('此操作将该成员移出群聊, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          userId: this.myUserId,
          groupId: this.clickItem.id,
          moveOutUserId: id
        }
        moveOutGroupUser(params).then(data => {
          this.$message.success('已成功移出该成员')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    }
  },
  beforeDestroy () {},
  destroyed () {},
  beforeUpdate () {},
  updated () {}
}
</script>
<style lang='scss' scoped>
.setting{
    width: 479px;
    border-left: 1px solid #f1f1f1;
    background: #fff;
    height: 100%;
    position: relative;
    border-left: 1px solid rgba(0,0,0,0.2);
    .history-title{
        text-align: center;
        height: 54px;
        line-height: 54px;
        border-bottom: 1px solid rgba(0,0,0,0.2);
    }
    .setting-main{
        height: calc(100% - 116px);
        overflow: auto;
        .group-form{
            padding: 10px 0px;
            border-bottom: 1px solid rgba(0,0,0,0.2);
        }
        .add-people{
            text-align: center;
            padding: 10px;
            border: 1px dashed rgba(0,0,0,0.2);
            width: 100%;
            height: 45px;
            border-width: 2px;
        }
        #group-users{
            height: calc(100% - 259px);
            min-height: 200px;
            overflow: auto;
            padding: 0px 10px;
        }
        .group-people{
            width: 100%;
            text-align: left;
            padding: 10px 0;
            line-height: 40px;
        }
        .group-people img{
            width: 40px;
            border-radius: 5px;
        }
        .group-people .iconfont{
            float: right;
        }
        .group-people .group-text{
            width: 100%;
            line-height: 40px;
        }
        .setting-bottom{
            position: absolute;
            bottom: 0;
            display: flex;
            width: calc(100% - 40px);
            padding: 10px 0px;
            border-top: 1px solid rgba(0,0,0,0.2);
            justify-content: space-around;
            background-color: #fff;
            .out-group{
                color: #ff5c5c;
                padding: 10px 20px;
                text-align: center;
                width: 50%;
                display: inline-block;;
            }
        }
        .roomCreator{
            padding: 3px;
            border: 1px solid #0FC6C2;
            border-radius: 6px;
            color: #0FC6C2;
            margin-left: 8px;
        }
        .room-people-myself{
            float: right;
            color: #C9CDD4;
        }
    }
     .more-icon-3{
        position: absolute;
        top: 20px;
        left: 15px;
    }
   .el-input /deep/ .el-input__inner{
        background: #f2f3f5;
    }
}
</style>
