<style>
  .TravelticketManager_list {
    padding: 20px 0 0 0;
  }

  .TravelticketManager ._ol_info {
    font-size: 12px;
    width: 100%;
    overflow-x: auto;
    height: 100%;
  }

  .TravelticketManager ._ol_color {
    font-size: 12px;
    width: 100%;
    margin-bottom: 20px;
  }

  .TravelticketManager ._ol_color li {
    float: left;
    padding: 0 15px;
    display: flex;
    align-items: center;
  }

  .TravelticketManager ._ol_color li ._cl {
    border-radius: 3px;
    display: inline-block;
    width: 5px;
    height: 12px;
    margin-right: 5px;
  }

  .TravelticketManager ._red {
    background-color: #e95252;
  }

  .TravelticketManager ._red_text {
    color: #e95252;
  }

  .TravelticketManager ._green {
    background-color: #47bf8c;
  }

  .TravelticketManager ._green_text {
    color: #47bf8c;
  }

  .TravelticketManager ._blu {
    background-color: #2aaef2;
  }

  .TravelticketManager ._blu_text {
    color: #2aaef2;
  }

  .TravelticketManager ._ol_list {
    min-height: 500px;
  }

  .TravelticketManager ._ol_list>li {
    align-items: center;
    border: 1px solid #dddddd;
    margin: 20px 0 0px 15px;
    position: relative;
    overflow: hidden;
    transition: linear all 0.5s;
    background-color: #fff;
    padding:10px 0 5px 0;
  }

  .TravelticketManager ._ol_list>li:hover {
    box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
    transition: all linear 0.5s;
  }

  .TravelticketManager ._oll_tit {
    color: #333333;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .TravelticketManager ._oll_tit span {
    display: inline-block;
    padding: 1px 10px;
    font-size: 12px;
    border: solid 1px #ff9000;
    color: #ff9000;
    border-radius: 4px;
  }

  .TravelticketManager ._oll_line {
    max-width: 5px;
    min-width: 5px;
    height: 100%;
    z-index: 50;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(233, 82, 82, 1);
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    display: inline-block;
  }

  .TravelticketManager ._oll_line._o_green {
    background: #47bf8c;
  }

  .TravelticketManager ._oll_line._o_blu {
    background: #2aaef2;
  }

  .TravelticketManager ._oll_info {
    padding-left: 20px;
    overflow: hidden;
    margin-top:-15px;
  }

  .TravelticketManager ._oll_img {
    height: 50px;
    width: 50px;
    margin-top: 15px;
    border-radius: 50%;
    margin-left: 20px;
  }

  .TravelticketManager ._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;
  }

  .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;
  }

  .TMM_CNY {
    height: 100%;
    display: flex;
    align-items: center;
    color: #333333;
    font-size: 14px;
    /* padding-left: 40px; */
    min-width: 100px;
  }

  .TMM_CNY span {
    color: #47bf8c;
    font-size: 16px;
    margin-left: 1px;
  }

  ._Seat {
    height: 100%;
    display: flex;
    border-right: 1px dashed #dcdfe6;
  }

  .SeatList {
    width: 120px;
    height: 60px;
    background-color: #f9f9f9;
    margin: 9px 15px 0 0;
  }

  .SeatList>ul>li:nth-child(1) {
    margin-left: 16px;
  }

  .SeatList>ul>li {
    float: left;
    text-align: center;
    margin: 5px 10px 0 0;
  }

  .SeatList>ul>li:last-child {
    margin-right: 0;
  }

  .SeatList .iconfont {
    color: #d1d1d1;
    display: inline-block;
    margin-top: 5px;
  }

  .SeatList ._num1 {
    font-size: 16px;
    color: #333333;
    font-family: PingFangSC-Semibold, sans-serif;
  }

  .SeatList ._num2 {
    font-size: 16px;
    color: #47bf8c;
    font-family: PingFangSC-Semibold, sans-serif;
  }

  .SeatList ._num3 {
    font-size: 16px;
    color: #e95252;
    font-family: PingFangSC-Semibold, sans-serif;
  }

  .SeatList ._wz {
    color: #666666;
  }

  .SeatList ._yiyong {
    cursor: pointer;
    text-decoration: underline;
  }

  .TKM_raduis>ul {
    display: -webkit-box;
    align-items: center;
    padding-left: 25px;
    margin-top: 17px;
  }

  .TKM_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;
  }

  .TKM_raduis>ul>li:not(._head) {
    background-color: #bcbcbc;
    color: #909090;
  }

  ._ol_list li ._head {
    display: flex;
    align-items: center;
  }

  ._ol_list li ._head img {
    height: 26px;
    width: 26px;
    border-radius: 50%;
    margin: 0 5px 0 15px;
  }

  ._ol_list li._head span {
    padding-left: 7px;
    display: inline-block;
    margin-right: 25px;
  }

  ._jztime {
    color: #666666;
    margin: 0 12px;
    min-width: 100px;
  }

  ._jztime .PingFangSC {
    font-size: 12px;
  }

  ._jztime ._text {
    font-size: 12px;
  }

  ._btn._ttm_page {
    height: 100%;
    display: flex;
    align-items: center;
  }

  ._btn._ttm_page .hollowFixedBtn {
    padding: 6px 11px;
    width: 60px;
    margin-right: 10px;
    font-size: 12px;
  }

  .TravelticketManager .el-pagination {
    border: none !important;
  }

  ._command_box {}

  ._command_tb {
    width: -webkit-fill-available;
    margin-top: 10px;
    margin-left: 15px;
    text-align: left;
  }

  ._command_tb tr:first-child {
    background-color: #cbe9fa;
  }

  ._command_tb tr th {
    font-size: 12px;
    color: #387ea5;
    padding: 8px;
  }

  ._command_tb tr td:first-child {
    color: #387ea5;
  }

  ._command_tb tr td {
    color: #333333;
    padding: 8px;
    font-size: 12px;
    background-color: #e0f4ff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  ._command_tb thead,
  ._command_tb tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  ._command_tb tbody {
    display: block;
    overflow-y: scroll;
  }

  ._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;
  }

  ._trip_CNY {
    width: auto !important;
    padding: 10px !important;
    background-color: #ffffff;
  }

  ._trip_CNY table {
    background-color: #ededed;
    border-collapse: collapse;
  }

  ._trip_CNY table ._rb_bor {
    border-right: 1px dashed #d3d3d3;
    border-bottom: 1px dashed #d3d3d3;
  }

  ._trip_CNY table ._lb_bor {
    border-right: 1px dashed #d3d3d3;
    border-top: 1px dashed #d3d3d3;
  }

  ._trip_CNY table ._rt_bor {
    border-left: 1px dashed #d3d3d3;
    border-bottom: 1px dashed #d3d3d3;
  }

  ._trip_CNY table ._lt_bor {
    border-left: 1px dashed #d3d3d3;
    border-top: 1px dashed #d3d3d3;
  }

  ._trip_CNY table td {
    padding: 15px;
    text-align: left;
  }

  ._trip_CNY table td ._CNY_name {
    display: inline-block;
    width: 21px;
    height: 21px;
    font-size: 12px;
    color: #ffffff;
    background-color: #2aaef2;
    line-height: 21px;
    text-align: center;
    border-radius: 50%;
  }

  ._trip_CNY table td ._CNY_num {
    color: #333333;
    position: relative;
    top: 2px;
  }

  ._CNY p {
    color: #333333;
    cursor: pointer;
    text-decoration: underline;
    font-size: 14px;
  }

  .TravelticketManager ._ol_info::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 4px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 8px;
  }

  .TravelticketManager ._ol_info::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
    background: #c9c9c9;
  }

  .TravelticketManager ._ol_info::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    background: #ededed;
  }

  ._command_tb tbody::-webkit-scrollbar {
    width: 4px;
    height: 1px;
  }

  ._command_tb tbody::-webkit-scrollbar-thumb {
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
    background: #c9c9c9;
  }

  ._command_tb tbody::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    background: #ededed;
  }

  .TravelticketManager .upload-demo {
    text-align: center;
  }

  ._bg_gre {
    background-color: #47bf8c !important;
    color: white !important;
  }

  .TravelticketManager .icon-img_plane {
    font-size: 12px;
    -webkit-transform: scale(0.8);
  }

  .TravelticketManager .departName {
    text-align: right;
  }

  .TravelticketManager .arrivalName {
    text-align: left;
  }

  .TravelticketManager ._destination .el-button:focus {
    background-color: #2aaef2 !important;
    color: #fff !important;
  }

  .TravelticketManager .travelTo {
    position: relative;
    top: -2px;
  }

  .TravelticketManager .icon-arrow1 {
    font-size: 12px;
  }

  .TravelticketManager .multiple_input .el-input {
    height: auto !important;
  }

  .TravelticketManager .el-button--primary {
    padding: 5px;
    margin-right: 1px;
  }

  .TravelticketManager .ticketUl li {
    display: inline-block;
  }

  .TravelticketManager .travelBtm {
    width: 100%;
    height: 70px;
    border-top: 1px dashed #dadada;
    text-align: right;
    padding: 15px 300px 0 0;
  }

  .TravelticketManager .orderDan {
    height: 150px;
    padding: 30px 0 0 30px;
  }

  .TravelticketManager .orderBtList {
    margin-top: 20px;
  }

  .TravelticketManager .query-box ul .el-input {
    width: 150px;
  }

  .TravelticketManager .vmiddle {
    display: flex;
    align-items: Center;
    /* height: 78px; */
  }

  .TM_btm {
    margin-left: 0 !important;
  }

  .TravelticketManager .TICK_Code {
    position: absolute;
    left: 25px;
    /* top: 5px; */
  }

  .TravelticketManager .TCID_cont {
    height: 28px;
    line-height: 28px;
    border-top: 1px dashed #ccc;
    text-indent: 20px;
  }

  .Ticket_TCID {
    margin-right: 2px;
  }

  .TravelticketManager .disClick {
    background-color: #d1d1d1;
    color: #fff;
    border: 1px solid #d1d1d1;
  }

  /*航班详情*/
  .TravelticketManager .FlightDivDetails {
    width: 100%;
    /* height: 65px; */
    /* overflow: auto; */
  }

  .TravelticketManager ._flightList {
    text-align: left;
    font-size: 12px;
    margin-bottom: 5px;
    padding-right: 5px;
  }

  /*航班号*/
  .TravelticketManager .FlightNumber {
    color: #ff0066;
    font-weight: bold;
  }

