<style>
.TicketSpotOrder .el-input--prefix .el-input__inner {
  padding-left: 30px;
}
.TicketSpotOrder .w150 .el-input {
  width: 150px;
}
.TicketSpotOrder_list {
  padding: 20px 0;
}
.TicketSpotOrder ._ol_info {
  font-size: 12px;
  width: 100%;
  overflow-x: auto;
  min-height: 500px;
}
.TicketSpotOrder ._ol_info::-webkit-scrollbar {
  width: 4px;
  height: 8px;
}
.TicketSpotOrder ._ol_info::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background: #ededed;
}
.TicketSpotOrder ._ol_info::-webkit-scrollbar-thumb {
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  background: #c9c9c9;
}

.TicketSpotOrder ._ol_info ul._ol_color li {
  float: left;
  padding: 0 15px;
  display: flex;
  align-items: center;
}
.TicketSpotOrder ._ol_info ul._ol_color li ._cl {
  border-radius: 3px;
  display: inline-block;
  width: 5px;
  height: 12px;
  margin-right: 5px;
}
.TicketSpotOrder ._red {
  background-color: #e95252;
}
.TicketSpotOrder ._red_text {
  color: #e95252;
}
.TicketSpotOrder ._green {
  background-color: #47bf8c;
}
.TicketSpotOrder ._green_text {
  color: #47bf8c;
}
.TicketSpotOrder ._blu {
  background-color: #2aaef2;
}
.TicketSpotOrder ._blu_text {
  color: #2aaef2;
}
.TicketSpotOrder ._ol_list > li {
  align-items: center;
  height: 103px;
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid #dddddd;
  transition: linear all 0.5s;
  background-color: #fff;
}
.TicketSpotOrder ._ol_list > li:hover {
  box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
  transition: all linear 0.5s;
}
.TicketSpotOrder ._oll_info ._oll_tit {
  color: #333333;
  font-size: 14px;
}
.TicketSpotOrder ._oll_info ._oll_tit span {
  display: inline-block;
  padding: 1px 10px;
  font-size: 12px;
  margin-top: 40px;
  border: solid 1px #ff9000;
  color: #ff9000;
  border-radius: 4px;
}
.TicketSpotOrder ._oll_line {
  max-width: 5px;
  min-width: 5px;
  height: 103px;
  background: rgba(233, 82, 82, 1);
  border-radius: 4px;
  float: left;
}
.TicketSpotOrder ._oll_line._o_green {
  background: #47bf8c;
}
.TicketSpotOrder ._oll_line._o_blu {
  background: #2aaef2;
}
.TicketSpotOrder ._oll_info {
  padding-left: 40px;
  min-width: 90px;
}
.TicketSpotOrder ._oll_food {
  margin-top: 30px;
}
.TicketSpotOrder ._oll_food ._oll_info {
  padding: 0 27px;
  min-width: 200px;
}
.TicketSpotOrder ._oll_food ._oll_tit {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.TicketSpotOrder ._oll_food ._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;
}
.TicketSpotOrder ._oll_img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  margin-left: 40px;
}
.TicketSpotOrder ._oll_adrr {
  color: #666666;
  font-size: 12px;
  margin-top: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.TicketSpotOrder ._oll_time {
  display: inline-block;
  background-color: #efefef;
  border-radius: 4px;
  color: #999999;
  font-size: 12px;
  padding: 2px 10px;
  margin-top: 10px;
}
.TicketSpotOrder ._oll_date {
  color: #333333;
  font-size: 16px;
}
.TicketSpotOrder ._oll_date .iconfont,
._oll_jiao .iconfont,
._oll_renshu .iconfont {
  color: #bbbbbb;
}
.TicketSpotOrder ._oll_food_t {
  font-size: 12px;
  padding-left: 20px;
  color: #666666;
}
.TicketSpotOrder ._oll_praise,
._oll_lxr_b {
  margin: 0 25px;
}
.TicketSpotOrder ._o_prc {
  color: #2aaef2;
  font-size: 16px;
}
.TicketSpotOrder ._o_fprc {
  color: #ff9000;
  font-size: 16px;
}
.TicketSpotOrder ._ln {
  color: #dcdfe6;
  display: inline-block;
  margin: 0 10px;
}
.TicketSpotOrder ._oll_r {
  color: #2aaef2;
  font-size: 16px;
}
.TicketSpotOrder ._oll_lxr {
  height: 100%;
  min-width: 233px;
  max-width: 233px;
  border-left: dashed 1px #dcdfe6;
  border-right: dashed 1px #dcdfe6;
  position: relative;
}
.TicketSpotOrder ._oll_lxr ._oll_praise {
  display: flex;
  padding-top: 20px;
}
.TicketSpotOrder ._oll_lxr_name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.TicketSpotOrder ._oll_lxr_b img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}
.TicketSpotOrder ._oll_lxr_b {
  display: flex;
  align-items: center;
  height: 80px;
  margin-top: 13px;
}
.TicketSpotOrder ._oll_renshu ._oll_food_t {
  text-indent: 17px;
  padding-right: 20px;
}
.TicketSpotOrder ._oll_statu {
  padding-left: 30px;
  font-size: 14px;
  margin-top: 30px;
  position: relative;
}
.TicketSpotOrder ._os_queren .iconfont {
  color: #4bca81;
}
.TicketSpotOrder ._os_queren ._os_admin {
  color: #666666;
}
.TicketSpotOrder ._os_queren .hollowFixedBtn {
  margin-left: 10px;
}
.TicketSpotOrder ._lxr_p.iconfont {
  color: #4bca81;
}
.TicketSpotOrder ._lxr_pn {
  color: #333333;
  font-size: 12px;
}
.TicketSpotOrder ._oll_w140 {
  min-width: 130px;
  max-width: 140px;
  margin-top: 30px;
}
.TicketSpotOrder ._os_quxiao .iconfont {
  color: #e95252;
}
.TicketSpotOrder ._os_daique .iconfont {
  color: #bbbbbb;
}
.TicketSpotOrder ._os_caozuo {
  color: #666666;
  font-size: 12px;
  cursor: pointer;
  border: none;
  padding: 0;
  margin-left: 20px;
}
.TicketSpotOrder #quxiao_info {
  background: rgba(248, 248, 248, 1);
  border-radius: 4px;
  border-color: #dcdfe6;
  width: 100%;
  height: 170px;
}
.TicketSpotOrder .cancel_info {
  width: 440px;
}
.TicketSpotOrder ._oll_rili {
  text-align: center;
}
.TicketSpotOrder .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;
}
.TicketSpotOrder .cancel_info .el-dialog__body {
  padding: 30px;
}
.TicketSpotOrder .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;
}
.TicketSpotOrder .InfoChangeLog .close {
  color: #cccccc;
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 17px;
  height: 17px;
}
.TicketSpotOrder .InfoChangeLog .changLog {
  background-color: #f9f9f9;
  height: auto;
  max-height: 170px;
  width: 100%;
  overflow: auto;
}
.TicketSpotOrder .InfoChangeLog .changLog ul {
  margin-left: 20px;
}
.TicketSpotOrder .InfoChangeLog .changLog li {
  border-left: 1px solid #e9e9e9;
  position: relative;
  padding-bottom: 15px;
  padding-left: 20px;
}
.ToLog .InfoChangeLog .changLog li {
  border-left: 1px solid #e9e9e9;
}
.ToLog .InfoChangeLog .changLog li:last-child {
  border-left: 0;
}

