<template>
  <div class="flexOne" style="min-width: 1200px;">
    <div class="groupTourOrderSearch">
      <ul>
        <li>
            <span>
                <em>{{$t('salesModule.keyWords')}}</em><el-input v-model='msg.searchKey' class='w150'></el-input>
            </span>
        </li>
        <li>
            <span>
                <em>{{$t('system.table_company')}}</em>
                <el-select v-model="msg.rbBranchId" :placeholder="$t('pub.pleaseSel')">
                   <el-option :label="$t('pub.unlimitedSel')" :value="-1"></el-option>
                  <el-option v-for="item in companyList" :label='item.BName' :value='item.Id' :key='item.Id'></el-option>
            </el-select>
            </span>
            
        </li>
        <li>
            <span>
                <em>{{$t('visa.v_yewuyuan')}}</em>
                <el-select v-model="msg.enterID" :placeholder="$t('pub.pleaseSel')">
                  <el-option :label="$t('pub.unlimitedSel')" :value="-1"></el-option>
                  <el-option
                    v-for="item in employeeList"
                    :label="item.name"
                    :value="item.empId"
                    :key="item.empId"
                  ></el-option>
                  </el-select>
            </span>
            
        </li>
        <li>
            <span>
                <em>{{$t('admin.admin_status')}}</em>
                <el-select v-model="msg.status" :placeholder="$t('pub.pleaseSel')">
                <el-option key="0" :label="$t('pub.normalSel')" :value="0"></el-option>
                <el-option key="1" :label="$t('pub.cancelBtn')" :value="1"></el-option>
                <el-option key="2" :label="$t('sm.daifukuan')" :value="2"></el-option>
            </el-select>
            </span>
            
        </li>
        <li>
            <span><em>{{$t('sm.Date')}}</em>
                <el-date-picker v-model='msg.startDate' @change="dataDui()" class='w150' value-format="yyyy-MM-dd"
                            type="date"></el-date-picker>
                                            -
                <el-date-picker v-model='msg.endDate' @change="dataDui()" class='w150'
                            value-format="yyyy-MM-dd" type="date"></el-date-picker>
            </span>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="getList();resetPageIndex()"/>
        </li>
      </ul>
    </div>
    <!-- 表格 -->
    <div style="width: 100%; height: auto;min-height:500px;overflow-x: auto;" class="ownScrollbarStyle">
      <table class="groupTourOrderSearchTable" border="0" cellspacing="0" cellpadding="0" v-loading='loading'>
        <tr class="title_tr">
          <th>{{$t('fnc.danhao')}}</th>
          <th>{{$t('restaurant.res_resName')}}</th>
          <th>{{$t('restaurant.res_packageName')}}</th>
          <th>{{$t('active.cl_syriqi')}}</th>
          <th>{{$t('fnc.a_zongjine')}}</th>
          <th>{{$t('fnc.khxinxi')}}</th>
          <th>{{$t('ground.kehushuliang')}}</th>
          <th>{{$t('hotel.hotel_OrderStates')}}</th>
          <th>{{$t('visa.v_creatDate')}}</th>
          <th>{{$t('ground.tuikuanzhuangt')}}</th>
        </tr>
        <tr>
          <td v-show="dataList.length==0" colspan="16" align="center">{{$t('system.content_noData')}}</td>
        </tr>
        <tbody v-for="(item,index) in dataList" :key="index">
        <tr>
          <td>{{item.id}}</td>
          <td>
              <p class="fz12 over_ellipsis">{{item.diningName}}</p>
            </td>
          <!-- <td><span @click="goUrl('散客机票','individualTicket',item.AirTicketId)" class="guest_num">{{item.AirTicketId}}</span></td>           -->
          <td>{{item.mealName}}</td>
          <td class="fz12">{{item.useDate}}</td>
          <td>
              <p>{{$t('ground.yingfujine')}}：{{item.preferPrice}}</p>             
          </td>
          <td class="fz12">
              <p>{{$t('system.query_name')}}：{{item.customerName}}</p>
              <p>{{$t('hotel.table_tel')}}：{{item.customerMobile}}</p>              
          </td>
          <td class="fz12">
              <p>{{$t('ground.kehushuliang')}}：{{item.guestNum}}</p>
              <p>{{$t('salesModule.Adult')}}：{{item.adultNum}}</p>              
              <p>{{$t('sm.ertong')}}：{{item.childNum}}</p>              
          </td>
          <td>
              <span v-if="item.status==1">{{$t('pub.normalSel')}}</span>
              <span v-if="item.status==2">{{$t('pub.cancelBtn')}}</span>
              <span v-if="item.status==3">{{$t('sm.daifukuan')}}</span>
          </td>
          <td>{{item.createDate}}</td>          
          <td>
              <p v-if="item.RefundStatus!=1">
                  <span v-if="item.RefundStatus==2">{{$t('sm.tuikuanz')}}</span>
                  <span v-if="item.RefundStatus==3">{{$t('sm.yituikaun')}}</span>
              </p>
              
              
          </td>
        </tr>
        
        </tbody>
      </table>
    </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>
