<style>
  .ts_Click {
    color: blue;
    text-decoration: underline;
    font-size: 12px;
    cursor: pointer;
  }

</style>
<template>
  <div class="">
    <div class="query-box">
      <ul>
        <li>
          <span>
            <em>{{$t('pub.date')}}</em>
            <el-date-picker class="w150" type="date" v-model="msg.QStartDate" :picker-options="pickerBeginDateBefore"
              value-format="yyyy-MM-dd" placeholder></el-date-picker>
            <el-date-picker class="w150" type="date" v-model="msg.QEndDate" :picker-options="pickerBeginDateAfter"
              value-format="yyyy-MM-dd" placeholder></el-date-picker>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('visa.v_tuanhao')}}</em>
            <el-input v-model="msg.TCNUM" type="text"></el-input>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('scen.sc_temID')}}</em>
            <el-input v-model="msg.TCID" type="text" @keyup.native="checkInteger(msg,'TCID')"></el-input>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('system.query_airCompanyName')}}</em>
            <el-select v-model="msg.AirTicketId" filterable :placeholder="$t('system.ph_buxian')" class="w150">
              <el-option :label="$t('system.ph_buxian')" :value="0">
              </el-option>
              <el-option v-for="item in  AirlineList" :key="item.AirLineId" :label="item.AlName"
                :value="item.AirLineId"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <button class="hollowFixedBtn" @click="getList(),resetPageIndex()">{{$t('pub.searchBtn')}}</button>
        </li>
      </ul>
    </div>
    <div class="_fnDm_content">
      <table class="singeRowTable" cellspacing="0" cellpadding="0" v-loading="loading">
        <tr>
          <th>{{$t('objFill.v101.FinancialModule.tuanhtdbh')}}</th>
          <th>{{$t('hotel.order_Number')}}</th>
          <th>{{$t('restaurant.res_oderTime')}}</th>
          <th>{{$t('visa.v_yewuyuan')}}</th>
          <th>{{$t('objFill.v101.FinancialModule.piaowcpsjwksj')}}</th>
          <th>{{$t('objFill.v101.FinancialModule.dindqxsj')}}</th>
          <th>{{$t('objFill.v101.FinancialModule.dindquxr')}}</th>
        </tr>
        <tr v-for="(item,index) in dataList" :key="index">
          <td>
            <span class="ts_Click"
              @click='goUrl("RegistrationList", item.TCID,"报名清单")'>{{item.TCNUM}}&nbsp;({{item.TCID}})</span>
          </td>
          <td>{{item.OrderId}}</td>
          <td>{{item.CreateDateStr}}</td>
          <td>{{item.EnterName}}</td>
          <td>{{item.TicketSureTimeStr}}</td>
          <td>{{item.OrderCancelTimeStr}}</td>
          <td>{{item.LogUpdateByName}}</td>
        </tr>
      </table>
      <div class="noDataNotice" v-if="dataList.length<1">
        <i class="iconfont icon-kong"></i>
        <p>{{$t("active.ld_noData")}}</p>
      </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>
    </div>
  </div>
</template>
<script>
  // 自定义列组件
  export default {
    data() {
      return {
        loading: false,
        msg: {
          QStartDate: '',
          QEndDate: '',
          TCNUM: '',
          TCID: '',
          AirTicketId: 0, //航空公司
          pageIndex: 1,
          pageSize: 15
        },
        dataList: [],
        AirlineList: [], //航空公司
        currentPage: 1,
        total: 0,
        pickerBeginDateBefore: {
          disabledDate: time => {
            if (this.msg.QEndDate == null) {
              return false;
            } else {
              let endTime = new Date(this.msg.QEndDate);
              return endTime.getTime() < time.getTime();
            }
          }
        },
        pickerBeginDateAfter: {
          disabledDate: time => {
            let startTime = new Date(this.msg.QStartDate);
            return startTime.getTime() >= time.getTime();
          }
        }
      }
    },
    created() {
    },
    components: {},
    mounted() {
      this.getAirlineList();
      this.getList();
    },
    methods: {
      getList: function () {
        this.loading = true;
        this.apipost('sellorder_get_GetOrderCancelListService', this.msg, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data.pageData;
            this.total = res.data.data.count;
          } else {
            this.Error(res.data.message);
          }
        }, err => {})
      },
      //获取航空公司
      getAirlineList() {
        this.apipost(
          "airline_post_GetList", {},
          res => {
            if (res.data.resultCode == 1) {
              this.AirlineList = res.data.data;
            }
          },
          err => {}
        );
      },
      //翻页
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      resetPageIndex() { // 重置页码
        this.msg.pageIndex = 1;
        this.currentPage = 1;
      },
      goUrl(path, id, name) {
        this.$router.push({
          name: path,
          query: {
            id: id,
            blank: "y",
            tab: name
          }
        });
      },
    }
  }

</script>