.TicketSpotOrder .InfoChangeLog .changLog li p {
  text-align: left;
}
.TicketSpotOrder .InfoChangeLog .changLog li .radius {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  left: -4px;
  top: 4px;
}
.TicketSpotOrder .InfoChangeLog .changLog li.red .radius {
  background-color: #e95252;
}
.TicketSpotOrder .InfoChangeLog .changLog li.green .radius {
  background-color: #47bf8c;
}
.TicketSpotOrder .InfoChangeLog .time {
  color: #666666;
  padding-bottom: 5px;
}
.TicketSpotOrder .InfoChangeLog .changLog::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.TicketSpotOrder .InfoChangeLog .changLog::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  background: #c9c9c9;
}
.TicketSpotOrder .InfoChangeLog .changLog::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background: #ededed;
}
.TicketSpotOrder .pNumber {
  margin-top: 30px;
}
.TicketSpotOrder .vmiddle {
  display: flex;
  align-items: Center;
  height: 78px;
}
.TicketSpotOrder ._tripDetails {
  padding: 0;
  box-shadow: 0px 1px 3px 0px #dedede;
}
.TicketSpotOrder ._tripDetails .popper__arrow::after {
  border-bottom-color: #ededed !important;
}
.TicketSpotOrder ._tripDetails table {
  padding: 10px 0 0 20px;
  background-color: #ededed;
  border-collapse: collapse;
  border: 1px solid #d2d2d2;
  font-size: 12px;
}
.TicketSpotOrder ._tripDetails table th {
  background-color: #ededed;
  padding: 5px;
}
.TicketSpotOrder ._tripDetails table td {
  background-color: #ffffff;
  padding: 9px 15px;
  color: #333333;
  border: 1px solid #d2d2d2;
}
.TicketSpotOrder ._tripDetails table td._d_name {
  background-color: #ededed;
}
.TicketSpotOrder ._tripDetails table ._color_666 {
  color: #666666;
}
.TicketSpotOrder ._tripDetails table tr._color_666 th {
  padding: 9px 15px;
}
._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;
}
</style>
<template>
  <div class="flexOne TicketSpotOrder">
    <div class="query-box">
      <ul>
        <li>
          <span>
            <em>{{$t('pub.date')}}</em>
            <el-date-picker clearable class="w150" v-model="msg.sUpdateDate" type="date" :picker-options="pickerOptions1"
              value-format="yyyy-MM-dd" :placeholder="$t('admin.admin_choDate')">
            </el-date-picker><span class="_ln">-</span>
            <el-date-picker clearable class="w150" v-model="msg.eUpdateDate" type="date" value-format="yyyy-MM-dd"
              :picker-options="pickerOptions2" :placeholder="$t('admin.admin_choDate')">
            </el-date-picker>
          </span>
        </li>
        <li>
          <span>
            <em class="">{{$t('hotel.order_Form')}}</em>
            <el-select v-model="msg.OrderSource" filterable :placeholder="$t('system.ph_choice')" class="w150">
              <el-option :label="$t('system.ph_buxian')" value='0'></el-option>
              <el-option v-for='item in OrderSourceList' :key="item.ID" :label="item.Name" :value="item.ID">
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em class="">{{$t('hotel.order_Number')}}</em>
            <el-input v-model="msg.ID" :placeholder="$t('system.ph_in')" class="w150" @keyup.native.enter="getList"></el-input>
          </span>
        </li>
        <li>
          <span>
            <em class="">{{$t('hotel.hotel_status')}}</em>
            <el-select v-model="msg.Status" filterable :placeholder="$t('system.ph_choice')" class="w150">
              <el-option :label="$t('system.ph_buxian')" value='-1'></el-option>
              <el-option v-for='item in OrderStateList' :key="item.Id" :label="item.Name" :value="item.Id">
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="getList()" />
        </li>
      </ul>
    </div>
    <div class="TicketSpotOrder_list">
      <div class="_ol_info">
        <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>
        <ul class="_ol_list" v-loading="loading">
          <li v-for="(item,index) in dataList">
            <el-row :gutter="11">
              <el-col :span="2">
                <span class="_oll_line" v-if="item.FreightSpace==1"></span>
                <span class="_oll_line _o_green" v-else-if="item.FreightSpace==2"></span>
                <span class="_oll_line _o_blu" v-else-if="item.FreightSpace==3"></span>
                <div class="_oll_info">
                  <p class="_oll_tit"><span>{{$t('hotel.hotel_SerialNumber')}} {{item.ID}}</span>
                  </p>
                </div>
              </el-col>
              <el-col :span="2">
                <div style="margin-top:25px;">
                  <img v-if="item.AirLinePic" class="_oll_img" :src="item.AirLinePic" :onerror="defaultImg">
                  <img v-else class="_oll_img" src="../../assets/img/bg_z1@2x.png" alt="">
                </div>
              </el-col>
              <el-col :span="2">
                <div class="_oll_food">
                  <el-tooltip class="item" effect="dark" :content="item.AirLineName" placement="bottom-start"
                    popper-class="max-w250">
                    <p class="_oll_tit" v-if="item.AirLineName"> {{item.AirLineName}}</p>
                  </el-tooltip>
                  <span class="_oll_adrr" v-if="item.FreightSpaceName">{{item.FreightSpaceName}}</span>
                </div>
              </el-col>
              <el-col :span="2" class="vmiddle">
                <div v-if="item.flightList!=null && item.flightList.length>0" class="_destination">
                  <el-popover popper-class="_tripDetails" width="900" trigger="click">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tr class="_color_666">
                        <th width="60">{{$t('Airticket.Air_segment')}}</th>
                        <th width="250">{{$t('Airticket.Air_Trip')}}</th>
                        <th width="80">{{$t('system.query_flightNum')}}</th>
                        <th width="150">起飞时间</th>
                        <th width="100">经停城市</th>
                        <th width="150">经停时间</th>
                        <th width="80">到达时间</th>
                      </tr>
                      <tr v-for="(ds,din) in item.flightList" :key="din">
                        <td class="_d_name _color_666">
                          <span v-if="din==0">
                            {{$t('Airticket.Air_go')}}
                          </span>
                          <span v-else-if="din==item.flightList.length-1">
                            {{$t('Airticket.Air_returnTrip')}}
                          </span>
                          <span v-else-if="din>0 && din!=item.flightList.length-1">
                            {{$t('Airticket.Air_transit')}}
                          </span>
                        </td>
                        <td>
                          <div>{{ds.DepartureName}}-{{ds.ArrivalCityName}}</div>
                          <div style="margin-top:5px;">{{ds.dName}}-{{ds.aName}}</div>
                        </td>
                        <td>{{ds.Flight_number}}</td>
                        <td>{{ds.FlightDate}} {{ds.Departure_time}}</td>
                        <td>{{ds.StopoverName}}</td>
                        <td>{{ds.Stopover_time!=' - '?ds.Stopover_time:''}}</td>
                        <td>{{ds.Arrival_time}}</td>
                      </tr>
                    </table>
                    <el-button slot="reference" class="hollowFixedBtn wangfan">详情</el-button>
                  </el-popover>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="_oll_praise _oll_w140">
                  <p class="_oll_jiao"><span class="iconfont icon-img_jiaqian"></span> {{$t('hotel.hotel_trading')}}
                    <span class="_o_prc">{{item.ExchangePrice}}</span> {{$t('hotel.hotel_yuan')}}</p>
                  <p class="_oll_food_t">{{$t('hotel.hotel_CostPrice')}} {{item.CostPrice}} {{$t('hotel.hotel_yuan')}}</p>
                </div>
              </el-col>
              <el-col :span="2">
                <div class="_oll_renshu _oll_w140 pNumber">
                  <p class="_oll_praise"><span class="iconfont icon-img_renshu"></span> <span class="_oll_r">{{item.UseAccount}}</span>
                    人</p>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="_oll_lxr">
                  <div class="_oll_praise" v-if="item.OrderSource==2">
                    <span class="iconfont icon-dingdanhao"></span>
                    <el-tooltip effect="dark" :content="item.ClientName" placement="top" popper-class="max-w250">
                      <p class="_oll_lxr_name">{{item.ClientName}} hh</p>
                    </el-tooltip>
                  </div>
                  <div class="_oll_lxr_b" v-if="item.OrderSource==1|| item.OrderSource==3 ">
                    <img v-if="item.ContactImgUrl" :src="item.ContactImgUrl" alt="" :onerror="defaultImg">
                    <img v-else src="../../assets/img/bg_z1@2x.png" alt="">

                    <span class="_lxr_n">&nbsp;&nbsp;{{item.ContactName}}&nbsp;&nbsp;</span>
                    <span class="_lxr_p iconfont icon-dianhua"><span class="_lxr_pn"> {{item.ContactMobile}}</span></span>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="_oll_statu">
                  <div class="_os_queren" v-if="item.Status==1">
                    <div>
                      <span class="iconfont icon-yiqueren"></span>
                      <span>{{$t('hotel.hotel_haveBeenConfirmed')}}</span>
                      <span class="_os_admin">（{{item.ConfirmName}}）</span>
                      <input type="button" class="hollowFixedBtn" :value="$t('restaurant.res_cwsj')" />
                    </div>
                    <el-popover width="400" popper-class='ToLog' trigger="click">
                      <div class="InfoChangeLog" style="height: auto;min-width: 250px;max-height: 220px;background-color: #FFFFFF;margin:20px 0;">
                        <div class="changLog">
                          <ul v-if="orderlogList.length!=0" style="padding-left: 20px;max-height: 220px;overflow: auto;">
                            <li v-for="item in orderlogList" style="position: relative;padding-bottom: 20px;padding-left: 20px;"
                              class="green">
                              <span style="background-color: #47BF8C;width: 7px;height: 7px;border-radius: 50%;display: inline-block;position: absolute;left: -4px;"></span>
                              <p style="color: #666666;position:relative;top:-4px;">{{item.UpdateDate}}</p>
                              <p>{{item.Remark}}</p>
                            </li>
                          </ul>
                          <ul v-else>
                            <li>{{$t('hotel.hotel_zanwu')}}</li>
                          </ul>
                        </div>
                      </div>
                      <el-button slot="reference" class="_os_caozuo" @click="InfoChangeLogShow(index)">{{$t('restaurant.res_history')}}</el-button>
                    </el-popover>
                  </div>
                  <div class="_os_quxiao" v-else-if="item.Status==2">
                    <div>
                      <span class="iconfont icon-yiquxiao"></span>
                      <span>{{$t('hotel.hotel_HasBeenCancelled')}}</span>
                      <span>（{{item.ConfirmName}}）</span>
                    </div>
                    <el-popover width="400" popper-class='ToLog' trigger="click">
                      <div class="InfoChangeLog" style="height: auto;min-width: 250px;max-height: 220px;background-color: #FFFFFF;margin:20px 0;">
                        <div class="changLog">
                          <ul v-if="orderlogList.length!=0" style="padding-left: 20px;max-height: 220px;overflow: auto;">
                            <li v-for="item in orderlogList" style="position: relative;padding-bottom: 20px;padding-left: 20px;"
                              class="green">
                              <span style="background-color: #47BF8C;width: 7px;height: 7px;border-radius: 50%;display: inline-block;position: absolute;left: -4px;"></span>
                              <p style="color: #666666;position:relative;top:-4px;">{{item.UpdateDate}}</p>
                              <p>{{item.Remark}}</p>
                            </li>
                          </ul>
                          <ul v-else>
                            <li>{{$t('hotel.hotel_zanwu')}}</li>
                          </ul>
                        </div>
                      </div>
                      <el-button slot="reference" class="_os_caozuo" @click="InfoChangeLogShow(index)">{{$t('restaurant.res_history')}}</el-button>
                    </el-popover>
                  </div>
                  <div class="_os_daique" v-else>
                    <div>
                      <span class="iconfont icon-daiqueren"></span>
                      <span>{{$t('hotel.hotel_tobeConfirmed')}}</span>
                      <span>（{{$t('restaurant.res_system')}}）</span>
                      <input type="button" class="normalBtn" :value="$t('restaurant.res_confirm')" @click="ConfirmAirticketOrder(item.ID)" />
                      <input type="button" class="hollowFixedBtn" :value="$t('pub.cancelBtn')" @click="dialogVisible=true,CancelID = item.ID" />
                    </div>
                    <el-popover width="400" popper-class='ToLog' trigger="click">
                      <div class="InfoChangeLog" style="height: auto;min-width: 250px;max-height: 220px;background-color: #FFFFFF;">
                        <div class="changLog">
                          <ul v-if="orderlogList.length!=0" style="padding-left: 20px;max-height: 220px;overflow: auto;">
                            <li v-for="item in orderlogList" style="position: relative;padding-bottom: 20px;padding-left: 20px;padding-top: 10px;"
                              class="green">
                              <span style="background-color: #47BF8C;width: 7px;height: 7px;border-radius: 50%;display: inline-block;position: absolute;left: -4px;"></span>
                              <p style="color: #666666;position:relative;top:-4px;">{{item.UpdateDate}}</p>
                              <p>{{item.Remark}}</p>
                            </li>
                          </ul>
                          <ul v-else>
                            <li>{{$t('hotel.hotel_zanwu')}}</li>
                          </ul>
                        </div>
                      </div>
                      <el-button slot="reference" class="_os_caozuo" @click="InfoChangeLogShow(index)">{{$t('restaurant.res_history')}}</el-button>
                    </el-popover>
                  </div>
                </div>
              </el-col>
            </el-row>
          </li>
        </ul>
      </div>
    </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=msg.pageSize :total=total>
    </el-pagination>
    <el-dialog custom-class='cancel_info' title="取消原因说明" :visible.sync="dialogVisible" center>
      <textarea v-model="cancelRemark" name="" id="quxiao_info"></textarea>
      <div slot="footer" class="dialog-footer">
        <button class="hollowFixedBtn" @click="dialogVisible = false,cancelRemark=''">{{$t('pub.closeWindow')}}</button>
        <button class="normalBtn" type="primary" @click="CancelAirticketOrder()">{{$t('pub.confirmCancel')}}</button>
        &nbsp;
      </div>
    </el-dialog>

  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: {
        pageIndex: 1,
        pageSize: 4,
        sUpdateDate: "",
        eUpdateDate: "",
        OrderSource: "0",
        ID: "",
        Status: "-1"
      },
      dataList: "",
      OrderStateList: "",
      OrderSourceList: "",
      CancelID: "",
      cancelRemark: "",
      orderlogList: "",
      total: 0,
      currentPage: 1,
      loading: true,
      noData: false,
      dialogVisible: false,
      defaultImg: 'this.src="' + require("../../assets/img/bg_z1@2x.png") + '"',
      pickerOptions1: {
        disabledDate: time => {
          let endTime = new Date(this.msg.eUpdateDate);
          return endTime.getTime() < time.getTime();
        }
      },
      pickerOptions2: {
        disabledDate: time => {
          let startTime = new Date(this.msg.sUpdateDate);
          return startTime.getTime() >= time.getTime();
        }
      }
    };
  },
  methods: {
    //获取列表
    getList() {
      this.loading = true;
      if (this.msg.ID == "") {
        this.msg.ID = 0;
      }
      this.apipost(
        "AirTicketOrder_Post_GetPageList",
        this.msg,
        res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.total = res.data.data.count;
            this.dataList = res.data.data.pageData;
            this.noData = !this.total > 0;
          } else {
            this.Warning(res.data.message);
          }
          if (this.msg.ID == 0) {
            this.msg.ID = "";
          }
        },
        err => {}
      );
    },
    //确认订单
    ConfirmAirticketOrder(ID) {
      this.apipost(
        "AirTicketOrder_Post_ConfirmTicketOrder",
        {
          ID: ID
        },
        res => {
          if (res.data.resultCode == 1) {
            this.Success("操作成功");
            this.getList();
          } else {
            this.Warning("操作失败");
          }
        },
        err => {}
      );
    },
    //取消订单
    CancelAirticketOrder() {
      if (this.cancelRemark == "") {
        this.Warning("请输入取消原因");
      } else {
        this.apipost(
          "AirTicketOrder_Post_CancelTicketOrder",
          {
            ID: this.CancelID,
            CancelReason: this.cancelRemark
          },
          res => {
            if (res.data.resultCode == 1) {
              this.dialogVisible = false;
              this.Success("取消成功");
              this.getList();
            } else {
              this.Warning(res.data.message);
            }
          },
          err => {}
        );
      }
    },
    //获取订单来源
    GetOrderSource() {
      this.apipost(
        "AirTicketOrder_Get_GetTicketOrderStatusList",
        {},
        res => {
          this.OrderStateList = res.data.data;
        },
        err => {}
      );
    },
    //获取订单状态
    GetOrderState() {
      this.apipost(
        "order_post_GetOrderSource",
        {},
        res => {
          this.OrderSourceList = res.data.data;
        },
        err => {}
      );
    },
    //日志列表
    InfoChangeLogShow(index) {
      this.apipost(
        "orderlog_post_GetList",
        {
          OrderId: this.dataList[index].ID,
          ResourceType: 2
        },
        res => {
          this.orderlogList = res.data.data;
        },
        err => {}
      );
    },
    //翻页功能按钮
    handleCurrentChange(val) {
      this.msg.pageIndex = val;
      this.getList();
    }
  },
  mounted() {
    this.getList();
    this.GetOrderSource();
    this.GetOrderState();
  }
};
</script>