</style>
<template>
  <div class="flexOne TravelticketManager">
    <div class="query-box">
      <ul>
        <li>
          <span class="hotel_name">
            <em>起飞时间</em>
            <el-date-picker class="w150" v-model="Query.QNeedDateStart" type="date" value-format="yyyy-MM-dd"
              placeholder="" :picker-options="pickerBeginDateBefore">
            </el-date-picker>
            <el-date-picker class="w150" v-model="Query.QNeedDateEnd" type="date" value-format="yyyy-MM-dd"
              placeholder="" :picker-options="pickerBeginDateAfter">
            </el-date-picker>
          </span>
        </li>
        <li>
          <span class="hotel_name">
            <em>航空公司</em>
            <el-select v-model="Query.AirLineID" filterable :placeholder="$t('system.ph_in')" class="w150">
              <el-option :label="$t('pub.unlimitedSel')" :value="selectDefauleValue"></el-option>
              <el-option v-for="item in AirLineList" :label='item.AlName' :value='item.AirLineId' :key='item.AirLineId'>
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span class="hotel_name">
            <em>航班号</em>
            <el-input v-model="Query.Flight_number" type="text" @keyup.native.enter="getList" placeholder="请输入航班号">
            </el-input>
          </span>
        </li>
        <li>
          <button class="hollowFixedBtn" type="button"
            @click="resetPageIndex(),getList()">{{$t('pub.searchBtn')}}</button>
          <button class="normalBtn" type="button" @click="isShowNeed=true,isShowOrder=false" style="display:none;">提需求</button>
        </li>
      </ul>
    </div>
    <div class="TravelticketManager_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">
            <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>
            <el-row :gutter="10">
              <el-col :span="3" class="vmiddle">
                <div>
                  <span class="TICK_Code">编号：{{item.ID}}</span>
                  <img class="_oll_img" v-if="item.AirlineUrl" :src="item.AirlineUrl" :onerror="defaultImg" />
                  <img class="_oll_img" v-else src="../../../assets/img/bg_z1@2x.png" />
                </div>
                <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="4" class="vmiddle">
                <div class="FlightDivDetails">
                  <div class="_flightList" v-for="subItem in item.flightList">
                    <span class="FlightNumber">{{subItem.Flight_number}}</span>
                    <span>{{subItem.FlightDate}} {{subItem.Departure_time}}</span>
                    <span>({{subItem.DIATA}}){{subItem.DepartureName}}</span>
                    <span v-if="subItem.StopoverName">-</span>
                    <span v-if="subItem.StopoverName">({{subItem.StopoverIATA}}){{subItem.StopoverName}}</span>
                    <span v-if="subItem.ArrivalCityName">-</span>
                    <span v-if="subItem.ArrivalCityName">({{subItem.AIATA}}){{subItem.ArrivalCityName}}</span>
                  </div>
                </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="2" class="vmiddle">
                <div class="TMM_CNY">
                  成本:<span class="PingFangSC">{{item.CostPrice}}</span>
                </div>
              </el-col>
              <el-col :span="3" class="vmiddle">
                <div class="_Seat">
                  <div class="SeatList">
                    <ul class="clearfix">
                      <li>
                        <span class="iconfont icon-img_yizi"></span>
                      </li>
                      <li>
                        <p class="_num1">{{item.TicketNum==null?'0':item.TicketNum}}</p>
                        <p class="_wz">{{$t('Airticket.Air_reservation')}}</p>
                      </li>
                      <li>
                        <p class="_num2">{{item.SurplusNum==null?'0':item.SurplusNum}}</p>
                        <p class="_wz">{{$t('Airticket.Air_yvwei')}}</p>
                      </li>
                    </ul>
                  </div>
                </div>
              </el-col>
              <el-col :span="4" class="vmiddle">
                <div class="TKM_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>
              </el-col>
              <el-col :span="2" class="vmiddle">
                <div class="_head">
                  <img v-if="item.CreateUrl" :src="item.CreateUrl" :onerror="defaultImg" />
                  <img v-else src="../../../assets/img/default_head_img.jpg" />
                  <span>{{item.CreateName}}</span>
                </div>
              </el-col>
              <el-col :span="3" class="vmiddle">
                <div class="_jztime">
                  <p class="PingFangSC">航班日期:{{item.FlightDate}}</p>
                  <p class="PingFangSC">截止日期:{{item.TicketDeadlineStr}}</p>
                </div>
              </el-col>
              <el-col :span="2" class="vmiddle">
                <div class="_btn _ttm_page">
                  <span v-if="item.SurplusNum>0">
                    <button class="normalBtn TM_btm" type="button"
                      @click="isShowOrder=true,isShowNeed=false,bindAirticket.AirticketId=item.ID,bindAirticket.TotalNum=item.SurplusNum,GetPlaceHolder()">立即采购</button>
                  </span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="0">
              <el-col :span="8">
                <div class="TCID_cont PingFangSC">
                  团期：
                  <span v-show="item.TCIDList.length==0">暂无</span>
                  <span class="Ticket_TCID" v-for="subItem in item.TCIDList">{{subItem}}</span>
                </div>
              </el-col>
              <el-col :span="16">
                <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="Query.currentPage"
          layout="total,prev, pager, next, jumper" :page-size=Query.pageSize :total=Query.total>
        </el-pagination>
        <div class="combottomDiv" v-if="isShowNeed">
          <div class="combottomTitle">机票需求单</div>
          <el-form label-width="100px">
            <el-col :span="5">
              <el-form-item label="需求类型">
                <el-select class="w150" filterable placeholder="请选择" v-model="addNeedMsg.NeedSubType">
                  <el-option :label="$t('pub.unlimitedSel')" :value="selectDefauleValue"></el-option>
                  <el-option v-for='item in TicketNeedTypeList' :key="item.Id" :label="item.Name" :value="item.Id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="出发地">
                <el-select class="w150" filterable placeholder="请选择" v-model="addNeedMsg.MainId">
                  <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>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="目的地">
                <el-select class="w150" filterable placeholder="请选择" v-model="addNeedMsg.SubId">
                  <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>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="出发日期">
                <el-date-picker class="w150" type="date" value-format="yyyy-MM-dd" placeholder="起飞时间"
                  v-model="addNeedMsg.NeedDate">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="是否中转">
                <el-switch :active-value="AcceptTransferDefault" :inactive-value="NotAcceptTransferDefault"
                  v-model="addNeedMsg.IsAcceptTransfer"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="人数">
                <el-input v-model="addNeedMsg.UseNum" @keyup.native="checkInteger(addNeedMsg,'UseNum')" type="text"
                  class="w150" placeholder="请输入人数"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <button type="button" class="normalBtn" style="margin:5px 0 0 55px;" @click="SetNeed()">发送</button>
              <button type="button" class="hollowFixedBtn" @click="isShowNeed=false">取消</button>
            </el-col>
          </el-form>
        </div>
        <div class="combottomDiv" style="height:150px;" v-if="isShowOrder">
          <div class="combottomTitle">采购</div>
          <el-col :span="3">
            <el-input v-model="bindAirticket.PurchaseAmount"
              @keyup.native="checkInteger(bindAirticket,'PurchaseAmount')" type="text" class="w150"
              :placeholder="UseNum_placeholder"></el-input>
          </el-col>
          <el-col :span="5">
            <button type="button" class="normalBtn" :class="{'disClick':!isSubmit}"
              @click="SetTicketPurchase()">确定</button>
            <button type="button" class="hollowFixedBtn"
              @click="isShowOrder=false,bindAirticket.PurchaseAmount=''">取消</button>
          </el-col>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        Query: {
          //页码
          pageIndex: 1,
          //每页显示条数
          pageSize: 6,
          //总条数
          total: 0,
          //出发城市编号
          Departure_city: 0,
          //到达城市编号
          Arrival_city: 0,
          //是否往返
          TicketType: 0,
          //起飞时间
          QNeedDateStart: "",
          //起飞结束日期
          QNeedDateEnd: "",
          //航空公司编号
          AirLineID: 0,
          //航班号
          Flight_number: "",
          //余位大于0
          IsSurplusNumGreaterThan: false,
          currentPage: 1,
          //起飞状态
          FlyState: "0",
        },
        //下拉框默认值
        selectDefauleValue: 0,
        //防止重复提交
        isSubmit: true,
        //默认图片
        defaultImg: 'this.src="' + require("../../../assets/img/bg_z1@2x.png") + '"',

        //是否显示加载层
        loading: false,
        //显示需求单
        isShowNeed: false,
        //显示立即采购输入框
        isShowOrder: false,
        //是否有数据
        noData: false,
        //数据列表
        dataList: [],

        //城市列表
        CityList: [],
        //机票类型列表
        TicketTypeList: [],
        //航空公司
        AirLineList: [],
        //需求类型
        TicketNeedTypeList: [],
        //接受中转
        AcceptTransferDefault: 1,
        //不接受中转
        NotAcceptTransferDefault: 0,
        //绑定机票参数
        bindAirticket: {
          UseNum: "",
          AirticketId: 0,
          TotalNum: 0
        },
        //绑定框提示
        UseNum_placeholder: "",
        //需求单参数
        addNeedMsg: {
          //出发城市
          MainId: 0,
          //到达城市
          SubId: 0,
          //是否接受中转
          IsAcceptTransfer: "",
          //需求类型
          NeedType: 4,
          //需求子类型(询票1，预定2，出票3 )
          NeedSubType: 0,
          //需求时间
          NeedDate: "",
          //使用人数
          UseNum: "",
          //描述
          Describe: ""
        },
        pickerBeginDateBefore: {
          disabledDate: time => {
            let endTime = new Date(this.Query.QNeedDateEnd);
            return endTime.getTime() < time.getTime();
          }
        },
        pickerBeginDateAfter: {
          disabledDate: time => {
            let startTime = new Date(this.Query.QNeedDateStart);
            return startTime.getTime() >= time.getTime();
          }
        }
      };
    },
    methods: {
      getList() {
        this.loading = true;
        this.apipost(
          "AirTicket_get_GetPageList",
          this.Query,
          res => {
            if (res.data.resultCode == 1) {
              this.Query.total = res.data.data.count;
              this.noData = !this.Query.total > 0;
              this.dataList = res.data.data.pageData;
            } else {
              this.Warning(res.data.message);
            }
            this.loading = false;
          },
          err => {}
        );
      },
      GetPlaceHolder() {
        this.UseNum_placeholder =
          "最多绑定" + this.bindAirticket.TotalNum + "个机位";
      },

      //翻页功能按钮
      handleCurrentChange(val) {
        this.Query.pageIndex = val;
        this.getList();
      },
      //查询初始化页码
      resetPageIndex() {
        this.Query.pageIndex = 1;
        this.Query.currentPage = 1;
      },
      //初始化城市
      initCity() {
        this.apipost(
          "dict_post_Destination_GetCityList",
          this.Query,
          res => {
            if (res.data.resultCode == 1) {
              this.CityList = res.data.data;
            }
          },
          err => {}
        );
      },
      //初始化机票类型
      initTicketType() {
        this.apipost(
          "AirTicket_Get_GetTicketTypeList",
          this.Query,
          res => {
            if (res.data.resultCode == 1) {
              this.TicketTypeList = res.data.data;
            }
          },
          err => {}
        );
      },
      //初始化航空公司下拉
      initAirline() {
        this.apipost(
          "airline_post_GetList", {},
          res => {
            if (res.data.resultCode == 1) {
              this.AirLineList = res.data.data;
            }
          },
          err => {}
        );
      },
      //添加修改机票绑定
      SetTicketPurchase(id) {
        if (this.isSubmit) {
          this.isSubmit = false;
          if (this.bindAirticket.PurchaseAmount == "") {
            this.bindAirticket.PurchaseAmount = 0;
          }
          if (this.bindAirticket.PurchaseAmount == 0) {
            this.Warning("请输入要采购的数量");
            this.bindAirticket.PurchaseAmount = "";
            this.isSubmit = true;
            return false;
          }
          if (this.bindAirticket.PurchaseAmount > this.bindAirticket.TotalNum) {
            this.Warning("绑定的数量不能超过总剩余的机位数");
            this.isSubmit = true;
            return false;
          }
          this.apipost(
            "TravelAirTicket_Post_SetPurchase",
            this.bindAirticket,
            res => {
              if (res.data.resultCode == 1) {
                this.getList();
                this.Success("采购成功");
                this.bindAirticket.PurchaseAmount = "";
                this.isShowNeed = false;
                this.isShowOrder = false;
                this.isSubmit = true;
              } else {
                this.Error(res.data.message);
                this.isSubmit = true;
              }
            },
            err => {}
          );
        }
      },
      //获取需求类型
      getNeedType() {
        this.apipost(
          "AirticketNeed_get_GetNeedTypeList", {},
          res => {
            if (res.data.resultCode == 1) {
              this.TicketNeedTypeList = res.data.data;
            }
          },
          null
        );
      },
      //提需求
      SetNeed() {
        var that = this;
        let startItem = {};

        startItem = that.CityList.find(item => {
          return item.ID === that.addNeedMsg.MainId;
        });

        let ArrivalCityItem = {};
        ArrivalCityItem = that.CityList.find(item => {
          return item.ID === that.addNeedMsg.SubId;
        });

        let needItem = {};
        needItem = that.TicketNeedTypeList.find(item => {
          return item.Id === that.addNeedMsg.TicketNeedType;
        });

        var Describe = "";

        if (needItem != undefined) {
          Describe += needItem.Name + " ";
        }

        if (startItem != undefined) {
          Describe += "从" + startItem.Name;
        }
        if (ArrivalCityItem != undefined) {
          Describe += "到" + ArrivalCityItem.Name + "的机票";
        }

        if (this.IsAcceptTransfer == 1) {
          Describe += ",可接受中转";
        } else {
          Describe += ",不接受中转";
        }
        that.addNeedMsg.Describe = Describe;

        var newMsg = {
          //需求类型(4-机票)
          NeedType: 4,
          //主表资源编号
          MainId: that.addNeedMsg.MainId,
          //子表编号
          SubId: that.addNeedMsg.SubId,
          //需求时间
          NeedDate: that.addNeedMsg.NeedDate,
          //需求子类型
          NeedSubType: that.addNeedMsg.NeedSubType,
          //使用人数
          UseNum: that.addNeedMsg.UseNum,
          //描述
          Describe: Describe
        };

        this.apipost(
          "AirticketNeed_post_Set",
          newMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.getList();
              this.isShowNeed = false;
              this.isShowOrder = false;
              this.Success("处理成功");
              this.addNeedMsg.MainId = 0;
              this.addNeedMsg.SubId = 0;
              this.addNeedMsg.NeedDate = "";
              this.addNeedMsg.IsAcceptTransfer = 0;
            } else {
              this.Warning(res.data.message);
            }
          },
          err => {}
        );
      }
    },
    mounted() {
      this.initCity();
      this.getNeedType();
      this.initTicketType();
      this.initAirline();
      this.getList();
    }
  };
</script>