<template>
	<view class="addpeople">
		<view class="list" >
			<!-- <u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange" shape="circle" size=32> -->
				<view class="list-item" v-for="(item, index) in checkboxList" :key="index">
					<!-- <u-checkbox v-if="peopelList" iconSize=32 style="padding: 0 100rpx;" :name="item"  activeColor="#1E9F6A"></u-checkbox> -->
						<radio  v-if="peopelList" color="#1E9F6A" style="font-size: 26rpx;" :checked="item.checked"  :value="index" @click="checkbox(index)"></radio >
					<view class="" style="margin:0 64rpx 0 32rpx;width: 70rpx;">
						{{item.name}}
					</view>
					<view class="" >
						{{item.phone}}
					</view>
					<view class="image" style="flex: 1;text-align: right;align-items: center;" >
						<text class="" style="font-size: 28rpx;color: #1E9F6A;border-right: 1rpx solid #1E9F6A;padding-right: 30rpx;margin-right: 30rpx;" @click="dele(item.id)">
							删除
						</text>
						<image src="../../static/editIcon.png" mode="widthFix" @click="edit(item)"></image>
						<!-- <image src="../../static/editIcon.png" mode="widthFix"></image> -->
					</view>
				</view>
			<!-- </u-checkbox-group> -->
		</view>
		<u-loadmore v-if="checkboxList.length==0" :status="nomore" fontSize="30" :line="true" nomoreText="暂无出行人"/>
		<view class="navbar">
			<view class="navbar-item" @click="addpeople">
				+ 新增出行人
			</view>
			<view class="navbar-item sure" v-if="peopelList" @click="surePeople">
				确定出行人
			</view>
		</view>
	</view>
</template>

<script>
	// import peopelInfo from "../components/peopleInfo.vue"
	export default{
		data(){
			return{
				// 选择列表
				peopelList:false,
				//出行人表单显示隐藏
				peopelInfoShow:1,
				// 出行人选择
				 checkboxValue1:[],
				// 出行人列表
				checkboxList: [
					// {name: '吴某某',disabled: false,number:"1568945752"},
					// {name: '吴某某',disabled: false,number:"1568945752"},
			    ],
			}
		},
		components:{
			// peopelInfo
		},
		
		onLoad(options) {
			// console.log(options)
			if(options.id==0){
				this.peopelList=false
			}else{
				this.peopelList=true
			}
			// uni.showLoading({
			// 	title: '加载中'
			// });
			this.init()
		},
		onShow() {
			let token=uni.getStorageSync("token")
			if (!token) {
				//未登录
				uni.showToast({
					title: "请先登录",
					icon: 'none'
				})
				setTimeout(()=>{
					uni.navigateBack({
						delta:1
					})
				},1500)
				
				return false
			}
			uni.showLoading({
				title: '加载中'
			});
			this.init()
		},
		methods:{
			init(){
				uni.$u.http.post('/api/traveler/list',{
					custom: {
						auth: true
					}
				}).then((res) => {
					// console.log(res)
					this.checkboxList=res
					// this.$store.commit("getlist",res)
					let nawarr=this.checkboxList
					nawarr.forEach(item=>{
						item.checked=false
					})
					this.checkboxList=nawarr
					uni.hideLoading();
					// console.log(this.checkboxList)
				}).catch((err) => {
					console.log( err)
				})
			},
			// // 选择
			//  checkboxChange(e) {
			//      console.log('change', e);
			// },
			// 选择
			 checkbox(index) {
			    let data=this.checkboxList
			    if (data[index].checked) {
			         data[index].checked = false;
			    }else {
			         data[index].checked = true;
			    }
			    this.checkboxList=JSON.parse(JSON.stringify(data))
				let newarr=this.checkboxList
				let arr=[]
				newarr.forEach(item=>{
					if(item.checked){
						arr.push(item)
					}
				})
				this.$store.commit('getpeopleList', arr)
			},
			// 确定添加联系人
			surePeople(){
				uni.navigateBack({
					delta: 1
				});
			},
			// 查看出行人
			edit(item){
				let info=JSON.stringify(item)
				uni.navigateTo({
					url:`/pages/peopleList/addPeople?info=${info}&state=0`
				})
			},
			// 删除出行人
			dele(id){
				uni.$u.http.post('/api/traveler/delete',{id},{
					custom: {
						auth: true
					}
				}).then((res) => {
					this.init()
					
				}).catch((err) => {
					console.log( err)
				})
			},
			// 添加出行人
			addpeople(){
				uni.navigateTo({
					url:"/pages/peopleList/addPeople?state=1"
				})
			}
		}
	}
</script>

<style lang="less">
	.u-cell__body--large.data-v-913eaa32{
		padding: 48rpx 0 !important;
		box-sizing: border-box;
	}
	page{
		font-size: 32rpx;
	}
	.list{
		// margin: 50rpx 30rpx;
		.list-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			image{
				width: 36rpx;
				margin-bottom: 0;
			}
			border-bottom: 1rpx solid #E3E3E3;
			padding: 30rpx;
		}
	}
	.navbar{
		width: 100%;
		height: 104rpx;
		line-height: 104rpx;
		display: flex;
		border-top: 1rpx solid #E3E3E3;
		position: fixed;
		left: 0;
		bottom: 0;
		.navbar-item{
			// width: 50%;
			flex: 1;
			text-align: center;
		}
		.sure{
			background: #1E9F6A;
			border-radius: 0px 16rpx 0px 0px;
			color: #FFFFFF;
		}
	}
</style>
