<style>
.PlaneTicket .el-input--prefix .el-input__inner {
  padding-left: 30px;
}
.PlaneTicket_list {
  padding: 20px 0 0 0;
}
.PlaneTicket ._ol_info {
  font-size: 12px;
  width: 100%;
  overflow-x: auto;
  height: 100%;
}

.PlaneTicket ._ol_color {
  font-size: 12px;
  width: 100%;
  margin-bottom: 20px;
}
.PlaneTicket ._ol_color li {
  float: left;
  padding: 0 15px;
  display: flex;
  align-items: center;
}
.PlaneTicket ._ol_color li ._cl {
  border-radius: 3px;
  display: inline-block;
  width: 5px;
  height: 12px;
  margin-right: 5px;
}
.PlaneTicket ._red {
  background-color: #e95252;
}
.PlaneTicket ._red_text {
  color: #e95252;
}
.PlaneTicket ._green {
  background-color: #47bf8c;
}
.PlaneTicket ._green_text {
  color: #47bf8c;
}
.PlaneTicket ._blu {
  background-color: #2aaef2;
}
.PlaneTicket ._blu_text {
  color: #2aaef2;
}
.PlaneTicket ._ol_list {
  margin-top: 20px;
  min-height: 500px;
}
.PlaneTicket_flex_none.PlaneTicket ._ol_list > li {
  align-items: center;
  height: 78px;
  border:1px solid #dddddd;
  margin: 20px 0 0px 15px;
  overflow: hidden;
  transition: linear all 0.5s;
  background-color: #fff;
}
.PlaneTicket ._ol_list > li:hover {
  box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
  transition: all linear 0.5s;
}
.PlaneTicket ._oll_tit {
  color: #333333;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.PlaneTicket ._oll_tit span {
  display: inline-block;
  padding: 1px 10px;
  font-size: 12px;
  border: solid 1px #ff9000;
  color: #ff9000;
  border-radius: 4px;
}
.PlaneTicket ._oll_line {
  max-width: 5px;
  min-width: 5px;
  height: 78px;
  background: rgba(233, 82, 82, 1);
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  display: inline-block;
}
.PlaneTicket ._oll_line._o_green {
  background: #47bf8c;
}
.PlaneTicket ._oll_line._o_blu {
  background: #2aaef2;
}
.PlaneTicket ._oll_info {
  padding-left: 20px;
  overflow: hidden;
}
.PlaneTicket ._oll_img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  margin-left: 20px;
}
.PlaneTicket ._oll_adrr {
  color: white;
  font-size: 12px;
  margin-top: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  padding: 4px 9px;
  background-color: #2aaef2;
  border-radius: 2px;
}
.PlaneTicket ._oll_time {
  display: inline-block;
  background-color: #efefef;
  border-radius: 4px;
  color: #999999;
  font-size: 12px;
  padding: 2px 10px;
  margin-top: 10px;
}
.PlaneTicket ._oll_food {
  min-width: 64px;
  max-width: 64px;
  height: 36px;
  background: rgba(42, 174, 242, 1);
  border-radius: 4px;
  margin: 0 30px;
  color: white;
  line-height: 36px;
  text-align: center;
  padding: 0 10px;
  overflow: hidden;
}
.PlaneTicket .InfoChangeLog {
  max-width: 250px;
  height: auto;
  min-width: 250px;
  max-height: 220px;
  background-color: #ffffff;
  position: absolute;
  left: 0;
  z-index: 50;
  top: 70px;
  padding: 30px 20px 20px 0;
  box-shadow: 0px 0px 14px 0px #adadad;
}
.PlaneTicket .InfoChangeLog .close {
  color: #cccccc;
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 17px;
  height: 17px;
}
.wangfan {
  color: #2aaef2 !important;
  font-size: 12px !important;
  display: inline-block !important;
  padding: 4px 9px !important;
  background-color: white !important;
  border-radius: 9px !important;
  border: 1px solid #2aaef2 !important;
  width: auto !important;
  height: auto !important;
}
.wangfan.hollowFixedBtn:hover {
  color: #ffffff;
  border-color: #2aaef2;
  background-color: #2aaef2;
}
.wangfan.hollowFixedBtn {
  cursor: pointer;
}
._destination {
  text-align: center;
  padding: 0 20px 0 0;
}
._destination .iconfont {
  color: #2aaef2;
}
._destination p ._destination_line {
  color: #b7b7b7;
  position: relative;
  top: -3px;
}
._destination p ._destination_name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 50px;
  display: inline-block;
}
._CNY {
  height: 100%;
  display: flex;
  align-items: center;
  color: #333333;
  font-size: 16px;
  padding-left: 40px;
  min-width: 170px;
}
._CNY span {
  color: #47bf8c;
  font-size: 18px;
}
.OutFlightNum {
  height: 100%;
  padding:0 20px;
  font-size:12px;
  border-left: 1px dashed #dcdfe6;
}
.SeatList {
  width: 190px;
  height: 60px;
  background-color: #f9f9f9;
  margin: 9px 20px 0 0;
}
.SeatList > ul > li:nth-child(1) {
  margin-left: 16px;
}
.SeatList > ul > li {
  float: left;
  text-align: center;
  margin: 5px 21px 0 0;
}
.SeatList > ul > li:last-child {
  margin-right: 0;
}
.SeatList .iconfont {
  color: #d1d1d1;
  display: inline-block;
  margin-top: 5px;
}
.SeatList ._num1 {
  font-size: 20px;
  color: #333333;
  font-family: PingFangSC-Semibold, sans-serif;
}
.SeatList ._num2 {
  font-size: 20px;
  color: #47bf8c;
  font-family: PingFangSC-Semibold, sans-serif;
}
.SeatList ._num3 {
  font-size: 20px;
  color: #e95252;
  font-family: PingFangSC-Semibold, sans-serif;
}
.SeatList ._wz {
  color: #666666;
}
.SeatList ._yiyong {
  cursor: pointer;
  text-decoration: underline;
}
.TSS_raduis > ul {
  display: -webkit-box;
  align-items: center;
  padding-left: 25px;
  margin-top: 5px;
}
.TSS_raduis > ul > li:not(._head) {
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background-color: #47bf8c;
  color: white;
  text-align: center;
  line-height: 24px;
  margin-right: 16px;
}
.TSS_raduis > ul > li:not(._head) {
  background-color: #bcbcbc;
  color: #909090;
}
.TSS_raduis > ul > li._head {
  display: flex;
  align-items: center;
}
.TSS_raduis > ul > li._head img {
  height: 26px;
  width: 26px;
  border-radius: 50%;
  margin-left: 15px;
}
.TSS_raduis > ul > li._head span {
  padding-left: 7px;
  display: inline-block;
  margin-right: 25px;
}
._flaghtDate {
  color: #666666;
  margin: 0 30px;
  min-width: 100px;
}
._flaghtDate .PingFangSC {
  font-size: 16px;
}
._flaghtDate ._text {
  font-size: 12px;
}
._btn._tsseat_page {
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 25px;
  border-left: 1px dashed #dcdfe6;
}
._btn._tsseat_page .hollowFixedBtn {
  padding: 6px 11px;
  width: 60px;
  margin-right: 10px;
  font-size: 12px;
}
.PlaneTicket .el-pagination {
  border: none !important;
}
._tripDetails {
  padding: 0;
  box-shadow: 0px 1px 3px 0px #dedede;
}
._tripDetails .popper__arrow::after {
  border-bottom-color: #ededed !important;
}
._tripDetails table {
  padding: 10px 0 0 20px;
  background-color: #ededed;
  border-collapse: collapse;
  border: 1px solid #d2d2d2;
  font-size: 12px;
}
._tripDetails table th {
  background-color: #ededed;
  padding: 5px;
}
._tripDetails table td {
  background-color: #ffffff;
  padding: 9px 15px;
  color: #333333;
  border: 1px solid #d2d2d2;
}
._tripDetails table td._d_name {
  background-color: #ededed;
}
._tripDetails table ._color_666 {
  color: #666666;
}
._tripDetails table tr._color_666 th {
  padding: 9px 15px;
}
._CNY p {
  color: #333333;
  cursor: pointer;
  text-decoration: underline;
  font-size: 14px;
}
.PlaneTicket .InfoChangeLog .changLog {
  background-color: #f9f9f9;
  height: auto;
  max-height: 170px;
  width: 100%;
  overflow: auto;
}
.PlaneTicket .InfoChangeLog .changLog ul {
  margin-left: 20px;
}
.PlaneTicket .InfoChangeLog .changLog li {
  border-left: 1px solid #e9e9e9;
  position: relative;
  padding-bottom: 15px;
  padding-left: 20px;
}
.PlaneTicket .InfoChangeLog .changLog li p {
  text-align: left;
}
.PlaneTicket .InfoChangeLog .changLog li .radius {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  left: -4px;
  top: 4px;
}
.PlaneTicket .InfoChangeLog .changLog li.red .radius {
  background-color: #e95252;
}
.PlaneTicket .InfoChangeLog .changLog li.green .radius {
  background-color: #47bf8c;
}
.PlaneTicket .InfoChangeLog .time {
  color: #666666;
  padding-bottom: 5px;
}
.PlaneTicket .InfoChangeLog .changLog::-webkit-scrollbar,
.PlaneTicket ._ol_info::-webkit-scrollbar,
.Journal .changLogList::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 8px;
}
.PlaneTicket .InfoChangeLog .changLog::-webkit-scrollbar-thumb,
.PlaneTicket ._ol_info::-webkit-scrollbar-thumb,
.Journal .changLogList::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  background: #c9c9c9;
}
.PlaneTicket .InfoChangeLog .changLog::-webkit-scrollbar-track,
.PlaneTicket ._ol_info::-webkit-scrollbar-track,
.Journal .changLogList::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background: #ededed;
}
.PlaneTicket .el-form-item__label {
  font-size: 12px;
  color: #6666;
  line-height: 30px;
  width: 85px;
}
._pingtai .el-select .el-input {
  height: auto;
}
._pingtai .el-form-item,
._add_ret > ul > li .el-form-item {
  display: flex;
}
.PlaneTicket .upload-demo {
  text-align: center;
}
.PlaneTicket .query-box ul .el-input {
  width: 150px;
}
.wangfan_dan {
  padding: 2px 9px !important;
}
._bg_gre {
  background-color: #47bf8c !important;
  color: white !important;
}
.PlaneTicket .width_auto {
  width: 80%;
}
.PlaneTicket ._rizhi {
  background: #fff !important;
  color: #e95252 !important;
  height: 30px !important;
  border: 1px solid #e95252 !important;
  cursor: pointer !important;
  border-radius: 15px !important;
}
.PlaneTicket .Journal {
  width: 250px !important;
}
.Journal .InfoChangeLog {
  height: auto;
  max-height: 220px;
  background-color: #ffffff;
}
.Journal .changLogList {
  padding-left: 20px;
  max-height: 220px;
  overflow: auto;
}
.Journal .changLogList_l {
  border-left: 1px solid #e9e9e9;
  position: relative;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-top: 10px;
}
.PlaneTicket .Journal ._radius_green {
  background-color: #47bf8c;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  left: -4px;
  top: 15px;
}
.PlaneTicket .Journal .changLog_time {
  color: #666666;
  padding-bottom: 5px;
}
.PlaneTicket .downBtn {
  padding: 6px 20px;
  position: relative;
  top: -1px;
}
.PlaneTicket .icon-img_plane {
  font-size: 12px;
  -webkit-transform: scale(0.8);
}
.PlaneTicket .departName {
  text-align: right;
}
.PlaneTicket .arrivalName {
  text-align: left;
}
.PlaneTicket ._destination .el-button:focus {
  background-color: #2aaef2 !important;
  color: #fff !important;
}
.PlaneTicket .travelTo {
  position: relative;
  top: -2px;
}
.PlaneTicket .icon-arrow1 {
  font-size: 12px;
}
.PlaneTicket .multiple_input .el-input {
  height: auto !important;
}
.PlaneTicket .el-button--primary {
  padding: 5px;
  margin-right: 1px;
}
.PlanTicketTab {
  margin-left: 20px;
}
 .PlanTicketTab .el-tabs__nav-wrap::after{
    background-color: #f5f5f5!important;
}
.inversion {
  width: 60px;
  height: 25px;
  line-height: 25px;
  margin: 0 10px;
  padding: 0 !important;
}
.flightCode {
  width: 200px;
  height: 100%;
  border-right: 1px dashed #dcdfe6;
}
.Flight_number {
  font-size: 14px;
  color: #333;
  margin: 20px 0 5px 40px;
}
.flight_CodeName {
  margin-left: 40px;
  color: #666666;
  font-size: 12px;
}
.defaultImgDiv {
  padding-right: 20px;
  text-align: center;
}
.defaultImgDiv img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-align: center;
  font-size: 12px;
}
.OutNum{color:#33B87F;font-size:16px;margin-top:20px;font-weight:bold;}
.daiqueren i{font-size:14px!important;margin-right:5px;color:#999999;}
.yiqueren{color:#33B87F;font-size:14px;}
.yiquxiao{color:#E95252;font-size:14px;}
.yiqueren i,.yiquxiao i{margin-right:5px;}
.SureDateStr{margin:5px 0 0 20px;color:#666666;}
.PlaneTicket_flex_none .vmiddle {
  display: flex;
  align-items: Center;
  height: 78px;
}
.TS_PNR{font-size:12px;color:#666666;margin:5px 0 0 26px;}
</style>
<template>
     <div class="flexOne PlaneTicket_flex_none PlaneTicket">
        <div class="query-box">
            <ul>
                <li>
                    <span class="hotel_name">
                       <em>机位代码</em>
                       <el-input v-model="Query.Flight_number" type="text" class="w150" placeholder="请输入航班号"></el-input>
                    </span>
                    <span class="hotel_name">
                        <em>交换日期</em>
                          <el-date-picker class="w150"
                                        v-model="Query.CreateDate"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        placeholder="交换日期">
                         </el-date-picker>
                    </span>
                    <span class="hotel_name" v-if="Recived">
                        <em>送出人</em>
                        <el-select v-model="Query.OutEmployeeId"  filterable :placeholder="$t('system.ph_in')" class="w150">
                            <el-option :label="$t('pub.unlimitedSel')" :value="selectDefauleValue"></el-option>
                            <el-option v-for="item in EmployeeList"
                                :label='item.EmName'
                                :value='item.EmployeeId'
                                :key='item.EmployeeId'>
                            </el-option>
                        </el-select>
                    </span>
                    <span class="hotel_name" v-if="Send">
                        <em>接受人</em>
                        <el-select v-model="Query.ReciveEmployeeId"  filterable :placeholder="$t('system.ph_in')" class="w150">
                            <el-option :label="$t('pub.unlimitedSel')" :value="selectDefauleValue"></el-option>
                            <el-option v-for="item in EmployeeList"
                                :label='item.EmName'
                                :value='item.EmployeeId'
                                :key='item.EmployeeId'>
                            </el-option>
                        </el-select>
                    </span>
                    <span class="hotel_name">
                        <em>处理状态</em>
                        <el-select v-model="Query.IsSure"  filterable :placeholder="$t('system.ph_in')" class="w150">
                            <el-option :label="$t('pub.unlimitedSel')" :value="selectDefauleValue2"></el-option>
                              <el-option v-for="item in QueryStateArr"
                                :label='item.Name'
                                :value='item.Id'
                                :key='item.Id'>
                            </el-option>
                        </el-select>
                    </span>
                </li>
                <li>
                    <button class="normalBtn" type="button" @click="resetPageIndex(),getList()">{{$t('pub.searchBtn')}}</button>
                </li>
            </ul>
        </div>
        <div class="PlaneTicket_list">
            <ul class="_ol_color clearfix">
                <li><span class="_red _cl"></span><span class="_red_text">{{$t('Airticket.Air_redType')}}：</span>{{$t('Airticket.Air_firstClass')}}</li>
                <li><span class="_green _cl"></span><span class="_green_text">{{$t('Airticket.Air_greenType')}}：</span>{{$t('Airticket.Air_businessClass')}}</li>
                <li><span class="_blu _cl"></span><span class="_blu_text">{{$t('Airticket.Air_blueType')}}：</span>{{$t('Airticket.Air_EconomyClass')}}</li>
            </ul>
            <div class="_ol_info"  >
                <div class="PlanTicketTab">
                    <el-tabs v-model="activeName" @tab-click="switchTab(activeName)">
                        <el-tab-pane :label="item.Name"  :name="item.Id" :key="item.subCode"  v-for="item in tabList">
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <div v-if="Send">
                    <ul class="_ol_list"  v-loading="loading" >
                        <li v-for="(item,index) in dataList" :data-id="item.ID">

                            <el-row :gutter="10">
                            <el-col :span="3" class="vmiddle">
                              <span class="_oll_line" v-if="item.FreightSpace==1"></span>
                              <span class="_oll_line _o_green" v-if="item.FreightSpace==2"></span>
                              <span class="_oll_line _o_blu" v-if="item.FreightSpace==3"></span>
                            <!-- <div class="flightCode">
                                <div class="Flight_number">{{item.Flight_number}}{{item.FlightDateStr}}</div>
                                <div class="flight_CodeName">机位代码</div>
                            </div> -->
                                <img v-if="!item.AirlineUrl" class="_oll_img" src="../../../assets/img/bg_z1@2x.png">
                                <img v-else class="_oll_img" :src="item.AirlineUrl" :onerror="defaultImg">
                              </el-col>
                              <el-col :span="3" class="vmiddle">
                                <div class="_oll_info" :data-id="item.ID">
                                    <el-tooltip class="item" effect="dark" :content="item.AirlineName" placement="top-start" popper-class="max-w250">
                                        <p class="_oll_tit"> {{item.AirlineName}} </p>
                                    </el-tooltip>
                                    <span class="_oll_adrr">{{item.FreightSpaceStr}}</span>
                                </div>
                              </el-col>
                              <el-col :span="1" class="vmiddle">
                                <div v-if="item.flightList.length!=null && item.flightList.length>0" class="_destination" >
                                      <el-popover popper-class="_tripDetails" width="550" trigger="click">
                                          <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                              <tr class="_color_666">
                                                  <th>{{$t('Airticket.Air_segment')}}</th>
                                                  <th>{{$t('system.query_flightNum')}}</th>
                                                  <th>{{$t('Airticket.Air_flightDate')}}</th>
                                                  <th>{{$t('Airticket.Air_Trip')}}</th>
                                              </tr>
                                              <tr v-for="(ds,din) in item.flightList">
                                                  <td class="_d_name _color_666" v-if="ds.FlightSubType==1&&din==0">{{$t('Airticket.Air_go')}}</td>
                                                  <td class="_d_name _color_666" v-else-if="ds.FlightSubType==1&&din!==tripDetails.length-1">{{$t('Airticket.Air_transit')}}</td>
                                                  <td class="_d_name _color_666" v-if="ds.FlightSubType==3&&din!==tripDetails.length-1">{{$t('Airticket.Air_transit')}}</td>
                                                  <td class="_d_name _color_666" v-else-if="din==tripDetails.length-1">{{$t('Airticket.Air_returnTrip')}}</td>
                                                  <td>{{ds.Flight_number}}</td>
                                                  <td>{{ds.edDate}}</td>
                                                  <td>
                                                    <div>({{ds.DIATA}}){{ds.DepartureName}}-({{ds.AIATA}}){{ds.ArrivalCityName}}</div>
                                                    <div style="margin-top:5px;">{{ds.dName}}-{{ds.aName}}</div>
                                                  </td>
                                              </tr>
                                          </table>
                                          <el-button  slot="reference" class="hollowFixedBtn wangfan">详情</el-button>
                                      </el-popover>
                                </div>
                              </el-col>
                              <el-col :span="2" class="vmiddle">
                                  <div v-if="item.UnionList!=null&& item.UnionList.length>0" class="_destination">
                                    <el-popover popper-class="_tripDetails" width="100" trigger="click">
                                      <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr class="_color_666">
                                          <th>联运城市</th>
                                        </tr>
                                        <tr v-for="(unionItem,x) in item.UnionList">
                                          <td> {{unionItem.CityName}} </td>
                                        </tr>
                                      </table>
                                      <el-button slot="reference" class="hollowFixedBtn wangfan">联运</el-button>
                                    </el-popover>
                                  </div>
                              </el-col>
                              <el-col :span="2" class="vmiddle">
                                <div class="OutFlightNum">
                                  <div class="OutNum">{{item.OutNum}}</div>
                                  <div>转出机位</div>
                                </div>
                              </el-col>
                              <el-col :span="4" class="vmiddle">
                                <div class="TSS_raduis">
                                    <ul>
                                        <li :class="item.FirstDeposit?'_bg_gre':''">
                                            <el-tooltip effect="dark" :content="item.FirstDeposit" placement="top" popper-class="max-w250" v-if="item.FirstDeposit">
                                                <span>1</span>
                                            </el-tooltip>
                                            <span v-else>1</span>
                                        </li>
                                        <li :class="item.SecondDeposit?'_bg_gre':''">
                                            <el-tooltip effect="dark" :content="item.SecondDeposit" placement="top" popper-class="max-w250" v-if="item.SecondDeposit">
                                                <span >2</span>
                                            </el-tooltip>
                                            <span v-else>2</span>
                                        </li>
                                        <li :class="item.ThirdDeposit?'_bg_gre':''">
                                            <el-tooltip effect="dark" :content="item.ThirdDeposit" placement="top" popper-class="max-w250" v-if="item.ThirdDeposit">
                                                <span >3</span>
                                            </el-tooltip>
                                            <span v-else>3</span>
                                        </li>
                                        <li :class="item.FourthDeposit?'_bg_gre':''">
                                            <el-tooltip effect="dark" :content="item.FourthDeposit" placement="top" popper-class="max-w250" v-if="item.FourthDeposit">
                                                <span>4</span>
                                            </el-tooltip>
                                            <span v-else>4</span>
                                        </li>
                                        <li :class="item.FourthDeposit?'_bg_gre':''">
                                            <el-tooltip effect="dark" :content="item.FinalPayment" placement="top" popper-class="max-w250" v-if="item.FinalPayment">
                                                <span>尾</span>
                                            </el-tooltip>
                                            <span v-else>尾</span>
                                        </li>
                                    </ul>
                                    <div class="TS_PNR">
                                        PNR:{{item.PNR}}
                                    </div>
                                </div>
                              </el-col>
                              <el-col :span="3" class="vmiddle">
                              <div class="_flaghtDate"  >
                                  <p class="PingFangSC">{{item.FlightDate}}</p>
                                  <p class="_text">{{$t('Airticket.Air_departureDate')}}</p>
                              </div>
                              </el-col>
                              <el-col :span="2" class="vmiddle">
                                <div class="defaultImgDiv">
                                  <img  :src="item.CreateUrl?item.CreateUrl:'../../../assets/img/default_head_img.jpg'" :onerror="defaultImg">
                                  <div>{{item.CreateName}}</div>
                                </div>
                              </el-col>
                              <el-col :span="3" class="vmiddle">
                                <div class="_btn _tsseat_page">
                                    <span v-if="item.IsSure==0">
                                        <span class="daiqueren"><i class="iconfont icon-daiqueren"></i>待处理</span>
                                        <!-- <button type="button" class="hollowFixedBtn inversion" @click="OperateTicket(item.ID,QueryStateArr[1].Id)">接受</button>
                                        <button type="button" class="normalBtn inversion" @click="OperateTicket(item.ID,QueryStateArr[2].Id)">拒绝</button> -->
                                    </span>
                                    <span v-if="item.IsSure==1">
                                      <div class="yiqueren"><i class="iconfont icon-yiqueren"></i>接受转入机位</div>
                                      <div class="SureDateStr">{{item.SureDateStr}}</div>
                                    </span>
                                    <span v-if="item.IsSure==2">
                                      <div class="yiquxiao"><i class="iconfont icon-yiquxiao"></i>拒绝接受转入机位</div>
                                      <div class="SureDateStr">{{item.SureDateStr}}</div>
                                    </span>
                                </div>
                              </el-col>
                            </el-row>
                        </li>
                    </ul>
                </div>
                <div v-if="Recived">
                    <ul class="_ol_list"  v-loading="loading" >
                        <li v-for="(item,index) in dataList">
                            <el-row :gutter="10">
                              <el-col :span="3" class="vmiddle">
                                <span class="_oll_line" v-if="item.FreightSpace==1"></span>
                                <span class="_oll_line _o_green" v-if="item.FreightSpace==2"></span>
                                <span class="_oll_line _o_blu" v-if="item.FreightSpace==3"></span>
                                <!-- <div class="flightCode">
                                    <div class="Flight_number">{{item.Flight_number}}{{item.FlightDateStr}}</div>
                                    <div class="flight_CodeName">机位代码</div>
                                </div> -->
                              <img v-if="!item.AirlineUrl" class="_oll_img" src="../../../assets/img/bg_z1@2x.png">
                              <img v-else class="_oll_img" :src="item.AirlineUrl" :onerror="defaultImg">
                              </el-col>
                              <el-col :span="2" class="vmiddle">
                                <div class="_oll_info">
                                    <el-tooltip class="item" effect="dark" :content="item.AirlineName" placement="top-start" popper-class="max-w250">
                                        <p class="_oll_tit"> {{item.AirlineName}} </p>
                                    </el-tooltip>
                                    <span class="_oll_adrr">{{item.FreightSpaceStr}}</span>
                                </div>
                              </el-col>
                            <el-col :span="2" class="vmiddle">
                              <div v-if="item.flightList.length!==0" class="_destination" >
                                  <div v-for="(son,x) in item.flightList" v-if="x<1">
                                      <el-popover v-if="item.TicketType==2"
                                          popper-class="_tripDetails"
                                          width="500"
                                          trigger="click">
                                          <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                              <tr class="_color_666">
                                                  <th>{{$t('Airticket.Air_segment')}}</th>
                                                  <th>{{$t('system.query_flightNum')}}</th>
                                                  <th>{{$t('Airticket.Air_flightDate')}}</th>
                                                  <th width="200">{{$t('Airticket.Air_Trip')}}</th>
                                              </tr>
                                              <tr v-for="(ds,din) in item.flightList">
                                                  <td class="_d_name _color_666" v-if="ds.FlightSubType==1&&din==0">{{$t('Airticket.Air_go')}}</td>
                                                  <td class="_d_name _color_666" v-else-if="ds.FlightSubType==1&&din!==tripDetails.length-1">{{$t('Airticket.Air_transit')}}</td>
                                                  <td class="_d_name _color_666" v-if="ds.FlightSubType==3&&din!==tripDetails.length-1">{{$t('Airticket.Air_transit')}}</td>
                                                  <td class="_d_name _color_666" v-else-if="din==tripDetails.length-1">{{$t('Airticket.Air_returnTrip')}}</td>
                                                  <td>{{ds.Flight_number}}</td>
                                                  <td>{{ds.edDate}}</td>
                                                  <td>
                                                    <div>({{ds.DIATA}}){{ds.DepartureName}}-({{ds.AIATA}}){{ds.ArrivalCityName}}</div>
                                                    <div style="margin-top:5px;">{{ds.dName}}-{{ds.aName}}</div>
                                                  </td>
                                              </tr>
                                          </table>
                                          <el-button  slot="reference" class="hollowFixedBtn wangfan" @click="getDetails(index)">详情</el-button>
                                      </el-popover>
                                      <el-popover v-if="item.TicketType==1"
                                          popper-class="_tripDetails"
                                          width="500"
                                          trigger="click">
                                          <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                              <tr class="_color_666">
                                                  <th>{{$t('Airticket.Air_segment')}}</th>
                                                  <th>{{$t('system.query_flightNum')}}</th>
                                                  <th>{{$t('Airticket.Air_flightDate')}}</th>
                                                  <th width="200">{{$t('Airticket.Air_Trip')}}</th>
                                              </tr>
                                              <tr v-for="(ds,din) in item.flightList">
                                                  <td class="_d_name _color_666" v-if="ds.FlightSubType==1&&din==0">{{$t('Airticket.Air_go')}}</td>
                                                  <td class="_d_name _color_666" v-else-if="din==tripDetails.length-1">{{$t('Airticket.Air_returnTrip')}}</td>
                                                  <td>{{ds.Flight_number}}</td>
                                                  <td>{{ds.edDate}}</td>
                                                  <td>
                                                    <div>({{ds.DIATA}}){{ds.DepartureName}}-({{ds.AIATA}}){{ds.ArrivalCityName}}</div>
                                                      <div style="margin-top:5px;">{{ds.dName}}-{{ds.aName}}</div>
                                                  </td>
                                              </tr>
                                          </table>
                                          <el-button  slot="reference" class="hollowFixedBtn wangfan" @click="getDetails(index)">详情</el-button>
                                      </el-popover>

                                  </div>
                              </div>
                            </el-col>
                            <el-col :span="3" class="vmiddle">
                              <div class="OutFlightNum">
                                <div class="OutNum">{{item.OutNum}}</div>
                                <div>转出机位</div>
                              </div>
                            </el-col>
                            <el-col :span="4" class="vmiddle">
                              <div class="TSS_raduis">
                                  <ul>
                                      <li :class="item.FirstDeposit?'_bg_gre':''">
                                          <el-tooltip effect="dark" :content="item.FirstDeposit" placement="top" popper-class="max-w250" v-if="item.FirstDeposit">
                                              <span>1</span>
                                          </el-tooltip>
                                          <span v-else>1</span>
                                      </li>
                                      <li :class="item.SecondDeposit?'_bg_gre':''">
                                          <el-tooltip effect="dark" :content="item.SecondDeposit" placement="top" popper-class="max-w250" v-if="item.SecondDeposit">
                                              <span >2</span>
                                          </el-tooltip>
                                          <span v-else>2</span>
                                      </li>
                                      <li :class="item.ThirdDeposit?'_bg_gre':''">
                                          <el-tooltip effect="dark" :content="item.ThirdDeposit" placement="top" popper-class="max-w250" v-if="item.ThirdDeposit">
                                              <span >3</span>
                                          </el-tooltip>
                                          <span v-else>3</span>
                                      </li>
                                      <li :class="item.FourthDeposit?'_bg_gre':''">
                                          <el-tooltip effect="dark" :content="item.FourthDeposit" placement="top" popper-class="max-w250" v-if="item.FourthDeposit">
                                              <span>4</span>
                                          </el-tooltip>
                                          <span v-else>4</span>
                                      </li>
                                      <li :class="item.FourthDeposit?'_bg_gre':''">
                                          <el-tooltip effect="dark" :content="item.FinalPayment" placement="top" popper-class="max-w250" v-if="item.FinalPayment">
                                              <span>尾</span>
                                          </el-tooltip>
                                          <span v-else>尾</span>
                                      </li>
                                  </ul>
                                  <div class="TS_PNR">
                                        PNR:{{item.PNR}}
                                  </div>
                              </div>
                            </el-col>
                            <el-col :span="3" class="vmiddle">
                              <div class="_flaghtDate" >
                                  <p class="PingFangSC">{{item.FlightDate}}</p>
                                  <p class="_text">{{$t('Airticket.Air_departureDate')}}</p>
                              </div>
                            </el-col>
                            <el-col :span="2" class="vmiddle">
                            <div class="defaultImgDiv">
                                  <img  :src="item.CreateUrl?item.CreateUrl:'../../assets/img/default_head_img.jpg'" :onerror="defaultImg">
                                  <div>{{item.CreateName}}</div>
                            </div>
                            </el-col>
                              <el-col :span="5" class="vmiddle">
                                <div class="_btn _tsseat_page">
                                    <span v-if="item.IsSure==0">
                                      <span class="daiqueren"><i class="iconfont icon-daiqueren"></i>待处理</span>
                                      <button type="button" class="normalBtn inversion" @click="OperateTicket(item.ID,QueryStateArr[1].Id)">接受</button>
                                      <button type="button" class="normalBtn inversion" @click="OperateTicket(item.ID,QueryStateArr[2].Id)">拒绝</button>
                                    </span>
                                    <span v-if="item.IsSure==1">
                                      <div class="yiqueren"><i class="iconfont icon-yiqueren"></i>接受转入机位</div>
                                      <div class="SureDateStr">{{item.SureDateStr}}</div>
                                    </span>
                                    <span v-if="item.IsSure==2">
                                      <div class="yiquxiao"><i class="iconfont icon-yiquxiao"></i>拒绝接受转入机位</div>
                                      <div class="SureDateStr">{{item.SureDateStr}}</div>
                                    </span>
                                </div>
                              </el-col>
                            </el-row>
                        </li>
                    </ul>
                </div>
                <div class="noData" v-show="noData">
                    {{$t('system.content_noData')}}
                </div>
                <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" layout="total,prev, pager, next, jumper" :page-size=Query.pageSize :total=Query.total>
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      Query: {
        //页码
        pageIndex: 1,
        //每页显示条数
        pageSize: 6,
        //总条数
        total: 0,
        //送出人
        OutEmployeeId: 0,
        //接收人
        ReciveEmployeeId: 0,
        //起飞时间
        CreateDate: "",
        //是否确认
        IsSure: -1,
        //机位代码
        Flight_number: "",
        //类型(1-送出，2-接收)
        QueryType: 1
      },
      //选项卡默认选中
      activeName: '1',
      tabList:[
        {Id:'1',Name:'我送出的'},
        {Id:'2',Name:'我收到的'}
      ],
      QueryStateArr: [
        { Id: 0, Name: "未处理" },
        { Id: 1, Name: "接受" },
        { Id: 2, Name: "拒绝" }
      ],
      //员工列表
      EmployeeList: [],
      //默认图片
      defaultImg:
        'this.src="' + require("../../../assets/img/bg_z1@2x.png") + '"',
      //下拉框默认值
      selectDefauleValue: 0,
      selectDefauleValue2: -1,
      currentPage: 1,
      //是否显示加载层
      loading: false,
      //是否有数据
      noData: false,
      //数据列表
      dataList: [],
      //航班详情
      tripDetails: [],
      Send: true,
      Recived: false,
      //提交数据
      PostData: {
        ID: 0,
        IsSure: -1
      }
    };
  },
  methods: {
    //获取列表
    getList() {
      this.dataList = [];
      this.loading = true;
      this.apipost(
        "TravelAirTicket_Get_GetOutPageList",
        this.Query,
        res => {
          if (res.data.resultCode == 1) {
            this.Query.total = res.data.data.count;
            if (res.data.data.count > 0) {
              this.dataList = res.data.data.pageData;
              this.noData = false;
            } else {
              this.noData = true;
              this.dataList = [];
            }
          } else {
            this.Warning(res.data.message);
          }
          this.loading = false;
        },
        err => {}
      );
    },
    //航班详情
    getDetails(index) {
      this.dataList[index].flightList.forEach(x => {
        x.edDate = new Date(
          x.FlightDate.replace(/年/, "-")
            .replace(/月/, "-")
            .replace(/日/, "")
        ).Format("yyyy-MM-dd");
      });
      this.tripDetails = this.dataList[index].flightList;
    },
    //翻页功能按钮
    handleCurrentChange(val) {
      this.Query.pageIndex = val;
      this.getList();
    },
    //查询初始化页码
    resetPageIndex() {
      this.Query.pageIndex = 1;
      this.currentPage = 1;
    },
    //选项卡切换
    switchTab(type) {
      this.Query.pageIndex = 1;
      if (type == 1) {
        this.Send = true;
        this.Recived = false;
        this.Query.QueryType = 1;
      } else {
        this.Send = false;
        this.Recived = true;
        this.Query.QueryType = 2;
      }
      this.getList();
    },
    //获取员工列表获取账号
    getEmployeeList() {
      let msg = {
        GroupId: "",
        BranchId: "",
        DepartmentId: "",
        PostId: "",
        IsLeave: "0"
      };
      this.apipost(
        "admin_get_EmployeeGetList",
        msg,
        res => {
          this.EmployeeList = res.data.data;
        },
        err => {}
      );
    },
    //接受机票
    OperateTicket(id, Type) {
      this.PostData.ID = id;
      this.PostData.IsSure = Type;
      this.apipost(
        "TravelAirTicket_Post_AuditAirticketOut",
        this.PostData,
        res => {
          if (res.data.resultCode == 1) {
            this.Success("转出机位成功!");
            this.getList();
          } else {
            this.Error(res.data.message);
          }
        },
        err => {}
      );
    }
  },

  mounted() {
    this.getEmployeeList();
    this.getList();
  }
};
</script>
