<template>
    <view class="bgFFF height100vh">
        <view class="AirplanePassengerAddEditingC">
            <view class="column">
                <view class="AirplanePassengerAddEditingC-text row-sb-n fz30">
                    <text class="flexS AirplanePassengerAddEditingC-textL">姓名(英文)</text>
                    <input class="flexG"
                    :class="[addMsg.SurName?'fontBold':'']" type="text" placeholder="请输入英文姓名，请于乘机证件相同"
                    :placeholder-style="placeholderStyle"
                    v-model="addMsg.SurName"/>
                </view>
                <view class="height-line1"></view>
            </view>
            <view class="column">
                <view class="AirplanePassengerAddEditingC-text row-sb-n fz30">
                    <text class="flexS AirplanePassengerAddEditingC-textL">证件</text>
                    <view class="flexG row-aic-n">
                        <view v-for="(item,index) in certificateList" class="AirplanePassengerAddEditingC-choose MR30"
                        @click="getType(item,1)">
                            <uni-icons color="#DEBF7B" :type="addMsg.GuestType==item.Id?'checkbox-filled':'circle'" size="18"></uni-icons>
                            <text class="ML20 fz30 fontBold">{{item.Name}}</text>
                        </view>
                    </view>
                </view>
                <view class="height-line1"></view>
            </view>
            <view class="column">
                <view class="AirplanePassengerAddEditingC-text row-sb-n fz30">
                    <text class="flexS AirplanePassengerAddEditingC-textL">证件号</text>
                    <input v-if="addMsg.GuestType==1" class="flexG" type="text" placeholder="请输入身份证号码"
                    :class="[addMsg.IdCard?'fontBold':'']"
                    :placeholder-style="placeholderStyle" 
                    v-model="addMsg.IdCard" @blur="setBirthday"/>
                    <input v-if="addMsg.GuestType==2" class="flexG" type="text" placeholder="请输入护照号码"
                    :class="[addMsg.PassportNo?'fontBold':'']" 
                    :placeholder-style="placeholderStyle"
                    v-model="addMsg.PassportNo" @blur="setBirthday"/>
                </view>
                <view class="height-line1"></view>
            </view>
            <view class="column">
                <view class="AirplanePassengerAddEditingC-text row-sb-n fz30">
                    <text class="flexS AirplanePassengerAddEditingC-textL">成人/婴儿</text>
                    <view class="flexG row-aic-n">
                        <view v-for="(item,index) in GuestTypeList" class="AirplanePassengerAddEditingC-choose MR30"
                        @click="getType(item,2)">
                            <uni-icons color="#DEBF7B" :type="addMsg.GuestNum==item.Id?'checkbox-filled':'circle'" size="18"></uni-icons>
                            <text class="ML20 fz30 fontBold">{{item.Name}}</text>
                        </view>
                    </view>
                </view>
                <view class="height-line1"></view>
            </view>
        </view>
       <view class="AirplanePassengerList-footer fixedFooter bgFFF fixed z-index2">
            <view v-if="addMsg.SurName&&(addMsg.PassportNo||addMsg.IdCard)" 
            class="AirplanePassengerList-buttom bgDEBF7B fz32 fontBold textCenter"
            @click="showAddEditingPreviwe=true">
                确认{{editorIndex||editorIndex==0?'编辑':'添加'}}
            </view>
            <view v-else class="AirplanePassengerList-buttom bgF5 fz32 fontBold textCenter">
                确认{{editorIndex||editorIndex==0?'编辑':'添加'}}
            </view>
       </view>
       <u-popup
        v-model="showAddEditingPreviwe"
        mode="center"
        border-radius="20"
        length="90%"
        :safe-area-inset-bottom="true">
            <view class="showAddEditing-box bgFFF">
                <view class="fz30 fontBold textCenter">请确认乘机人信息</view>
                <view class="showAddEditing-Tips textCenter fz26 MT25">
                    <text>请仔细检查乘机人信息，</text>
                    <text class="colorFF5858">信息错误将导致无法登机</text>
                </view>
                <view class="showAddEditing-Details bgF5 MT15">
                    <view class="row-aic-n">
                        <text class="fz26 flexS">姓名</text>
                        <text class="fz30 fontBold colorFF5858 flexG">{{addMsg.SurName}}</text>
                    </view>
                    <view class="row-aic-n">
                        <text class="fz26 flexS">证件号</text>
                        <text class="fz30 fontBold colorFF5858 flexG">{{addMsg.GuestType==1?addMsg.IdCard:addMsg.PassportNo}}</text>
                    </view>
                    <view class="row-aic-n" v-if="addMsg.result">
                        <text class="fz26 flexS">出生日期</text>
                        <text class="fz30 fontBold flexG">{{addMsg.result.birthday}}</text>
                    </view>
                </view>
                <view class="showAddEditing-buttom fz32 fontBold textCenter row-sb-n">
                    <view class="border1 colorDEBF7B borderDEBF7B" @click="showAddEditingPreviwe=false">返回修改</view>
                    <view v-if="!loading" class="border1 borderDEBF7B" @click="submit">确认{{editorIndex||editorIndex==0?'编辑':'添加'}}</view>
                    <view v-else class="border1 bgF5">确认{{editorIndex||editorIndex==0?'编辑':'添加'}}</view>
                </view>
            </view>
        </u-popup>
    </view>
