<!-- 添加好友组件 by wuyang -->
<template>
	<div class="addFriend">
		<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-checkbox-group v-model="checkList"> -->
			<p @click="isInside=!isInside" class="title">所有好友<img src="../../assets/right.png" v-if="!isInside" class="right"><img src="../../assets/down.png" v-else class="down"></p>
			<ul v-if="isInside" class="mains">
				<li v-for="item in friendlist">
					<!-- <el-checkbox :label="item.toUid">{{item.name}}</el-checkbox> -->
					<md-checkbox  class="md-primary"  v-model="checkList" :value="item.toUid">{{item.name}}</md-checkbox>
				</li>
			</ul>

			<!--<p @click="isOnside=!isOnside" class="title">所外<img src="../../assets/right.png" v-if="!isOnside" class="right"><img src="../../assets/down.png" v-else class="down"></p>-->
			<!--<ul v-if="isOnside" class="mains">-->
				<!--<li v-for="item in friendlist" v-if="!item.insideFlag">-->
					<!--<md-checkbox  class="md-primary"  v-model="checkList" :value="item.toUid">{{item.name}}</md-checkbox>-->
				<!--</li>-->
			<!--</ul>-->
		<!-- </el-checkbox-group> -->

		</div>
		<div class="list" v-else>
			<p class="dialogcenter">查无此人</p>
		</div>
		<p class="dialogcenter">
			<el-button class="addButton" @click="add">添加</el-button>
		</p>
	</div>
</template>

<script>
	import {
		getApi,
		postApi,
		getMessage
	} from "../../api/commonApi";
	export default {
		data() {
			return {
				queryKey: '',
				friendlist: [],
				isInside: false,
				isOnside: false,
				checkList: [],
				isShow:true
			};
		},
		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
					}
					if(data.allUser.length == 0){
						that.isShow=false
					}else{
						that.isShow=true
					}
					that.friendlist = data.allUser

				}, function(data) {});
			},
			//清空列表
			clearList(){
				this.queryKey=''
				this.checkList=[]
				this.isInside=false
				this.isOnside=false
				this.getList()
			},
			//添加好友
			add(){
				if(this.checkList.length==0){
					getMessage('请选人', 'warning')
					return
				}
				let that = this
				postApi("txCloud/friend/add", {
					fromUid: localStorage.getItem("userId"),
					toUidList: that.checkList
				}, function(data) {
					getMessage('添加成功','success')
					that.$emit('isShua',true)
				}, function(data) {
					getMessage(data.msg,'error')
				});
			}
		}
	}
</script>
<style scoped="scoped">
	@import 'addFriend.css';
</style>
<style>
  .addFriend .list .el-input__inner {
    width: 87%!important;
  }
.addFriend  .el-checkbox-group{
		font-size:14px !important;
	}
	.addFriend  .el-checkbox__label{
		font-size:12px !important;
	}
	.addFriend .searchInput .el-input__inner{
    width: 83%!important;
		border-radius:15px !important;
		border:none !important;
		background-color:#e5e5e5a6 !important;
	}
	.addFriend .searchInput{
		margin-bottom: 12px;
	}
	.addButton{
		background:#6469CC !important;
		color:#FFFFFF !important;
	}
	.addButton:hover{
		opacity:0.8;
	}
</style>