</template>

<script>
import payURL from "../commonPage/payURL.vue";
import moment from "moment";
export default {
  data() {
    return {
      msg: {
        pageIndex: 1,
        pageSize: 10,
        AirTicketId: 0,
        AirOrderId: 0,
        status: 0,
        startDate:"",
        endDate: "",
        searchKey:"",
        rbBranchId:-1,
        enterID:-1,

      },
      dataList: [],
      loading: false,
      total: 0,
      currentPage: 1,
      showID: -1,
      companyList:[],
      employeeList:[],
    };
  },
  components: {},
  created() {
    this.getCompanyList();
    this.getEmployee();
  },
  methods: {
    getEmployee() {
      this.apipost(
        "app_get_company_employee",
        this.employeeMsg,
        res => {
          if (res.data.resultCode == 1) {
            this.employeeList = res.data.data;
          }
        },
        err => {}
      );
    },
    getCompanyList() {
				let userInfo = this.getLocalStorage();
				let RB_Group_id = userInfo.RB_Group_id;
				let msg = {
					Status: 0,
					is_show: 0,
					RB_Group_Id: RB_Group_id
				}
				this.apipost('admin_get_BranchGetList', msg, res => {
					if(res.data.resultCode == 1) {
							this.companyList=res.data.data;
					}
				}, err => {})
			},
    //   退款操作
    RefundPay(item) {
      let orderObj = {
        OrderID: item.Id, //订单号
        OrderSource: 12, //12
        Obj: {},
        SourceID: item.AirTicketId, //机票id
        TCIDList: []
      };
      this.$router.push({
        name: "ChoiceAddFinancialDocuments",
        query: {
          Type: 2,
          companyID: item.RB_Branch_Id, //公司id
          path: "",
          blank: "y",
          orderObj: JSON.stringify(orderObj)
        }
      });
    },
    goUrl: function(name, path, id) {
      this.$router.push({
        name: path,
        query: { id: id, blank: "y", tab: name }
      });
    },
    handleCurrentChange(val) {
      this.msg.pageIndex = val;
      this.getList();
    },
    resetPageIndex() {
      this.msg.pageIndex = 1;
      this.currentPage = 1;
    },
    getList() {
      if(!this.msg.startDate){
        this.msg.startDate="";
      }
      if(!this.msg.endDate){
        this.msg.endDate="";
      }
      this.loading = true;
      this.apiJavaPost("/api/erp/dining/getDiningOrder", this.msg, res => {
        this.loading = false;
        if (res.data.resultCode === 1) {
            this.total = res.data.data.count;
            this.dataList = res.data.data.pageData;
        } else {
          this.Error(res.data.message)
        }
      }, null);
    },
    // 结束日期不能大于开始日期
    dataDui() {
      if (this.msg.startDate > this.msg.endDate && this.msg.endDate !== "") {
        this.$message.error(this.$t('tips.jsrqbndyksriqi'));
        this.msg.endDate = "";
      }
    }
  },
  mounted() {
    if(this.$route.query.teamTCID){
      this.msg.searchKey=this.$route.query.teamTCID;
    }
    this.getList();
    
  }
};
</script>
<style scoped>
@import "../../assets/css/newTravelManager.css";
.tickets_green {
  color: #008000;
  text-decoration: underline;
  margin-right: 6px;
}
.title_tr th {
  /* width: 9%; */
}
.color_red_order {
  color: #e95252 !important;
}

.groupTourOrderSearch {
  width: 100%;
  min-height: auto;
  padding: 0 0 20px 0;
}

.groupTourOrderSearch li {
  float: left;
  font-size: 12px;
  color: #666;
  margin: 20px 0 0px 0;
}

.groupTourOrderSearch li > span {
  display: inline-block;
}

.groupTourOrderSearch li span > em {
  display: inline-block;
  min-width: 60px;
  text-align: right;
  font-style: normal;
  margin: 0 12px 0 0;
}

