<style>
    .SalesHotelOrder .SalesHotelOrderTable{
        width: 100%;
        min-width: 1500px;
        font-size: 14px;
        color: #333;
        border-bottom: 1px solid #cccccc;
        border-right: 1px solid #cccccc;
        border-collapse: collapse;
    }
    .SalesHotelOrder .SalesHotelOrderTable th{
        background: #e6e6e6;
        height: 30px;
        font-size: 12px;
        text-align: center;
        border-top: 1px solid #cccccc;
        border-left: 1px solid #cccccc;
    }
    .SalesHotelOrder .SalesHotelOrderTable tr td{
        height: 60px;
        padding: 10px;
        background-color: #fff;
        text-align: center;
        border-top: 1px solid #cccccc;
        border-left: 1px solid #cccccc;
    }
    .SalesHotelOrder .SalesHotelOrderTable tbody tr:last-child{
        border-bottom:2px solid #333;
    }
    .SalesHotelOrder .SH_beizhu{
        float:left;
    }
    .SalesHotelOrder .SH_beizhuInner{
        float:left;
        width:85%;
    }
    .SalesHotelOrder .SH_OrderDan>div{
        display:inline-block;
    }
</style>

<template>
    <div class="flexOne SalesHotelOrder">
    <div class="query-box">
      <ul>
        <li>
          <span><em>{{$t('salesModule.HotelOrderNum')}}</em>
            <el-input v-model='msg.ThirdOrderNo' :placeholder="$t('pub.pleaseImport')"></el-input>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('salesModule.StartJoin')}}</em>
            <el-date-picker class="w150" type="date" v-model="msg.StartTime"
            :picker-options="pickerBeginDateBefore" value-format="yyyy-MM-dd" placeholder></el-date-picker>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('salesModule.EndJoin')}}</em>
            <el-date-picker class="w150" type="date" v-model="msg.EndTime"
            :picker-options="pickerBeginDateAfter" value-format="yyyy-MM-dd" placeholder></el-date-picker>
           </span>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" @click="resetPageIndex();getList()" :value="$t('pub.searchBtn')" />
        </li>
      </ul>
    </div>
    <table class="SalesHotelOrderTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
      <tr>
        <th>{{$t('hotel.order_Number')}}订单号</th>
        <th>{{$t('visa.v_tuanhao')}}</th>
        <th>{{$t('fnc.khxinxi')}}</th>
        <th>{{$t('hotel.hotel_roomnumber')}}</th>
        <th>{{$t('salesModule.TotalPrice')}}</th>
        <th>{{$t('salesModule.TotalIncome')}}</th>
        <th>{{$t('salesModule.DKJE')}}</th>
        <th>{{$t('sm.youhuijine')}}</th>
        <th>{{$t('Operation.Op_daishou')}}</th>
        <th>{{$t('hotel.hotel_OrderStates')}}</th>
        <th>{{$t('fnc.cjshijian')}}</th>
        <th>{{$t('hotel.table_CheckInDate')}}</th>
        <th>{{$t('salesModule.LeaveTime')}}</th>
        <th>{{$t('salesModule.CancelFee')}}</th>
        <th>{{$t('system.table_operation')}}</th>
      </tr>
      <tbody v-for="(item,index) in dataList">
        <tr>
            <td style="border-bottom:2px solid #333" rowspan="2">{{item.ThirdOrderNo}}</td>
           <td><span class="cursorpointer text-decoration" @click="GotoUrl(item.TCNUM)" v-if="item.TCID">{{item.TCNUM}}({{item.TCID}})</span></td>
            <td>
                <div>{{item.CustomerName}}</div>
                <div>{{item.CustomerPhone}}</div>
            </td>
            <td>{{item.Number}}</td>
            <td>{{item.TotalPrice}}</td>
            <td>{{item.Income}}</td>
            <td>{{item.RedEnvelopeMoney}}</td>
            <td>{{item.DiscountMoney}}</td>
            <td>{{item.DueinMoney}}</td>
            <td>{{item.OrderStatus}}</td>
            <td>{{item.CreateDateStr}}</td>
            <td>{{item.CheckInStr}}</td>
            <td>{{item.CheckOutStr}}</td>
            <td>{{item.CancelFee}}</td>
             <td>
                <el-row>
                  <el-button-group>
                    <el-tooltip class="item" effect="dark" :content="$t('salesModule.SFK')" placement="top-start">
                      <el-button type="primary" icon="iconfont icon-fukuan2" @click="getShouKuan(item)" ></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" :content="$t('sm.exitOrder')" placement="top-start">
                      <el-button type="info" v-if="item.IsCanOrder"  icon="iconfont icon-quxiao1" @click="cancelHTorder(item.ThirdOrderNo)"></el-button>
                    </el-tooltip> 
                    <el-tooltip class="item" effect="dark" :content="$t('pub.sureBtn')" placement="top-start">
                      <el-button  type="success" icon="iconfont icon-duigou" v-if="item.IsCanClear == 0" @click="queren(1, item.OrderID)" ></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" :content="$t('sm.exitsure')" placement="top-start">
                      <el-button type="info" icon=" iconfont icon-quxiao1" v-if="item.IsCanClear == 1" @click="queren(0, item.OrderID)"></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" :content="$t('salesModule.UnionTeam')" placement="top-start">
                      <el-button type="warning" icon="iconfont icon-guanlian" @click="TCID = '',GLOrderID = item.OrderID,dialogFormVisible = true"></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" :content="$t('fnc.xiangqing')" placement="top-start">
                      <el-button type="success" icon="iconfont icon-sousuo" @click="goOrderDetails(item.OrderID)"></el-button>
                    </el-tooltip>
                  </el-button-group>
                </el-row>
            </td>
        </tr>
        <tr>
            <td colspan="7" style="text-align:left;width:600px">
                <div class="clearfix">
                    <div class="SH_beizhu" style="">
                        {{$t('pub.pubRemark')}}：
                    </div>
                    <div class="SH_beizhuInner">
                        {{item.Remark}}
                    </div>
                </div>
            </td>
            <td colspan="7" style="text-align:left;width:600px">
                <div class="SH_OrderDan">
                    <div>{{$t('fnc.skdanju')}}：</div>
                    <div>
                        <span v-for="subItem in item.FinanceList">
                            {{subItem.FrID}}
                        </span>
                        <span v-if="item.FinanceList.length < 1">{{$t('system.content_noData')}}</span>
                    </div>
                </div>
                <div  class="SH_OrderDan">
                    <div>{{$t('fnc.fkdanju')}}：</div>
                    <div>
                        <span v-for="subItem in item.RefundFinanceList">
                            {{subItem.FrID}}
                        </span>
                        <span v-if="item.RefundFinanceList.length < 1">{{$t('system.content_noData')}}</span>
                    </div>
                </div>

            </td>
           
        </tr>
      </tbody>
    </table>
    <el-dialog title="请选择团号" width="400px" :visible.sync="dialogFormVisible" center :before-close="closeChangeMachie">
      <el-form label-width="110px">
          <el-form-item :label="$t('visa.v_tuanhao')">
              <el-select
                  v-model="TCID"
                  filterable
                  remote
                  reserve-keyword
                  :placeholder="$t('pub.pleaseImport')"
                  :remote-method="remoteMethodTCNum"
                  :loading="loading2">
                  <el-option
                      v-for="item in searchList"
                      :key="item.TCID"
                      :label="item.TCNUM"
                      :value="item.TCID">
                      <span style="float: left">{{ item.TCNUM }}</span>
                  </el-option>
              </el-select>
            </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <button class="hollowFixedBtn" @click="dialogFormVisible=false,GLOrderID = ''">{{$t('pub.cancelBtn')}}</button>
          <button class="normalBtn" type="primary" @click="querenGL">{{$t('pub.sureBtn')}}</button>
      </div>
    </el-dialog>
    <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>
