<template>
    <div class="container pcContainer">
      <headBar class="head-w12" style="border-bottom: 1px solid #e5e5e5"></headBar>
      <div class="w12">
        <!--导航进度条-->
        <div class="progress-wrap">
          <div class="progress-bar">
            <div class="bar-cell active">
              <span><i class="iconfont icon-quanzi"></i></span>
              <label class="text-l">提交订单</label>
            </div>
            <div class="bar-cell second">
              <span><i class="iconfont icon-quanzi"></i></span>
              <label for="">确认支付</label>
            </div>
            <div class="bar-cell end">
              <span><i class="iconfont icon-quanzi"></i></span>
              <label for="">完成购买</label>
            </div>
          </div>
        </div>
        <div class="user-info">
          <div class="user-box">
            <div class="box people-Info" v-for="(person,index) in personInfos">
              <div v-if="index==0">
                <h3 class="user-title">出行人信息</h3>
                <!--<span style="font-size: 15px">(1、境内给港澳台（所有）  2、港澳台（港澳台通行证，护照）  3、境外（护照）){{landType}}</span>-->
                <div class="ticket-wrap">
                  <p>常用出行人</p>
                  <span v-for="tuser in ticketUserList" @click="chooseTUser2(tuser)" v-if="(landType=='TSIF' && tuser.cardType!='NI') || landType=='TSDF'"><i class="iconfont icon-duoxuankuang1" :class="{'active icon-xuanzhong2':tuser.isChoose}"></i>{{tuser.name}}</span>
                </div>
              </div>
              <h4>出行人{{index+1}}（{{person.ageType==0?'成人':'儿童'}}）</h4>

              <!--境内 start-->
              <div class="input-border" v-if="landType=='TSDF'">
                <div class="u-name allLine" v-if="((person.cardType!='NI' && !personInfoFocus[index].cnSwitch) || person.cardType=='NI')" @click="spanClick(1,index,'cnIsFocus',true,'acnNameInput')" :class="{hasVal:person.nameFirst,focus:personInfoFocus[index].cnIsFocus,error:personInfoFocus[index].nameError}">
                  <span class="span">中文姓名</span>
                  <input type="text" :id="'acnNameInput'+index" v-model="person.nameFirst" @change="inputChange(1,index,'nameFirst','nameError','请输入姓名')" @blur="focusFun(1,index,'cnIsFocus',false)">
                  <div class="u-error">{{personInfoFocus[index].nameError}}</div>
                </div>
                <div class="line-wrap" v-if="person.cardType!='NI' && personInfoFocus[index].cnSwitch">
                  <div class="u-name b-l" @click="spanClick(1,index,'fnIsFocus',true,'afNameInput')" :class="{hasVal:person.nameFirstPinyin,focus:personInfoFocus[index].fnIsFocus,error:personInfoFocus[index].nameError}">
                    <span class="span">姓（拼音或英文）</span>
                    <input type="text" :id="'afNameInput'+index" v-model="person.nameFirstPinyin" @change="inputChange(1,index,'nameFirstPinyin','nameError','请输入姓（拼音或英文）')" @blur="focusFun(1,index,'fnIsFocus',false)">
                  </div>
                  <div class="u-name" @click="spanClick(1,index,'lnIsFocus',true,'alNameInput')" :class="{hasVal:person.nameLastPinyin,focus:personInfoFocus[index].lnIsFocus,error:personInfoFocus[index].nameError}">
                    <span class="span">名（拼音或英文）</span>
                    <input type="text" v-model="person.nameLastPinyin" :id="'alNameInput'+index" @change="inputChange(1,index,'nameLastPinyin','nameError','请输入名（拼音或英文）')" @blur="focusFun(1,index,'lnIsFocus',false)">
                  </div>
                  <div class="u-error">{{personInfoFocus[index].nameError}}</div>
                </div>
                <span class="en_cn_change" v-if="person.cardType!='NI'" @click="switchEn(index)"><em class="cn" :class="{on:!personInfoFocus[index].cnSwitch}">中</em><em class="en" :class="{on:personInfoFocus[index].cnSwitch}">En</em></span>
              </div>
              <!--境内 end -->
              <!--港澳台、境外  start-->
              <div class="outLand" v-if="landType=='TSIF'">
                <div class="input-border">
                  <div class="u-name b-l" @click="spanClick(1,index,'fnIsFocus',true,'afNameInput')" :class="{hasVal:person.nameFirstPinyin,focus:personInfoFocus[index].fnIsFocus,error:personInfoFocus[index].enNameError}">
                    <span class="span">姓（拼音或英文）</span>
                    <input type="text" :id="'afNameInput'+index" v-model="person.nameFirstPinyin" @change="inputChange(1,index,'nameFirstPinyin','nameError','请输入姓名')" @blur="focusFun(1,index,'fnIsFocus',false)">
                  </div>
                  <div class="u-name" @click="spanClick(1,index,'lnIsFocus',true,'alNameInput')" :class="{hasVal:person.nameLastPinyin,focus:personInfoFocus[index].lnIsFocus,error:personInfoFocus[index].enNameError}">
                    <span class="span">名（拼音或英文）</span>
                    <input type="text" v-model="person.nameLastPinyin" :id="'alNameInput'+index" @change="inputChange(1,index,'nameLastPinyin','nameError','请输入姓名')" @blur="focusFun(1,index,'lnIsFocus',false)">
                  </div>
                  <div class="u-error">{{personInfoFocus[index].enNameError}}</div>
                </div>
              </div>
              <!--港澳台、境外  end -->

              <div class="input-border" >
                <div class="u-name b-l u-cardType">
                  <span class="span span-text">证件类型</span>
                  <el-select v-model="person.cardType" @change="cardTypeChange(index)">
                    <el-option v-for="card in cardTypeList" :value="card.val" :key="card.val" :label="card.label"></el-option>
                  </el-select>
                </div>
                <div class="u-name u-cardCode" @click="spanClick(1,index,'codeIsFocus',true,'acodeInput')" :class="{hasVal:person.cardNum,focus:personInfoFocus[index].codeIsFocus,error:personInfoFocus[index].codeError}">
                  <span class="span">证件号码</span>
                  <input type="text" v-model="person.cardNum" :id="'acodeInput'+index"  @change="inputChange(1,index,'cardNum','codeError','请输入证件号码')" @blur="focusFun(1,index,'codeIsFocus',false)">
                  <div class="u-error">{{personInfoFocus[index].codeError}}</div>
                </div>
              </div>

              <div class="input-border" v-if="person.cardType!='NI'">
                <div class="u-name b-l">
                  <span class="span span-text">国籍（国家/地区）</span>
                  <el-select v-model="person.cardissuePlace">
                    <el-option v-for="c in cardPlaceList" :key="c.val" :value="c.val" :label="c.label"></el-option>
                  </el-select>
                </div>
                <div class="u-name b-l">
                  <span class="span span-text">性别</span>
                  <label class="label-sex"><input type="radio" :name="'sex'+index" v-model="person.sex" value="1">男</label>
                  <label class="label-sex"><input type="radio" :name="'sex'+index" v-model="person.sex" value="2">女</label>
                  <div class="u-error">{{personInfoFocus[index].sexError}}</div>
                </div>
              </div>

              <div class="input-border" v-if="person.cardType!='NI'">
                <div class="u-name  b-l" @click="spanClick(1,index,'birthIsFocus',true,'abirthInput')" :class="{hasVal:person.birthday,focus:personInfoFocus[index].birthIsFocus,error:personInfoFocus[index].birthError}">
                  <span class="span">出生日期</span>
                  <input type="text" @blur="focusFun(1,index,'birthIsFocus',false)">
                  <el-date-picker class="el-date" :id="'abirthInput'+index" value-format="yyyy-MM-dd" v-model="person.birthday" type="date"  @blur="focusFun(1,index,'birthIsFocus',false)" :picker-options="pickerBirthOption"> </el-date-picker>
                  <div class="u-error">{{personInfoFocus[index].birthError}} </div>
                </div>
                <div class="u-name" @click="spanClick(1,index,'expiredIsFocus',true,'acardExpiredInput')" :class="{hasVal:person.cardExpired,focus:personInfoFocus[index].expiredIsFocus,error:personInfoFocus[index].expiredError}">
                  <span class="span">证件有效期</span>
                  <input type="text" @blur="focusFun(1,index,'expiredIsFocus',false)">
                  <el-date-picker class="el-date" :id="'acardExpiredInput'+index" value-format="yyyy-MM-dd" v-model="person.cardExpired" type="date"  @blur="focusFun(1,index,'expiredIsFocus',false)" :picker-options="pickerExpiredOption"> </el-date-picker>
                  <div class="u-error">{{personInfoFocus[index].expiredError}} </div>
                </div>
              </div>
            </div>

            <div class="box people-Info">
              <h4>联系人</h4>
              <div class="input-border">
                <div class="u-name b-l allLine" @click="spanClick(3,'','fnIsFocus',true,'fnInput')" :class="{hasVal:connactInfo.contactName,focus:connactFoucs.fnIsFocus,error:connactFoucs.nameError}">
                  <span class="span">姓名</span>
                  <input type="text" id="fnInput" v-model="connactInfo.contactName" @change="inputChange(3,'','contactName','nameError','请输入正确的联系人姓名')" @blur="focusFun(3,'','fnIsFocus',false)">
                </div>
                <div class="u-error">{{connactFoucs.nameError}}</div>
              </div>
              <div class="input-border">
                <div class="u-name b-l u-cardType">
                  <span class="span span-text">中国境内区号</span>
                  <el-select v-model="connactInfo.phoneArea" disabled="disabled">
                    <el-option value="+86">+86</el-option>
                  </el-select>
                </div>
                <div class="u-name u-cardCode" @click="spanClick(3,'','phoneIsFocus',true,'phoneInput')" :class="{hasVal:connactInfo.contactPhone,focus:connactFoucs.phoneIsFocus,error:connactFoucs.phoneError}">
                  <span class="span">电话号码</span>
                  <input type="text" id="phoneInput" v-model="connactInfo.contactPhone" @change="inputChange(3,'','contactPhone','phoneError','请输入正确的手机号码')" @blur="focusFun(3,'','phoneIsFocus',false)">
                  <div class="u-error">{{connactFoucs.phoneError}}</div>
                </div>
              </div>
              <div class="input-border">
                <div class="u-name allLine" @click="spanClick(3,'','emailIsFocus',true,'emailInput')" :class="{hasVal:connactInfo.contactEmail,focus:connactFoucs.emailIsFocus,error:connactFoucs.emailError}">
                  <span class="span">电子邮箱{{landType=='TSDF' ? '（选填）' : '必填'}}</span>
                  <input type="text" id="emailInput" v-model="connactInfo.contactEmail" @change="inputChange(3,'','contactEmail','emailError','')" @blur="focusFun(3,'','emailIsFocus',false)">
                  <div class="u-error">{{connactFoucs.emailError}}</div>
                </div>
              </div>
            </div>

            <div class="box people-Info " style="padding-bottom: 20px">
              <h4 class="invoiceTip">报销凭证
                <i class="iconfont icon-wenhao o-icon mColor"></i>
                <toolTipWrap class="left">
                  <div class="refundText" slot="otherInfo" v-html="invoiceText">
                  </div>
                </toolTipWrap>
              </h4>
              <div class="invo-radio">
                <span class="span">是否需要开发票</span>
                <el-radio v-model="isNeedInvoice" label="1">是</el-radio>
                <el-radio v-model="isNeedInvoice" label="0">否</el-radio>
                <span class="error-msg">{{invoiceError}}</span>
              </div>
              <div class="invo-content" v-if="isNeedInvoice==1">
                <div class="text-wrap flex-box part-wrap">
                  <label for="">发票信息</label>
                  <p v-if="isInvoiceInfo">
                    <span>
                      <em>{{invoiceInfo.type==1 ? '纸质发票' : '电子发票'}}({{invoiceInfo.invoiceType | invoiceTypeFilter}})</em>
                      <em>{{invoiceInfo.title}}</em>
                      <em>{{invoiceInfo.taxpayerNumber}}</em>
                    </span>
                    <span v-if="invoiceInfo.type==1">
                      <em>{{invoiceInfo.recipientName}}</em>
                      <em>{{invoiceInfo.recipientPhone}}</em>
                      <em>{{invoiceInfo.province+invoiceInfo.city+invoiceInfo.area+invoiceInfo.address}}</em>
                    </span>
                  </p>
                  <a href="javascript:void(0)" class="edit" @click="popAlertVisible=true">编辑发票信息</a>
                </div>
              </div>
            </div>

            <p class="agreement">
              <span @click="isAgree=!isAgree">
                <i class="iconfont icon-duoxuankuang" :class="{'icon-xuanzhong2 active':isAgree}"></i>
                我已阅读、接受并同意遵守
              </span>
              <router-link to="/stipulation" target="_blank" style="color: #2894f2">预订须知</router-link>
            </p>
            <a href="javascript:void(0)" class="btn next-btn mBtn" :class="{checkPrice:loading || !isAgree}" @click="checkPricePackage"><i class="iconfont " :class="{'icon-loading1 icon-loading' : loading}"></i>下一步</a>
          </div>
          <!--产品详情-->
          <packageInfo :productDetail="productDetail" :hotelZhName="hotelZhName" :loading="loading" :adultNum="adultNum" :childNum="childNum" :perPrice="perPrice" :totalPrice="totalPrice"></packageInfo>
        </div>
      </div>
      <!--加载框-->
      <loadingWrap v-if="loading" :msg="msgTip"></loadingWrap>
      <!--发票-->
      <div class="popAlert" v-if="popAlertVisible">
        <div class="invoiceInfoBox">
          <i class="iconfont icon-guanbi1 iconClose" @click="closeAlert"></i>
          <div class="invoiceInfo-wrap">
            <invoiceInfo ref="invoiceInfo" :invoiceD="invoiceD" :invoiceDetail="invoiceDetail" @getInvoiceInfo="getInvoiceInfo($event)">
            </invoiceInfo>
          </div>
        </div>
      </div>

      <baggageInfo v-if="packageVisible" @closeBaggageInfo="packageVisible=false">
        <p  class="p1" slot="baggageText">
          {{baggageText}}
        </p>
      </baggageInfo>

    </div>