.groupTourOrderSearch li:last-child {
  position: fixed;
  z-index: 10;
  top: 36px;
  right: 20px;
}

.groupTourOrderSearch ul {
  overflow: hidden;
}

.groupTourOrderSearchTable {
  width: 100%;
  min-width: 1500px;
  font-size: 14px;
  color: #333;
  border-bottom: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
  /* border-collapse: collapse; */
}

.groupTourOrderSearchTable tr th {
  background: #e6e6e6;
  height: 30px;
  font-size: 12px;
  text-align: left;
  text-indent: 15px;
  border-top: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
}

.groupTourOrderSearchTable tr {
  background: #fff;
  text-align: left;
}

.groupTourOrderSearchTable tr td {
  padding: 8px;
  border-top: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
}

.groupTourOrderSearchTable tr td p {
  line-height: 20px;
}

.groupTourOrderSearchTable .dowloadSpan:hover {
  text-decoration: underline;
  cursor: pointer;
}

.groupTourOrderSearchTable span.personNo {
  text-decoration: underline;
  cursor: pointer;
}

.groupTourOrderSearchTable span.personNo:hover {
  font-weight: bold;
  color: #e95252;
}

.personNolayer p {
  height: 28px;
  line-height: 28px;
  padding-left: 15px;
}

.personNolayer p > span {
  font-size: 12px;
  color: #333;
  margin-right: 15px;
}

.personNolayer table {
  padding: 10px 0 0 20px;
  width: 100%;
  background-color: #ededed;
  border-collapse: collapse;
  border: 1px solid #d2d2d2;
  font-size: 12px;
}

.personNolayer table th {
  background-color: #ededed;
  height: 34px;
  text-indent: 15px;
}

.personNolayer table td {
  background-color: #ffffff;
  padding: 9px 15px;
  color: #333333;
  border: 1px solid #d2d2d2;
}

.personNolayer table ._color_666 {
  color: #666666;
}

.personNolayer table tr._color_666 th {
  padding: 9px 15px;
}

.groupSuperSearchLayer {
}

.groupSuperSearchLayer > p {
  padding: 20px 0;
  font-size: 14px;
  color: #333;
  font-weight: bold;
}

.groupSuperSearchLayerTable {
  font-size: 12px;
  color: #666;
}

.groupSuperSearchLayerTable tr {
  height: 50px;
}

.groupSuperSearchLayerTable td {
  padding-right: 15px;
}

.groupTourOrderIcon button {
  width: 30px;
  height: 30px;
  border-radius: 4px;
}

.groupTourOrderIcon .el-button--primary {
  padding: 5px;
  margin: 0;
  font-size: 14px !important;
}

.groupTourOrderIcon .el-button + .el-button {
  margin-left: 0 !important;
}

.productQuerybottomLayer {
  overflow: auto;
  position: fixed;
  /* max-height: 300px; */
  z-index: 50;
  bottom: 0;
  left: 0;
  border-top: 3px solid #38425d;
  background-color: #ffffff;
  padding: 10px 10px 0;
  width: 100%;
}

.productQuerybottomLayer .el-form-item__label {
  font-size: 12px !important;
}

.productQuerybottomLayer > p {
  border-left: 3px solid #e95252;
  text-indent: 15px;
  height: 16px;
  font-family: "PingFangSc-Fine";
  font-size: 16px;
  margin-bottom: 20px;
  line-height: 14px;
  color: #000;
}

.productQuerybottomLayer .el-input-number {
  width: auto !important;
}

.groupTourOrder_count_green {
  color: #1bc594;
}

.groupTourOrder_count_blue {
  color: #4d7afd;
}

.groupTourOrder_count_yellow {
  color: #ff9c00;
}

.groupTourOrder_count_gray {
  color: #999999;
}

.groupTourOrder_count {
  margin: 0 0 20px 0;
  width: 100%;
  height: auto;
}

.groupTourOrder_count_col {
  height: 80px;
}

.groupTourOrder_count_item {
  font-weight: 400;
  padding: 10px;
  height: 100%;
  border: 1px solid #e6e6e6;
  background-color: #ffffff;
  color: #333333;
}

.groupTourOrder_count_item > div > i {
  font-size: 12px;
  vertical-align: bottom;
}

.groupTourOrder_count_item > div > span:nth-child(2) {
  font-size: 14px;
  vertical-align: bottom;
}