export default {
  data() {
    return {
      msg: {
          pageIndex:1,
          pageSize:10,
          Source:-1,
          ThirdOrderNo:'',
          StartTime:'',
          EndTime:'',
          GetOrderType:0
      },
      searchList: [],
      loading2: false,
      total:0,
      currentPage: 1,
      loading:false,
      pickerBeginDateBefore: {
        disabledDate: time => {
            if (this.msg.EndTime == null) {
                return false;
            } else {
                let endTime = new Date(this.msg.EndTime)
                return endTime.getTime() < time.getTime()
            }
        }
      },
      pickerBeginDateAfter: {
        disabledDate: time => {
            let startTime = new Date(this.msg.StartTime)
            return startTime.getTime() >= time.getTime()
        }
      },
      dataList: [],
      dialogFormVisible: false,
      TCID: '',
      GLOrderID: '',
    };
  },
  methods: {
    GotoUrl(TCNUM) {
      this.$router.push({
        path: "TravelControlList",
        query: {
          tcmun: TCNUM,
          blank: 'y',
          tab: "团控查询",
        }
      });
    },
    closeChangeMachie(done) {  //  弹=窗口关闭
      done();
    },
    goOrderDetails(ID){
      this.$router.push({
        name: 'OpHotelOrderDetail',
        query: {
          ID: ID,
          blank:'y',
        }
      })
    },
    remoteMethodTCNum(query) {
      if (query !== ''||this.addShow) {
        this.loading2 = true;
        this.apipost("InvoiceApply_get_GetPriceList",{ TCNUM:query },res => {
          if (res.data.resultCode == 1) {
            this.searchList = res.data.data;
            this.loading2 = false;
          }
        },err => {});
      } else {
        this.searchList = [];
        this.loading2 = false; 
      }
    },
    queren(type, OrderID){
      let text = type == 1 ? '确认后，订单不会自动取消' : '取消后，订单会自动取消'
      this.$confirm(text, this.$t('tips.tips'), {
          confirmButtonText: this.$t('pub.sureBtn'),
          cancelButtonText: this.$t('pub.cancelBtn'),
          type: 'warning'
      }).then(() => {
          this.apipost('dmc_post_get_UpdateOrderCanClear',{OrderID: OrderID, IsCanClear: type},res=>{
              if(res.data.resultCode==1){
                  this.Success(res.data.message);
                  this.getList();
              }else{
                  this.Error(res.data.message);
              }
          },err=>{})
      }).catch(() => {
          this.$message({
              type: 'info',
              message: this.$t('ios.yi') + this.$t('pub.cancelBtn')
          });
      });
    },
     querenGL(){
      this.apipost("dmc_post_get_RelevanceTCID",{ TCID: this.TCID, OrderID: this.GLOrderID },res => {
        if (res.data.resultCode == 1) {
          this.Success(res.data.message);
          this.getList();
          this.dialogFormVisible = false
        }
      },err => {});
    },
    //点击取消操作
   cancelHTorder(ThirdOrderNo){
      let userInfo = this.getLocalStorage();
      let EmployeeId = userInfo.EmployeeId;
      let msg ={
          bookingNumber:ThirdOrderNo,
          CancelBy:EmployeeId,
          CancelType:1
      }
      this.apipost(
      "dmc_post_Get_GetJAPAN_GetJAPAN_ReservationCancallation",
      msg,
      res => {
        if (res.data.resultCode == 1) { 
            this.Success('取消成功');
            this.getList();
        } else {
          this.Error(res.data.message);
        }
      },
      null
    );
   },
    //点击收款
   getShouKuan(obj){
     let TCIDARR = obj.TCID ? [obj.TCID] : [];
      let orderObj = {
        OrderID:obj.OrderID,
        OrderSource:1,
        Obj: {},
        SourceID:null,
        TCIDList: TCIDARR
      }
      this.$router.push({
        name: 'ChoiceAddFinancialDocuments',
        query:{
          "companyID":obj.RB_Branch_id,
          "path": "",
          'blank':'y',
          'orderObj':JSON.stringify(orderObj),
          'tradeWay':1,
          'platformAccount':0
        }
      });
   },
    getList() {
      //获取现有线路列表
      this.loading = true;
      this.apipost(
        "sellorder_post_GetJapanHotelOrderList",
        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 => {}
      );
    },
    handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
    },
    resetPageIndex() {
        this.msg.pageIndex = 1;
        this.currentPage = 1
    },
  },
  mounted() {
    this.getList();
  }
};
</script>