</template>
<script>
  import invoiceInfo from '../invoice/invoiceInfo.vue'
  import packageInfo from './packageInfo.vue'
  import baggageInfo from '../../components/common/baggageInfo'
    export default {
      name: '',
      data () {
          return {
            baggageText:'',
            packageVisible:false,
            invoiceText:invoiceText,
            refundText:refundText,
            landType:'TSDF',//1、TSDF国内  2、TSIF境外港澳台（港澳台通行证，护照）
            cardPlaceList:[{label:'中国大陆',val:'CN'},{label:'中国香港',val:'HK'},{label:'中国台湾',val:'TW'}],
            cardTypeList:[{label:'身份证',val:'NI'},{label:'护照',val:'PP'},{label:'港澳台通行证',val:'GAT'},{label:'其他',val:'OT'}],
            invoiceD:invoiceD,
            invoiceDetail:invoiceDetail,
            userInfo:'',
            ticketUserList:[],
            loading:false,
            params:this.$route.params.params,
            adultNum:0,
            childNum:0,
            form: {
              pDetailKey:this.$route.params.params,
            },
            peopleList:[],
            searchResult:'',
            productDetail:{
              outFlight:{},
              inFlight:{},
              hotel:{},
              price:''
            },
            totalPrice:0,
            perPrice:0,
            personInfos:[],
            personInfoFocus:[],
            connactFoucs:{
                fnIsFocus:false,phoneIsFocus:false,emailIsFocus:false,nameError:'',phoneError:'',emailError:''
            },
            connactInfo:{
              'firstName':'',
              'lastName':'',
              "contactName":"",
              "contactPhone":"",//电话
              "contactEmail":"",//邮箱
              "supplyPhone":"",//附加联系电话
              phoneArea:'+86'
            },
            isAgree:false,
            errorGrade :0,
            pickerBirthOption:{
              disabledDate(time) {
                return time.getTime() > Date.now();
              }
            },
            pickerExpiredOption:{
              disabledDate(time) {
                return time.getTime() < Date.now();
              }
            },
            msgTip:'',
            popAlertVisible:false,
            isNeedInvoice:"0", //0不需要发票，1需要发票
            isInvoiceInfo:false,
            invoiceInfo:{},
            invoiceError:'',
            hotelZhName:''
          }
      },
      components: {
        invoiceInfo,packageInfo,baggageInfo
      },
      methods: {
         checkPrice(){
            checkPricePackage(this.form.pDetailKey).then(data=>{

            });
         },
         closeAlert(){
            this.popAlertVisible=false;
            this.$refs.invoiceInfo.resetInvoice();
          },
          /*获取发票信息*/
          getInvoiceInfo(inv){
            this.popAlertVisible=false;
            this.isInvoiceInfo=true;
            this.invoiceInfo=inv;
            this.invoiceError='';
          },
          /*继续预订*/
          continueCreateOrder(){
            this.createOrder();
          },
          cardTypeChange(index){
            this.personInfoFocus[index].nameError='';
          },
          switchEn(index){
            this.personInfoFocus[index].cnSwitch=!this.personInfoFocus[index].cnSwitch ;
            this.personInfoFocus[index].nameError='';
          },
          /**出行人信息------------文本正则验证*/
          inputChange(type,index,name,error,errorMsg){
            if(type==1){
                if(!this.personInfos[index][name]){
                  this.personInfoFocus[index][error]=errorMsg;
                }else {
                  this.personInfoFocus[index][error]='';
                }
                if(!reg.CnReg.test(this.personInfos[index].nameFirst) && !this.personInfoFocus[index].cnSwitch){
                  this.personInfoFocus[index].nameError='请填写正确的中文姓名';
                  return false;
                }
                if(this.personInfoFocus[index].cnSwitch && this.personInfos[index].cardType!='NI' && (!reg.EnReg.test(this.personInfos[index].nameFirstPinyin) || !reg.EnReg.test(this.personInfos[index].nameLastPinyin))){
                  this.personInfoFocus[index][error]='请按照登机所持证件填写英文姓名或中文姓名拼音';
                  return false;
                }else {
                  this.personInfoFocus[index][error]='';
                }
                if(name=='cardNum' && this.personInfos[index].cardType=='NI'){
                  let isError=IdentityCodeValid(this.personInfos[index].cardNum);
                  if(isError){
                    this.personInfoFocus[index].vaildCode=true;
                    this.personInfoFocus[index].codeError='';
                  }else {
                    this.personInfoFocus[index].vaildCode=false;
                    this.personInfoFocus[index].codeError='请输入正确的证件号';
                  }
                }
            }else {
                if(!this.connactInfo[name]){
                  this.connactFoucs[error]=errorMsg;
                }else {
                  this.connactFoucs[error]='';
                }
            }
          },
          /**出行人信息-----------文本点击事件*/
          spanClick(type,index,name,isFlag,inputid){
            document.getElementById(inputid+index+'').focus();
            this.focusFun(type,index,name,isFlag);
          },
        /**出行人信息-----------文本焦点事件*/
          focusFun(type,index,name,isFlag){
            /*type 1成人，2儿童*/
            if(type==1){
              this.personInfoFocus[index][name]=isFlag;
            }else {
              this.connactFoucs[name]=isFlag;
            }
          },
          /**出行人信息------------验证*/
          vaildTravelInfo(){
              for (let i=0;i<this.personInfos.length;i++){
                this.errorGrade=1;
                if(this.landType=='TSDF'){ /*境内*/
                  if(this.personInfoFocus[i].cnSwitch){
                    this.personInfos[i].nameFirst='';
                    this.personInfos[i].nameLast='';
                  }else {
                    this.personInfos[i].nameFirstPinyin='';
                    this.personInfos[i].nameLastPinyin='';
                  }

                  if (this.personInfos[i].cardType =='NI'){ //身份证
                    if(!reg.CnReg.test(this.personInfos[i].nameFirst)){
                      this.personInfoFocus[i].nameError='请填写正确的中文姓名';
                      return false;
                    }else {
                      this.personInfoFocus[i].nameError='';
                    }
                    this.personInfos[i].birthday='';
                    this.personInfos[i].sex='0';
                    this.personInfos[i].cardExpired='';
                  }else {  //非身份证
                    if (!this.personInfoFocus[i].cnSwitch){  //中文
                      if(!reg.CnReg.test(this.personInfos[i].nameFirst)){
                        this.personInfoFocus[i].nameError='请填写正确的中文姓名';
                        return false;
                      }else {
                        this.personInfoFocus[i].nameError='';
                      }
                    }else {
                      if(!reg.EnReg.test(this.personInfos[i].nameFirstPinyin) || !reg.EnReg.test(this.personInfos[i].nameLastPinyin)){
                        this.personInfoFocus[i].nameError='请按照登机所持证件填写英文姓名或中文姓名拼音';
                        return false;
                      }else {
                        this.personInfoFocus[i].nameError='';
                      }
                    }
                  }

                }else { /*境外、港澳台*/
                  if(!reg.EnReg.test(this.personInfos[i].nameFirstPinyin) || !reg.EnReg.test(this.personInfos[i].nameLastPinyin)){
                    this.personInfoFocus[i].enNameError='请按照登机所持证件填写英文姓名或中文姓名拼音';
                    return false;
                  }else {
                    this.personInfoFocus[i].enNameError='';
                  }
                }

                if(!this.personInfos[i].cardType){
                  this.personInfoFocus[i].codeError='请选择';
                }
                if(!this.personInfos[i].cardNum || (this.personInfos[i].cardType=='NI' && !IdentityCodeValid(this.personInfos[i].cardNum))){
                  this.personInfoFocus[i].codeError='请输入正确的证件号码';
                  return false;
                }else {
                  this.personInfoFocus[i].codeError='';
                }

                if(this.personInfos[i].cardType!= 'NI'){
                  if(this.personInfos[i].sex==0){
                    this.personInfoFocus[i].sexError='请选择性别';
                    return false;
                  }else {
                    this.personInfoFocus[i].sexError='';
                  }

                  if(!this.personInfos[i].birthday){
                    this.personInfoFocus[i].birthError='请选择正确的出生日期';
                    return false;
                  }else {
                    this.personInfoFocus[i].birthError='';
                  }
                  if(this.personInfos[i].cardType!= 'NI' && !this.personInfos[i].cardExpired){
                    this.personInfoFocus[i].expiredError='请选择正确的证件有效期';
                    return false;
                  }else {
                    this.personInfoFocus[i].expiredError='';
                  }
                }
                this.personInfos[i].nameLast='';
              }
              if(!this.connactInfo.contactName || this.connactInfo.contactName.length<2){
                this.connactFoucs.nameError='请输入正确的联系人姓名';
                this.errorGrade=2;
                return false;
              }
              if(!this.connactInfo.contactPhone){
                this.connactFoucs.phoneError='请输入正确的联系人手机号';
                this.errorGrade=2;
                return false;
              }
               /*境外邮箱必填*/
              if(this.landType=='TSIF' && !this.connactInfo.contactEmail){
                  this.connactFoucs.emailError='请输入正确的电子邮箱';
                  this.errorGrade=2;
                  return false;
              }

              if(this.isNeedInvoice==1 && !this.isInvoiceInfo){ //0不需要发票，1需要发票
                this.invoiceError='请完整填写发票信息';
                this.errorGrade=2;
                return false;
              }

              return true;
          },
          /*酒店详情*/
          getHotelDetail(){
            getHotelDetail(this.productDetail.hotel.hotelId,this.productDetail.hotel.provider).then(data=>{
              if(data.returnCode==200){
                this.hotelZhName=data.data.hotelName;
              }
            });
          },
          /**获取产品详情*/
          getResult(){
            this.loading=true;
            this.form.isAgain="false";
            packageDetail(this.form).then(data=>{
              this.loading=false;
              if(data.returnCode==200){

                this.searchResult=data.data;
                this.productDetail=data.data;
                this.totalPrice=parseFloat(data.data.price.amount);
                this.peopleList=data.data.people;
                this.perPrice=parseFloat(data.data.price.amount/this.peopleList.length);
                Object.assign(this.productDetail,initBackResults(this.productDetail));

                this.landType=data.data.outFlight.isInternational;

                this.personInfoInit();
                this.getHotelDetail();
                this.getTicketUserList();
                if(airName=='west'){
                  this.baggageInfoFun(data);
                }
              }else{
                this.$alert('<strong>很抱歉，由于您停留时间太长，资源发生变化，请重新选择</strong>', {
                  dangerouslyUseHTMLString: true,
                  distinguishCancelAndClose: true,
                  showClose:false,
                  confirmButtonText:'重新选择',
                  center:true,
                  beforeClose: (action, instance, done) => {
                    done();
                    location.href="/";
                  }
                });
              }
            })
          },

          baggageInfoFun(data){
            var isOutBaggage=false;
            var isInBaggage=false;
            let hasSpaceText='Y,B,H,K,L,M,X,G.W.J,C,D';
            let outBookingClass=data.data.outFlight.bookingClass;
            let inBookingClass=data.data.inFlight.bookingClass;
            if(data.data.outFlight && (hasSpaceText.indexOf(outBookingClass.charAt(0))>0)){
              isOutBaggage=true;
            }
            if(data.data.inFlight && hasSpaceText.indexOf(inBookingClass.charAt(0))>0){
              isInBaggage=true;
            }
            if(!isOutBaggage && isInBaggage){
              this.packageVisible=true;
              this.baggageText='您的去程机票未包含托运行李';
            }else if(isOutBaggage && !isInBaggage){
              this.packageVisible=true;
              this.baggageText='您的返程机票未包含托运行李';
            }else if(!isOutBaggage && !isInBaggage){
              this.packageVisible=true;
              this.baggageText='您的机票未包含托运行李';
            }else {
              this.packageVisible=false;
            }
          },
          /*预订*/
          checkPricePackage(){
            let _this=this;
            if(this.isAgree && !this.loading){
              if(this.vaildTravelInfo()){
                this.loading=true;
                this.msgTip='验证信息中...';
                validCertificates(this.personInfos).then(data=>{
                  if(data.returnCode==200){
                    this.createOrder();
                  }else {
                    this.loading=false;
                    for(var i=0; i<data.data.length;i++){
                        if(!data.data[i].iserror){
                            if(i<this.personInfoFocus.length){
                              this.personInfoFocus[i].nameError='请输入与证件相匹配的姓名';
                              this.personInfoFocus[i].codeError=JSON.parse(data.data[i].msg).returnMsg;
                            }
                        }
                    }
                  }
                });

              }else {
                this.goTop();
                this.loading=false;
              }
            }
          },
          msgAlert(){
            this.$alert('<strong>很抱歉，该产品已售罄,请重新选择</strong>', {
              dangerouslyUseHTMLString: true,
              distinguishCancelAndClose: true,
              showClose:false,
              confirmButtonText:'返回首页',
              center:true,
              beforeClose: (action, instance, done) => {
                done();
                location.href="/";
              }
            });
          },
          /*创建订单*/
          createOrder(){
            let invoiceId='';
            if(this.isNeedInvoice==1){ //0不需要发票，1需要发票
              invoiceId=this.invoiceInfo.id
            }
            let orderParam={
              "customer":this.connactInfo,
              pDetailKey:this.form.pDetailKey,
              "orderSource":'0', // 0 PC,1 wx
              "persons":this.personInfos,
              "sessionId":'',
              invoiceId:invoiceId,  //发票Id
            }
            this.msgTip='预订中...';
            createOrder(orderParam).then(data=>{
              this.loading=false;
              if(data.returnCode==200){
                this.$router.push("/pay/"+data.data.orderNo);
              }else {
                this.msgAlert();
              }
            });
          },
          /*回到顶部*/
          goTop(){
              let _this=this;
            let timer = requestAnimationFrame(function fn(){
              var oTop = document.body.scrollTop || document.documentElement.scrollTop;
              if(oTop > 300 && _this.errorGrade<2){
                scrollBy(0,-30);
                timer = requestAnimationFrame(fn);
              }else{
                cancelAnimationFrame(timer);
              }
            });
          },
          /*出行人信息*/
          personInfoInit(){
            if(this.landType=='TSDF'){
              this.cardTypeList=[{label:'身份证',val:'NI'},{label:'护照',val:'PP'},{label:'港澳台通行证',val:'GAT'},{label:'其他',val:'OT'}];
            }else{
              this.cardTypeList=[{label:'护照',val:'PP'},{label:'港澳台通行证',val:'GAT'},{label:'其他',val:'OT'}];
            }

            let initCardType=this.cardTypeList[0].val ;
            for (var i =0; i<this.peopleList.length;i++){
              if(this.peopleList[i].ageType=="0"){
                this.personInfos.push({"nameFirstPinyin":'',"nameLastPinyin":'',"nameFirst":'',"nameLast":'',"name":'',"cardType":initCardType,"cardNum":'',"ageType":0,"birthday":"","sex":0,"cardExpired":"", "cardissuePlace":"CN","editFlag":false,"userId":0});
                this.personInfoFocus.push({cnSwitch:false,cnIsFocus:false,fnIsFocus:false,lnIsFocus:false,codeIsFocus:false,cDateIsFocus:false,birthIsFocus:false,expiredIsFocus:false,nameError:'',enNameError:'',codeError:'',dateError:'',sexError:'',vaildCode:false,birthError:'',expiredError:''});
                this.adultNum++;
              }else{
                this.personInfos.push({"nameFirstPinyin":'',"nameLastPinyin":'',"nameFirst":'',"nameLast":'',"name":'',"cardType":initCardType,"cardNum":'',"ageType":1,"birthday":"","sex":0,"cardExpired":"", "cardissuePlace":"CN","editFlag":false,"userId":0});
                this.personInfoFocus.push({cnSwitch:false,cnIsFocus:false,fnIsFocus:false,lnIsFocus:false,codeIsFocus:false,cDateIsFocus:false,birthIsFocus:false,expiredIsFocus:false,nameError:'',enNameError:'',codeError:'',dateError:'',sexError:'',vaildCode:false,birthError:'',expiredError:''});
                this.childNum++;
              }
            }
          },

          /*获取常用出行人信息*/
          getTicketUserList(){
            var param={
              "page":1,//页码
              "param":{
                "userId":'',//登录用户id
                id:'0'
              }
            };
            getTicketUserList(param).then(data=> {
              if (data.returnCode == 200 && data.data.list.length>0) {
                this.ticketUserList=data.data.list;
                this.ticketUserList.forEach(item=>{
                  item.isChoose=false;
                  if(!item.nameFirst){
                    item.name=item.nameFirstPinyin+item.nameLastPinyin;
                  }else {
                    item.name=item.nameFirst+item.nameLast;
                  }
                });
              }
            });
          },

          chooseTUser2(user){
            if(this.landType=="TSIF" && user.cardType=='NI'){ //非境内
                return;
            }
            user.isChoose=!user.isChoose;
            if(user.cardType=='NI'){
              var age=GetAge(user.cardNum)
            }else {
              var age=getBirthAge(getdate(user.birthday));
            }
            if(user.isChoose){
              let ageType=age<18?1:0;
              let chooseFlag=false;
              for (var i =0; i < this.personInfos.length; i++) {
                 let item=this.personInfos[i];
                 if(ageType===item.ageType && item.userId===0){
                  item.birthday=user.birthday;
                  item.sex=user.sex;
                  item.name=user.nameFirst+user.nameLast;
                  item.nameFirst=user.nameFirst+user.nameLast;
                  item.nameLast='';
                  item.nameFirstPinyin=user.nameFirstPinyin;
                  item.nameLastPinyin=user.nameLastPinyin;
                  if(item.nameFirst){
                     this.personInfoFocus[i].cnSwitch=false ;
                  }else {
                     this.personInfoFocus[i].cnSwitch=true;
                  }
                  item.cardType=user.cardType;
                  item.cardNum=user.cardNum;
                  item.cardissuePlace=user.cardissuePlace || 'CN';
                  item.cardExpired=user.cardExpired;
                  item.userId=user.id;
                  chooseFlag=true;
                  return;
                }
              }
              if(!chooseFlag){
                user.isChoose=!user.isChoose;
              }
            }else {
              for (var i =0; i < this.personInfos.length; i++) {
                 let item=this.personInfos[i];
                 if(item.userId===user.id){
                  item.birthday='';
                  item.name='';
                  item.nameFirst='';
                  item.nameLast='';
                  item.nameFirstPinyin='';
                  item.nameLastPinyin='';
                  this.personInfoFocus[i].cnSwitch=false ;
                  item.cardNum='';
                  item.cardissuePlace='CN';
                   item.userId=0;
                   item.sex=0;
                   item.cardExpired='';
                  return;
                }
              }
            }
          },
          /**处理地址栏参数*/
          dealUrlParams(){
            this.loading=true;
            this.msgTip='';
            this.getResult();
            this.checkPrice();
          },
        },
      mounted(){
        this.dealUrlParams();
        getUserMess().then(data=>{
          if(data.returnCode==200){
            this.userInfo=data.data;
            this.connactInfo.contactPhone=data.data.phone;
          }else {
            location.href="/login?redirectUrl="+window.location.href;
          }
        });
      },
      watch:{
        personInfos:{
          handler(newValue, oldValue){
               for (var i =0; i <newValue.length; i++) {
                  let newItem=newValue[i];
                for(var j =0; j <this.ticketUserList.length; j++){
                  let oldItem=this.ticketUserList[j];
                  if(newItem.userId!=oldItem.id){
                    continue;
                  }
                  let editFlag=false;
                   if( newItem.birthday!=oldItem.birthday){
                    newItem.editFlag=true;
                    editFlag=true;
                  }
                  if( newItem.name!=(oldItem.nameFirst+oldItem.nameLast)){
                    newItem.editFlag=true;
                    editFlag=true;
                  }
                  if( newItem.nameFirstPinyin!=oldItem.nameFirstPinyin || newItem.nameLastPinyin!=oldItem.nameLastPinyin){
                    newItem.editFlag=true;
                    editFlag=true;
                  }
                  if( newItem.cardType!=oldItem.cardType){
                    newItem.editFlag=true;
                    editFlag=true;
                  }
                  if( newItem.cardNum!=oldItem.cardNum){
                    newItem.editFlag=true;
                    editFlag=true;
                  }
                  if( newItem.cardissuePlace!=oldItem.cardissuePlace){
                    newItem.editFlag=true;
                    editFlag=true;
                  }
                  if( newItem.sex!=oldItem.sex){
                    newItem.editFlag=true;
                    editFlag=true;
                  }
                  if(editFlag){
                    this.ticketUserList[j].isChoose=false;
                  }else{
                     this.ticketUserList[j].isChoose=true;
                  }

                }
               }
            },
             deep: true
          },
        isNeedInvoice:{
          handler(newValue, oldValue){
              if(newValue == "0"){
                  this.invoiceError="";
              }
          }
        }
      },
      filters:{
        invoiceTypeFilter:function (val) {
          let typeText='';
          if(val==0){//发票类型 0：个人 1：企业 2：非企业
            typeText='个人';
          }else if(val==1){
            typeText='企业';
          }else {
            typeText='非企业';
          }
          return typeText;
        }
      }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
@import "../../assets/stylus/colorConfig.styl"
@import "../product/product.styl"
.user-info{
  display inline-block
  width 100%
  .box{
    background #fff
    box-shadow 1px 1px 24px rgba(166, 166, 167, 0.25)
  }
  .user-box{
    display inline-block
    width 780px
    color mainTitleColor
    .user-title{
      font-weight bold
      font-size 24px
      color mainTitleColor
    }
    .ticket-wrap{
      margin 15px 0 20px
      p{
        margin-bottom 8px
        font-size 14px
        color #6d8493
      }
      span{
        margin-right 25px
        font-size 12px
        color subheadColor
        cursor pointer
        i{
          font-size 13px
          margin-right 6px
        }
        .active{
          color #26a2ff
        }
      }
    }
    .people-Info{
      margin-bottom 20px
      padding 20px 20px 0px
      h4{
        margin-bottom 25px
        font-weight bold
        font-size 18px
        color mainTitleColor
      }
      .people-select{
        width 140px
        height 36px
        border-radius 2px
      }
      .tip{
        padding-bottom 25px
        font-size 12px
        color #f1090a
      }
      .input-border{
        position relative
        display inline-block
        width 460px
        height 40px
        margin-bottom 30px
        border 1px solid border_color
        .line-wrap{
          display block
          height 40px
        }
        .u-error{
          display inline-block
          position absolute
          bottom -20px
          left 0
          font-size 14px
          color red
          &.u-name-error{
            width 180px
            left 550px
          }
        }
        .b-l{
          border-right 1px solid border_color
        }
        .u-name{
          position relative
          float left
          width 230px
          height 40px
          box-sizing border-box
          &.allLine{
            width 100%
          }
          &.hasVal{
            span{
              top -12px
              background #fff
              color inherit
            }
          }
          &.focus,&.error{
            span{
              top -12px
              background #fff
              color mainColor
            }
            input{
                box-shadow 0 0 1px mainColor
            }
          }

          .label-sex{
            display inline-block
            margin-top 12px
            margin-left 17px
            cursor pointer
          }
        }
        .u-cardType{
          width 150px
        }
        .u-cardCode,.u-date{
          width 310px
        }
        .span{
          position absolute
          left 8px
          top 10px
          padding 4px 10px
          font-size 12px
          color subcontentColor
          transition all .2s
          &.span-text{
            top -12px
            background #fff
            color contentColor
          }
        }
        input[type="text"]{
          width 100%
          height 100%
          padding 0px 18px
          box-sizing border-box
          border none
          outline none
        }
        select{
          width 100%
          height 38px
          padding 0px 10px
          box-sizing border-box
          border none
          outline none
          background transparent
        }
      }
      .en_cn_change{
        position absolute
        display inline-block
        left 480px
        top 5px
        width 60px
        height 26px
        overflow hidden
        padding-left 10px
        vertical-align middle
        background #ffffff
        em{
          float left
          width 28px
          line-height 24px
          border 1px solid #229bff
          font-style normal
          font-size 13px
          text-align center
          color #229bff
          cursor pointer
          &.on{
            background #2c9cfc
            color #ffffff
          }
        }
      }
      .invo-radio{
        font-size 13px
        .span{
          margin-right 20px
        }
        .error-msg{
          margin-left 30px
          color red
        }
      }
      .invo-content{
        font-size 13px
        .text-wrap.part-wrap{
          padding 10px 0
          justify-content flex-start
        }
        p{
          max-width 240px
          margin-right 30px
        }
        .edit{
          color blueColor
        }
      }
    }
    .agreement{
      font-size 12px
      color #6d8493
      span{
        cursor pointer
      }
      i{
        margin-right 5px
        &.active{
          color #26a2ff
        }
      }
    }
    .next-btn{
      display block
      width 300px
      height 40px
      line-height 40px
      margin 50px auto
      border-radius 2px
      &.checkPrice{
        opacity .5
        cursor: not-allowed
      }
    }
  }
  .invoiceTip{
    position relative
    display inline-block
    .tool-tip{
      width 360px
      left 100px
      top -30px
      display none
      em{
        display block
        margin-bottom 8px;
      }
    }
    &:hover{
      .tool-tip{
        display block
      }
    }
    .o-icon{
      cursor pointer
    }
  }
  .border-line{
    border 1px solid border_color
  }
}
.progress-wrap{
  text-align center
  .progress-bar{
    display inline-block
    width 600px
    margin 35px auto
    .bar-cell{
      float left
      display inline-block
      width 160px
      label{
        display block
        margin-top 22px
        margin-left -20px
        font-size 13px
        color #6d8493
      }
      span{
        position relative
        display block
        width 100%
        height 4px
        background #e5e5e5
        i{
          position absolute
          width 24px
          height 24px
          font-size 24px
          top -11px
          left 0
          background #f8f8f8
          color #e5e5e5
          z-index 1
        }
      }
      &.active{
        span{
          background #2894f2
          i{
            color #2894f2
          }
        }
        label{
          color #2894f2
        }
      }
      &.second{
        width 240px
        text-align center
        span{
          i{
            left 50%
            margin-left -12px
          }
        }
        label{
          margin-left 0px
        }
      }
      &.end{
        text-align right
        span{
          i{
            left auto
            right 0
          }
        }
        label{
          margin-left 0px
          margin-right -20px
        }
      }
    }
  }
}
.popAlert{
  z-index 2000
}
.invoiceInfoBox{
  position absolute
  width 900px
  height 600px
  max-width 100%
  max-height 90%
  left 50%
  top 47%
  transform translate(-50%,-50%)
  .invoiceInfo-wrap{
    width 100%
    height 100%
    overflow-y auto
  }
  .iconClose{
    position absolute
    right -24px
    top -24px
    z-index 10
    font-size 24px
    color #ffffff
    cursor pointer
  }
}
</style>

