<template>
	<view class="flight-guest">
		<view class="row items-center" style="margin-top: 24rpx;">
			<view class="num row items-center">
				<text style="padding: 6rpx;">剩余</text>
				<text class="col text-center" style="padding:6rpx;background-color: #B99846;">{{maxNum}}张</text>
			</view>
			<view v-if="(crCount+etCount+babyCount)>0" class="col text-right" style="font-size: 26rpx;color: #1D1D20;">
				<text>已选：</text>
				<text class="q-ml-sm">{{crCount}}成人</text>
				<text class="q-ml-sm">{{etCount}}儿童</text>
				<text class="q-ml-sm">{{babyCount}}婴儿</text>
			</view>
		</view>
		<view class="row items-center" v-for="(x,i) in showGuests" style="padding: 30rpx 0;">
			<u-checkbox-group>
				<u-checkbox :disabled="!x.Checked && !canChecked && x.year>1" shape="circle" v-model="x.Checked" active-color="#B99846"></u-checkbox>
			</u-checkbox-group>
			<view class="col q-ml-md q-mr-md">
				<view class="row items-center">
					<view class="guest-name">{{x.SurName}}/{{x.GivenName}} {{x.Name!=''?`(${x.Name})`:''}}</view>
					<view class="guest-tag" :class="{'cr':x.year>11,'et':x.year>1&&x.year<12,'baby':x.year<2}">
						{{x.year>11?'成人':(x.year>2?'儿童':'婴儿')}}
					</view>
				</view>
				<view class="guest-card">
					护照号 {{x.Passport}} 
					<text class="q-ml-sm">{{x.Sex=='M'?'男':'女'}}</text>
				</view>
			</view>
			<view @click="updateGuestHandle(x)" style="width: 50px;height: 50rpx;align-items: flex-end;" class="column justify-center">
				<u-icon name="pen_" custom-prefix="tffont" color="#B99846" size="30"></u-icon>
			</view>
		</view>
		<view class="add" @click="listVisible=true">
			{{showGuests.length==0?'添加乘机人':'更多乘机人'}}
		</view>
		
		<u-popup mode="bottom" border-radius="20" :popup="false" v-model="listVisible" :maskCloseAble="true" length="auto" :safeAreaInsetBottom="true" @close="()=>listVisible=false" :z-index="9999">
			<guest-list :list="guests" ref="guestManagerRef" :max-num="maxNum" @selected="selectedHandle" @change="guestChangeHandle"></guest-list>
		</u-popup>
	</view>
</template>

<script>
	import GuestList from './list.vue'
	export default{
		data(){
			return {
				checked:false,
				guestObj:{
					Id:'',
					Name:'',
					SurName:'',
					GivenName:'',
					Sex:'M',
					BrithDay:'',
					Country:'',
					IdCard:'',
					IdCardExpired:'',
					Passport:'',
					PassportExpired:'',
					Mobile:''
				},
				guests:[],
				listVisible:false
			}
		},
		props:{
			maxNum:{
				type:Number
			}
		},
		components:{GuestList},
		computed: {
			showGuests() {
				this.guests.forEach(x=>{
					if(x.Checked) x.Display=true
				})
				const r = this.guests.filter(x=>x.Display)
				return r
			},
			crCount(){
				const r = this.guests.filter(x=>x.year>=12 && x.Checked)
				return r.length
			},
			etCount(){
				const r = this.guests.filter(x=>x.year>=2 && x.year<12 && x.Checked)
				return r.length
			},
			babyCount(){
				const r = this.guests.filter(x=>x.year<2 && x.Checked)
				return r.length
			},
			canChecked(){
				const r = this.guests.filter(x=>x.year>=2 && x.Checked)
				
				return r.length<this.maxNum
			}
		},
		watch: {
			guests: {
				deep: true,
				immediate: true,
				handler: function(newVal, oldVal) {
					this.checkedChange()
				},
			},
		},
		created() {
			if(uni.getStorageSync('guest')){
				this.guests = uni.getStorageSync('guest').filter(x=>x.Id!='')
				
				this.guests.forEach((x,i)=>{
					x.Checked=false
					x.Display=i==0
				})
				this.calcYearHandle()
				this.chosenGuest = this.guests.slice(0, 1) 
			}
		},
		methods:{
			guestChangeHandle(val){
				this.guests = val
			},
			checkedChange(){
				const r = this.guests.filter(x=>x.Checked)
				this.$emit('selected',r)
			},
			selectedHandle(val){
				this.guests=val
				this.listVisible=false
			},
			calcYearHandle(date){
				this.guests.forEach(x=>{
					x.year=this.calculateAge(x.BirthDay)
				})
			},
			updateGuestHandle(g){
				this.$refs.guestManagerRef.createNewGuest(g)
				this.listVisible = true
			},
			calculateAge(birthDate) {
			    const birth = new Date(birthDate);
			    const now = new Date();
			
			    let birthYear = birth.getFullYear();
			    let birthMonth = birth.getMonth();
			    let birthDay = birth.getDate();
			
			    let currentYear = now.getFullYear();
			    let currentMonth = now.getMonth();
			    let currentDay = now.getDate();
			    let age = currentYear - birthYear;
			    if (currentMonth < birthMonth || (currentMonth === birthMonth && currentDay < birthDay)) {
			        age--;
			    }
			
			    return age;
			}
		}
	}
</script>

<style>
	.flight-guest {
		margin: 10px;
	}
	.flight-guest *{
		line-height: 1;
	}
	.flight-guest .guest-name{
		font-weight: bold;
		font-size: 30rpx;
		color: #1D1D20;
		line-height: 1;
	}
	.flight-guest .guest-card{
		font-size: 26rpx;
		color: #9999A5;
		font-weight: 300;
		margin-top: 10rpx;
	}
	.flight-guest .add{
		padding: 22rpx;
		background-color: #00000009;
		font-size: 26rpx;
		font-weight: bold;
		text-align: center;
		color: #000;
		border-radius: 12rpx;
		margin-top: 30rpx;
	}
	.flight-guest .num{
		margin-top: 24rpx;
		border-radius: 7rpx;
		background-color: #080A09;
		font-size: 22rpx;
		font-weight: 400;
		color: #FFF;
		overflow: hidden;
		padding: 0;
		line-height: 1;
	}
	.flight-guest .num{
	
		border-radius: 7rpx;
		background-color: #080A09;
		font-size: 22rpx;
		font-weight: 400;
		color: #FFF;
		overflow: hidden;
		padding: 0;
		line-height: 1;
		width: 120rpx;
	}
	.guest-tag{
		font-size: 22rpx;
		padding: 6rpx 14rpx;
		line-height: 1;
		border-radius: 8rpx;
		margin-left: 20rpx;
	}
	.guest-tag.cr{
		background-color: #FFFFFF;
		color: #2979ff;
		border: 1px solid #2979ff;
	}
	.guest-tag.et{
		background-color: #FFFFFF;
		color: #f90;
		border: 1px solid #f90;
	}
	.guest-tag.baby{
		background-color: #FFFFFF;
		color: #fa3534;
		border: 1px solid #fa3534;
	}
</style>