<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 typeList" class="AirplanePassengerAddEditingC-choose MR30"
                        @click="addMsg.Sex=item.Id">
                            <uni-icons color="#DEBF7B" :type="addMsg.Sex==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>
                    <view class="flexG">
                        <input type="number" placeholder="请输入联系电话"
                        :class="[addMsg.MobilePhone?'fontBold':'']"
                        :placeholder-style="placeholderStyle" 
                        v-model="addMsg.MobilePhone"/>
                    </view>
                </view>
                <view class="height-line1"></view>
            </view>
            <view class="column" v-if="false">
                <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">
                        <input type="text" placeholder="请输入护照签发地"
                        :class="[addMsg.PassportAddress?'fontBold':'']"
                        :placeholder-style="placeholderStyle" 
                        v-model="addMsg.PassportAddress"/>
                    </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>
                    <view class="flexG" @click="showNationalityPreviwe=true">
                        <input type="text" placeholder="请选择国籍"
                        :class="[addMsg.Nationality?'fontBold':'']"
                        :placeholder-style="placeholderStyle" 
                        :disabled="true"
                        v-model="addMsg.NationalityName"/>
                    </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>
                    <view class="flexG" @click="showCalendarPreviwe=true">
                        <input type="text" placeholder="请选择护照过期时间"
                        :class="[addMsg.PassportExpiry?'fontBold':'']"
                        :placeholder-style="placeholderStyle" 
                        :disabled="true"
                        v-model="addMsg.PassportExpiry"/>
                    </view>
                </view>
                <view class="height-line1"></view>
            </view>
            <view class="column" v-if="false">
                <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.PassportExpiry
            &&addMsg.PassportAddress&&addMsg.Nationality
            &&addMsg.MobilePhone&&addMsg.MobilePhone.length==11" 
            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>
        <u-popup
        v-model="showCalendarPreviwe"
        mode="bottom"
        border-radius="20"
        :safe-area-inset-bottom="true">
            <uniCalendar ref="uniCalendar" 
            :insert="true" 
            :date="addMsg.PassportExpiry"
            @confirm="confirm"></uniCalendar>
        </u-popup>
        <u-popup
        v-model="showNationalityPreviwe"
        mode="bottom"
        border-radius="20"
        :safe-area-inset-bottom="true">
        <view class="addressIndex-box">
            <view class="fz30 fontBold textCenter MB30 PX53 relative">
                选择国籍
            </view>
            <view class="bgF5 PX20" style="height: 80rpx;line-height: 80rpx;">
                <u-search placeholder="关键字搜索" v-model="searchName" input-align="left" :value="searchName" text-color="#111"
                 bg-color="rgba(0,0,0,0)" :show-action="false"></u-search>
            </view>
            <scroll-view :scroll-y="true" :enable-back-to-top="true" 
            :enable-flex="true" 
            style="width: 100%; height: calc(100vh - 50vh);">
            <view class="column">
                <template v-for="(x,i) in countryList">
                    <view class="PX53">
                        <view class="row-sb-n" style="height: 75rpx;line-height: 75rpx" @click="getNationality(x)" 
                        :class="[addMsg.Nationality==x.ID?'colorDEBF7B':'']">
                            <text>
                                {{x.Name}}
                            </text>
                            <view>
                                <!-- checkbox-filled':'circle' -->
                                <uni-icons v-if="addMsg.Nationality==x.ID" color="#DEBF7B" type="checkbox-filled" size="18"></uni-icons>
                            </view>
                        </view>
                    </view>
                    <view class="height-line1"></view>
                </template>
            </view>
            </scroll-view>
            <view class="AirplanePassengerList-footer fixedFooter bgFFF fixed z-index2">
                <view
                class="AirplanePassengerList-buttom bgDEBF7B fz32 fontBold textCenter"
                @click="showNationalityPreviwe=false">
                    确认
                </view>
           </view>
        </view>
            
        </u-popup>
    </view>
</template>
<script>
    import { parseIDCard } from "./dates.js";
    import uniCalendar from "./components/uni-calendar/uni-calendar.vue";
    export default {
        components: {
            uniCalendar
        },
        data() {
            return {
                searchName:'',
                showNationalityPreviwe: false,
                countryListAll:[],
                countryList:[],
                showCalendarPreviwe: false,
                loading: false,
                typeList:[
                    {Name:'男',Id:1},
                    {Name:'女',Id:2},
                ],
                certificateList:[
                    {Name:'身份证',Id:1},
                    {Name:'护照',Id:2},
                ],
                GuestTypeList:[
                    {Name:'成人',Id:1},
                    {Name:'婴儿',Id:2},
                ],
                text:'',
                showAddEditingPreviwe: false,
                addMsg: {
                    SurName:'',
                    PassportNo:'',//护照号
                    PassportExpiry:'',//过期时间
                    PassportAddress:'',//签发地址
                    Nationality: null,//国籍
                    NationalityName: '',
                    Sex:1,
                    MobilePhone:'',
                    IdCard:'',
                    result:null,show: false,GuestType:2,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() {
            this.getCountryList()
            let GuestList = uni.getStorageSync("GuestList")
            this.GuestList = GuestList?GuestList:[]
            if(this.editorIndex||this.editorIndex==0){
                this.addMsg = this.GuestList[this.editorIndex]
                this.calendar = []
                let obj = {
					date: this.addMsg.PassportExpiry,
					info: "",
                }
                this.calendar.push(obj)
            }
        },
        watch: {
            addMsg:{
                handler(newVal, oldval) {
                    
                }
            },
            searchName:{
                handler(newVal, oldval) {
                    let countryListAll = JSON.parse(JSON.stringify(this.countryListAll))
                    if(!newVal){
                        this.countryList = countryListAll
                    }else{
                        this.countryList = countryListAll.filter(x=>{
                            return x.Name.indexOf(newVal)!=-1
                        })
                    }
                }
            }
        },
        methods: {
            getSearch(){

            },
            getNationality(item){
                this.addMsg.Nationality = item.ID
                this.addMsg.NationalityName = item.Name
            },
            getCountryList() { //获取国家
                let msg = {};
                this.apipost('dict_post_Destination_GetCountry', msg, res => {
                        this.countryListAll = res.data
                        this.countryList = res.data
                    }, err => {})
                },
            confirm(e) {
                this.showCalendarPreviwe = false
                this.addMsg.PassportExpiry = e.fulldate
            },
            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");
.addressIndex-box{
    padding: 46rpx 0 139rpx 0;
}
.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 0 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>