<!-- 添加好友组件 by wuyang -->
<template>
	<div class="addGroup">
		<el-input placeholder="请输入手机号码或名称" v-model="queryKey" class="searchInput" size="mini" @keyup.enter.native="getList">
			<i slot="prefix" class="el-input__icon el-icon-search" @click="getList"></i>
		</el-input>
		<div class="list" v-if="isShow">
				<el-input v-if="childmsg!='1'" placeholder="请输入群组名" v-model="group.name" size="mini">
				</el-input>
				<p @click="isFriend=!isFriend" class="title">好友<img src="../../assets/right.png" v-if="!isFriend" class="right"><img
					 src="../../assets/down.png" v-else class="down"></p>
				<ul v-if="isFriend" class="mains">
					<li v-for="item in friendlist" v-if="item.friendFlag">
							<md-checkbox  class="md-primary"  v-model="checkList" :value="item.toUid">{{item.name}}</md-checkbox>
					</li>
				</ul>
		</div>
		<div class="list" v-else>
			<p class="dialogcenter">查无此人</p>
		</div>
		<p class="dialogcenter">
			<el-button v-if="childmsg!='1'" class="addButton" @click="add">创建</el-button>
			<el-button v-else class="addButton" @click="yaoqrq">邀请</el-button>
		</p>
	</div>
</template>

<script>
	import {
		getApi,
		postApi,
		getMessage
	} from "../../api/commonApi";
	export default {
		data() {
			return {
				queryKey: '',
				friendlist: [],
				allList: [],
				isInside: false,
				isOnside: false,
				isFriend: false,
				checkList: [],
				isShow: true,
				grouplist:[],
				group: {
					applyJoinOption: "FreeAccess",
					memberList: [],
					name: "",
					shutUpAllMember: "Off",
					type: "Public",
					ownerAccount:localStorage.getItem('userId')
				}
			};
		},
		props: ['childmsg'],
		created() {
			this.getList()
		},
		methods: {
			//获取所有人列表
			getList() {
				let that = this
				getApi("txCloud/friend/msg/list", {
					userId: localStorage.getItem("userId"),
					allFlag: true,
					queryKey: that.queryKey
				}, function(data) {
					if (that.queryKey != '') {
						that.isInside = true
						that.isOnside = true
						that.isFriend = true
					}

					that.friendlist = data.list
					that.allList = data.allUser
				if (data.list.length == 0&&data.allUser.length == 0) {
						that.isShow = false
					} else {
						that.isShow = true
					}
				}, function(data) {});
			},
			//清空列表
			clearList() {
				this.queryKey = ''
				this.checkList = []
				this.isInside = false
				this.isOnside = false
				this.getList()
			},
			//添加好友
			add() {
				if(this.group.name==''){
					getMessage('群组名不能为空', 'warning')
					return
				}
				if(this.checkList.length==0){
					getMessage('请选人', 'warning')
					return
				}

				for(var i=0;i<this.checkList.length;i++){
					let info={
						key:''
					}
					info.key=this.checkList[i]
					this.group.memberList.push(info)

				}
				console.log(this.group.memberList)
				let that = this
				postApi("txCloud/group/create",that.group, function(data) {
					getMessage('创建成功', 'success')
					that.$emit('isShua', true)
				}, function(data) {
					getMessage(data.msg, 'error')
				});
			},
			//邀请入群
			yaoqrq(){
				let that = this
				if(that.checkList.length==0){
					getMessage('请选人', 'warning')
					return
				}
				for(var i=0;i<that.checkList.length;i++){

				that.grouplist.push(that.checkList[i])

				}
				console.log(that.grouplist)

				let groupid =localStorage.getItem('groupId')

				postApi("/txCloud/group/addMember",{
					type:'Public',
					memberList:that.grouplist,
					groupId:groupid
				}, function(data) {
					getMessage('邀请成功', 'success')

					that.$emit('isShua', true)
					that.checkList = []
					that.grouplist = []
				}, function(data) {
					getMessage(data.msg, 'error')
				});
			}
		}
	}
</script>
<style scoped="scoped">
	@import 'addGroup.css';
</style>
<style>
  .addGroup .list .el-input__inner {
    width: 87%!important;
  }
	.addGroup .el-checkbox-group {
		font-size: 14px !important;
	}

	.addGroup .el-checkbox__label {
		font-size: 12px !important;
	}

	.addGroup .searchInput .el-input__inner {
    width: 83%!important;
		border-radius: 15px !important;
		border: none !important;
		background-color: #e5e5e5a6 !important;
	}

	.addGroup .searchInput {
		margin-bottom: 12px;
	}

	.addButton {
		background: #6469CC !important;
		color: #FFFFFF !important;
	}

	.addButton:hover {
		opacity: 0.8;
	}
</style>