.groupTourOrder_count_item > div > span:nth-child(3) {
  font-weight: bold;
  font-size: 16px;
  vertical-align: bottom;
}

.groupTourOrder_count_item > p {
  font-size: 12px;
  line-height: 18px;
}

.groupTourOrder_count_item > p > span {
  margin: 0 5px 0 0;
  white-space: nowrap;
}

.groupTourOrder_more {
  margin: 0 -12px;
}

.groupTourOrder_more > div {
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 12px;
  color: #333333;
  background-color: #ffffff;
  cursor: pointer;
}

.groupTourOrder_more > div:hover {
  color: #297bef;
  background-color: #dcebff;
}

.groupTourOrder_remarks {
  font-size: 0px;
}

.groupTourOrder_remarks > div {
}

.groupTourOrder_remarks > div > div:nth-child(1) {
  float: left;
  display: flex;
  align-items: flex-start;
}

.groupTourOrder_remarks > div > div:nth-child(1) > span {
  line-height: 20px;
  font-size: 12px;
  color: #e95252;
  white-space: nowrap;
}

.groupTourOrder_remarks > div > div:nth-child(1) > p {
  line-height: 20px;
  font-size: 12px;
  color: #e95252;
}

.groupTourOrder_remarks > div > div:nth-child(2) {
  float: right;
  text-align: right;
  font-size: 12px;
  color: #e95252;
}

.groupTourOrder_remarks > div > div:nth-child(2) > i {
  font-size: 10px;
  cursor: pointer;
}

.groupTourOrder_remarks > div::after {
  display: block;
  clear: both;
  content: "";
  visibility: hidden;
  height: 0;
}

.groupTourOrder_remarks_btn {
  padding: 0px;
  width: 12px;
  height: 12px;
  border: none;
  background-color: transparent;
}

.groupTourOrder_remarks_btn > i {
  color: #e95252;
  font-size: 12px;
}

.groupTourOrder_remarks_popover > div {
  display: inline-block;
  font-size: 14px;
  color: #000000;
}

.groupTourOrder_remarks_popover > div::before {
  content: "";
  display: inline-block;
  margin: 0 5px 0 0;
  width: 2px;
  height: 12px;
  background-color: #e95252;
}

.groupTourOrder_remarks_popover > span {
  display: block;
  margin: 0 0 0 0;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #000000;
}

.groupTourOrder_remarks_popover > p {
  margin: 5px 0 0 0;
  padding: 3px;
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  font-size: 12px;
  color: #000000;
}

.groupTourOrder_remarks_popover > p:nth-child(even) {
  background-color: #e6e6e6;
}

.groupTourOrder_remarks_popover > p > span:nth-child(1) {
  float: left;
}

.groupTourOrder_remarks_popover > p > span:nth-child(2) {
  margin: 0 10px 0 0;
  float: right;
}

.groupTourOrder_remarks_popover > p::after {
  display: block;
  clear: both;
  content: "";
  visibility: hidden;
  height: 0;
}

.groupTourOrder_tickets > div {
  display: table;
}

.groupTourOrder_tickets > div > div {
  display: table-cell;
  cursor: pointer;
}

.groupTourOrder_tickets > div > div:nth-child(1) {
  width: 80px;
}

.groupTourOrder_tickets > div > div > span {
  display: inline-block;
  margin: 0 10px 0 0;
}

.groupTourOrder_tickets_red {
  color: #ff0000;
  text-decoration: underline;
}

.groupTourOrder_tickets_blue {
  color: #0000ff;
  text-decoration: underline;
}

.groupTourOrder_tickets_green {
  color: #008000;
  text-decoration: underline;
}

.groupTourOrder_tickets_black {
  color: #000000;
  text-decoration: underline;
}

.groupTourOrderByTuan_ico {
  margin: 0 10px 0 0;
}

.groupTourOrderByTuan_ico > i {
  display: inline-block;
  margin: 0 2px 0 0;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  vertical-align: middle;
}

.groupTourOrderByTuan_ico > span {
  vertical-align: middle;
}

/* 出团通知书打印选择 */
.travelControlTripLayer {
  position: fixed;
  z-index: 99;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  left: 0;
  top: 0;
}

.travelControlTripLayerCont {
  position: absolute;
  left: 50%;
  margin-left: -300px;
  background: #fff;
  top: 50%;
  margin-top: -180px;
  width: 600px;
}

.travelControlTripLayerCont > div {
  padding: 0 30px;
}

.travelControlTripLayerCont > div label {
  cursor: pointer;
  vertical-align: middle;
}

