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

.TravelMyTicket ._ol_color {
  font-size: 12px;
  width: 100%;
  margin-bottom: 20px;
}
.TravelMyTicket ._ol_color li {
  float: left;
  padding: 0 15px;
  display: flex;
  align-items: center;
}
.TravelMyTicket ._ol_color li ._cl {
  border-radius: 3px;
  display: inline-block;
  width: 5px;
  height: 12px;
  margin-right: 5px;
}
.TravelMyTicket ._red {
  background-color: #e95252;
}
.TravelMyTicket ._red_text {
  color: #e95252;
}
.TravelMyTicket ._green {
  background-color: #47bf8c;
}
.TravelMyTicket ._green_text {
  color: #47bf8c;
}
.TravelMyTicket ._blu {
  background-color: #2aaef2;
}
.TravelMyTicket ._blu_text {
  color: #2aaef2;
}
.TravelMyTicket ._ol_list {
  margin-top: 20px;
  min-height: 500px;
}
.TravelMyTicket ._ol_list > li {
  /* display: flex; */
  align-items: center;
  overflow: hidden;
  height: auto;
  border: 1px solid #dddddd;
  margin: 20px 0 0px 15px;
  transition: linear all 0.5s;
  background-color: #fff;
}
.TravelMyTicket ._ol_list > li:hover {
  box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
  transition: all linear 0.5s;
}
.TravelMyTicket ._oll_tit {
  color: #333333;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.TravelMyTicket ._oll_tit span {
  display: inline-block;
  padding: 1px 10px;
  font-size: 12px;
  border: solid 1px #ff9000;
  color: #ff9000;
  border-radius: 4px;
}
.TravelMyTicket ._oll_line {
  max-width: 5px;
  min-width: 5px;
  height: 107px;
  position: absolute;
  left: 5px;
  top: 0;
  z-index: 50;
  background: rgba(233, 82, 82, 1);
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  display: inline-block;
}
.TravelMyTicket ._oll_line._o_green {
  background: #47bf8c;
}
.TravelMyTicket ._oll_line._o_blu {
  background: #2aaef2;
}
.TravelMyTicket ._oll_info {
  padding-left: 20px;
  overflow: hidden;
}
.TravelMyTicket ._oll_img {
  height: 50px;
  width: 50px;
  margin-top: 10px;
  border-radius: 50%;
}
.TravelMyTicket ._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;
}
.TravelMyTicket .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;
}
.TravelMyTicket .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;
}
.TravelMyTicket .TMT_CNY {
  height: 100%;
  display: flex;
  align-items: center;
  color: #333333;
  font-size: 16px;
  padding-left: 25px;
  min-width: 170px;
}
.TMT_CNY span {
  color: #47bf8c;
  font-size: 18px;
}
.TMT_Seat {
  height: 100%;
  display: flex;
}
.TM_SeatList {
  min-width: 250px;
  height: 60px;
  background-color: #f9f9f9;
  margin: 9px 20px 0 0;
}
.TM_SeatList > ul > li:nth-child(1) {
  margin-left: 16px;
}
.TM_SeatList > ul > li {
  float: left;
  text-align: center;
  margin: 5px 21px 0 0;
}
.TM_SeatList > ul > li:last-child {
  margin-right: 0;
}
.TM_SeatList .iconfont {
  color: #d1d1d1;
  display: inline-block;
  margin-top: 5px;
}
.TM_SeatList ._num1 {
  font-size: 20px;
  color: #333333;
  font-family: PingFangSC-Semibold, sans-serif;
}
.TM_SeatList .TM_num2 {
  font-size: 20px;
  width: 45px;
  display: inline-block;
  text-align: left;
  color: #47bf8c;
  font-family: PingFangSC-Semibold, sans-serif;
}
.TM_SeatList ._num3 {
  font-size: 20px;
  color: #e95252;
  font-family: PingFangSC-Semibold, sans-serif;
}
.TM_SeatList ._wz {
  color: #666666;
}
.TM_SeatList ._yiyong {
  cursor: pointer;
  text-decoration: underline;
}
/* .TMT_raduis{margin-left:50px;} */
.TMT_raduis > ul {
  display: -webkit-box;
  align-items: center;
  padding-left: 25px;
}
.TMT_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;
}
.TMT_raduis > ul > li:not(._head) {
  background-color: #bcbcbc;
  color: #909090;
}
.TMT_raduis > ul > li._head {
  display: flex;
  align-items: center;
}
.TMT_raduis > ul > li._head img {
  height: 26px;
  width: 26px;
  border-radius: 50%;
}
.TMT_raduis > ul > li._head span {
  padding-left: 7px;
  display: inline-block;
  margin-right: 25px;
}
._jztime {
  color: #666666;
  min-width: 100px;
}
._jztime .PingFangSC {
  font-size: 12px;
}
._jztime ._text {
  font-size: 12px;
}
._btn._tmt_page {
  height: 100%;
  display: flex;
  align-items: center;
}
.edHeight {
  display: block;
}
.TravelMyTicket .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;
}
.TMT_CNY p {
  color: #333333;
  font-size: 14px;
}
.TravelMyTicket .InfoChangeLog .changLog {
  background-color: #f9f9f9;
  height: auto;
  max-height: 170px;
  width: 100%;
  overflow: auto;
}
.TravelMyTicket .InfoChangeLog .changLog ul {
  margin-left: 20px;
}
.TravelMyTicket .InfoChangeLog .changLog li {
  border-left: 1px solid #e9e9e9;
  position: relative;
  padding-bottom: 15px;
  padding-left: 20px;
}
.TravelMyTicket .InfoChangeLog .changLog li p {
  text-align: left;
}
.TravelMyTicket .InfoChangeLog .changLog li .radius {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  left: -4px;
  top: 4px;
}
.TravelMyTicket .InfoChangeLog .changLog li.red .radius {
  background-color: #e95252;
}
.TravelMyTicket .InfoChangeLog .changLog li.green .radius {
  background-color: #47bf8c;
}
.TravelMyTicket .InfoChangeLog .time {
  color: #666666;
  padding-bottom: 5px;
}
.TravelMyTicket .InfoChangeLog .changLog::-webkit-scrollbar,
.TravelMyTicket ._ol_info::-webkit-scrollbar,
.addTravelMyTicket::-webkit-scrollbar,
.Journal .changLogList::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 8px;
}
.TravelMyTicket .InfoChangeLog .changLog::-webkit-scrollbar-thumb,
.TravelMyTicket ._ol_info::-webkit-scrollbar-thumb,
.addTravelMyTicket::-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;
}
.TravelMyTicket .InfoChangeLog .changLog::-webkit-scrollbar-track,
.TravelMyTicket ._ol_info::-webkit-scrollbar-track,
.addTravelMyTicket::-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;
}
._bg_gre {
  background-color: #47bf8c !important;
  color: white !important;
}
.TravelMyTicket .Journal {
  width: 250px !important;
}
.Journal .InfoChangeLog {
  height: auto;
  max-height: 220px;
  background-color: #ffffff;
}
.Journal .changLogList {
  padding-left: 20px;
  max-height: 220px;
  overflow: auto;
  margin: 15px 0;
}
.Journal .changLogList_l {
  border-left: 1px solid #e9e9e9;
  position: relative;
  padding-bottom: 20px;
  padding-left: 20px;
}
.Journal .changLogList_l:last-child {
  border-left: 0;
  padding-bottom: 0;
}
.TravelMyTicket .Journal ._radius_green {
  background-color: #47bf8c;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  left: -4px;
  top: 15px;
}
.TravelMyTicket .icon-img_plane {
  font-size: 12px;
  -webkit-transform: scale(0.8);
}
.TravelMyTicket .departName {
  text-align: right;
}
.TravelMyTicket .arrivalName {
  text-align: left;
}
.TravelMyTicket ._destination .el-button:focus {
  background-color: #2aaef2 !important;
  color: #fff !important;
}
.TravelMyTicket .travelTo {
  position: relative;
  top: -2px;
}
.TravelMyTicket .multiple_input .el-input {
  height: auto !important;
}
.TurnsOutSet {
  position: fixed;
  width: 100%;
  height: 150px;
  background-color: #fff;
  border-top: 1px solid #d1d1d1;
  bottom: 0;
}
.TurnTips {
  margin: 20px 0 30px 20px;
  color: #e95252;
}
.TurnZhu,
.TurnInputDiv,
.flightSetNum {
  margin-left: 20px;
}
.TurnSureBtn {
  margin-left: 30px;
}
.flightCode {
  width: 200px;
  height: 100%;
}
.Flight_number {
  font-size: 14px;
  color: #333;
  margin: 20px 0 5px 40px;
}
.flight_CodeName {
  margin-left: 40px;
  color: #666666;
  font-size: 12px;
}
.inversion {
  width: 60px;
  height: 25px;
  line-height: 25px;
  padding: 0 !important;
}
.logDate {
  position: relative;
  top: -4px;
}
.TM_logContent {
  font-size: 12px;
}
.logCircle {
  position: absolute;
  width: 7px;
  height: 7px;
  background-color: #47bf8c;
  border-radius: 50%;
  left: -24px;
  top: 5px;
}
.TravelMyTicket .query-box ul .el-input {
  width: 150px;
}
.vmiddle {
  display: flex;
  align-items: Center;
  height: 78px;
}
.TM_AirUrl {
  margin-left: 20px;
}
.TM_PNR {
  width: 120px;
  text-align: left;
  font-size: 12px;
}
.TravelMyTicket .TICK_Code {
  position: absolute;
  left: 25px;
  top: 5px;
}
.TCID_cont {
  height: 28px;
  line-height: 28px;
  border-top: 1px dashed #ccc;
  text-indent: 20px;
}
.Ticket_TCID {
  margin-right: 2px;
}
</style>
<template>
  <div class="flexOne TravelMyTicket">
    <div class="query-box">
      <ul>
        <!-- <li>
                    <span class="hotel_name">
                        <em>出发地</em>
                        <el-select v-model="Query.Departure_city" id='xxx'  filterable :placeholder="$t('system.ph_in')">
                            <el-option :label="$t('pub.unlimitedSel')" :value="selectDefauleValue"></el-option>
                            <el-option v-for="item in CityList"
                                :label='item.Name'
                                :value='item.ID'
                                :key='item.ID'>
                           </el-option>
                        </el-select>
                    </span>
                </li>
                <li>
                    <span class="hotel_name">
                        <em>目的地</em>
                        <el-select v-model="Query.Arrival_city"  filterable :placeholder="$t('system.ph_in')">
                            <el-option :label="$t('pub.unlimitedSel')" :value="selectDefauleValue"></el-option>
                            <el-option v-for="item in CityList"
                                :label='item.Name'
                                :value='item.ID'
                                :key='item.ID'>
                            </el-option>
                        </el-select>
                    </span>
                </li> -->
        <li>
          <span class="hotel_name">
            <em>起飞时间</em>
            <el-date-picker class="w150" v-model="Query.QFlightDateStart" type="date" :picker-options="pickerBeginDateBefore"
              value-format="yyyy-MM-dd" placeholder="开始日期">
            </el-date-picker>
            <el-date-picker class="w150" v-model="Query.QFlightDateEnd" type="date" value-format="yyyy-MM-dd"
              :picker-options="pickerBeginDateAfter" placeholder="结束日期">
            </el-date-picker>
          </span>
        </li>
        <li>
          <span class="hotel_name">
            <em>余位数量</em>
            <el-input v-model="Query.StartNum" type="text" class="w150" @keyup.native="checkInteger(Query,'StartNum')"
              @keyup.native.enter="getList" placeholder="请输入数量"></el-input>
            <el-input v-model="Query.EndNum" type="text" class="w150" @keyup.native="checkInteger(Query,'EndNum')"
              @keyup.native.enter="getList" placeholder="请输入数量"></el-input>
          </span>

        </li>
        <li>
          <button class="normalBtn" type="button" @click="resetPageIndex(),getList()">{{$t('pub.searchBtn')}}</button>
        </li>
      </ul>
    </div>
    <div class="TravelMyTicket_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">
        <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="2" 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="TM_AirUrl">
                  <span class="TICK_Code">编号：{{item.Id}}</span>
                  <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">
                </div>
              </el-col>
              <el-col :span="3" 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="1" class="vmiddle">
                <div v-if="item.flightList!=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.FlightDate}} {{ds.Departure_time}}</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="1" 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="3" class="vmiddle">
                <div class="TMT_CNY">
                  <p slot="reference">{{$t('hotel.hotel_cost')}}<span class="PingFangSC">{{item.CostPrice}}</span></p>
                </div>
              </el-col>
              <el-col :span="5" class="vmiddle">
                <div class="TMT_Seat">
                  <div class="TM_SeatList">
                    <ul class="clearfix">
                      <li>
                        <span class="iconfont icon-img_yizi"></span>
                      </li>
                      <li>
                        <p class="TM_num2">{{item.PurchaseAmount==null?'0':item.PurchaseAmount}}</p>
                        <p class="_wz">采购数量</p>
                      </li>
                      <li>
                        <p class="TM_num2">{{item.UseAmount==null?'0':item.UseAmount}}</p>
                        <p class="_wz">使用数量</p>
                      </li>
                      <li>
                        <p class="TM_num2">{{item.LockNum==null?'0':item.LockNum}}</p>
                        <p class="_wz">锁定数量</p>
                      </li>
                    </ul>
                  </div>
                </div>
              </el-col>
              <el-col :span="4" class="vmiddle">
                <div class="TMT_raduis">
                  <ul>
                    <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>
                    <li class="_head" style="margin-left:20px;">
                      <img v-if="item.CreateUrl" :src="item.CreateUrl" :onerror="defaultImg" />
                      <img v-else src="../../../assets/img/default_head_img.jpg" />
                      <span>{{item.CreateName}}</span>
                    </li>
                  </ul>
                </div>
              </el-col>
              <el-col :span="2" class="vmiddle">
                <div class="_jztime">
                  <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="_btn _tmt_page">
                  <button class="hollowFixedBtn inversion" type="button" @click="outBtn(item)">转位</button>
                  <el-tooltip class="item" effect="dark" content="日志" placement="top-start">
                    <el-popover popper-class="Journal" width="400" trigger="click">
                      <div class="InfoChangeLog">
                        <div class="changLog">
                          <ul class="changLogList">
                            <li class="changLogList_l" v-for="subItem in LogList">
                              <div class="logDate">
                                <div class="logCircle"></div>
                                {{subItem.LogTimeStr}}
                              </div>
                              <div class="TM_logContent">
                                {{subItem.LogContent}}
                              </div>
                            </li>
                          </ul>
                        </div>
                      </div>
                      <button slot="reference" class="normalBtn inversion" type="button" @click="getLog(item.ID)">日志</button>
                    </el-popover>
                  </el-tooltip>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="0">
              <el-col :span="8">
                <div class="TCID_cont PingFangSC">
                  团号：<span v-if="item.TCNUM!=''">{{item.TCNUM}}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="TCID_cont">
                  机票编号：{{item.AirticketId}}
                </div>
              </el-col>
              <el-col :span="8">
                <div class="TCID_cont">
                  PNR：{{item.PNR}}
                </div>
              </el-col>
            </el-row>
          </li>
        </ul>
        <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 class="combottomDiv TC_divCon" v-if="isShowSet" style="height:200px;">
          <div class="TurnTips">转出余位 <span class="TurnZhu">注：余位转出是指可以把剩余座位转让给其他的OP人员，但是需要得到对方的确认</span></div>
          <div class="TurnInputDiv">
            <span>接收人：</span>
            <el-select v-model="outData.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 class="flightSetNum">转让机位数：</span>
            <el-input v-model="outData.OutNum" type="text" class="w160" :placeholder="OutPlaceHolder"></el-input>
            <button class="normalBtn TurnSureBtn" @click="setOut()">确认</button>
            <button class="normalBtn" @click="isShowSet=false,outData.OutNum='',outData.ReciveEmployeeId=0">取消</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      Query: {
        //页码
        pageIndex: 1,
        //每页显示条数
        pageSize: 6,
        //总条数
        total: 0,
        //出发城市编号
        Departure_city: 0,
        //到达城市编号
        Arrival_city: 0,
        //起飞时间
        QFlightDateStart: "",
        QFlightDateEnd: "",
        //余位数量
        StartNum: "",
        EndNum: ""
      },
      pickerBeginDateBefore: {
        disabledDate: time => {
          let endTime = new Date(this.Query.QFlightDateEnd);
          return endTime.getTime() < time.getTime();
        }
      },
      pickerBeginDateAfter: {
        disabledDate: time => {
          let startTime = new Date(this.Query.QFlightDateStart);
          return startTime.getTime() >= time.getTime();
        }
      },
      //转出机位参数
      outData: {
        ReciveEmployeeId: 0,
        OutNum: "",
        AirTicketPurchaseId: 0,
        AirticketId: 0,
        TotalNum: 0
      },
      //文本框提示值
      OutPlaceHolder: "",
      //下拉框默认值
      selectDefauleValue: 0,
      currentPage: 1,
      //是否显示加载层
      loading: false,
      //是否有数据
      noData: false,
      //数据列表
      dataList: [],
      //航班详情
      tripDetails: [],
      //城市列表
      CityList: [],
      //隐藏显示转让机位数div
      isShowSet: false,
      //员工列表
      EmployeeList: [],
      //日志列表
      LogList: [],
      //默认图片
      defaultImg:
        'this.src="' + require("../../../assets/img/bg_z1@2x.png") + '"'
    };
  },
  methods: {
    getList() {
      this.loading = true;
      this.apipost(
        "TravelAirTicket_Get_GetPurchasePageList",
        this.Query,
        res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.Query.total = res.data.data.count;
            this.dataList = res.data.data.pageData;
            this.noData = !this.Query.total > 0;
          } else {
            this.Warning(res.data.message);
          }
        },
        err => {}
      );
    },
    //翻页功能按钮
    handleCurrentChange(val) {
      this.Query.pageIndex = val;
      this.getList();
    },
    //查询初始化页码
    resetPageIndex() {
      this.Query.pageIndex = 1;
      this.currentPage = 1;
    },
    //初始化城市
    initCity() {
      this.apipost(
        "dict_post_Destination_GetCityList",
        this.Query,
        res => {
          if (res.data.resultCode == 1) {
            this.CityList = res.data.data;
          }
        },
        err => {}
      );
    },
    //转出按钮点击事件
    outBtn(item) {
      this.isShowSet = true;
      this.outData.AirTicketPurchaseId = item.Id;
      this.outData.AirticketId = item.AirticketId;
      this.outData.TotalNum =
        item.PurchaseAmount - item.UseAmount - item.LockNum;
      this.OutPlaceHolder = "可转出" + this.outData.TotalNum + "余位";
    },
    //机票转出
    setOut() {
      if (this.outData.ReciveEmployeeId == 0) {
        this.Warning("请选择接受人员");
        return false;
      }

      if (this.outData.OutNum == 0 || this.outData.OutNum == "") {
        this.Warning("请输入要采购的数量");
        this.outData.OutNum = "";
        return false;
      }
      this.apipost(
        "TravelAirTicket_Post_SetAirticketOut",
        this.outData,
        res => {
          if (res.data.resultCode == 1) {
            this.Success("转出机位成功!");
            this.isShowSet = false;
            this.outData.ReciveEmployeeId = 0;
            this.outData.OutNum = "";
            this.getList();
          } else {
            this.Error(res.data.message);
          }
        },
        err => {}
      );
    },
    //根据当前员工所在部门获取该部门及子部门员工信息
    getEmployeeList() {
      this.apipost(
        "admin_get_GetEmployeeByUserDepartmentId",
        {},
        res => {
          if (res.data.resultCode == 1) {
            this.EmployeeList = res.data.data;
          }
        },
        err => {}
      );
    },
    //获取日志
    getLog(id) {
      this.LogList = [];
      var qmsg = {
        PurchaseId: id
      };
      this.apipost(
        "TravelAirTicket_Get_AirticketOutLog",
        qmsg,
        res => {
          if (res.data.resultCode == 1) {
            this.LogList = res.data.data;
          }
        },
        err => {}
      );
    }
  },
  mounted() {
    this.initCity();
    this.getList();
    this.getEmployeeList();
  }
};
</script>
