<style>
  .page_addVisa .btmTitle {
    padding: 0 10px;
    margin: 20px 0 20px 0;
    border-left: 3px solid #E95252;
    font-size: 14px;
    color: #000000;
  }

  .page_addVisa .el-date-editor .el-range-separator {
    padding: 0
  }

  .el-select .el-input {
    height: 34px;
  }

  .h34 .el-range__icon,
  .h34 .el-range-separator {
    line-height: 29px;
  }

  ._flex {
    display: flex
  }

  ._Apply_item_form {
    padding: 15px 30px;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    min-width: 1420px;
    background-color: white;
    margin-bottom: 15px
  }

  ._Apply_item>p {
    font-weight: bold;
    font-size: 12px
  }

  ._Apply_item>p>.icon-guanbi {
    float: right;
    cursor: pointer;
  }

  ._Apply_item ul li {
    float: left;
  }

  ._mar {
    display: flex;
    line-height: 50px;
  }

  ._mar>div {
    margin-right: 5px
  }

  ._addPp {
    margin-bottom: 20px
  }

  ._addPp>.normalBtn {
    width: auto;
  }

  ._addPp ._addNum {
    width: 60px;
  }

  .page_addVisa ._scrollbar {
    overflow: auto
  }

  .page_addVisa ._scrollbar::-webkit-scrollbar {
    width: 4px;
    height: 8px;
  }

  .page_addVisa ._scrollbar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    background: #EDEDED;
  }

  .page_addVisa ._scrollbar::-webkit-scrollbar-thumb {
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
    background: #c9c9c9;
  }

  ._EconomicCapability {
    line-height: 22px;
    padding-left: 60px
  }

  ._EconomicCapability span {
    display: inline-block;
    padding: 2px 4px;
    border: 1px solid #c0c4cc;
    margin: 1px;
    cursor: pointer;
    color: #c0c4cc;
    font-size: 12px;
    border-radius: 4px;
  }

  ._Apply_item .el-form-item,
  ._Ec_Box .el-form-item {
    width: 450px;
    float: left;
  }

  ._Apply_item .el-form-item._AddressDetail {
    width: 77%;
  }

  .page_addVisa textarea {
    resize: none
  }

  .page_addVisa ._EconomicCapability span._active {
    border: 1px solid rgb(123, 194, 245);
    color: rgb(123, 194, 245)
  }

  .page_addVisa .upBtnList {
    margin: 20px 0 30px 0;
  }

  ._trip_details {
    margin-top: 20px;
    background-color: white
  }

  ._tr_tit {
    font-weight: normal;
    font-size: 18px;
    text-align: center;
    padding: 10px 0px;
  }

  ._trip_details .icon-bianji-smal {
    cursor: pointer;
  }

  ._timeOver input {
    color: red !important
  }

  .page_addVisa ._trip_details .singeRowTable tr td {
    padding: 0 10px;
  }

