<template>
	<view style="height: 90vh;position: relative;" >
		<view class="column items-center justify-center q-mt-md" v-if="loading">
			<u-loading mode="circle" size="40"></u-loading>
			<view class="normal-label text-center q-mt-sm">正在加载信息</view>
		</view>
		<template v-else>
		<view :style="{transform: `translateX(${showFormVisible?-100:0}vw)`,transition: 'transform 0.5s ease'}" class=" guest-list column">
			<view class="row items-center justify-center" v-if="crCount+etCount+babyCount>0">
				<text class="q-mr-md">已选</text>
				<template v-if="crCount>0">
					<text class="bold">{{crCount}}</text>
					<u-icon name="chengren" class="q-mr-md" custom-prefix="tffont" color="#966b00" size="30"></u-icon>
				</template>
				<template v-if="etCount>0">
					<text class="bold">{{etCount}}</text>
					<u-icon name="ertong" class="q-mr-md" custom-prefix="tffont" color="#966b00" size="30"></u-icon>
				</template>
				<template v-if="babyCount>0">
					<text class="bold">{{babyCount}}</text>
					<u-icon name="baby" class="q-mr-md" custom-prefix="tffont" color="#966b00" size="30"></u-icon>
				</template>
			</view>
			<view class="text-center" v-else>
				<text class="bold">乘机人列表</text>
			</view>
			<scroll-view scroll-y="true" class="col q-mt-md" style="background: #f1f2f4;height: 1px;">
				<view class="row items-center card" v-for="(x,i) in guests" style="margin:30rpx;">
					<u-checkbox-group>
						<u-checkbox @change="guestChangeHandle" :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" @click="setCheckStatusHandle(x)">
						<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="q-mt-sm">
							护照号 {{x.Passport}}
							<text class="q-ml-sm">{{x.Sex=='M'?'男':'女'}}</text>
						</view>
					</view>
					<view @click="createNewGuest(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>
			</scroll-view>
			<view class="row items-center" style="padding:0 32rpx 20rpx 32rpx">
				<view class="outline-btn col" @click="createNewGuest(null)">新增乘机人</view>
				<view class="full-btn col q-ml-sm" @click="selectedHandle">确认选择</view>
			</view>
		</view>
		<view class="guest-from column" :style="{transform: `translateX(${showFormVisible?0:100}vw)`,transition: 'transform 0.5s ease'}">
			<view class="bold text-center" style="font-size: 30rpx;">
				{{current.Id==''?'新增':'修改'}}乘机人
			</view>
			<scroll-view scroll-y="true" class="col" style="height: 1px;margin-top: 40rpx;">
				<view class="form-item">
					<u-field :labelWidth="180" 
						v-model="current.Name"
						label="中文姓名"
						placeholder="请输入中文姓名">
					</u-field>
				</view>
				<view class="form-item">
					<u-field :labelWidth="180" 
						v-model="current.SurName"
						label="姓(拼音)"
						placeholder="如:ZHOU"
						@input="(e)=>handleInput(e,0)"
						required>
					</u-field>
				</view>
				<view class="form-item">
					<u-field :labelWidth="180" 
						v-model="current.GivenName"
						label="名(拼音)"
						@input="(e)=>handleInput(e,1)"
						placeholder="如:XINGXING"
						required>
					</u-field>
				</view>
				<view class="form-item row items-center" style="padding: 20px 28px;">
					<text style="width:180rpx">性别</text>
					<u-radio-group v-model="current.Sex">
						<u-radio shape="circle" active-color="#DEBF7B" name="M">男</u-radio>
						<u-radio shape="circle" active-color="#DEBF7B" name="F" class="q-ml-md">女</u-radio>
					</u-radio-group>
				</view>
				<view class="form-item">
					<u-field :labelWidth="180" 
						v-model="current.BirthDay"
						label="出生日期"
						right-icon="arrow-down"
						:disabled="true"
						@click="showPicker=true"
						required />
				</view>
				<view class="form-item">
					<u-field :labelWidth="180" 
						v-model="current.Country"
						label="国籍"
						right-icon="arrow-down"
						:disabled="true"
						@click="countryVisible=true"
						required />
				</view>
				<view class="form-item">
					<u-field :labelWidth="180" 
						v-model="current.Passport"
						label="护照号"
						placeholder="请输入护照号码"
						required>
					</u-field>
				</view>
				<view class="form-item">
					<u-field :labelWidth="180" 
						v-model="current.PassportExpired"
						label="护照有效期"
						right-icon="arrow-down"
						:disabled="true"
						@click="showPeVisible=true"
						required />
				</view>
				<view class="form-item">
					<u-field :labelWidth="180" 
						v-model="current.Mobile"
						label="电话号码"
						placeholder="请输入电话号码"
						required>
					</u-field>
				</view>
			</scroll-view>
			<view class=" row items-center" style="padding:0 32rpx 20rpx 32rpx">
				<view class="outline-btn col" @click="showFormVisible=false">返回</view>
				<view class="full-btn col q-ml-sm" @click="saveGuestHandle()">保存乘机人</view>
			</view>
		</view>
		<u-picker v-model="showPicker" mode="time" :params="params" @confirm='setBirthdayHandle' :default-time='current.BirthDay'></u-picker>
		<u-picker v-model="showPeVisible" mode="time" :params="params" @confirm='setExpireHandle' :default-time='current.PassportExpired'></u-picker>
		<u-picker mode="selector" v-model="countryVisible" @confirm="setCountryHandle" :default-selector="[0]" :range="countries" range-key="Name"></u-picker>
		</template>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				guests:[],
				listVisible:false,
				showFormVisible:false,
				current:{},
				countries:[],
				showPicker:false,
				showPeVisible:false,
				countryVisible:false,
				params: {
					year: true,
					month: true,
					day: true
				},
				defaultCountry:[],
				loading:false,
			}
		},
		props:{
			list:{
				type:Array,
				default:[]
			},
			maxNum:{
				type:Number,
				default:0
			}
		},
		watch: {
			list: {
				deep: true,
				immediate: true,
				handler: function(newVal, oldVal) {
					this.guests = newVal;
				},
			},
		},
		components:{},
		computed: {
			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
			}
		},
		created() {
			this.guests=this.list
			this.calcYearHandle()
			this.getCountryList()
			
		},
		methods:{
			resetVisible(){
				this.showFormVisible = false
			},
			setCheckStatusHandle(x){
				if(!x.Checked && !this.canChecked && x.year>1) return
				x.Checked = !x.Checked
				this.guestChangeHandle()
			},
			calcYearHandle(date){
				this.guests.forEach(x=>{
					x.year=this.calculateAge(x.BirthDay)
				})
			},
			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;
			},
			setBirthdayHandle(val){
				this.current.BirthDay=`${val.year}/${val.month}/${val.day}`
			},
			setExpireHandle(val){
				this.current.PassportExpired=`${val.year}/${val.month}/${val.day}`
			},
			createNewGuest(obj){
				if(obj) this.current=obj
				else{
					this.current = {
						Id:'',
						Name:'',
						SurName:'',
						GivenName:'',
						Sex:'M',
						BrithDay:'',
						Country:this.countries[0].Name,
						CountryId:this.countries[0].ID,
						IdCard:'',
						IdCardExpired:'',
						Passport:'',
						PassportExpired:'',
						Mobile:''
					}
					this.defaultCountry = [0]
				}
				
				this.showFormVisible = true
			},
			getCountryList() {
				this.loading=true
			    this.apipost('dict_post_Destination_GetCountry', {}, res => {
					this.countries = res.data
					this.loading=false
				}, err => {
					this.loading=false
				})
			},
			setCountryHandle(val){
				this.current.Country=this.countries[val[0]].Name
				this.current.CountryId = this.countries[val[0]].ID
				this.defaultCountry = val
			},
			handleInput(event,t) {
				setTimeout(()=>{
					const value = t==0?this.current.SurName:this.current.GivenName;
					const filteredValue = value.replaceAll(/[^a-zA-Z]/g, '')
					console.log(value,filteredValue)
					if(t==0) this.current.SurName = filteredValue.toUpperCase();
					else if(t==1) this.current.GivenName = filteredValue.toUpperCase();
				},500)
			},
			guestChangeHandle(){
				setTimeout(()=>{
					this.$emit('change',this.guests)
				},500)
			},
			selectedHandle(){
				this.$emit('selected',this.guests)
			},
			saveGuestHandle(){
				const msg = this.validate()
				if(msg!=''){
					uni.showToast({
						title:msg,
						icon:'none'
					})
					return
				}
				const c = JSON.parse(JSON.stringify(this.current))
				if(c.Id==''){
					c.Id = new Date().getTime().toString()
					this.guests.push(c)
				}else {
					const i = this.guests.findIndex(x=>x.Id==c.Id)
					if(i!=-1) this.guests[i] = c
					else this.guests.push(c)
				}
				this.calcYearHandle()
				uni.setStorageSync('guest',this.guests)
				this.guestChangeHandle()
				this.showFormVisible = false
			},
			validate(){
				let msg = ''
				const c = this.current
				if(c.SurName=='')
					msg = '请输入姓'
				else if(c.GivenName=='')
					msg = '请输入名'
				else if(c.BirthDay=='')
					msg='请选择生日'
				else if(c.Passport==''||c.Passport.length<5||c.Passport.length>15)
					msg = '请输入5-15位护照号码'
				else if(c.PassportExpired=='')
					msg='请选择护照有效期'
				else if(c.Mobile=='' || c.Mobile.length!=11)
					msg = '请输入11位数电话号码'
				return msg
			}
		}
	}