.travelControlTripLayerCont > div label input {
  vertical-align: middle;
}

.travelControlTripBtn {
  color: #fff;
  width: 90px;
  height: 30px;
  background: #e95252;
  border: 1px solid #e95252;
  cursor: pointer;
  border-radius: 15px;
  margin-left: 10px;
}

.travelControlTripLayer input[type="checkbox"] + label::before {
  content: "\A0";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  border-radius: 4px;
  background-color: white;
  text-indent: 0.15em;
  line-height: 15px;
  color: white;
  border: 1px solid #e95252;
}

.travelControlTripLayer input[type="checkbox"]:checked + label::before {
  content: "\2713";
  background-color: #e95252;
}

.travelControlTripLayer input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

.travelControlTripLayer input[type="checkbox"]:focus + label::before {
  box-shadow: none;
}

.travelControlTripLayer input[type="checkbox"]:disabled + label::before {
  background-color: gray;
  box-shadow: none;
  color: #555;
}

.groupTourOrder_transfer {
  position: fixed;
  z-index: 50;
  bottom: 0;
  left: 50px;
  padding: 10px 10px;
  width: 100%;
  min-width: 1366px;
  min-height: 200px;
  border-top: 3px solid #38425d;
  background-color: #ffffff;
  overflow-y: auto;
}

.groupTourOrder_transfer > .transfer_header {
  position: relative;
  width: 100%;
  height: 30px;
}

.groupTourOrder_transfer > .transfer_header > div:nth-child(1) {
  display: inline-block;
  padding: 0 10px;
  width: 200px;
  height: 30px;
  line-height: 30px;
  border-left: 3px solid #e95252;
  text-indent: 10px;
  font-size: 16px;
  color: #000000;
}

.groupTourOrder_transfer > .transfer_header > div:nth-child(2) {
  position: absolute;
  top: 0px;
  right: 80px;
  height: 30px;
}

.groupTourOrder_transfer
  > .transfer_header
  > div:nth-child(2)
  > div:nth-child(1) {
  display: inline-block;
  padding: 0 15px;
  height: 30px;
  line-height: 28px;
  font-size: 14px;
  color: #e95252;
  border: 1px solid #e95252;
  background: #fff;
  border-radius: 15px;
  cursor: pointer;
  vertical-align: top;
}

.groupTourOrder_transfer
  > .transfer_header
  > div:nth-child(2)
  > div:nth-child(2) {
  display: inline-block;
  margin: 0 0 0 10px;
  padding: 0 15px;
  height: 30px;
  line-height: 28px;
  font-size: 14px;
  color: #fff;
  border: 1px solid #e95252;
  background: #e95252;
  border-radius: 15px;
  cursor: pointer;
  vertical-align: top;
}

.groupTourOrder_transfer > .transfer_info {
  padding: 20px 0;
  width: 100%;
  font-size: 0px;
  border-bottom: 1px dashed #999999;
}

.groupTourOrder_transfer > .transfer_info > div {
  display: inline-block;
  padding: 0 10px;
  width: 25%;
  height: 30px;
  vertical-align: top;
}

.groupTourOrder_transfer > .transfer_info > div > em {
  display: inline-block;
  padding: 0 10px;
  width: 35%;
  height: 30px;
  line-height: 30px;
  text-align: right;
  font-size: 16px;
  vertical-align: top;
}

.groupTourOrder_transfer > .transfer_info > div > span {
  display: inline-block;
  padding: 0 10px;
  width: 65%;
  height: 30px;
  line-height: 30px;
  text-align: left;
  font-size: 16px;
  border-radius: 3px;
  background-color: #e5e5e5;
  vertical-align: top;
}

.groupTourOrder_transfer > .transfer_input {
  padding: 20px 0;
  width: 100%;
  font-size: 0px;
}

.groupTourOrder_transfer > .transfer_input > div {
  display: inline-block;
  padding: 0 10px;
  width: 25%;
  height: 30px;
  vertical-align: top;
}

.groupTourOrder_transfer > .transfer_input > div > em {
  display: inline-block;
  padding: 0 10px;
  width: 35%;
  height: 30px;
  line-height: 30px;
  text-align: right;
  font-size: 16px;
  vertical-align: top;
}

.groupTourOrder_transfer > .transfer_input > div > .el-input {
  display: inline-block;
  width: 65%;
  height: 30px;
  line-height: 30px;
  text-align: left;
  font-size: 14px;
  vertical-align: top;
}
</style>