<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">团号</th>
              <th>团名</th>
              <th width="50">人数</th>
              <th width="120">出发日期</th>
            </tr>
            <tr v-for="item in QueryMsg.TeamInfoData">
              <td>{{item.TCNUM}}</td>
              <td>{{item.Title}}</td>
              <td>{{item.OfferNumber}}人</td>
              <td>{{item.StartDate}} {{item.WeekStr}}</td>
            </tr>
          </table>
        </li>
        <li>
          <input type="button" class="normalBtn" value="导出报表" @click="getFlightInfo(),getCombinTeam()" />
          <input type="button" class="normalBtn" v-if="isShowGuoji" value="制作财务单据" @click="makeFinacelDoc()" />
          <input type="button" class="normalBtn" value="导出报表" @click="exportExcel()" style="display:none;" />
        </li>
      </ul>
    </div>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th v-if="isShowGuoji">国际机票 <input type="checkbox" @change="checkAllbox(checkdGuoji,'guoji')"
            v-model="checkdGuoji" /></th>
        <th v-if="isShowGuoji">国内机票 <input type="checkbox" @change="checkAllbox(checkedGuonei,'guonei')"
            v-model="checkedGuonei" /></th>
        <th v-if="isShowGuoji">国际中段 <input type="checkbox" @change="checkAllbox(checkedGJzd,'gjzd')"
            v-model="checkedGJzd" /></th>
        <th v-if="isShowGuoji">税金 <input type="checkbox" @change="checkAllbox(checkedshuijin,'shuijin')"
            v-model="checkedshuijin" /></th>
        <th v-if="isShowGuoji">升舱 <input type="checkbox" @change="checkAllbox(checkedsc,'shengcang')"
            v-model="checkedsc" /></th>
        <th>旅客姓名</th>
        <th>身份证</th>
        <th>英文姓</th>
        <th>英文名</th>
        <th>性别</th>
        <th>出生日期</th>
        <th>出生地</th>
        <th>护照号码</th>
        <th>证件有效期</th>
        <th>客人联系方式</th>
        <th>签证状态</th>
      </tr>
      <tr v-for="(item,index) in QueryMsg.dataList" :class="{'redTr':item.VisaState==1}">
        <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>{{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?"拒签":"正常"}}</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="航班列表" :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">票务航班信息</td>
        </tr>
        <tr>
          <th>航班号</th>
          <th>开始时间</th>
          <th>结束时间</th>
          <th>出发时间</th>
          <th>起飞机场</th>
          <th>到达机场</th>
        </tr>
        <tr v-for="item in flightList">
          <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">联运航班信息</td>
        </tr>
        <tr>
          <th>团号</th>
          <th>公司/城市</th>
          <th>航段</th>
          <th>日期</th>
          <th>航班号</th>
          <th>出发时间</th>
          <th>到达时间</th>
          <th>起飞机场</th>
          <th>到达机场</th>
        </tr>
        <tbody v-for="subItem in combineTeamList">
          <tr>
            <td rowspan="2">{{subItem.TCNUM}}({{subItem.TCID}})</td>
            <td rowspan="2">{{subItem.UnionBranchName}}({{subItem.UnionCityName}})</td>
            <td width="50">去程</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>
            <td>{{subItem.GoDepartAirportName}}</td>
            <td>{{subItem.GoArrivalAirportName}}</td>
          </tr>
          <tr>
            <td width="50">回程</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>
            <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">
          选择模板
          <el-select v-model="checkModule" filterable :placeholder="$t('system.ph_buxian')" class="w180">
            <el-option label="代理模板" :value="0"></el-option>
            <el-option label="航空公司B2B模板" :value="1"></el-option>
          </el-select>
        </span>
       <!--南方航空模板-->
       <span class="pg_checkModule" v-if="isShowSelect==2">
          选择模板
          <el-select v-model="checkModule" filterable :placeholder="$t('system.ph_buxian')" class="w180">
            <el-option label="代码模板" :value="0"></el-option>
            <el-option label="南航国际团队" :value="1"></el-option>
          </el-select>
        </span>
        <button class="normalBtn" type="primary" @click="getIsSure()">确认航班信息</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
        },
        QueryMsg: {
          loading: true,
          //返回数据
          dataList: [],
          noData: false,
          AirTicketId: 0,
          //团期数据
          TeamInfoData: [],
          nowDate: "",
          //模板代码
          TempCode: ""
        },
        outerVisible: false,
        flightList: [],
        combineTeamList: [],
        isShowGuoji: false,
        jipiaoObj: {
          guojiArr: [],
          guoneiArr: [],
          gjzdArr: [],
          shuijinArr: [],
          shengcangArr: []
        },
        checkdGuoji: false,
        checkedGuonei: false,
        checkedGJzd: false,
        checkedshuijin: false,
        checkedsc: false,
        isShowSelect:0,
        checkModule:0
      };
    },
    methods: {
      //获取数据
      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;
              this.QueryMsg.dataList.forEach(item => {
                if (item.Sex == 1) {
                  item.Sex = "男";
                } else {
                  item.Sex = "女";
                }
              });
              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() {
        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);
          }
        }, err => {});
        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("是否确认航班信息?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            this.getCheckInfo();
          })
          .catch(() => {
            this.$message.info("已取消！");
          });
      },
      //确定
      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
        };
        var fileName = this.$route.query.flightdate //this.QueryMsg.nowDate;
        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
        //国航的用word
        if (this.QueryMsg.TempCode == "CATempla") {
          fileName = fileName + ".doc";
        } 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('请选择旅客名单');
        }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,
              "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>