</style>
<template>
  <div class="page_addVisa" v-loading="loading">
    <el-form :model="addMsg" ref="addMsg" :rules="rules" label-width="150px" class="_form clearfix">
      <p class="btmTitle">{{$t('visaT.cxjihua')}}</p>
      <el-form-item :label="$t('visa.v_tuanhao')" clearable prop="OrderId">
        <el-input v-model="addMsg.OrderId" type="text" size=mini class="w230" :disabled="isDisabled">
          <el-button slot="append" @click="searchHistory" :disabled="isDisabled">{{$t('pub.searchBtn')}}</el-button>
        </el-input>
      </el-form-item>
      <!--<el-form-item label="申请类型" clearable prop="ApplyForType">
                <el-select v-model="addMsg.ApplyForType" size=mini class="w230">
                    <el-option
                        v-for="item in VisaApplyForTypeEnum"
                        :key="item.Id"
                        :label="item.Name"
                        :value="item.Id">
                    </el-option>
                </el-select>
            </el-form-item>-->
      <el-form-item :label="$t('visaT.sqneirong')" clearable prop="SignStatus">
        <el-select v-model="addMsg.SignStatus" size=mini class="w230" :disabled="isDisabled">
          <el-option :label="$t('visa.v_gvisa')" value='1'>
          </el-option>
          <el-option :label="$t('visa.v_tvisa')" value='2'>
          </el-option>
        </el-select>
      </el-form-item>
      <div class="_flex">
        <el-form-item :label="$t('visaT.crjtime')" prop="value6">
          <el-date-picker class="h34" @input="timeAdd()" v-model="addMsg.value6" type="daterange"
            value-format="yyyy-MM-dd" :range-separator="$t('restaurant.res_To')"
            :start-placeholder="$t('visaT.chujingtime')" :end-placeholder="$t('visaT.rujingtime')">
          </el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('visaT.Regularflights')">
          <el-select v-model="regularFlights" @change="regularChange" size=mini class="w230">
            <el-option :label="$t('pub.pleaseSel')" value='-1'></el-option>
            <el-option v-for="(item, index) in regularFlightsList" :key="index" :label='item.Name' :value='index'>
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="_flex">
        <el-form-item :label="$t('visaT.cfAirport')" prop="DepartAirport">
          <el-select v-model="addMsg.DepartAirport" filterable size=mini class="w230"
            @change="flightRevert(1);getFilghtForAir(1)">
            <el-option v-for="item in ChinaAirportList" :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('visaT.Portofentry')" prop="EnterCountryPort">
          <el-select v-model="addMsg.EnterCountryPort" filterable size=mini class="w230"
            @change="flightRevert(1);getFilghtForAir(1)">
            <el-option v-for="item in JapanAirportList" :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('visaT.Inboundflights')" prop="EnterCountryFlight">
          <el-select v-model="addMsg.EnterCountryFlight" filterable size=mini class="w230">
            <el-option v-for="item in FilghtForAirIn" :key="item.ID" :label="item.Flight_number" :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="_flex">
        <el-form-item :label="$t('visaT.fhjichang')" prop="GetBackAirport">
          <el-select v-model="addMsg.GetBackAirport" filterable size=mini class="w230"
            @change="flightRevert(2);getFilghtForAir(2)">
            <el-option v-for="item in ChinaAirportList" :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('visaT.Exitport')" prop="LeaveCountryPort">
          <el-select v-model="addMsg.LeaveCountryPort" filterable size=mini class="w230"
            @change="flightRevert(2);getFilghtForAir(2)">
            <el-option v-for="item in JapanAirportList" :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('visaT.Outboundflight')" prop="LeaveCountryFlight">
          <el-select v-model="addMsg.LeaveCountryFlight" filterable size=mini class="w230">
            <el-option v-for="item in FilghtForAirOut" :key="item.ID" :label="item.Flight_number" :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <el-form-item :label="$t('visaT.Orderremark')">
        <el-input v-model="addMsg.OrderRemarks" type="textarea" maxlength="500" size=mini class="w400"></el-input>
      </el-form-item>
      <el-form-item :label="$t('hotel.hotel_remark')">
        <el-input v-model="addMsg.Remarks" type="textarea" maxlength="500" size=mini class="w400"></el-input>
      </el-form-item>
    </el-form>
    <p class="btmTitle">
      {{$t('visaT.Applicantxx')}}({{$t('hotel.hotel_totalRoom')}}{{addMsg.PeopleList.length}}{{$t('hotel.hotel_people')}})
    </p>
    <div class="_scrollbar">
      <div v-for="(item,index) in addMsg.PeopleList">
        <el-form :model="item" ref="item" :rules="rules" label-width="160px" class="_Apply_item_form clearfix">
          <div class="_Apply_item clearfix">
            <p>{{$t('visaT.Applicantxx')}}{{index+1}} <i v-show="showIS" class="iconfont icon-guanbi"
                @click="deleteThis(index)"></i> </p>
            <el-form-item :label="$t('visa.v_suoshudingdan')" prop="OrderId">
              <el-input v-model="item.OrderId" type="text" size=mini class="w230" maxlength="6"
                :placeholder="$t('visaT.qsrddh')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('visaT.Chinesesurname')" prop="SurName">
              <el-input v-model="item.SurName" @change="Transformation(item.SurName,'SurName',index)" type="text"
                size=mini class="w230" maxlength="20" :placeholder="$t('visaT.peChinese')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('admin.admin_cnName')" prop="Name">
              <el-input v-model="item.Name" type="text" @change="Transformation(item.Name,'Name',index)" size=mini
                class="w230" maxlength="20" :placeholder="$t('visaT.peChinese')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('system.table_sex')" prop="Sex">
              <el-select v-model="item.Sex" filterable size=mini class="w230">
                <el-option key="1" :label="$t('visaT.boy')" value="1"> </el-option>
                <el-option key="2" :label="$t('visaT.girl')" value="2"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('visaT.Englishsurname')" prop="ESurName">
              <el-input v-model="item.ESurName" type="text" size=mini class="w230" maxlength="20"
                :placeholder="$t('visaT.peEnglish')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('system.table_ENname')" prop="EName">
              <el-input v-model="item.EName" type="text" size=mini class="w230" maxlength="20"
                :placeholder="$t('visaT.peEnglish')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('admin.admin_BirthDate')" prop="Birthday">
              <el-date-picker class="w230" v-model="item.Birthday" value-format="yyyy-MM-dd" type="date"
                :placeholder="$t('admin.admin_choDate')">
              </el-date-picker>
            </el-form-item>
            <el-form-item :label="$t('system.table_Passport')" prop="PassportNo">
              <el-input v-model="item.PassportNo" type="text" size=mini class="w230" maxlength="20"
                :placeholder="$t('visaT.ptxPassportNo')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('visaT.PassportNoadder')" prop="PassportAddress">
              <el-input v-model="item.PassportAddress" type="text" size=mini class="w230" maxlength="100"
                :placeholder="$t('visaT.Pleasefillin')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('visaT.PassportNogq')" prop="PassportExpiry">
              <el-date-picker @change="dateTimeReg(item.PassportExpiry,index)" class="w230"
                :class="item.TimeOver?'_timeOver':''" v-model="item.PassportExpiry" value-format="yyyy-MM-dd"
                type="date" :placeholder="$t('admin.admin_choDate')">
              </el-date-picker>
            </el-form-item>
            <el-form-item :label="$t('visaT.nationality')" prop="Nationality">
              <el-select v-model="item.Nationality" filterable size=mini class="w230">
                <el-option v-for="item in countryList" :key="item.ID" :label="item.Name" :value="item.ID">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('visaT.Marriage')" prop="Marriage">
              <el-select v-model="item.Marriage" filterable size=mini class="w230">
                <el-option v-for="item in MarriageType" :key="item.Id" :label="item.Name" :value="item.Id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('visa.v_jtjzd')" prop="Address">
              <el-input v-model="item.Address" type="text" size=mini class="w230" maxlength="6"
                :placeholder="$t('visaT.fillprovince')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('visaT.jtxxdz')" prop="AddressDetail" class="_AddressDetail">
              <el-input v-model="item.AddressDetail" type="text" size=mini maxlength="200"
                :placeholder="$t('visaT.Pleasefillin')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('visaT.authentication')" prop="IdentityType">
              <el-select v-model="item.IdentityType" filterable size=mini class="w230" v-if="item.IdentityType==''">
                <el-option v-for="item in VisaIdentityTypeEnum" :key="item.Id" :label="item.Name" :value="item.Name">
                </el-option>
              </el-select>
              <el-input v-else v-model="item.IdentityType" type="text" size=mini class="w230" maxlength="50"></el-input>
            </el-form-item>
            <el-form-item :label="$t('visaT.Exitrecord')" prop="HistoryRecord">
              <el-select v-model="item.HistoryRecord" filterable size=mini class="w230" v-if="item.HistoryRecord==''">
                <el-option v-for="item in VisaDeparturesType" :key="item.Id" :label="item.Name" :value="item.Name">
                </el-option>
              </el-select>
              <el-input v-else v-model="item.HistoryRecord" type="text" size=mini class="w230" maxlength="50">
              </el-input>
              <el-checkbox v-model="item.IsRecommend" :true-label='1' :false-label='2'>{{$t('visaT.Recommend')}}
              </el-checkbox>
            </el-form-item>
            <el-form-item :label="$t('visaT.post')" prop="Duty">
              <el-select v-model="item.Duty" filterable size=mini class="w230" v-if="item.Duty==''">
                <el-option v-for="item in VisaDutyTypeEnum" :key="item.Id" :label="item.Name" :value="item.Name">
                </el-option>
              </el-select>
              <el-input v-else v-model="item.Duty" type="text" size=mini class="w230" maxlength="50"></el-input>
            </el-form-item>
            <el-form-item :label="$t('hotel.hotel_remark')">
              <el-input style="height:30px" v-model="item.Remarks" type="textarea" size=mini class="w230"
                maxlength="1000"></el-input>
            </el-form-item>
            <el-form-item :label="$t('visaT.student')">
              <el-checkbox v-model="item.IsHightSchool" :true-label='1' :false-label='2'></el-checkbox>
            </el-form-item>
            <el-form-item :label="$t('system.table_rank')" prop="Sort">
              <el-input v-model="item.Sort" @keyup.native="checkInteger(item,'Sort')" type="text" size=mini class="w230"
                maxlength="6" :placeholder="$t('visaT.qtxrank')"></el-input>
            </el-form-item>
            <el-form-item label="在职证明" prop="IncumbencyCertificationType">
              <el-select v-model="item.IncumbencyCertificationType" placeholder="请选择">
                <el-option label="不选" :value="0"></el-option>
                <el-option label="已确认为真" :value="1"></el-option>
                <el-option label="已确认为假" :value="2"></el-option>
                <el-option label="无法确认" :value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label=" 银行流水" prop="AccountStatementType">
              <el-select v-model="item.AccountStatementType" placeholder="请选择">
                <el-option label="不选" :value="0"></el-option>
                <el-option label="已确认为真" :value="1"></el-option>
                <el-option label="已确认为假" :value="2"></el-option>
                <el-option label="无法确认" :value="3"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="_Ec_Box clearfix">
            <template v-for="(Ec,Eci) in item.EconomicCapabilityS">
              <el-form-item :label="Ec.Name" v-if="Ec.isShow">
                <el-input v-model="Ec.Content" type="text" size=mini class="w230" maxlength="50"></el-input>
              </el-form-item>
            </template>
          </div>
          <div class="_EconomicCapability">
            <span v-for="(Cap,Cindex) in item.EconomicCapabilityS" @click="addEconomicCapability(Cap.ID,Cindex,index)"
              :class="Cap.isShow==true?'_active':''">{{Cap.Name}}</span>
          </div>
        </el-form>
      </div>
      <div class="_addPp">
        <button class="normalBtn" type="button" @click="addPp()"> <i class="iconfont icon-bianji-smal"></i>
          {{$t('visaT.addApplicant')}}</button>
        <el-input type="text" class="_addNum" @blur="regAddNum()" v-model="addNum"></el-input>
        <el-checkbox v-model="copyInfo">{{$t('visaT.rapplicantxx')}}</el-checkbox>
      </div>
    </div>
    <div class="_trip_details" v-if="addMsg.TravelPlanList.length>0">
      <P class="_tr_tit">{{$t('visaT.rbxcjh')}}（{{addMsg.TravelPlanList.length}}{{$t('hotel.hotel_day')}}）</P>
      <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <th width=250>{{$t('pub.date')}}</th>
          <!-- <th width=100>城市</th> -->
          <th width=400>{{$t('Airticket.Air_Trip')}}</th>
          <th width=400>{{$t('hotel.hotel')}}</th>
          <th width=100>{{$t('hotel.table_operat')}}</th>
        </tr>
        <template v-for="(trip,ti) in addMsg.TravelPlanList">
          <tr v-if="showIindex!=ti">
            <td>{{trip.Date}}</td>
            <!-- <td>{{trip.City}}</td> -->
            <td>{{trip.TraveInfo}}</td>
            <td>{{trip.HotelInfo}}</td>
            <td>
              <i @click="showIindex=ti" class="iconfont icon-bianji-smal"></i>
            </td>
          </tr>
          <tr v-if="showIindex==ti">
            <td>{{trip.Date}}</td>
            <!-- <td>
                            <el-input v-model="trip.City" type="text" size=mini ></el-input>
                        </td> -->
            <td>
              <el-input v-model="trip.TraveInfo" type="textarea" size=mini class="w230"></el-input>
            </td>
            <td>
              <el-input v-model="trip.HotelInfo" type="textarea" size=mini class="w230"></el-input>
            </td>
            <td>
              <input type="button" class="normalBtn" @click="showIindex=-1" :value="$t('pub.sureBtn')" />
            </td>
          </tr>
        </template>
      </table>
    </div>
    <div class="upBtnList">
      <input type="button" class="normalBtn" @click="submitForm('addMsg')" :value="$t('pub.saveBtn')" />
      <button class="hollowFixedBtn" @click="goUrl(url)">{{$t('pub.cancelBtn')}}</button>
    </div>
  </div>