</script>

<style>
.guest-list,
.guest-from {
	font-size: 26rpx;
	line-height: 1;
	color: #080A09;
	width: 100vw;
	top: 32rpx;
	bottom: 0px;
	left: 0;
	right: 0;
	position: absolute;
	z-index: 1;
}
.guest-list .bold{
	font-weight: bold;
}
.guest-list .card{
	background-color: #FFF;
	border-radius: 12rpx;
	font-size: 26rpx;
	color: #9999A5;
	font-weight: 300;
	margin-top: 10rpx;
	padding:30rpx;
}
.guest-list .guest-name{
	font-weight: bold;
	font-size: 30rpx;
	color: #1D1D20;
	line-height: 1;
}
.guest-list .full-btn,
.guest-from .full-btn{
	padding: 22rpx;
	background-color: #B99846;
	font-size: 26rpx;
	font-weight: bold;
	text-align: center;
	color: #000;
	border-radius: 12rpx;
	margin-top: 30rpx;
	border:1rpx solid #B99846;
}
.guest-list .outline-btn,
.guest-from .outline-btn{
	padding: 22rpx;
	background-color: #;
	border:1rpx solid #B99846;
	font-size: 26rpx;
	font-weight: bold;
	text-align: center;
	color: #B99846;
	border-radius: 12rpx;
	margin-top: 30rpx;
}
.guest-from {
	z-index: 2;
}
.guest-from .bold{
	font-weight: bold;
}
.guest-from .form-item{
	border-bottom: 1px solid #ECF1F4;
}
.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>