<style>
  .ContractMain {
    width: 1200px;
    margin: auto;
    padding: 20px;
    background-color: #fff;
  }

  .CM_left {
    float: left;
    width: 150px;
    height: 100%;
    position: fixed;
    margin-top: 100px;
  }

  .CM_left ul li {
    display: block;
    width: 100%;
    text-align: center;
    height: 40px;
    line-height: 40px;
    padding: 0;
    margin-top: 5px;
    border-radius: 5px;
    font-size: 13px;
    cursor: pointer;
  }

  .CM_left ul li:hover {
    background-color: #ed4040;
    color: #fff;
  }

  .CMcked {
    background-color: #ed4040;
    color: #fff;
  }

  .CM_right {
    width: 950px;
    height: auto;
    float: right;
    text-align: center;
    margin-left: 10px;
  }

  .CM_rightHeader {
    width: 100%;
    height: 100%;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .contractName {
    font-size: 20px;
    margin-bottom: 5px;
  }

  .CM_ComTitle {
    width: 100%;
    height: 45px;
    background-color: #F2F2F2;
    font-weight: bold;
    font-size: 16px;
    text-indent: 10px;
    text-align: left;
    display: flex;
    align-items: center;
  }

  .CM_comTable {
    width: 100%;
  }

  .ContractMain .littleTitle {
    margin: 40px 0 20px 10px;
    font-weight: bold;
    text-align: left;
    font-size: 14px;
  }

  .CM_align {
    text-align: right;
  }

  .CM_comTable td {
    padding-left: 80px;
    text-align: left;
  }

  .w640 {
    width: 640px !important;
  }

  .TC_tittle {
    padding-left: 0 !important;
  }

  .CM_ComLast {
    vertical-align: top;
    text-align: right;
    padding-right: 20px;
  }

  .CM_comDiv {
    margin-bottom: 30px;
  }

  .TC_div {
    display: none;
  }

  .checkedNav {
    display: block;
  }

</style>

<template>
  <div class="ContractMain clearfix">
    <div class="CM_left">
      <ul>
        <li :class="{'CMcked':cked==1}" @click="cked=1">基本信息</li>
        <li :class="{'CMcked':cked==2}" @click="cked=2">合同条款</li>
        <li :class="{'CMcked':cked==3}" @click="cked=3">投诉信息</li>
        <li :class="{'CMcked':cked==4}" @click="cked=4">行程信息</li>
        <li :class="{'CMcked':cked==5}" @click="cked=5">旅客信息</li>
      </ul>
    </div>
    <div class="CM_right">
      <div class="CM_rightHeader">
        <div class="contractName">四川和平国际旅行社有限公司</div>
        <div class="contractName">团队出境旅游合同</div>
        <div>合同编号：<span style="color:blue;font-size:14px;">{{CtObj.contractNum}}</span></div>
      </div>
      <el-form label-width="180px" :model="CtObj" :rules="rules" ref="CtObj">
        <div class="TC_div" :class="{'checkedNav':cked==1}">
          <div class="CM_ComTitle">基本信息</div>
          <div class="littleTitle">客户信息</div>
          <table class="CM_comTable" cellspacing="0" cellpadding="0">
            <tbody>
              <tr>
                <td>
                  <el-form-item :label="$t('fnc.khmingcheng')" prop="clientName">
                    <el-input type="text" v-model="CtObj.clientName" maxlength="100" class="w210"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="身份证号">
                    <el-input type="text" v-model="CtObj.clientIdcardnum" maxlength="100" class="w210"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item :label="$t('scen.sc_tel')" prop="clientCall">
                    <el-input type="text" v-model="CtObj.clientCall" maxlength="100" class="w210"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="传真">
                    <el-input type="text" v-model="CtObj.clientFax" maxlength="100" class="w210"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="电子邮箱">
                    <el-input type="text" v-model="CtObj.clientEmail" maxlength="100" class="w210"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="邮编">
                    <el-input type="text" v-model="CtObj.clientPostCode" maxlength="100" class="w210"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="所在地区">
                    <el-select :placeholder="$t('visaT.qxzguojia')" filterable class='multiple_input w210'
                      v-model="CtObj.clientCountryid"
                      @change="GetSubAreaList(CtObj.clientCountryid,1),CtObj.clientProvinceid=0,CtObj.clientCityid=0">
                      <el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
                      <el-option v-for="childItem in CountryList" :key="childItem.ID" :label="childItem.Name"
                        :value="childItem.ID">
                      </el-option>
                    </el-select>
                    <el-select :placeholder="$t('objFill.qxzshen')" filterable class='multiple_input w210'
                      v-model="CtObj.clientProvinceid"
                      @change="GetSubAreaList(CtObj.clientProvinceid,2),CtObj.clientCityid=0">
                      <el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
                      <el-option v-for="childItem in ClientProvinceList" :key="childItem.ID" :label="childItem.Name"
                        :value="childItem.ID">
                      </el-option>
                    </el-select>
                    <el-select :placeholder="$t('objFill.qxzshi')" filterable class='multiple_input w210' v-model="CtObj.clientCityid">
                      <el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
                      <el-option v-for="childItem in ClientCityList" :key="childItem.ID" :label="childItem.Name"
                        :value="childItem.ID">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item :label="$t('hotel.hotel_detailinfo')">
                    <el-input type="text" v-model="CtObj.clientAddress" class="w640"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="TC_tittle">
                  <div class="littleTitle">公司信息</div>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="公司名称">
                    <el-input type="text" v-model="CtObj.company" :disabled="true" class="w210"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="经营许可证号">
                    <el-input type="text" class="w210" :disabled="true" v-model="CtObj.businessCertificate"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item :label="$t('scen.sc_tel')">
                    <el-input type="text" class="w210" v-model="CtObj.companyCall"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="传真">
                    <el-input type="text" class="w210" v-model="CtObj.companyFax"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="电子邮箱">
                    <el-input type="text" class="w210" v-model="CtObj.companyEmail"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="邮编">
                    <el-input type="text" class="w210" v-model="CtObj.companyPostCode"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="所在地区">
                    <el-select :placeholder="$t('visaT.qxzguojia')" filterable class='multiple_input w210'
                      v-model="CtObj.companyCountryid"
                      @change="GetComAreaList(CtObj.companyCountryid,1),CtObj.companyProvinceid=0,CtObj.companyCityid=0">
                      <el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
                      <el-option v-for="childItem in CountryList" :key="childItem.ID" :label="childItem.Name"
                        :value="childItem.ID">
                      </el-option>
                    </el-select>
                    <el-select :placeholder="$t('objFill.qxzshen')" filterable class='multiple_input w210'
                      v-model="CtObj.companyProvinceid"
                      @change="GetComAreaList(CtObj.companyProvinceid,2),CtObj.companyCityid=0">
                      <el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
                      <el-option v-for="childItem in companyProvinceList" :key="childItem.ID" :label="childItem.Name"
                        :value="childItem.ID">
                      </el-option>
                    </el-select>
                    <el-select :placeholder="$t('objFill.qxzshi')" filterable class='multiple_input w210' v-model="CtObj.companyCityid">
                      <el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
                      <el-option v-for="childItem in companyCityList" :key="childItem.ID" :label="childItem.Name"
                        :value="childItem.ID">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item :label="$t('hotel.hotel_detailinfo')">
                    <el-input type="text" class="w640" v-model="CtObj.companyAddress"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="TC_tittle">
                  <div class="littleTitle">经办人信息</div>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="经办人" prop="agentName">
                    <el-input type="text" class="w210" v-model="CtObj.agentName"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item :label="$t('scen.sc_tel')" prop="agentCall">
                    <el-input type="text" class="w210" v-model="CtObj.agentCall"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="签约地点/网点名称" prop="contractPlace">
                    <el-input type="text" class="w640" v-model="CtObj.contractPlace"></el-input>
                  </el-form-item>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="TC_div" :class="{'checkedNav':cked==2}">
          <div class="CM_ComTitle">合同条款</div>
          <div class="littleTitle">合同效力</div>
          <table class="CM_comTable" cellspacing="0" cellpadding="0">
            <tbody>
              <tr>
                <td>
                  <el-form-item label="本合同一式" prop="totalNumber">
                    <el-select :placeholder="$t('pub.pleaseSel')" filterable v-model="CtObj.totalNumber" class='w210'>
                      <el-option :label="$t('pub.unlimitedSel')" :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-option label="肆" :value='4'></el-option>
                      <el-option label="伍" :value='5'></el-option>
                      <el-option label="陆" :value='6'></el-option>
                      <el-option label="柒" :value='7'></el-option>
                      <el-option label="捌" :value='8'></el-option>
                      <el-option label="玖" :value='9'></el-option>
                      <el-option label="拾" :value='10'></el-option>
                    </el-select>
                    份
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="双方各持" prop="eachNumber">
                    <el-select :placeholder="$t('pub.pleaseSel')" filterable v-model="CtObj.eachNumber" class='w210'>
                      <el-option :label="$t('pub.unlimitedSel')" :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-option label="肆" :value='4'></el-option>
                      <el-option label="伍" :value='5'></el-option>
                      <el-option label="陆" :value='6'></el-option>
                      <el-option label="柒" :value='7'></el-option>
                      <el-option label="捌" :value='8'></el-option>
                      <el-option label="玖" :value='9'></el-option>
                      <el-option label="拾" :value='10'></el-option>
                    </el-select>
                    份
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="TC_tittle">
                  <div class="littleTitle">线路行程时间</div>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item :label="$t('hotel.product_name')" prop="productName">
                    <el-input type="text" class="w210" v-model="CtObj.productName"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="出发日期" prop="startDate">
                    <el-date-picker class="w210" v-model="CtObj.startDate" type="date" value-format="yyyy-MM-dd"
                      placeholder></el-date-picker>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="返回日期" prop="returnDate">
                    <el-date-picker class="w210" v-model="CtObj.returnDate" type="date" value-format="yyyy-MM-dd"
                      placeholder></el-date-picker>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="共" prop="dayNum">
                    <el-select :placeholder="$t('pub.pleaseSel')" filterable class='w210' v-model="CtObj.dayNum">
                      <el-option :label="$t('pub.unlimitedSel')" value=""></el-option>
                      <el-option label="1" :value='1'></el-option>
                      <el-option label="2" :value='2'></el-option>
                      <el-option label="3" :value='3'></el-option>
                      <el-option label="4" :value='4'></el-option>
                      <el-option label="5" :value='5'></el-option>
                      <el-option label="6" :value='6'></el-option>
                      <el-option label="7" :value='7'></el-option>
                      <el-option label="8" :value='8'></el-option>
                      <el-option label="9" :value='9'></el-option>
                      <el-option label="10" :value='10'></el-option>
                      <el-option label="11" :value='11'></el-option>
                      <el-option label="12" :value='12'></el-option>
                      <el-option label="13" :value='13'></el-option>
                      <el-option label="14" :value='14'></el-option>
                      <el-option label="15" :value='15'></el-option>
                      <el-option label="16" :value='16'></el-option>
                      <el-option label="17" :value='17'></el-option>
                      <el-option label="18" :value='18'></el-option>
                      <el-option label="19" :value='19'></el-option>
                      <el-option label="20" :value='20'></el-option>
                    </el-select>
                    天
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="酒店住宿" prop="nightNum">
                    <el-select :placeholder="$t('pub.pleaseSel')" filterable class='w210' v-model="CtObj.nightNum">
                      <el-option :label="$t('pub.unlimitedSel')" value=""></el-option>
                      <el-option label="1" :value='1'></el-option>
                      <el-option label="2" :value='2'></el-option>
                      <el-option label="3" :value='3'></el-option>
                      <el-option label="4" :value='4'></el-option>
                      <el-option label="5" :value='5'></el-option>
                      <el-option label="6" :value='6'></el-option>
                      <el-option label="7" :value='7'></el-option>
                      <el-option label="8" :value='8'></el-option>
                      <el-option label="9" :value='9'></el-option>
                      <el-option label="10" :value='10'></el-option>
                      <el-option label="11" :value='11'></el-option>
                      <el-option label="12" :value='12'></el-option>
                      <el-option label="13" :value='13'></el-option>
                      <el-option label="14" :value='14'></el-option>
                      <el-option label="15" :value='15'></el-option>
                      <el-option label="16" :value='16'></el-option>
                      <el-option label="17" :value='17'></el-option>
                      <el-option label="18" :value='18'></el-option>
                      <el-option label="19" :value='19'></el-option>
                      <el-option label="20" :value='20'></el-option>
                    </el-select>
                    晚
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="TC_tittle">
                  <div class="littleTitle">旅游费用及支付</div>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="成人价" prop="adultPrice">
                    <el-input type="text" class="w210" v-model="CtObj.adultPrice"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="小孩价" prop="childPrice">
                    <el-input type="text" class="w210" v-model="CtObj.childPrice"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="导游服务费	">
                    <el-input type="text" class="w210" v-model="CtObj.servicePrice"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="费用合计" prop="orderPrice">
                    <el-input type="text" class="w210" v-model="CtObj.orderPrice"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="支付日期" prop="payDate">
                    <el-date-picker class="w210" v-model="CtObj.payDate" type="date" value-format="yyyy-MM-dd"
                      placeholder></el-date-picker>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item :label="$t('objFill.zffs')" prop="payType">
                    <el-select :placeholder="$t('pub.pleaseSel')" filterable class='w210' v-model="CtObj.payType">
                      <el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
                      <el-option label="现金" :value='1'></el-option>
                      <el-option label="转账" :value='2'></el-option>
                    </el-select>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="TC_tittle">
                  <div class="littleTitle">人身意外伤害保险</div>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="客户" prop="insuranceOpinion">
                    <el-select :placeholder="$t('pub.pleaseSel')" filterable class='w210' v-model="CtObj.insuranceOpinion">
                      <el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
                      <el-option label="同意" :value='1'></el-option>
                      <el-option label="不同意" :value='2'></el-option>
                    </el-select>
                    委托出境社办理人身意外伤害保险
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="保险公司">
                    <el-input type="text" class="w210" v-model="CtObj.insuranceCompany"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="保险产品">
                    <el-input type="text" class="w210" v-model="CtObj.insuranceProduct"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="保额">
                    <el-input type="text" class="w210" v-model="CtObj.insuranceAmount"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="TC_tittle">
                  <div class="littleTitle">成团人数与不成团的约定</div>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="最低成团人数" prop="minNumber">
                    <el-input type="text" class="w210" v-model="CtObj.minNumber"></el-input> 人
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="如果不能成团，客户" prop="insteadOpinion">
                    <el-select :placeholder="$t('pub.pleaseSel')" filterable class='w210' v-model="CtObj.insteadOpinion">
                      <el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
                      <el-option label="同意" :value='1'></el-option>
                      <el-option label="不同意" :value='2'></el-option>
                    </el-select>
                    旅行社委托其他旅行社履行合同
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="被委托旅行社名称">
                    <el-input type="text" class="w210" v-model="CtObj.insteadCompany"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="如果不能成团，客户" prop="delayOpinion">
                    <el-select :placeholder="$t('pub.pleaseSel')" filterable class='w210' v-model="CtObj.delayOpinion">
                      <el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
                      <el-option label="同意" :value='1'></el-option>
                      <el-option label="不同意" :value='2'></el-option>
                    </el-select>
                    延期出团
                  </el-form-item>

                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="如果不能成团，客户" prop="changeOpinion">
                    <el-select :placeholder="$t('pub.pleaseSel')" filterable class='w210' v-model="CtObj.changeOpinion">
                      <el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
                      <el-option label="同意" :value='1'></el-option>
                      <el-option label="不同意" :value='2'></el-option>
                    </el-select>
                    改签其他线路或产品出团
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="如果不能成团，客户" prop="terminateOpinion">
                    <el-select :placeholder="$t('pub.pleaseSel')" filterable class='w210' v-model="CtObj.terminateOpinion">
                      <el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
                      <el-option label="同意" :value='1'></el-option>
                      <el-option label="不同意" :value='2'></el-option>
                    </el-select>
                    解除合同
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="TC_tittle">
                  <div class="littleTitle">拼团约定</div>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="客户" prop="carpoolOpinion">
                    <el-select :placeholder="$t('pub.pleaseSel')" filterable class='w210' v-model="CtObj.carpoolOpinion">
                      <el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
                      <el-option label="同意" :value='1'></el-option>
                      <el-option label="不同意" :value='2'></el-option>
                    </el-select>
                    采用拼团方式成团
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="参与拼团旅行社">
                    <el-input type="text" class="w210" v-model="CtObj.carpoolCompany"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="TC_tittle">
                  <div class="littleTitle">争议的解决方式</div>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="协商或调解不成，按照第" prop="settleDisputeMode">
                    <el-select :placeholder="$t('pub.pleaseSel')" filterable class='w210' v-model="CtObj.settleDisputeMode">
                      <el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
                      <el-option label="1" :value='1'></el-option>
                      <el-option label="2" :value='2'></el-option>
                    </el-select>
                    种方式解决
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="（1）提交">
                    <el-input type="text" class="w210" v-model="CtObj.arbitrationCommission"></el-input> 仲裁委员会仲裁
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="（2）依法向">
                    <el-input type="text" class="w210" v-model="CtObj.court"></el-input> 人民法院起诉
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="TC_tittle">
                  <div class="littleTitle">其他约定事项</div>
                </td>
              </tr>
              <tr>
                <td class="TC_tittle">
                  <el-input type="textarea" resize="none" v-model="CtObj.otherMatter" rows="6"></el-input>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="TC_div" :class="{'checkedNav':cked==3}">
          <div class="CM_ComTitle">投诉信息</div>
          <table class="CM_comTable" cellspacing="0" cellpadding="0" style="margin-top:40px;">
            <tbody>
              <tr>
                <td>
                  <el-form-item label="公司投诉电话">
                    <el-input type="text" class="w210" v-model="CtObj.companyComplainCall"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="监管机构名称">
                    <el-input type="text" class="w210" v-model="CtObj.regulatorName"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="监管机构投诉电话">
                    <el-input type="text" class="w210" v-model="CtObj.regulatorComplainCall"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="监管机构网址">
                    <el-input type="text" class="w210" v-model="CtObj.regulatorWebsite"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="监管机构邮编">
                    <el-input type="text" class="w210" v-model="CtObj.regulatorPostCode"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="监管机构所属地区">
                    <el-select :placeholder="$t('visaT.qxzguojia')" filterable class='multiple_input w210'
                      v-model="CtObj.regulatorCountryid"
                      @change="GetJianAreaList(CtObj.regulatorCountryid,1),CtObj.regulatorProvinceid=0,CtObj.regulatorCityid=0">
                      <el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
                      <el-option v-for="childItem in CountryList" :key="childItem.ID" :label="childItem.Name"
                        :value="childItem.ID">
                      </el-option>
                    </el-select>
                    <el-select :placeholder="$t('objFill.qxzshen')" filterable class='multiple_input w210'
                      v-model="CtObj.regulatorProvinceid"
                      @change="GetJianAreaList(CtObj.regulatorProvinceid,2),CtObj.regulatorCityid=0">
                      <el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
                      <el-option v-for="childItem in JianProvinceList" :key="childItem.ID" :label="childItem.Name"
                        :value="childItem.ID">
                      </el-option>
                    </el-select>
                    <el-select :placeholder="$t('objFill.qxzshi')" filterable class='multiple_input w210'
                      v-model="CtObj.regulatorCityid">
                      <el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
                      <el-option v-for="childItem in JianCityList" :key="childItem.ID" :label="childItem.Name"
                        :value="childItem.ID">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="监管机构详细地址">
                    <el-input type="text" class="w640" v-model="CtObj.regulatorAddress"></el-input>
                  </el-form-item>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="TC_div" :class="{'checkedNav':cked==4}">
          <div class="CM_ComTitle" style="margin-bottom:40px;">行程信息</div>
          <el-input type="textarea" rows="16" resize="none" v-model="CtObj.travelContent"></el-input>
        </div>
        <div class="TC_div" :class="{'checkedNav':cked==5}">
          <div class="CM_ComTitle">旅客信息</div>
          <div class="littleTitle" style="margin:40px 0 30px 0;">旅客名单（{{guestList.length}}人）</div>
          <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <th>{{$t('system.query_name')}}</th>
              <th>国籍</th>
              <th>民族</th>
              <th>性别</th>
              <th>出生日期</th>
              <th>身份证号</th>
              <th>护照号</th>
              <th>手机号</th>
            </tr>
            <tr v-for="item in guestList">
              <td>{{item.surName+''+item.name}}</td>
              <td>{{item.nationalityName}}</td>
              <td></td>
              <td>{{item.sex==1?'男':'女'}}</td>
              <td>{{getDate(item.birthday)}}</td>
              <td>{{item.idCard}}</td>
              <td>{{item.passportNo}}</td>
              <td>{{item.mobilePhone}}</td>
            </tr>
          </table>
          <table cellspacing="0" cellpadding="0" style="font-size:12px;width:100%;">
            <tbody>
              <tr>
                <td class="TC_tittle" colspan="2">
                  <div class="littleTitle" style="margin-bottom:40px;">住宿情况</div>
                </td>
              </tr>
              <tr>
                <div class="CM_comDiv">
                  <td width="150" class="CM_ComLast">
                    同住人
                  </td>
                  <td style="text-align:left;">
                    <el-input type="textarea" rows="7" resize="none" class="w700" v-model="CtObj.togetherRemark">
                    </el-input>
                  </td>
                </div>
                <div class="CM_comDiv">
                  <td width="150" class="CM_ComLast">
                    单男/单女
                  </td>
                  <td style="text-align:left;">
                    <el-input type="textarea" rows="7" resize="none" class="w700" v-model="CtObj.singleRemark">
                    </el-input>
                  </td>
                </div>
                <div class="CM_comDiv">
                  <td width="150" class="CM_ComLast">
                    不占床人员
                  </td>
                  <td style="text-align:left;">
                    <el-input type="textarea" rows="7" resize="none" class="w700" v-model="CtObj.nobedRemark">
                    </el-input>
                  </td>
                </div>
                <div>
                  <td width="150" class="CM_ComLast">
                    单独住人员
                  </td>
                  <td style="text-align:left;">
                    <el-input type="textarea" rows="7" resize="none" class="w700" v-model="CtObj.aloneRemark">
                    </el-input>
                  </td>
                </div>
              </tr>
              <tr>
                <td class="TC_tittle">
                  <div class="littleTitle" style="margin-bottom:40px;">健康情况</div>
                </td>
              </tr>
              <tr>
                <div style="margin-left:-30px;">
                  <td style="text-align:left;" colspan="2">
                    <el-form-item label="参团旅客健康情况说明" prop="healthRemark">
                      <el-input type="textarea" rows="7" resize="none" class="w700" v-model="CtObj.healthRemark">
                      </el-input>
                    </el-form-item>
                  </td>
                </div>
              </tr>
            </tbody>
          </table>
        </div>
      </el-form>
      <div style="margin-top:20px;">
        <input type="button" v-if="CtObj.status==1&&CtObj.auditContract==0" class="normalBtn"
          style="margin:0 0 30px 60px;" @click="sendAudit()" value="提交审核" />
        <input type="button" v-if="CtObj.status==1&&CtObj.auditContract==3" class="normalBtn"
          style="margin:0 0 30px 60px;" @click="sendAudit()" value="审核已被驳回,重新提交" />
        <input type="button" v-if="CtObj.auditContract==0||CtObj.auditContract==3" class="normalBtn"
          @click="submitForm('CtObj')" :value="$t('pub.saveBtn')" />
        <input type="button" class="normalBtn" v-if="CtObj.status==1" @click="goUrl()" value="预览">
        <input type="button" class="normalBtn" v-if="CtObj.status==1" @click="getinvalid()" value="作废">
      </div>
    </div>
  </div>
</template>
<script>
  import moment from 'moment'
  export default {
    data() {
      let valiTotalNumber = (rule, value, callback) => {
        if (this.CtObj.totalNumber == 0 || this.CtObj.totalNumber == '') {
          return callback(new Error('请选择'));
        } else {
          callback();
        }
      }
      let validateEach = (rule, value, callback) => {
        if (this.CtObj.eachNumber == 0 || this.CtObj.eachNumber == '') {
          return callback(new Error('请选择'));
        } else {
          callback();
        }
      }
      let validatepayType = (rule, value, callback) => {
        if (this.CtObj.payType == 0 || this.CtObj.payType == '') {
          return callback(new Error('请选择'));
        } else {
          callback();
        }
      }
      let validateOption = (rule, value, callback) => {
        if (this.CtObj.insuranceOpinion == 0 || this.CtObj.insuranceOpinion == '') {
          return callback(new Error('请选择'));
        } else {
          callback();
        }
      }
      let validateinsteadO = (rule, value, callback) => {
        if (this.CtObj.insteadOpinion == 0 || this.CtObj.insteadOpinion == '') {
          return callback(new Error('请选择'));
        } else {
          callback();
        }
      }
      let validatedelayOpinion = (rule, value, callback) => {
        if (this.CtObj.delayOpinion == 0 || this.CtObj.delayOpinion == '') {
          return callback(new Error('请选择'));
        } else {
          callback();
        }
      }
      let validatechangeOpinion = (rule, value, callback) => {
        if (this.CtObj.changeOpinion == 0 || this.CtObj.changeOpinion == '') {
          return callback(new Error('请选择'));
        } else {
          callback();
        }
      }
      let validateterminateOpinion = (rule, value, callback) => {
        if (this.CtObj.terminateOpinion == 0 || this.CtObj.terminateOpinion == '') {
          return callback(new Error('请选择'));
        } else {
          callback();
        }
      }
      let validatecarpoolOpinion = (rule, value, callback) => {
        if (this.CtObj.carpoolOpinion == 0 || this.CtObj.carpoolOpinion == '') {
          return callback(new Error('请选择'));
        } else {
          callback();
        }
      }
      let validatesettleDisputeMode = (rule, value, callback) => {
        if (this.CtObj.settleDisputeMode == 0 || this.CtObj.settleDisputeMode == '') {
          return callback(new Error('请选择'));
        } else {
          callback();
        }
      }
      return {
        //国家列表
        CountryList: [],
        //客户省份列表
        ClientProvinceList: [],
        //客户城市列表
        ClientCityList: [],
        //公司省份列表
        companyProvinceList: [],
        //公司城市列表
        companyCityList: [],
        //监管机构省
        JianProvinceList: [],
        //监管机构市
        JianCityList: [],
        //选中切换
        cked: 1,
        //查询参数
        msg: {
          TCID: 0,
          orderID: 0
        },
        addMsg: {
          Country: 0,
          Province: 0,
          City: 0
        },
        //参数
        CtObj: {
          //基本信息
          clientName: '',
          clientIdcardnum: '',
          clientCall: '',
          clientFax: '',
          clientEmail: '',
          clientPostCode: '',
          clientCountryid: 0,
          clientProvinceid: 0,
          clientCityid: 0,
          clientAddress: '',
          company: '四川和平国际旅行社有限公司',
          businessCertificate: '0000000',
          companyCall: '',
          companyFax: '',
          companyEmail: '',
          companyPostCode: '',
          companyCountryid: 0,
          companyProvinceid: 0,
          companyCityid: 0,
          companyAddress: '',
          agentName: '',
          agentCall: '',
          contractPlace: '',
          //合同条款
          totalNumber: 2,
          eachNumber: 1,
          productName: '',
          startDate: '',
          returnDate: '',
          dayNum: '',
          nightNum: '',
          adultPrice: '',
          childPrice: '',
          servicePrice: '',
          orderPrice: '',
          payDate: '',
          payType: '',
          //客户同意
          insuranceOpinion: '',
          insuranceCompany: '',
          insuranceProduct: '',
          insuranceAmount: '',
          minNumber: 0,
          insteadOpinion: '',
          insteadCompany: '',
          delayOpinion: '',
          changeOpinion: '',
          terminateOpinion: '',
          carpoolOpinion: '',
          carpoolCompany: '',
          settleDisputeMode: '',
          arbitrationCommission: '',
          court: '',
          otherMatter: '',
          //投诉信息
          companyComplainCall: '',
          regulatorName: '',
          regulatorComplainCall: '',
          regulatorWebsite: '',
          regulatorPostCode: '',
          regulatorCountryid: 0,
          regulatorProvinceid: 0,
          regulatorCityid: 0,
          regulatorAddress: '',
          //行程信息
          travelContent: '',
          //旅客信息
          togetherRemark: '',
          singleRemark: '',
          nobedRemark: '',
          aloneRemark: '',
          healthRemark: '',
          tcid: 0,
          orderId: 0,
        },
        //旅客名单
        guestList: [],
        tripList: [],
        rules: {
          clientName: [{
            required: true,
            message: "请输入客户名称",
            trigger: "blur"
          }],
          clientCall: [{
            required: true,
            message: this.$t('rule.EnterPNum'),
            trigger: "blur"
          }],
          agentName: [{
            required: true,
            message: "请输入经办人",
            trigger: "blur"
          }],
          agentCall: [{
            required: true,
            message: this.$t('rule.EnterPNum'),
            trigger: "blur"
          }],
          contractPlace: [{
            required: true,
            message: "请输入签约地点/网点名称",
            trigger: "blur"
          }],

          totalNumber: [{
            validator: valiTotalNumber,
            trigger: 'change',
            required: true,
          }],
          eachNumber: [{
            validator: validateEach,
            trigger: "change",
            required: true,
          }],

          productName: [{
            required: true,
            message: this.$t('objFill.qingtianxcpmc'),
            trigger: "blur"
          }],
          startDate: [{
            required: true,
            message: "请选择出发日期",
            trigger: "change"
          }],
          returnDate: [{
            required: true,
            message: "请选择返回日期",
            trigger: "blur"
          }],
          dayNum: [{
            required: true,
            message: "请选择天数",
            trigger: "change"
          }],
          nightNum: [{
            required: true,
            message: "请选择晚数",
            trigger: "change"
          }],
          adultPrice: [{
            required: true,
            message: "请填写成人价",
            trigger: "blur"
          }],
          childPrice: [{
            required: true,
            message: "请填写小孩价",
            trigger: "blur"
          }],
          orderPrice: [{
            required: true,
            message: "请填写费用合计",
            trigger: "blur"
          }],
          payDate: [{
            required: true,
            message: "请选择支付日期",
            trigger: "change"
          }],
          payType: [{
            validator: validatepayType,
            trigger: "change",
            required: true,
          }],
          insuranceOpinion: [{
            validator: validateOption,
            trigger: "change",
            required: true,
          }],

          minNumber: [{
            required: true,
            message: "请填写最低成团人数",
            trigger: "change"
          }],
          insteadOpinion: [{
            required: true,
            validator: validateinsteadO,
            trigger: "change"
          }],
          delayOpinion: [{
            required: true,
            validator: validatedelayOpinion,
            trigger: "change"
          }],
          changeOpinion: [{
            required: true,
            validator: validatechangeOpinion,
            trigger: "change"
          }],
          terminateOpinion: [{
            required: true,
            validator: validateterminateOpinion,
            trigger: "change"
          }],
          carpoolOpinion: [{
            required: true,
            validator: validatecarpoolOpinion,
            trigger: "change"
          }],
          settleDisputeMode: [{
            required: true,
            validator: validatesettleDisputeMode,
            trigger: "change"
          }],
          healthRemark: [{
            required: true,
            message: "请填写参团旅客健康情况说明",
            trigger: "blur"
          }]
        }
      };
    },
    methods: {
      //获取数据
      getList() {

        this.apipost("travelcontract_post_GetContractInfoService", this.msg, res => {
          if (res.data.resultCode === 1) {
            this.CtObj = res.data.data;
            this.guestList = res.data.data.guestList;
            this.CtObj.company = '四川和平国际旅行社有限公司';
            this.CtObj.businessCertificate = '0000000';
            this.CtObj.tcid = this.$route.query.TCID;
            this.CtObj.orderId = this.$route.query.orderID;
            this.CtObj.totalNumber = 2;
            this.CtObj.eachNumber = 1;

            if (this.CtObj.clientCountryid > 0) {
              this.GetSubAreaList(this.CtObj.clientCountryid, 1, 1);
            }
            if (this.CtObj.clientProvinceid > 0) {
              this.GetSubAreaList(this.CtObj.clientProvinceid, 2, 1);
            }
            if (this.CtObj.companyCountryid > 0) {
              this.GetComAreaList(this.CtObj.companyCountryid, 1, 1);
            }
            if (this.CtObj.companyProvinceid > 0) {
              this.GetComAreaList(this.CtObj.companyProvinceid, 2, 1);
            }
            if (this.CtObj.regulatorCountryid > 0) {
              this.GetJianAreaList(this.CtObj.regulatorCountryid, 1, 1);
            }
            if (this.CtObj.regulatorProvinceid > 0) {
              this.GetJianAreaList(this.CtObj.regulatorProvinceid, 2, 1);
            }
          } else {
            this.Error(res.data.message);
          }
        }, null);
      },
      //获取国家
      GetCounrty() {
        this.apipost(
          "dict_post_Destination_GetCountry", {},
          res => {
            this.CountryList = res.data.data;
          },
          err => {}
        );
      },
      //获取客户省份和城市
      GetSubAreaList(ID, type, isClear) {
        let msg = {
          Id: ID
        };
        if (type == 1) {
          if (isClear != 1) {
            this.CtObj.clientProvinceid = 0;
            this.CtObj.clientCityid = 0;
          }
        } else if (type == 2) {
          if (isClear != 1) {
            this.CtObj.clientCityid = 0;
          }
        }
        if (this.CtObj.clientCountryid != 0) {
          this.apipost(
            "dict_post_Destination_GetChildList",
            msg,
            res => {
              if (type == 1) {
                this.ClientProvinceList = res.data.data;
              } else if (type == 2) {
                this.ClientCityList = res.data.data;
              }
            },
            err => {}
          );
        }
      },
      //获取公司身份城市
      GetComAreaList(ID, type, isClear) {
        let msg = {
          Id: ID
        };
        if (type == 1) {
          if (isClear != 1) {
            this.CtObj.companyProvinceId = 0;
            this.CtObj.companyCityId = 0;
          }
        } else if (type == 2) {
          if (isClear != 1) {
            this.CtObj.companyCityId = 0;
          }
        }
        if (this.CtObj.companyCountryId != 0) {
          this.apipost(
            "dict_post_Destination_GetChildList",
            msg,
            res => {
              if (type == 1) {
                this.companyProvinceList = res.data.data;
              } else if (type == 2) {
                this.companyCityList = res.data.data;
              }
            },
            err => {}
          );
        }
      },
      //获取监管机构省市
      GetJianAreaList(ID, type, isClear) {
        let msg = {
          Id: ID
        };
        if (type == 1) {
          if (isClear != 1) {
            this.CtObj.regulatorProvinceid = 0;
            this.CtObj.regulatorCityid = 0;
          }
        } else if (type == 2) {
          if (isClear != 1) {
            this.CtObj.regulatorCityid = 0;
          }
        }
        if (this.CtObj.regulatorCountryid != 0) {
          this.apipost(
            "dict_post_Destination_GetChildList",
            msg,
            res => {
              if (type == 1) {
                this.JianProvinceList = res.data.data;
              } else if (type == 2) {
                this.JianCityList = res.data.data;
              }
            },
            err => {}
          );
        }
      },
      getDate(date) {
        return moment(date).format("YYYY-MM-DD");
      },
      //提交数据
      SaveMsg() {
        this.CtObj.status = 1;
        this.CtObj.contractStatus = 2;

        this.apipost("travelcontract_post_UpdateStatusContractService", this.CtObj, res => {
          if (res.data.resultCode === 1) {
            this.Success(res.data.message);
            this.getList();
          } else {
            this.Error(res.data.message);
          }
        }, null);
      },
      //跳转至预览
      goUrl() {
        this.$router.push({
          name: 'ElectronicContract',
          query: {
            TCID: this.$route.query.TCID,
            orderID: this.$route.query.orderID,
            blank: "y",
          }
        });
      },
      //作废
      getinvalid() {
        this.$confirm('是否作废?', this.$t('tips.tips'), {
          confirmButtonText: this.$t('pub.sureBtn'),
          cancelButtonText: this.$t('pub.cancelBtn'),
          type: 'warning'
        }).then(() => {
          this.CtObj.status = 0;
          this.apipost("travelcontract_post_UpdateStatusContractService", this.CtObj, res => {
            if (res.data.resultCode === 1) {
              this.Success(res.data.message);
              this.getList();
            } else {
              this.Error(res.data.message);
            }
          }, null);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('tips.cancleDelete')
          });
        });
      },
      //提交
      submitForm(addMsg) {
        //提交创建、修改表单
        this.$refs[addMsg].validate(valid => {
          if (valid) {
            this.SaveMsg();
          } else {
            this.Error('请完成必填项');
            return false;
          }
        });
      },
      sendAudit() {
        this.CtObj.auditContract = 1;
        this.apipost("travelcontract_get_UpdateAuditContractService", {
          "AuditContract": 1,
          "Id": this.CtObj.Id
        }, res => {
          if (res.data.resultCode === 1) {
            this.Success(res.data.message);
          } else {
            this.Error(res.data.message);
          }
        }, null);
      },
      GetTrip(id, TCID) {
        this.tripList = [];
        this.startDate = '';
        var nTCID = 0;
        if (TCID) {
          nTCID = TCID;
        }
        var msg = {
          configId: 0,
          tcid: nTCID,
          isClick: 1 //不算统计
        };
        if (id !== undefined) {
          //根据ID 获取行程内容
          this.apipost(
            "b2b_get_GetB2BTravelInfoNoDes", msg,
            res => {
              if (res.data.resultCode == 1) {
                if (res.data.data.priceList && res.data.data.priceList.length > 0) {
                  this.startDate = res.data.data.priceList[0].startDate;
                }
                this.tripList = res.data.data.dayList;
                this.init();
              }
            },
            err => {}
          );
        } else {
          var dayList = [];
          this.subConfig.DayList.forEach((objItem, objIndex) => {
            var dayItem = this.$tripUtils.daysArrayObj();
            dayItem.dayNum = objItem.dayNum;
            //每一天的数组
            var dayArray = [];
            //子项遍历
            objItem.dayArray.forEach(subItem => {
              switch (subItem.Type) {
                //交通
                case "1":
                  var subTraffiArray = [];
                  subItem.childItem.SubTraffic.forEach(subTrafficItem => {
                    subTraffiArray.push({
                      startCityName: subTrafficItem.StartCityName,
                      arrivalType: subTrafficItem.ArrivalType,
                      arrivalCityName: subTrafficItem.ArrivalCityName
                    });
                  });
                  var trafficObj = {
                    type: subItem.Type,
                    childItem: {
                      description: subItem.childItem.Description,
                      subTraffic: subTraffiArray
                    }
                  };
                  dayArray.push(trafficObj);
                  break;
                  //景点
                case "2":
                  var imgArray = [];
                  subItem.childItem.ImaArray.forEach(imgItem => {
                    imgArray.push({
                      url: imgItem.Url,
                      name: imgItem.Name
                    });
                  });
                  var scenicObj = {
                    type: subItem.Type,
                    childItem: {
                      couponsName: subItem.childItem.CouponsName,
                      couponsTicketName: subItem.childItem.CouponsTicketName,
                      playTimeHour: subItem.childItem.PlayTimeHour,
                      playTimeMinutes: subItem.childItem.PlayTimeMinutes,
                      description: subItem.childItem.Description,
                      imaArray: imgArray
                    }
                  };
                  dayArray.push(scenicObj);
                  break;
                  //酒店
                case "3":
                  var imgArray = [];
                  subItem.childItem.ImaArray.forEach(imgItem => {
                    imgArray.push({
                      url: imgItem.Url,
                      name: imgItem.Name
                    });
                  });
                  var hotelObj = {
                    type: subItem.Type,
                    childItem: {
                      hotelName: subItem.childItem.HotelName,
                      hotelProductName: subItem.childItem.HotelProductName,
                      useDinnerType: subItem.childItem.UseDinnerType,
                      description: subItem.childItem.Description,
                      imaArray: imgArray
                    }
                  };
                  dayArray.push(hotelObj);
                  break;
                  //餐厅
                case "4":
                  var imgArray = [];
                  subItem.childItem.ImaArray.forEach(imgItem => {
                    imgArray.push({
                      url: imgItem.Url,
                      name: imgItem.Name
                    });
                  });
                  var dinnerObj = {
                    type: subItem.Type,
                    childItem: {
                      dinnerName: subItem.childItem.DinnerName,
                      mealName: subItem.childItem.MinnerName,
                      useDinnerType: subItem.childItem.UseDinnerType,
                      useTimeHour: subItem.childItem.UseTimeHour,
                      useTimeMinutes: subItem.childItem.UseTimeMinutes,
                      description: subItem.childItem.Description,
                      descriptionText: subItem.childItem.Description,
                      imaArray: imgArray
                    }
                  };
                  dayArray.push(dinnerObj);
                  break;
                  //自由活动
                case "5":
                  var freedomObj = {
                    type: subItem.Type,
                    childItem: {
                      description: subItem.Description,
                      descriptionText: subItem.Description
                    }
                  };
                  dayArray.push(freedomObj);
                  break;
                  //温馨提示
                case "6":
                  var warmObj = {
                    type: subItem.Type,
                    childItem: {
                      description: subItem.Description,
                      descriptionText: subItem.Description
                    }
                  };
                  dayArray.push(warmObj);
                  break;
                  //行程大点
                case "7":
                  var titleObj = {
                    type: subItem.Type,
                    childItem: {
                      title: subItem.childItem.Title,
                      description: subItem.childItem.Description
                    }
                  };
                  dayArray.push(titleObj);
                  break;
              }
            });
            dayItem.dayArray = dayArray;
            dayList.push(dayItem);
          });
          this.tripList = dayList;
          this.init();
        }
      },
      init() {
        this.tripList.forEach((x, j) => {
          let useDinnerTypeBy = "";
          let jin = [],
            jiu = [],
            jiu2 = [],
            jiao = [],
            dadian = [],
            tips = [],
            activy = [],
            can = {
              breakfirst: "敬请自理",
              lanuch: "敬请自理",
              dinner: "敬请自理"
            };
          x.dayArray.forEach((y, index) => {
            if (y.type == 7 && y.childItem.title != "") {
              let obj = {
                title: y.childItem.title,
                content: y.childItem.description,
                img: y.childItem.imaArray && y.childItem.imaArray.length > 0 ?
                  y.childItem.imaArray[0].url : "",
                ticketName: "",
                playTimeHour: null,
                playTimeMinutes: null
              };
              dadian.push(obj);
            } else if (y.type == 1 && y.childItem.subTraffic.length > 0) {
              let title = "";
              y.childItem.subTraffic.forEach((z, i) => {
                title += z.startCityName;
                if (z.arrivalType == 1) {
                  title += '-';
                } else if (z.arrivalType == 2) {
                  title += '-';
                } else if (z.arrivalType == 3) {
                  title += '-';
                } else {
                  title += '-';
                }
                if (i + 1 == y.childItem.subTraffic.length) {
                  title += z.arrivalCityName;
                }
              });
              let obj = {
                title: title,
                content: y.childItem.description,
                img: "",
                ticketName: "",
                playTimeHour: null,
                playTimeMinutes: null
              };
              jiao.push(obj);
            } else if (
              y.type == 2 &&
              y.childItem.couponsName != "" &&
              y.childItem.imaArray.length > 0
            ) {
              let obj = {
                title: y.childItem.couponsName,
                content: y.childItem.description,
                img: y.childItem.imaArray[0].url,
                ticketName: y.childItem.couponsTicketName,
                playTimeHour: y.childItem.playTimeHour,
                playTimeMinutes: y.childItem.playTimeHour
              };
              jin.push(obj);
            } else if (
              y.type == 3 &&
              y.childItem.hotelName != "" &&
              y.childItem.imaArray.length > 0
            ) {
              let obj = {
                title: y.childItem.hotelName,
                content: y.childItem.description,
                img: y.childItem.imaArray[0].url,
                ticketName: "",
                playTimeHour: null,
                playTimeMinutes: null
              };
              jiu.push(obj);
            } else if (y.type == 4) {
              if (y.childItem.useDinnerType == "1") {
                can.breakfirst = y.childItem.dinnerName;
              } else if (y.childItem.useDinnerType == "2") {
                can.lanuch = y.childItem.dinnerName;
              } else if (y.childItem.useDinnerType == "3") {
                can.dinner = y.childItem.dinnerName;
              }
            } else if (y.type == 5) {
              let obj = {
                title: "自由活动",
                content: y.childItem.description,
                img: "",
                ticketName: "",
                playTimeHour: null,
                playTimeMinutes: null
              };
              activy.push(obj);
            } else if (y.type == 6) {
              let obj = {
                title: y.childItem.title,
                content: y.childItem.description,
                img: "",
                ticketName: "",
                playTimeHour: null,
                playTimeMinutes: null
              };
              tips.push(obj);
            }
            if (y.type == 3) {
              jiu2.push(y.childItem.hotelName);
              useDinnerTypeBy = y.childItem.useDinnerType;
            }
          });
          if (
            can.breakfirst == "敬请自理" &&
            useDinnerTypeBy.indexOf("1") != -1
          ) {
            can.breakfirst = "酒店内享用早餐";
          }
          if (can.lanuch == "敬请自理" && useDinnerTypeBy.indexOf("2") != -1) {
            can.lanuch = "酒店自助";
          }
          if (can.dinner == "敬请自理" && useDinnerTypeBy.indexOf("3") != -1) {
            can.dinner = "酒店自助";
          }
          x.can = can;
          let details = [];
          x.tips = tips;
          x.jiu2 = jiu2;
          if (jin.length > 0) {
            details = jin;
          } else if (jiu.length > 0) {
            details = jiu;
          } else if (dadian.length > 0) {
            details = dadian;
          } else if (jiao.length > 0) {
            if (j == this.tripList.length - 1) {
              let obj = {
                title: "温暖的家",
                content: "感谢您参加本次行程，期待下次与您相遇",
                img: ""
              };
              details.push(obj);
            } else {
              details = jiao;
            }
          } else if (activy.length > 0) {
            details = activy;
          }
          x.title =
            dadian.length > 0 ?
            dadian[0].title :
            jiao.length > 0 ?
            jiao[0].title :
            "集合出发";
          x.details = details;

          if (x.details.length == 0) {
            if (j == 0) {
              let obj = {
                title: "集合出发",
                content: "向着远方的目标出发起飞",
                img: "",
                ticketName: "",
                playTimeHour: null,
                playTimeMinutes: null
              };
              details.push(obj);
            } else if (j == this.tripList.length - 1) {
              let obj = {
                title: "温暖的家",
                content: "感谢您参加本次行程，期待下次与您相遇",
                img: "",
                ticketName: "",
                playTimeHour: null,
                playTimeMinutes: null
              };
              details.push(obj);
            }
          } else {
            if (x.title == "集合出发") {
              x.details.forEach(xc => {
                if (xc.title !== undefined) x.title = xc.title + "~";
              });
              if (x.title == "集合出发") {
                if (j > 0 && j < tripList.length - 1) x.title = "自由活动";
              } else {
                x.title = x.title.substring(0, x.title.length - 1);
              }
            }
          }
          x.islast = j + 1 == this.tripList.length;
          this.$set(this.tripList, j, x);
        });
        for (let i = this.tripList.length - 1; i >= 0; i--) {
          if (i == 0) this.tripList[i].can.breakfirst = "敬请自理";
          else {
            this.tripList[i].can.breakfirst = this.tripList[i - 1].can.breakfirst;
            if (
              this.tripList[i].lineId != 5 &&
              this.tripList[i].can.breakfirst == "敬请自理"
            )
              this.tripList[i].can.breakfirst = "酒店内享用早餐";
          }
        }
        let str = '';
        this.tripList.forEach((x, index) => {
          str += `第${x.dayNum}天  ${x.title}\n`
          x.details.forEach(y => {
            if (index == this.tripList.length - 1) {
              str += `温暖的家\n`
            } else {
              str += `${y.title}\n`
            }
          })
          str += `早餐：${x.can.breakfirst}\n午餐：${x.can.lanuch}\n晚餐：${x.can.dinner}\n \r`
        })
        this.CtObj.travelContent = str;
      }
    },
    mounted() {
      this.GetCounrty();
      this.msg.TCID = this.$route.query.TCID;
      this.msg.orderID = this.$route.query.orderID;
      this.getList();
      this.GetTrip(0, this.msg.TCID);
    }
  };

</script>