</template>
<script>
  import Vue from "vue"
  export default {
    data() {
      return {
        url: '',
        ID: 0,
        isDisabled: false,
        addMsg: {
          Id: this.ID,
          CountryType: '',
          ApplyForType: '',
          DepartAirport: '',
          EnterCountryFlight: '',
          EnterCountryPort: '',
          EnterCountryTime: '',
          GetBackAirport: '',
          LeaveCountryFlight: '',
          LeaveCountryPort: '',
          LeaveCountryTime: '',
          OrderId: '',
          OrderRemarks: '',
          Remarks: '',
          PeopleList: [],
          TravelPlanList: [],
          value6: '',
          PlanStatus: 0,
          SignStatus: ''
        },
        PeopleList: {
          Address: '',
          AddressDetail: '',
          Birthday: '',
          Duty: '',
          EconomicCapabilityList: [],
          EName: '',
          ESurName: '',
          HistoryRecord: '',
          Id: 0,
          IdentityType: '',
          IsHightSchool: '',
          IsRecommend: 2,
          Marriage: '',
          SurName: '',
          Name: '',
          Nationality: '',
          PassportAddress: '',
          PassportExpiry: '',
          PassportNo: '',
          Remarks: '',
          Sex: '',
          VisaPlanId: 0,
          EconomicCapabilityS: [],
          TimeOver: false,
          OrderId: '',
          Sort: 0,
          IncumbencyCertificationType: 1,
          AccountStatementType: 1,
        },
        rules: {
          OrderId: [{
              required: true,
              message: this.$t('visaT.qsrddh'),
              trigger: 'blur'
            },
            {
              pattern: /^[0-9]+$/,
              message: this.$t('visaT.qsrzqddh')
            }
          ],
          ApplyForType: [{
            required: true,
            message: this.$t('visaT.qxzqqlx'),
            trigger: 'change'
          }],
          value6: [{
            required: true,
            message: this.$t('visaT.qxzcrjsj'),
            trigger: 'blur'
          }],
          DepartAirport: [{
            required: true,
            message: this.$t('visaT.qxzqfjc'),
            trigger: 'change'
          }],
          EnterCountryPort: [{
            required: true,
            message: this.$t('visaT.qxzrjka'),
            trigger: 'change'
          }],
          EnterCountryFlight: [{
            required: true,
            message: this.$t('visaT.qxzrjhbh'),
            trigger: 'change'
          }],
          GetBackAirport: [{
            required: true,
            message: this.$t('visaT.qxzfhjc'),
            trigger: 'change'
          }],
          LeaveCountryPort: [{
            required: true,
            message: this.$t('visaT.qxzcjka'),
            trigger: 'change'
          }],
          LeaveCountryFlight: [{
            required: true,
            message: this.$t('visaT.qxzcjhbh'),
            trigger: 'change'
          }],
          SurName: [{
              required: true,
              message: this.$t('visaT.qtxzwx'),
              trigger: 'blur'
            },
            {
              pattern: /^[\u4E00-\u9FA5]{1,5}$/,
              message: this.$t('visaT.qsrzwx')
            }
          ],
          Name: [{
              required: true,
              message: this.$t('visaT.qtxzwm'),
              trigger: 'blur'
            },
            {
              pattern: /^[\u4E00-\u9FA5]{1,5}$/,
              message: this.$t('visaT.qsrzwx')
            }
          ],
          ESurName: [{
              required: true,
              message: this.$t('visaT.qtxywx'),
              trigger: 'blur'
            },
            {
              pattern: /^[a-zA-Z]/,
              message: this.$t('visaT.qsrywx')
            }
          ],
          EName: [{
              required: true,
              message: this.$t('visaT.qtxywm'),
              trigger: 'blur'
            },
            {
              pattern: /^[a-zA-Z]/,
              message: this.$t('visaT.qsrywx')
            }
          ],
          Birthday: [{
            required: true,
            message: this.$t('visaT.qtxzcsrq'),
            trigger: 'blur'
          }],
          Sex: [{
            required: true,
            message: this.$t('visaT.qtxzxb'),
            trigger: 'change'
          }],
          PassportNo: [{
              required: true,
              message: this.$t('visaT.ptxPassportNo'),
              trigger: 'blur'
            },
            {
              pattern: /^[0-9a-zA-Z]+$/,
              message: this.$t('visaT.zqdhzh')
            }
          ],
          PassportExpiry: [{
            required: true,
            message: this.$t('visaT.qxzhzgqr'),
            trigger: 'blur'
          }],
          PassportAddress: [{
            required: true,
            message: this.$t('visaT.qtxqfd'),
            trigger: 'blur'
          }],
          PassportAddress: [{
            required: true,
            message: this.$t('visaT.qtxqfd'),
            trigger: 'blur'
          }],
          Nationality: [{
            required: true,
            message: this.$t('visaT.qxzgj'),
            trigger: 'change'
          }],
          // Address:[
          //     { required: true, message: '请填写家庭居住地', trigger: 'blur' }
          // ],
          // AddressDetail:[
          //     { required: true, message: '请填写家庭详细地址', trigger: 'blur' }
          // ],
          // Marriage:[
          //     { required: true, message: '请选择婚姻状态', trigger: 'change' }
          // ],
          HistoryRecord: [{
            required: true,
            message: this.$t('visaT.qxzcjjl'),
            trigger: 'change'
          }],
          Duty: [{
            required: true,
            message: this.$t('visaT.qxzzw'),
            trigger: 'change'
          }],
          Sort: [{
            required: true,
            message: this.$t('visaT.qtxrank'),
            trigger: 'change'
          }]
        },
        regularFlights: '-1',
        regularFlightsList: [],
        VisaApplyForTypeEnum: [],
        JapanAirportList: [],
        ChinaAirportList: [],
        countryList: [],
        MarriageType: [],
        VisaDeparturesType: [],
        VisaDutyTypeEnum: [],
        VisaIdentityTypeEnum: [],
        FilghtForAirIn: [],
        FilghtForAirOut: [],
        addNum: 1,
        newDateList: [],
        showIindex: -1,
        copyInfo: false,
        loading: true,
        showIS: true,
        beforeCheck: {
          Date: (time) => {
            let endTime = new Date(this.addMsg.LeaveCountryTime);
            return endTime.getTime() < time.getTime();
          }
        },
        afterCheck: {
          Date: (time) => {
            let startTime = new Date(this.addMsg.EnterCountryTime);
            return startTime.getTime() >= time.getTime()
          }
        },
      }
    },
    created() {
      if (this.$route.query.id != 0) {
        this.ID = this.$route.query.id
        this.getInfo()
        this.addNum = 0
      } else {
        this.addMsg.Id = 0
      }
      this.addMsg.CountryType = this.$route.query.Cid
      this.url = this.$route.query.url
    },
    mounted() {
      this.getRegularFlights()
      this.getVisaDutyTypeEnum()
      this.getVisaApplyForTypeEnum()
      this.getChinaAirportList()
      this.getJapanAirportList()
      this.getCountry()
      this.getMarriageType()
      this.getVisaDeparturesType()
      this.getVisaIdentityTypeEnum()
    },
    methods: {
      getRegularFlights: function () {
        this.apipost('dmc_get_GetVisaCommonFlightList', {
          Name: ''
        }, res => {
          if (res.data.resultCode === 1) {
            this.regularFlightsList = res.data.data
          } else {
            this.$message.error(res.data.message)
          }
        })
      },
      regularChange: function (val) {
        if (val !== '-1') {
          let data = this.regularFlightsList[val]
          this.addMsg.DepartAirport = data.DepartAirport
          this.addMsg.EnterCountryFlight = data.EnterCountryFlight
          this.addMsg.EnterCountryPort = data.EnterCountryPort
          this.addMsg.GetBackAirport = data.GetBackAirport
          this.addMsg.LeaveCountryFlight = data.LeaveCountryFlight
          this.addMsg.LeaveCountryPort = data.LeaveCountryPort
          this.getFilghtForAir(1)
          this.getFilghtForAir(2)
          for (let i = 0; i < this.addMsg.TravelPlanList.length; i++) {
            if (i < data.TravelList.length) {
              this.addMsg.TravelPlanList[i].TraveInfo = data.TravelList[i].TraveInfo
              this.addMsg.TravelPlanList[i].HotelInfo = data.TravelList[i].HotelInfo
            }
          }
        }
      },
      flightRevert: function (type) {
        if (type == 1) {
          this.addMsg.EnterCountryFlight = ''
          this.FilghtForAirIn = []
        } else {
          this.addMsg.LeaveCountryFlight = ''
          this.FilghtForAirOut = []
        }
      },
      searchHistory() {
        if (this.addMsg.OrderId != '') {
          this.apipost('dmc_get_visa_GetVisaPlanForTCID', {
            TCID: this.addMsg.OrderId
          }, res => {
            if (res.data.resultCode == 1) {
              let obj = res.data.data
              if (obj.IsVisaOrder == 1) {
                this.isDisabled = true;
              } else {
                this.isDisabled = false;
              }
              this.addMsg.CountryType = obj.CountryType
              this.addMsg.ApplyForType = obj.ApplyForType
              this.addMsg.DepartAirport = obj.DepartAirport.toString()
              this.addMsg.EnterCountryFlight = obj.EnterCountryFlight.toString()
              this.addMsg.EnterCountryPort = obj.EnterCountryPort.toString()
              this.addMsg.EnterCountryTime = obj.EnterCountryTime
              this.addMsg.GetBackAirport = obj.GetBackAirport.toString()
              this.addMsg.LeaveCountryFlight = obj.LeaveCountryFlight.toString()
              this.addMsg.LeaveCountryPort = obj.LeaveCountryPort.toString()
              this.addMsg.LeaveCountryTime = obj.LeaveCountryTime
              this.addMsg.OrderId = obj.OrderId
              this.addMsg.OrderRemarks = obj.OrderRemarks
              this.addMsg.Remarks = obj.Remarks
              this.addMsg.TravelPlanList = obj.TravelPlanList
              this.addMsg.value6 = []
              this.addMsg.value6.push(this.addMsg.EnterCountryTime)
              this.addMsg.value6.push(this.addMsg.LeaveCountryTime)
              this.addMsg.PlanStatus = 0
              this.addMsg.SignStatus = obj.SignStatus.toString()
            } else {
              this.$message.error(res.data.message)
            }
          }, err => {})
        }
      },
      Transformation(t, n, i) {
        let _this = this
        let text = _this.pinyin(t, {
          style: _this.pinyin.STYLE_NORMAL
        })
        if (text.length) {
          if (n == 'Name') {
            _this.addMsg.PeopleList[i].EName = ''
          } else if (n == 'SurName') {
            _this.addMsg.PeopleList[i].ESurName = ''
          }
          text.forEach(x => {
            if (n == 'Name') {
              _this.addMsg.PeopleList[i].EName = _this.addMsg.PeopleList[i].EName + x
            } else if (n == 'SurName') {
              _this.addMsg.PeopleList[i].ESurName = _this.addMsg.PeopleList[i].ESurName + x
            }
          })
        } else {
          if (n == 'Name') {
            _this.addMsg.PeopleList[i].EName = ''
          } else if (n == 'SurName') {
            _this.addMsg.PeopleList[i].ESurName = ''
          }
        }
      },
      getInfo() { //根据ID获取信息
        this.loading = true
        this.apipost('dmc_get_visa_GetVisaPlanInfo', {
          VisaPlanId: this.ID
        }, res => {
          if (res.data.resultCode == 1) {
            this.addMsg = res.data.data
            this.addMsg.PeopleList.forEach(x => {
              x.Sex = x.Sex.toString()
              if (x.Marriage != null) {
                x.Marriage = x.Marriage.toString()
              }
              x.Sort = x.Sort.toString();
            })
            this.addMsg.value6 = []
            if (this.addMsg.IsVisaOrder == 1) {
              this.isDisabled = true;
            } else {
              this.isDisabled = false;
            }
            this.addMsg.value6.push(this.addMsg.EnterCountryTime)
            this.addMsg.value6.push(this.addMsg.LeaveCountryTime)
            this.addMsg.ApplyForType = this.addMsg.ApplyForType.toString()
            this.addMsg.SignStatus = this.addMsg.SignStatus.toString()
            if (this.$route.query.copy) {
              let msg = {
                Id: 0,
                CountryType: this.$route.query.Cid,
                ApplyForType: '',
                DepartAirport: '',
                EnterCountryFlight: '',
                EnterCountryPort: '',
                EnterCountryTime: '',
                GetBackAirport: '',
                LeaveCountryFlight: '',
                LeaveCountryPort: '',
                LeaveCountryTime: '',
                OrderId: '',
                OrderRemarks: '',
                Remarks: '',
                PeopleList: this.addMsg.PeopleList,
                TravelPlanList: [],
                value6: '',
                PlanStatus: 0,
                SignStatus: ''
              }
              this.addMsg = msg
            }
            this.getFilghtForAir(1)
            this.getFilghtForAir(2)
            this.dateTimeReg()
          } else {
            this.$message.error(res.data.message)
          }
          this.getEconomicCapability()
          // this.loading = false
        }, err => {})
        //  this.loading = false
      },
      FilghtForAir(data, type) {
        this.apipost('dmc_get_visa_GetFilghtForAir', data, res => {
          if (res.data.resultCode == 1) {
            if (type == 1) {
              this.FilghtForAirIn = res.data.data
            } else {
              this.FilghtForAirOut = res.data.data
            }
          } else {
            this.$message.error(res.data.message)
          }
        }, err => {})
      },
      getFilghtForAir(type) { // 根据机场获取航班号
        let msg = {
          StartAirId: 0,
          EndAirId: 0,
        }
        if (type == 1) {
          if (this.addMsg.DepartAirport && this.addMsg.EnterCountryPort) {
            msg.StartAirId = this.addMsg.DepartAirport
            msg.EndAirId = this.addMsg.EnterCountryPort
            this.FilghtForAir(msg, type)
          }
        } else {
          if (this.addMsg.GetBackAirport && this.addMsg.LeaveCountryPort) {
            msg.StartAirId = this.addMsg.LeaveCountryPort
            msg.EndAirId = this.addMsg.GetBackAirport
            this.FilghtForAir(msg, type)
          }
        }
      },
      dateTimeReg(d, index) {
        const num = 180
        if (d) {
          let date1 = JSON.parse(JSON.stringify(this.addMsg.LeaveCountryTime))
          let date2 = JSON.parse(JSON.stringify(d))
          if (date1 && date2) {
            let newDte = parseInt(DateDiff(date2, date1))
            if (newDte < num) {
              this.addMsg.PeopleList[index].TimeOver = true
            } else {
              this.addMsg.PeopleList[index].TimeOver = false
            }
          }
        } else {
          let date1 = JSON.parse(JSON.stringify(this.addMsg.LeaveCountryTime))
          this.addMsg.PeopleList.forEach(x => {
            if (x.PassportExpiry) {
              let date2 = JSON.parse(JSON.stringify(x.PassportExpiry))
              let newDte = parseInt(DateDiff(date2, date1))
              if (newDte < num) {
                x.TimeOver = true
              } else {
                x.TimeOver = false
              }
            }
          })
        }

        function DateDiff(sDate1, sDate2) {
          var aDate, oDate1, oDate2, iDays
          aDate = sDate1.split("-")
          oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0])
          aDate = sDate2.split("-")
          oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0])
          iDays = (oDate1 - oDate2) / 1000 / 60 / 60 / 24
          return iDays
        }
      },
      timeAdd() { // 出行时间
        let _this = this
        this.addMsg.TravelPlanList = []
        this.addMsg.EnterCountryTime = this.addMsg.value6[0]
        this.addMsg.LeaveCountryTime = this.addMsg.value6[1]
        let sDate1 = this.addMsg.EnterCountryTime
        let sDate2 = this.addMsg.LeaveCountryTime

        function getBetweenDateStr(start, end) {
          var result = [];
          var beginDay = start.split("-");
          var endDay = end.split("-");
          var diffDay = new Date();
          var dateList = new Array;
          var i = 0;
          diffDay.setDate(beginDay[2]);
          diffDay.setMonth(beginDay[1] - 1);
          diffDay.setFullYear(beginDay[0]);
          result.push(start);
          while (i == 0) {
            var countDay = diffDay.getTime() + 24 * 60 * 60 * 1000;
            diffDay.setTime(countDay);
            dateList[2] = diffDay.getDate();
            dateList[1] = diffDay.getMonth() + 1;
            dateList[0] = diffDay.getFullYear();
            if (String(dateList[1]).length == 1) {
              dateList[1] = "0" + dateList[1]
            };
            if (String(dateList[2]).length == 1) {
              dateList[2] = "0" + dateList[2]
            };
            result.push(dateList[0] + "-" + dateList[1] + "-" + dateList[2]);
            if (dateList[0] == endDay[0] && dateList[1] == endDay[1] && dateList[2] == endDay[2]) {
              i = 1;
            }
          };
          result.forEach(x => {
            let str = x.replace(/-/, _this.$t('pub.year'))
            let strS = str.replace(/-/, _this.$t('pub.month'))
            let strSi = strS + _this.$t('fnc.day')
            let msg = {
              VisaPlanId: _this.addMsg.Id,
              Date: strSi,
              City: '',
              TraveInfo: '',
              HotelInfo: ''
            }
            _this.addMsg.TravelPlanList.push(msg)
          })
        };
        if (sDate1 == sDate2) {
          let msg = {
            VisaPlanId: _this.addMsg.Id,
            Date: 1,
            City: '',
            TraveInfo: '',
            HotelInfo: ''
          }
          _this.addMsg.TravelPlanList.push(msg)
        } else {
          getBetweenDateStr(sDate1, sDate2);
        }
        this.dateTimeReg();
      },
      goUrl(path) {
        this.$router.push({
          name: path
        });
      },
      saveData() {
        this.addMsg.PeopleList.forEach(x => {
          x.EconomicCapabilityList = []
          if (x.EconomicCapabilityS) {
            x.EconomicCapabilityS.forEach(y => {
              if (y.isShow == true) {
                let msg = {
                  ID: y.ID,
                  Key: y.Name,
                  Value: y.Content
                }
                x.EconomicCapabilityList.push(msg)
              }
            })
          }
        })
        this.addMsg.OrderId = parseInt(this.addMsg.OrderId);
        // this.addMsg.TravelPlanList.push(this.TravelPlanList)
        this.apipost('dmc_post_visa_SetVisaPlanInfo', this.addMsg, res => {
          if (res.data.resultCode == 1) {
            this.$router.push({
              name: 'visaList'
            });
          } else {
            this.$message.error(res.data.message)
          }
        }, err => {})
      },
      submitForm(addMsg) {
        if (this.addMsg.PeopleList.length < 1) {
          this.$message.error(this.$t('visaT.qtjsqr'))
          return
        }
        //提交创建、修改表单
        let that = this;
        that.$refs[addMsg].validate(valid => {
          if (valid) {
            that.submitFormS('item')
          } else {
            that.submitFormS('item')
            return false;
          }
        });
      },
      submitFormS(addMsg) {
        //提交创建、修改表单
        let that = this;
        that.$refs[addMsg].forEach((x, index) => {
          that.$refs[addMsg][index].validate(valid => {
            if (valid) {
              if (that.$refs[addMsg].length == index + 1) {
                that.saveData()
              }
            } else {
              return false;
            }
          });
        })

      },
      resetForm(formName, toName) {
        //弹出框取消 初始化谈框内表单
        this.$refs[formName].resetFields();
        this.$refs[toName].resetFields();
      },
      addEconomicCapability(ID, sindex, findex) { // 添加经济能力说明
        this.addMsg.PeopleList[findex].EconomicCapabilityS.forEach(x => {
          if (x.ID == ID) {
            x.isShow ? x.isShow = false : x.isShow = true
          }
          Vue.set(this.addMsg.PeopleList[findex], findex, this.addMsg.PeopleList[findex].EconomicCapabilityS)
        })
      },
      regAddNum() {
        let reg = new RegExp("^[0-9]+$");
        if (!reg.test(this.addNum)) {
          this.addNum = 1
        } else {
          let num = parseInt(this.addNum)
          if (num > 10) {
            this.addNum = 10
          }
        }
      },
      addPp() { // 添加人
        let num = parseInt(this.addNum)
        if (num > 0) {
          if (this.copyInfo) {
            let People = this.addMsg.PeopleList[this.addMsg.PeopleList.length - 1]
            let PeopleList = JSON.parse(JSON.stringify(People))
            PeopleList.EconomicCapabilityList = []
            PeopleList.EName = ''
            PeopleList.ESurName = ''
            PeopleList.Id = 0
            PeopleList.SurName = ''
            PeopleList.Name = ''
            PeopleList.VisaPlanId = 0
            PeopleList.Sex = ''
            PeopleList.Birthday = ''
            PeopleList.PassportNo = ''
            PeopleList.PassportExpiry = ''
            PeopleList.PassportAddress = ''
            for (let i = 0; i < num; i++) {
              this.addMsg.PeopleList.push(JSON.parse(JSON.stringify(PeopleList)))
            }
          } else {
            for (let i = 0; i < num; i++) {
              this.addMsg.PeopleList.push(JSON.parse(JSON.stringify(this.PeopleList)))
            }
          }
        }

      },
      deleteThis(i) {
        this.$confirm(this.$t('visaT.ts'), this.$t('tips.tips'), {
          confirmButtonText: this.$t('pub.sureBtn'),
          cancelButtonText: this.$t('pub.cancelBtn'),
          type: 'warning'
        }).then(() => {
          this.addMsg.PeopleList.splice(i, 1)
          this.$message.success(this.$t('tips.shanchuchenggong'));
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('tips.cancleDelete')
          });
        });
      },
      getEconomicCapability() { //获取经济能力
        this.apipost("dict_post_GetList", {
          Key: 'SK_Visa_EconomicCapability'
        }, res => {
          let data = res.data.data;
          data.forEach(x => {
            x.isShow = false
          })
          this.PeopleList.EconomicCapabilityS = JSON.parse(JSON.stringify(data))
          if (this.ID == 0) {
            this.addMsg.PeopleList.push(JSON.parse(JSON.stringify(this.PeopleList)))
          } else {
            this.addMsg.PeopleList.forEach((x, xi) => {
              x.EconomicCapabilityS = JSON.parse(JSON.stringify(data))
              x.EconomicCapabilityList.forEach((y, yi) => {
                x.EconomicCapabilityS.forEach((z, zi) => {
                  if (y.ID == z.ID) {
                    z.isShow = true
                    z.Content = y.Value
                  }
                  Vue.set(this.addMsg.PeopleList, this.addMsg.PeopleList)
                })
              })
            })
          }
          this.loading = false
        }, err => {});
        this.addNum = 1
      },
      getVisaIdentityTypeEnum() { //获取身份证明
        let msg = {};
        this.apipost("dmc_get_visa_GetVisaIdentityTypeEnum", msg, res => {
          if (res.data.resultCode == 1) {
            this.VisaIdentityTypeEnum = res.data.data;
          } else {
            this.$message.error(res.data.message)
          }
        }, err => {});
      },
      getVisaDutyTypeEnum() { //获取职务
        let msg = {};
        this.apipost("dmc_get_visa_GetVisaDutyTypeEnum", msg, res => {
          if (res.data.resultCode == 1) {
            this.VisaDutyTypeEnum = res.data.data;
            this.VisaDutyTypeEnum.forEach((x, index) => {
              this.$set(this.VisaDutyTypeEnum, index, x)
            })
            this.$forceUpdate();
          } else {
            this.$message.error(res.data.message)
          }
        }, err => {});
      },
      getVisaDeparturesType() { //获取出境记录状态
        let msg = {};
        this.apipost("dmc_get_visa_GetVisaDeparturesTypeEnum", msg, res => {
          if (res.data.resultCode == 1) {
            this.VisaDeparturesType = res.data.data;
          } else {
            this.$message.error(res.data.message)
          }
        }, err => {});
      },
      getMarriageType() { //获取婚姻
        let msg = {};
        this.apipost("dmc_get_visa_GetVisaMarriageTypeEnum", msg, res => {
          if (res.data.resultCode == 1) {
            this.MarriageType = res.data.data;
          } else {
            this.$message.error(res.data.message)
          }
        }, err => {});
      },
      getCountry() { //获取国家
        let msg = {};
        this.apipost("dict_post_Destination_GetCountry", msg, res => {
          if (res.data.resultCode == 1) {
            this.countryList = res.data.data;
          } else {
            this.$message.error(res.data.message)
          }
        }, err => {});
      },
      getVisaApplyForTypeEnum() { // 获取申请类型
        this.apipost('dmc_get_visa_GetVisaApplyForTypeEnum', {}, res => {
          if (res.data.resultCode == 1) {
            this.VisaApplyForTypeEnum = res.data.data
          } else {
            this.$message.error(res.data.message)
          }
        }, err => {})
      },
      getChinaAirportList() { // 获取国内机场
        let msg = {
          City_id: 0,
          Country_id: 2,
          TrafficType: 1,
        }
        this.apipost('airport_post_GetList', msg, res => {
          if (res.data.resultCode == 1) {
            this.ChinaAirportList = res.data.data
          } else {
            this.$message.error(res.data.message)
          }
        }, err => {})
      },
      getJapanAirportList() { // 获取日本机场
        let msg = {
          City_id: 0,
          Country_id: 651,
          TrafficType: 1,
        }
        this.apipost('airport_post_GetList', msg, res => {
          if (res.data.resultCode == 1) {
            this.JapanAirportList = res.data.data
          } else {
            this.$message.error(res.data.message)
          }
        }, err => {})
      }
    }
  }

</script>
