<template>
	<view>
		<u-navbar 	:is-back="true"
					back-icon-color="#333333"
					title="摇一摇设置" 
					:background="{ background: '#f0f0f0'}" 
					title-color="#000000"
					:title-bold="true" 
					title-size="34" 
					:border-bottom="false" 
					z-index="1001">
		</u-navbar>
		<view>
			<u-cell-group>
				<u-cell-item @click="showNewUserPop()"  title="背景图片"  :title-style="titleStyle"></u-cell-item>
				<u-cell-item title="音效"    :title-style="titleStyle" :arrow="false">
					<u-switch slot="right-icon" size="48" active-color="#19BE6B"   v-model="checked"></u-switch>
				</u-cell-item>
				<u-gap height="20" bg-color="#eee" margin-top="1" margin-bottom="1"></u-gap>
				<u-cell-item title="打招呼的人"  :title-style="titleStyle"  @click="toLinkedList()"></u-cell-item>
				<u-cell-item title="摇到的历史"  @click="addAndUpdate()"  :title-style="titleStyle"></u-cell-item>
				<u-gap height="20" bg-color="#eee" margin-top="1" margin-bottom="1"></u-gap>
				<u-cell-item title="摇一摇信息"  :title-style="titleStyle" @click="toSetLatestUsers()"></u-cell-item>
			</u-cell-group>
		</view>
		
		<u-popup v-model="newLatestFlag"  mode="right"
				safe-area-inset-bottom
				:mask-close-able="false"
				length="100%">
			<scroll-view  class="u-p-30 u-p-t-80" scroll-y="true" style="height:85%;width: 700rpx;">
				<view>
					<u-collapse :head-style="{borderBottom:'1rpx solid #909399'}">
						<u-collapse-item :title="'第'+(index+1)+'位'" 
									v-for="(newUser,index) in lastestZhuanFaUsers" 
									:key="index">
							<view style="border: 1rpx solid #595b5f;padding: 10rpx 20rpx;">
								<u-form :model="newUser" :ref="'newUser-'+index" 
										label-width="300rpx"
										label-position="top">
										<u-form-item label="姓名">
											<u-input v-model="newUser.nickName" />
										</u-form-item>
										<u-form-item label="微信号">
											<u-input v-model="newUser.chatNumber" />
										</u-form-item>
										<u-form-item label="头像">
											<u-input type="textarea"  v-model="newUser.avatar" />
										</u-form-item>
								</u-form>
							</view>
						</u-collapse-item>
					</u-collapse>
				</view>
			</scroll-view>
			<view class="u-flex u-row-between u-col-center u-p-30">
				<u-button @click="addNewLatestUserItem()">新增</u-button>
				<u-button v-if="lastestZhuanFaUsers.length>1" @click="delNewLatestUser()">删除</u-button>
				<u-button type="success" @click="submitAddLatestUsers()">确定</u-button>
			</view>
		</u-popup>
		
		
		
		<u-popup v-model="addAndUpdateFlag"  mode="right" 
				safe-area-inset-bottom
				:mask-close-able="false"
				length="100%">
			<scroll-view  class="u-p-30 u-p-t-80" scroll-y="true" style="height:85%;width: 700rpx;">
				<view>
					<u-collapse :head-style="{borderBottom:'1rpx solid #909399'}">
						<u-collapse-item :title="'第'+(index+1)+'位'" 
									v-for="(newUser,index) in newUsers" 
									:key="index">
							<view style="border: 1rpx solid #595b5f;padding: 10rpx 20rpx;">
								<u-form :model="newUser" :ref="'newUser-'+index" 
										label-width="300rpx"
										label-position="top">
									<u-form-item label="姓名">
										<u-input :maxlength="-1" v-model="newUser.nickName" />
									</u-form-item>
									<u-form-item label="微信号">
										<u-input :maxlength="-1" placeholder="不能与其他重复!"  v-model="newUser.chatNumber" />
									</u-form-item>
									<u-form-item label="头像">
										<u-input :maxlength="-1" type="textarea"  v-model="newUser.avatar" />
									</u-form-item>
									<u-form-item label="地区(注意空格)">
										<u-input :maxlength="-1"  placeholder="注意格式,如: 广东 广州" v-model="newUser.address" />
									</u-form-item>
									<u-form-item label="个性签名">
										<u-input :maxlength="-1" v-model="newUser.signature" />
									</u-form-item>
									<u-form-item label="给你打招呼的内容">
										<u-input :maxlength="-1" type="textarea"  v-model="newUser.userRemark" />
									</u-form-item>
									<u-form-item label="给你打招呼的时间">
										<u-input :maxlength="-1" placeholder="注意格式,如: 22:30" v-model="newUser.createTime" />
									</u-form-item>
									<u-form-item label="你通过好友时间">
										<u-input :maxlength="-1"  placeholder="注意格式,如: 22:35" v-model="newUser.sendTimeStr" />
									</u-form-item>
									<u-form-item label="第一条朋友圈">
										<u-input  type="textarea" :maxlength="-1"  v-model="newUser.friendCircle[0]" />
									</u-form-item>
									<u-form-item label="第二条朋友圈">
										<u-input  type="textarea" :maxlength="-1"  v-model="newUser.friendCircle[1]" />
									</u-form-item>
									<u-form-item label="第三条朋友圈">
										<u-input   type="textarea" :maxlength="-1" v-model="newUser.friendCircle[2]" />
									</u-form-item>
								</u-form>
							</view>
						</u-collapse-item>
					</u-collapse>
				</view>
			</scroll-view>
			<view class="u-flex u-row-between u-col-center u-p-30">
				<u-button @click="addNewUserItem()">新增</u-button>
				<u-button v-if="newUsers.length>1" @click="delNewUser()">删除</u-button>
				<u-button type="success" @click="submitAddUsers()">确定</u-button>
			</view>
		</u-popup>
		
		
		
		<u-popup v-model="newUserPopFlag"  mode="right"
				safe-area-inset-bottom
				:mask-close-able="false"
				length="100%">
			<view style="padding-top:15%;">
				<view class="u-border-top">
					<u-field v-model="count"
							 type="number" 
							 label="本次录入数量" label-width="200rpx"
							 placeholder="录入数量,建议5-10个"></u-field>
				</view>
				<view v-if="count<1" class="u-p-30 u-font-32" style="font-weight: bold;">
					<view>填入数量决定了下面录入的每项信息的数量 !!!</view>
					<view  class="u-m-t-10">比如5个,那么必须填入5个人的信息,每个用%%隔开 ! </view>
					<view  class="u-m-t-10">不能多! 也不能少! 没有信息的填0 !</view>
					<view>地址为例: "广东 广州,0,湖北 武汉,四川 城都,福建 厦门" </view>
				</view>
			</view>
			<view v-if="count>0">
				<scroll-view class="u-p-30 u-p-t-80"
							 scroll-y="true" style="height:80%;width: 700rpx;">
					<view style="padding:10rpx 20rpx;">
						<u-form :model="propArrObj" :border-bottom="false"
								label-width="300rpx"
								label-position="top">
								<u-form-item label="姓名">
									<u-input placeholder="格式: (张三%%李四%%王五)" 
											 type="textarea" :maxlength="-1"
											 :height="300" border
											  v-model="propArrObj.nickNameStr" />
								</u-form-item>
								<u-form-item label="微信号">
									<u-input placeholder="格式: (666666%%aaaaaa%%zzzzzz)" 
											 type="textarea" :maxlength="-1"
											 :height="200"  border
											 v-model="propArrObj.chatNumberStr" />
								</u-form-item>
								<u-form-item label="头像">
									<u-input  placeholder="格式: (xxx.jpg%%yyy.jpg%%%zzz%%jpg)" 
											 type="textarea" :maxlength="-1"
											 :height="300"  border
											 v-model="propArrObj.avatarStr" />
								</u-form-item>
								<u-form-item label="个性签名">
									<u-input  placeholder="格式: (哈哈哈%%嘻嘻嘻%%哇哇哇)" 
											 type="textarea" :maxlength="-1"
											 :height="200"  border
											 v-model="propArrObj.signatureStr" />
								</u-form-item>
								<u-form-item label="打招呼的内容">
									<u-input  placeholder="格式: (哈喽%%你好%%hello)" 
											 type="textarea" :maxlength="-1"
											 :height="200"  border
											 v-model="propArrObj.userRemarkStr" />
								</u-form-item>
								<u-form-item label="地址">
									<u-input  placeholder="每个值用%%隔开!没有地址的用0代替" 
											 type="textarea" :maxlength="-1"
											 :height="100"  border
											 v-model="propArrObj.addressStr" />
								</u-form-item>
								<u-form-item label="打招呼时间">
									<u-input  placeholder="格式: (12:01%%12:02%%12:03)" 
											 type="textarea" :maxlength="-1"
											 :height="100"  border
											 v-model="propArrObj.createTimeStr" />
								</u-form-item>
								<u-form-item label="加好友时间">
									<u-input  placeholder="格式: (12:01%%12:02%%12:03)" 
											 type="textarea" :maxlength="-1"
											 :height="100"  border
											 v-model="propArrObj.sendTimeStr" />
								</u-form-item>
								<u-form-item label="朋友圈">
									<u-input  placeholder="格式: ([xxx.jpg%%yyy.jpg,zzz.jpg]%%[111.jpg,222.jpg]%%[]%%[333.jpg])" 
											 type="textarea" :maxlength="-1"
											 :height="300"  border
											 v-model="propArrObj.friendCircleStr" />
								</u-form-item>
						</u-form>
					</view>
				</scroll-view>
				<view class="u-flex u-row-between u-col-center u-p-30">
					<u-button @click="cancelAdd()">取消</u-button>
					<u-button type="success" @click="submitAdd()">确定</u-button>
				</view>
			</view>
		</u-popup>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle:{
					fontSize:"34rpx",
					color:'#000000'
				},
				linkedUsers:[], //摇一摇的人
				addAndUpdateFlag:false, //新增
				newUsers:[
					{
						id:new Date().getTime(),
						avatar:'',
						chatNumber:'',
						nickName:'',
						signature:'',
						userRemark:'',
						address:'',
						sex:0,
						friendPower:0,
						forbidSelf:false,
						forbidHis:false,
						createTime:"",
						sendTimeStr:"",
						lastMsgContent:'',
						delFlag:false,
						friendCircle:["","",""],
						messageList:[],
					},
				],
				checked:true,
				newLatestFlag:false,
				lastestZhuanFaUsers:[
					{
						id:'1',
						avatar:'/static/image/default/default-user/1.jpg',
						chatNumber:'qwe',
						nickName:'猫先生',
					}
				],
				//--------------------------------------
				newUserPopFlag:false,
				count:5,
				propArrObj:{
					nickNameStr:"",
					chatNumberStr:"",
					avatarStr:"",
					signatureStr:"",
					userRemarkStr:"",
					addressStr:"",
					createTimeStr:"",
					sendTimeStr:"",
					friendCircleStr:"",
				}
			};
		},
		methods:{
			toSetLatestUsers:function(){
				if(this.vuex_lastestZhuanFaUsers.length>0){
					this.lastestZhuanFaUsers=JSON.parse(JSON.stringify(this.vuex_lastestZhuanFaUsers));
				}
				this.newLatestFlag=true;
			},
			addNewLatestUserItem:function(){
				let obj={
					id:new Date().getTime(),
					avatar:'',
					chatNumber:'',
					nickName:'',
				};
				this.lastestZhuanFaUsers.push(obj);
			},
			delNewLatestUser:function(){
				this.lastestZhuanFaUsers.splice(this.lastestZhuanFaUsers.length-1,1);
			},
			submitAddLatestUsers:function(){
				let that=this;
				this.$u.vuex("vuex_lastestZhuanFaUsers",this.lastestZhuanFaUsers);
				this.newLatestFlag=false;
			},
			addAndUpdate:function(){
				let that=this;
				that.addAndUpdateFlag=true
			},
			addNewUserItem:function(){
				let oldObj= this.newUsers[this.newUsers.length-1];
				let obj={
					id:new Date().getTime(),
					avatar:'',
					chatNumber:'',
					nickName:'',
					signature:'',
					userRemark:'',
					address:'',
					sex:0,
					friendPower:0,
					forbidSelf:false,
					forbidHis:false,
					createTime:oldObj.createTime,
					sendTimeStr:oldObj.sendTimeStr,
					lastMsgContent:'',
					delFlag:false,
					friendCircle:["","",""],
					messageList:[],
				};
				//this.newUsers.push(obj);
				this.newUsers.unshift(obj);
			},
			delNewUser:function(){
				this.newUsers.splice(this.newUsers.length-1,1);
			},
			submitAddUsers:function(){
				let that=this;
				uni.showModal({
					title: '确认提示',
					content: '请认真检查各项填入内容!',
					success: function (res) {
						if (res.confirm) {
							that.addAndUpdateFlag = false;
							that.linkedUsers=that.newUsers.concat(that.linkedUsers);
							that.newUsers=[
								{
									id:new Date().getTime(),
									avatar:'',
									chatNumber:'',
									nickName:'',
									signature:'',
									userRemark:'',
									address:'',
									sex:0,
									friendPower:0,
									forbidSelf:false,
									forbidHis:false,
									createTime:'',
									sendTimeStr:'',
									lastMsgContent:'',
									delFlag:false,
									friendCircle:["","",""],
									messageList:[],
								},
							]
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			
			toLinkedList:function(){
				let arr=JSON.parse(JSON.stringify(this.vuex_linkedUsers));
				let newLinkedUsers=this.linkedUsers.concat(arr);
				console.log("去摇一摇设置",newLinkedUsers);
				this.$u.vuex("vuex_linkedUsers",newLinkedUsers);
				this.linkedUsers=[];
				this.$u.route("/pages/tabbar/find/yaoyiyao/yaoyiyao-linked-list");
			},
			//------------------------------------------------------------------------------------------------
			showNewUserPop:function(){
				this.newUserPopFlag=true;	
			},
			
			cancelAdd:function(){
				this.newUserPopFlag=false;
			},
			
			submitAdd:function(){
				let that=this;
				let keys= Object.keys(that.propArrObj);
				for (let i = 0; i < keys.length; i++) {
					let key= keys[i];
					let keyValue= that.propArrObj[key];
					let valueArr= keyValue.split("%%");
					if(valueArr.length!=that.count){
						this.globalUtil.utilAlert("第"+(i+1)+"项录入信息有误!["+key+"]");
						return;
					}
				}
				that.muchCreateUser();
			},
			
			muchCreateUser(){
				let that=this;
				let arr=[];
				for (var i = 0; i < this.count; i++) {
					let item={
						id:"u-"+i,
						avatar:that.propArrObj.avatarStr.split("%%")[i],
						chatNumber:that.propArrObj.chatNumberStr.split("%%")[i],
						nickName:that.propArrObj.nickNameStr.split("%%")[i],
						signature:that.propArrObj.signatureStr.split("%%")[i],
						userRemark:that.propArrObj.userRemarkStr.split("%%")[i],
						address:that.propArrObj.addressStr.split("%%")[i],
						createTime:that.propArrObj.createTimeStr.split("%%")[i],
						sendTimeStr:that.propArrObj.sendTimeStr.split("%%")[i],
						friendCircle:that.propArrObj.friendCircleStr.split("%%")[i],
						lastMsgContent:"",
						messageList:[],
						sex:0,
						friendPower:0,
						forbidSelf:false,
						forbidHis:false,
						delFlag:false,
					};
					arr.push(item);
				}
				console.log("====arr====",arr);
				that.linkedUsers=arr.concat(that.linkedUsers);
				this.count=0;
				this.propArrObj={
					avatarStr:"",
					chatNumberStr:"",
					nickNameStr:"",
					signatureStr:"",
					userRemarkStr:"",
					addressStr:"",
					createTimeStr:"",
					sendTimeStr:"",
					friendCircleStr:"",
				};
				that.newUserPopFlag=false;
			}
		}
	}
</script>

<style lang="scss">

</style>
<style>
	page{
		background-color: #f0f0f0;
	}
</style>