<style>
  .PT_teamTable {
    width: 100%;
    background-color: #fff;
    border-collapse: collapse;
  }

  .PT_teamTable td,
  .PT_teamTable th {
    border: 1px solid #dcdcdc;
    padding: 6px;
    height: 30px;
  }

  .PT_teamTable tr th {
    height: 30px;
    background-color: #297bef;
    border: 1px solid #dcdcdc;
    color: #fff;
  }

  .Tp_table .el-table td {
    padding: 0 !important;
  }

  .Tp_table .el-table th {
    padding: 12px 0 !important;
  }

  .Tp_table .has-gutter th {
    background-color: #dcdcdc;
  }

  .Tp_table .el-table .cell {
    line-height: 3 !important;
  }

  .passgenrDialog {
    width: 1000px;
  }

  .PgflightDiv {
    font-size: 12px;
    color: #666666;
    background-color: #e0f4ff;
    width: 230px;
    height: 175px;
    border-radius: 4px;
    float: left;
    margin-right: 10px;
  }

  .PgflightDiv p:first-child {
    padding-left: 8px;
    color: #387ea5;
    background-color: #cbe9fa;
    height: 34px;
    line-height: 34px;
  }

  .PgflightDiv ._add_info {
    margin-top: 12px;
    padding: 0 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pg_table {
    width: 100%;
  }

  .pg_table tr {
    display: block;
    margin: 10px 0;
  }

  .pg_table tr:last-child {
    border-top: 1px dashed #d1d1d1;
    padding-top: 10px;
  }

  .pmyTable .el-input__inner {
    height: 23px !important;
    padding: 0 5px;
  }

  .Pgzhu {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: #E95252;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    color: #fff;
    position: absolute;
    top: -35px;
    left: -20px;
  }

  .Pglian {
    background-color: #47bf8c;
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    color: #fff;
  }

  /*拒签人员*/
  .singeRowTable .redTr td {
    color: #E95252;
  }

  .pg_checkModule {
    margin-top: 20px;
    font-size: 14px;
  }

</style>

<template>
  <div class="flexOne PassengerList">
    <div class="query-box">
      <ul>
        <li>
          <table class="PT_teamTable">
            <tr>
              <th width="140">{{$t('visa.v_tuanhao')}}</th>
              <th>{{$t('Operation.Op_TeamName')}}</th>
              <th width="50">{{$t('admin.admin_personNumber')}}</th>
              <th width="120">{{$t('hotel.hotel_StarDate')}}</th>
            </tr>
            <tr v-for="(item,index) in QueryMsg.TeamInfoData" :key="index">
              <td>{{item.TCNUM}}</td>
              <td>{{item.Title}}</td>
              <td>{{item.OfferNumber}}{{$t('hotel.hotel_people')}}</td>
              <td>{{item.StartDate}} {{item.WeekStr}}</td>
            </tr>
          </table>
        </li>
        <li>
          <el-select v-if="!isShowAirticketOut" size="small" v-model="msg.checkOutState" @change="msg.pageIndex=1,getList()" :placeholder="$t('objFill.v101.qingxzchuplx')">
            <el-option :label="$t('advmanager.v_all')" :value="0"></el-option>
            <el-option :label="$t('objFill.v101.yichupiao')" :value="1"></el-option>
            <el-option :label="$t('objFill.v101.weichupiao')" :value="2"></el-option>
          </el-select>
          <input v-if="!isShowAirticketOut" type="button" class="normalBtn" :value="$t('objFill.v101.kaipiao')" @click="openAirticket" />
          <el-select v-if="isShowAirticketOut" size="small" v-model="checkOutMsg.TicketOutType" :placeholder="$t('objFill.v101.qingxzkpleix')">
            <el-option :label="$t('objFill.v101.tuanduip')" :value="1"></el-option>
            <el-option :label="$t('objFill.v101.shankep')" :value="2"></el-option>
          </el-select>
          <input v-if="isShowAirticketOut" type="button" class="normalBtn" :value="$t('objFill.v101.baocunkaipxxi')" @click="setAirticketGuest" />
          <input type="button" class="normalBtn" :value="$t('objFill.v101.administrative.daochubaob')" @click="getFlightInfo(0),getCombinTeam()" />
          <el-tooltip class="item" effect="dark" :content="$t('objFill.v101.baohanjipxxi')" placement="bottom">
            <input type="button" class="normalBtn" :value="$t('objFill.v101.daoclkhanb')" @click="getFlightInfo(1),getCombinTeam()" />
          </el-tooltip>
          <input type="button" class="normalBtn" v-if="isShowGuoji" :value="$t('objFill.v101.zhizuocwdju')" @click="makeFinacelDoc()" />
          <input type="button" class="normalBtn" :value="$t('objFill.v101.administrative.daochubaob')" @click="exportExcel()" style="display:none;" />
        </li>
      </ul>
    </div>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th v-if="isShowGuoji">{{$t('objFill.guojijp')}} <input type="checkbox" @change="checkAllbox(checkdGuoji,'guoji')"
            v-model="checkdGuoji" /></th>
        <th v-if="isShowGuoji">{{$t('objFill.v101.DomesticModule.guoneijp')}} <input type="checkbox" @change="checkAllbox(checkedGuonei,'guonei')"
            v-model="checkedGuonei" /></th>
        <th v-if="isShowGuoji">{{$t('objFill.v101.guojizhongduan')}} <input type="checkbox" @change="checkAllbox(checkedGJzd,'gjzd')"
            v-model="checkedGJzd" /></th>
        <th v-if="isShowGuoji">{{$t('objFill.shuijin')}} <input type="checkbox" @change="checkAllbox(checkedshuijin,'shuijin')"
            v-model="checkedshuijin" /></th>
        <th v-if="isShowGuoji">{{$t('objFill.v101.shenchan')}} <input type="checkbox" @change="checkAllbox(checkedsc,'shengcang')"
            v-model="checkedsc" /></th>
        <th v-if="isShowAirticketOut">
          {{$t('objFill.v101.chupiao')}} <input type="checkbox" @change="checkAllbox(checkAirticketOut,'checkAirticketOut')"
            v-model="checkAirticketOut" />
        </th>
        <th>{{$t('objFill.lvkexm')}}</th>
        <th>{{$t('objFill.shengfenzheng')}}</th>
        <th>{{$t('visaT.Englishsurname')}}</th>
        <th>{{$t('admin.admin_EnSurname')}}</th>
        <th>{{$t('system.table_sex')}}</th>
        <th>{{$t('admin.admin_BirthDate')}}</th>
        <th>{{$t('admin.admin_BirthPlace')}}</th>
        <th>{{$t('sm.huzhaohaoma')}}</th>
        <th>{{$t('objFill.v101.zhengjyxqi')}}</th>
        <th>{{$t('objFill.v101.kerlxfshi')}}</th>
        <th>{{$t('visa.v_qianzhengst')}}</th>
        <th>{{$t('salesModule.TicketStatus')}}</th>
      </tr>
      <tr v-for="(item,index) in QueryMsg.dataList" :class="{'redTr':item.VisaState==1}" :key="index+10000">
        <td v-if="isShowGuoji">
          <input v-model="item.guoji" type="checkbox" />
        </td>
        <td v-if="isShowGuoji">
          <input v-model="item.guonei" type="checkbox" />
        </td>
        <td v-if="isShowGuoji">
          <input v-model="item.gjzd" type="checkbox" />
        </td>
        <td v-if="isShowGuoji">
          <input v-model="item.shuijin" type="checkbox" />
        </td>
        <td v-if="isShowGuoji">
          <input v-model="item.shengcang" type="checkbox" />
        </td>
        <td v-if="isShowAirticketOut">
          <input type="checkbox" v-model="item.checkAirticketOut" />
        </td>
        <td>{{item.GuestName}}</td>
        <td>{{item.IdCard}}</td>
        <td>{{item.ESurName}}</td>
        <td>{{item.EName}}</td>
        <td>{{item.Sex}}</td>
        <td>{{item.Birthday}}</td>
        <td>{{item.BirthdayAddress}}</td>
        <td>{{item.PassportNo}}</td>
        <td>{{item.PassportExpiry}}</td>
        <td>{{item.NaMobilePhoneme}}</td>
        <td>{{item.VisaState==1?$t('salesModule.RefuseQ'):$t('pub.normalSel')}}</td>
        <td>
          <template v-if="item.TicketOutType==0">
            <span style="color:red">{{item.TicketOutTypeStr}}</span>
          </template>
          <template v-if="item.TicketOutType==1">
            <span style="color:green">{{item.TicketOutTypeStr}}</span>
          </template>
          <template v-if="item.TicketOutType==2">
            <span style="color:blue">{{item.TicketOutTypeStr}}</span>
          </template>
        </td>
      </tr>
    </table>
    <div class="noData" v-show="QueryMsg.noData">
      {{$t('system.content_noData')}}
    </div>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="msg.currentPage"
      layout="total,prev, pager, next, jumper" :page-size='msg.PageSize' :total='msg.total'>
    </el-pagination>

    <el-dialog custom-class='passgenrDialog' :title="$t('ground.hanbanliebiao')" :visible.sync="outerVisible" center>
      <table border="0" cellspacing="0" cellpadding="0" class="singeRowTable pmyTable">
        <tr>
          <td colspan="6" style="text-align:left;font-weight:bold;padding-left:5px">{{$t('ground.pwhbxinxi')}}</td>
        </tr>
        <tr>
          <th>{{$t('system.query_flightNum')}}</th>
          <th>{{$t('system.table_begTime')}}</th>
          <th>{{$t('MarketingActi.endTime')}}</th>
          <th>{{$t('Airticket.Air_StartTime')}}</th>
          <th>{{$t('system.query_flightAir')}}</th>
          <th>{{$t('system.query_arrivalAir')}}</th>
        </tr>
        <tr v-for="(item,index) in flightList" :key="index+20000">
          <td>{{item.Flight_number}}</td>
          <td>
            <el-input class="w60" v-model="item.TicketDepartureTime" onkeyup="value=value.replace(/[^\d^\:]/g,'')">
            </el-input>
          </td>
          <td>
            <el-input class="w60" v-model="item.TicketArrivalTime" onkeyup="value=value.replace(/[^\d^\:]/g,'')">
            </el-input>
          </td>
          <td>{{item.FlightDate}}</td>
          <td>{{item.dName}}</td>
          <td>{{item.aName}}</td>
        </tr>
      </table>
      <table border="0" cellspacing="0" cellpadding="0" class="singeRowTable" style="margin-top:20px;"
        v-if="combineTeamList.length>0">
        <tr>
          <td colspan="9" style="text-align:left;font-weight:bold;padding-left:5px">{{$t('ground.lyhbxx')}}</td>
        </tr>
        <tr>
          <th>{{$t('visa.v_tuanhao')}}</th>
          <th>{{$t('objFill.v101.gongsicshi')}}</th>
          <th>{{$t('Airticket.Air_segment')}}</th>
          <th>{{$t('sm.Date')}}</th>
          <th>{{$t('system.query_flightNum')}}</th>
          <th>{{$t('Airticket.Air_StartTime')}}</th>
          <th>{{$t('objFill.v101.BasicDocuments.col.t4')}}</th>
          <th>{{$t('system.query_flightAir')}}</th>
          <th>{{$t('system.query_arrivalAir')}}</th>
        </tr>
        <tbody v-for="(subItem,subIndex) in combineTeamList" :key="subIndex+30000">
          <tr>
            <td rowspan="2">{{subItem.TCNUM}}({{subItem.TCID}})</td>
            <td rowspan="2">{{subItem.UnionBranchName}}({{subItem.UnionCityName}})</td>
            <td width="50">{{$t('Airticket.Air_go')}}</td>
            <td>{{subItem.GoFlightDateStr}}</td>
            <td>{{subItem.GoFlight_number}}</td>
            <td>
              <el-input class="w60" v-model="subItem.GoDepartTime" onkeyup="value=value.replace(/[^\d^\:]/g,'')">
              </el-input>
            <td>
              <el-input class="w60" v-model="subItem.GoArriveTime" onkeyup="value=value.replace(/[^\d^\:]/g,'')">
              </el-input>
            </td>
            <td>{{subItem.GoDepartAirportName}}</td>
            <td>{{subItem.GoArrivalAirportName}}</td>
          </tr>
          <tr>
            <td width="50">{{$t('Airticket.Air_returnTrip')}}</td>
            <td>{{subItem.BackFlightDateStr}}</td>
            <td>{{subItem.BackFlight_number}}</td>
            <td>
              <el-input class="w60" v-model="subItem.BackDepartTime" onkeyup="value=value.replace(/[^\d^\:]/g,'')">
              </el-input>
            <td>
              <el-input class="w60" v-model="subItem.BackArriveTime" onkeyup="value=value.replace(/[^\d^\:]/g,'')">
              </el-input>
            </td>
            <td>{{subItem.BackDepartAirportName}}</td>
            <td>{{subItem.BackArrivalAirportName}}</td>
          </tr>
        </tbody>
      </table>
      <div slot="footer" class="dialog-footer">
        <!--吉祥航空模板-->
        <span class="pg_checkModule" v-if="isShowSelect==1">
          {{$t('objFill.v101.xuanzmob')}}
          <el-select v-model="checkModule" filterable :placeholder="$t('system.ph_buxian')" class="w180">
            <el-option :label="$t('objFill.v101.dailimob')" :value="0"></el-option>
            <el-option :label="$t('objFill.v101.hankgsb2bmob')" :value="1"></el-option>
          </el-select>
        </span>
        <!--南方航空模板-->
        <span class="pg_checkModule" v-if="isShowSelect==2">
          {{$t('objFill.v101.xuanzmob')}}
          <el-select v-model="checkModule" filterable :placeholder="$t('system.ph_buxian')" class="w180">
            <el-option :label="$t('objFill.v101.daimamob')" :value="0"></el-option>
            <el-option :label="$t('objFill.v101.nanhgjitd')" :value="1"></el-option>
          </el-select>
        </span>
        <button class="normalBtn" type="primary" @click="getIsSure()">{{$t('objFill.v101.querenhbxxin')}}</button> &nbsp;
        <button class="hollowFixedBtn" @click="outerVisible = false">{{$t('pub.cancelBtn')}}</button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        //请求数据
        msg: {
          PageIndex: 1,
          PageSize: 15,
          AirTicketId: 0,
          total: 0,
          currentPage: 1,
          checkOutState:0,//出票状态(1-已出票，2-未出票)
        },
        QueryMsg: {
          loading: true,
          //返回数据
          dataList: [],
          noData: false,
          AirTicketId: 0,
          //团期数据
          TeamInfoData: [],
          nowDate: "",
          //模板代码
          TempCode: ""
        },
        outerVisible: false,
        TemplateType: 0,
        flightList: [],
        combineTeamList: [],
        isShowGuoji: false,
        jipiaoObj: {
          guojiArr: [],
          guoneiArr: [],
          gjzdArr: [],
          shuijinArr: [],
          shengcangArr: []
        },
        checkdGuoji: false,
        checkedGuonei: false,
        checkedGJzd: false,
        checkedshuijin: false,
        checkedsc: false,
        isShowSelect: 0,
        checkModule: 0,
        isShowAirticketOut: false, //是否线下开票
        checkAirticketOut: false,
        //提交开票类型
        checkOutMsg: {
          TicketOutType: 1,
          GuestIds: ""
        }
      };
    },
    methods: {
      openAirticket() {
        this.isShowAirticketOut = true;
      },
      //设置旅客的出票类型
      setAirticketGuest() {
        var tempIds = "";
        if (this.QueryMsg.dataList && this.QueryMsg.dataList.length > 0) {
          this.QueryMsg.dataList.forEach(item => {
            if (item.checkAirticketOut) {
              tempIds += "," + item.Id;
            }
          })
        }
        this.checkOutMsg.GuestIds = tempIds;
        this.apipost("travel_get_SetAirticketGuest", this.checkOutMsg, res => {
          if (res.data.resultCode == 1) {
            this.Success(res.data.message);
            this.getList();
            this.isShowAirticketOut = false;
            this.checkOutMsg.GuestIds = "";
            this.checkOutMsg.TicketOutType = 1;
            this.checkAirticketOut = false;
          } else {
            this.Error(res.data.message);
          }
        })
      },
      //获取数据
      getList() {
        this.QueryMsg.loading = true;
        this.apipost(
          "travel_get_GetAirTicketGuestPageList",
          this.msg,
          res => {
            this.QueryMsg.loading = false;
            if (res.data.resultCode == 1) {
              this.msg.total = res.data.data.count;
              this.QueryMsg.dataList = res.data.data.pageData;
              this.QueryMsg.noData = !this.msg.total > 0;
              let arrText = [this.$t('pub.man'),this.$t('pub.woman')]
              this.QueryMsg.dataList.forEach(item => {
                if (item.Sex == 1) {
                  item.Sex = arrText[0];
                } else {
                  item.Sex = arrText[0];
                }
                item.checkAirticketOut = false;
              });
              if (this.isShowGuoji) {
                this.QueryMsg.dataList.forEach(x => {
                  x.guoji = false;
                  x.guonei = false;
                  x.gjzd = false;
                  x.shuijin = false;
                  x.shengcang = false;
                })
              }
            }
          },
          err => {}
        );
      },
      getFlightInfo(val) {
        this.TemplateType = val;
        let msg = {
          ID: this.$route.query.id
        }
        this.apipost("ticket_get_GetEntityExtend", msg, res => {
          if (res.data.resultCode == 1) {
            this.flightList = res.data.data.flightList;
          } else {
            this.Error(res.data.message);
          }
        });
        this.outerVisible = true;
      },
      //获取联运团信息
      getCombinTeam() {
        let msg = {
          AirTicketId: this.$route.query.id,
        }
        this.apipost("ticket_get_GetUnionFlightAllInfo", msg, res => {
          if (res.data.resultCode == 1) {
            this.combineTeamList = res.data.data;
          } else {
            this.Error(res.data.message);
          }
        }, err => {});
      },
      //是否确定
      getIsSure() {
        this.$confirm(this.$t('objFill.v101.shifqrhbxxi'), this.$t('tips.tips'), {
            confirmButtonText: this.$t('pub.sureBtn'),
            cancelButtonText: this.$t('pub.cancelBtn'),
            type: "warning"
          })
          .then(() => {
            this.getCheckInfo();
          })
          .catch(() => {
            this.$message.info(this.$t('hotel.hotel_HasBeenCancelled'));
          });
      },
      getCheckInfo() {
        let FlightList = []
        this.flightList.forEach(x => {
          var obj = {
            ID: x.ID,
            TicketDepartureTime: x.TicketDepartureTime,
            TicketArrivalTime: x.TicketArrivalTime
          }
          FlightList.push(obj);
        })
        var unionFlightList = [];
        this.combineTeamList.forEach(item => {
          unionFlightList.push({
            Id: item.Id,
            GoDepartTime: item.GoDepartTime,
            GoArriveTime: item.GoArriveTime,
            BackDepartTime: item.BackDepartTime,
            BackArriveTime: item.BackArriveTime
          });
        });
        let msg = {
          AirTicketId: this.$route.query.id,
          FlightList: FlightList,
          UnionFlightList: unionFlightList
        }
        this.apipost("ticket_post_SetFlightChildConfirm", msg, res => {
          if (res.data.resultCode == 1) {
            this.Success(res.data.message);
            this.exportExcel();
            this.outerVisible = false;
          } else {
            this.Error(res.data.message);
          }
        }, err => {});
      },
      //导出报表
      exportExcel() {
        let msg = {
          AirTicketId: this.msg.AirTicketId,
          Type: this.checkModule,
          TemplateType: this.TemplateType,
          checkOutState:this.msg.checkOutState,//出票状态(1-已出票，2-未出票)
        };
        var fileName = this.$route.query.flightdate;
        var TempfileName = ""
        this.QueryMsg.TeamInfoData.forEach(item => {
          if (TempfileName.length > 0) {
            TempfileName += "/" + item.TCNUM
          } else {
            TempfileName += item.TCNUM
          }
        })
        fileName = fileName + TempfileName
        fileName = fileName + this.$route.query.alcode
        //厦航的用csv
        if (this.QueryMsg.TempCode == "MF") {
          fileName = fileName + ".csv";
        } else {
          fileName = fileName + ".xls";
        }
        this.GetLocalFile("travel_get_GetAirTicketGuestExport", msg, fileName);
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.msg.currentPage = 1;
      },
      //获取团期信息
      getTeamInfo() {
        var msg = {
          AirTicketId: this.QueryMsg.AirTicketId
        };
        this.apipost(
          "travel_get_GetAirTicketTravelPriceReportInfo",
          msg,
          res => {
            if (res.data.resultCode == 1) {
              this.QueryMsg.TeamInfoData = res.data.data.resultData;
              this.QueryMsg.TempCode = res.data.data.TempCode;
            }
          },
          err => {}
        );
      },
      makeFinacelDoc() {
        this.jipiaoObj.guojiArr = [];
        this.jipiaoObj.guoneiArr = [];
        this.jipiaoObj.gjzdArr = [];
        this.jipiaoObj.shuijinArr = [];
        this.jipiaoObj.shengcangArr = [];
        this.QueryMsg.dataList.forEach(x => {
          if (x.guoji) {
            this.jipiaoObj.guojiArr.push(x.GuestName);
          }
          if (x.guonei) {
            this.jipiaoObj.guoneiArr.push(x.GuestName);
          }
          if (x.gjzd) {
            this.jipiaoObj.gjzdArr.push(x.GuestName);
          }
          if (x.shuijin) {
            this.jipiaoObj.shuijinArr.push(x.GuestName);
          }
          if (x.shengcang) {
            this.jipiaoObj.shengcangArr.push(x.GuestName);
          }
        })
        if (this.jipiaoObj.guojiArr.length == 0 && this.jipiaoObj.guoneiArr.length == 0 && this.jipiaoObj.gjzdArr
          .length == 0 && this.jipiaoObj.shuijinArr.length == 0 && this.jipiaoObj.shengcangArr.length == 0) {
          this.Error(this.$t('objFill.v101.qingxzlkmd'));
        } else {
          sessionStorage.setItem("guoji", JSON.stringify(this.jipiaoObj));
          let orderObj = {
            OrderID: 0,
            OrderSource: 4,
            Obj: JSON.parse(this.$route.query.Obj),
            SourceID: this.$route.query.id,
            TCIDList: JSON.parse(this.$route.query.TCIDList),
            companyIDList: JSON.parse(this.$route.query.companyIDList),
            isFromPassenger: true,
          }
          this.$router.push({
            name: 'ChoiceAddFinancialDocuments',
            query: {
              "Type": 2,
              "portTypeId": 1,
              "path": "",
              'blank': 'y',
              'orderObj': JSON.stringify(orderObj)
            }
          });
        }
      },
      //设置全选
      checkAllbox(x, y) {
        if (x) {
          this.QueryMsg.dataList.forEach(x => {
            x[y] = true
          })
        } else {
          this.QueryMsg.dataList.forEach(x => {
            x[y] = false
          })
        }
      },

    },
    mounted() {
      this.QueryMsg.AirTicketId = this.$route.query.id;
      var alcode = this.$route.query.alcode;
      if (alcode == 'HO') {
        this.isShowSelect = 1;
      } else if (alcode == "CZ") {
        this.isShowSelect = 2;
      }
      this.msg.AirTicketId = this.$route.query.id;
      if (this.$route.query.isFromTk != undefined) {
        this.isShowGuoji = this.$route.query.isFromTk;
      }
      var myDate = new Date();
      this.QueryMsg.nowDate =
        myDate.getFullYear() +
        "-" +
        (Number(myDate.getMonth()) + 1) +
        "-" +
        myDate.getDate();
      this.getTeamInfo();
      if (this.isShowGuoji) {
        this.msg.PageSize = 200;
      }
      this.getList();
    }
  };

</script>