</template>
<script>
    import { parseIDCard } from "./dates.js";
    export default {
        components: {
            
        },
        data() {
            return {
                loading: false,
                certificateList:[
                    {Name:'身份证',Id:1},
                    {Name:'护照',Id:2},
                ],
                GuestTypeList:[
                    {Name:'成人',Id:1},
                    {Name:'婴儿',Id:2},
                ],
                text:'',
                showAddEditingPreviwe: false,
                addMsg: {
                    SurName:'',PassportNo:'',IdCard:'',MobilePhone:'',
                    result:null,show: false,GuestType:1,GuestNum: 1,Id:0
                },
                GuestList: [],
                editorIndex: null,
                placeholderStyle: "color:#B8B8C0",
            }
        },
        onLoad(options){
            this.editorIndex = options.editorIndex||options.editorIndex==0?options.editorIndex:null
            uni.setNavigationBarTitle({
				title: options.editorIndex||options.editorIndex==0?'编辑乘机人':'新增乘机人'
			})
        },
        created() {},
        mounted() {
            let GuestList = uni.getStorageSync("GuestList")
            this.GuestList = GuestList?GuestList:[]
            if(this.editorIndex||this.editorIndex==0){
                this.addMsg = this.GuestList[this.editorIndex]
            }
        },
        watch: {
            addMsg:{
                handler(newVal, oldval) {
                    
                }
            }
        },
        methods: {
            submit(){
                this.addMsg.Id = Math.floor(Math.random()*(100-1)+1)
                if(!this.editorIndex){
                    this.GuestList.push(this.addMsg)
                }
                if(this.GuestList.length>0){
                    uni.setStorageSync("GuestList",this.GuestList)
                    uni.navigateBack({
                        delta: -1
                    })
                }
            },
            setBirthday(){
                if(this.addMsg.GuestType==1){
                   this.addMsg.result = parseIDCard(this.addMsg.IdCard)
                }
            },
            getType(item,type){
                if(type==1){
                    if(this.addMsg.GuestType!=item.Id){
                        this.addMsg.IdCard = ''
                        this.addMsg.PassportNo = ''
                    }
                    this.addMsg.GuestType = item.Id
                }else{
                    this.addMsg.GuestNum = item.Id
                }
            }
        }
    }
</script>
<style scoped>
@import url("@/asset/css/flex.css");
@import url("./style.css");
.AirplanePassengerAddEditingC{
    padding: 0 54rpx;
}
.AirplanePassengerAddEditingC-text{
    padding: 35rpx 0;
}
.AirplanePassengerAddEditingC-textL{
    width: 147rpx;
}
.AirplanePassengerAddEditingC-choose:last-child{
    margin-left: 79rpx;
}
.showAddEditing-box{
    width: 642rpx;
    border-radius: 50rpx;
    padding: 49rpx 55rpx 74rpx 55rpx;
}
.showAddEditing-Tips{
    padding: 0 70rpx;
}
.showAddEditing-Details{
    border-radius: 50rpx;
    padding: 60rpx 47rpx;
}
.showAddEditing-Details>view:nth-child(2){
    padding: 68rpx 0;
}
.showAddEditing-Details>view>text:first-child{
    width: 150rpx;
}
.showAddEditing-buttom{
    margin-top: 70rpx;
}
.showAddEditing-buttom>view{
    width: 244rpx;
    padding: 25rpx 0;
    border-radius: 40rpx;
}
</style>