<style>
  @import "../css/cssReset.css";

</style>
<template>
  <div class='flexOne'>
    <div class="query-box">
      <ul>
        <li>
                    <span>
                        <em>订单号</em>
                        <el-input type="text" v-model="msg.OrderId" :placeholder="$t('pub.pleaseImport')"></el-input>
					</span>
        </li>
        <li>
                    <span>
                        <em>订单来源</em>
                        <el-select v-model="msg.OrderSource" filterable clearable>
                            <el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
                            <el-option v-for="item in orderList" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
                        </el-select>
					</span>
        </li>
        <li>
                    <span><em>商务订单</em>
                        <el-input type="text" v-model="msg.Pay_Order" :placeholder="$t('pub.pleaseImport')"></el-input>
					</span>
        </li>
        <li>
                    <span><em>平台订单</em>
                        <el-input type="text" v-model="msg.Trade_Order" :placeholder="$t('pub.pleaseImport')"></el-input>
					</span>
        </li>
        <li>
                    <span>
                        <em>支付方式</em>
                        <el-select v-model="msg.Pay_Way" filterable clearable>
                            <el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
                            <el-option label="微信" :value="1"></el-option>
                            <el-option label="QQ" :value="2"></el-option>
                            <el-option label="支付宝" :value="3"></el-option>
                            <el-option label="银联" :value="4"></el-option>
                        </el-select>
                    </span>
        </li>
        <li>
                    <span><em>商户号</em>
                        <el-input type="text" v-model="msg.Mch_Id" :placeholder="$t('pub.pleaseImport')"></el-input>
					</span>
        </li>
        <li>
                    <span>
                        <em>类型</em>
                        <el-select v-model="msg.Type" filterable clearable>
                            <el-option label="收款" :value="1"></el-option>
                            <el-option label="退款" :value="2"></el-option>
                        </el-select>
                    </span>
        </li>
        <li>
                    <span>
                        <em>退款状态</em>
                        <el-select v-model="msg.RefundStatus" filterable clearable>
                            <el-option label="不限" :value="0"></el-option>
                            <el-option label="收款中" :value="1"></el-option>
                            <el-option label="退款成功" :value="2"></el-option>
                            <el-option label="退款失败" :value="3"></el-option>
                            <el-option label="转入代发" :value="4"></el-option>
                        </el-select>
                    </span>
        </li>
        <li>
                    <span>
                        <em>财务单据</em>
                        <el-input type="text" v-model="msg.FinanceId"  @keyup.native="checkInteger(msg,'FinanceId')" :placeholder="$t('pub.pleaseImport')"></el-input>
                    </span>
        </li>
        <li>
                    <span>
                        <em>日期</em>
                        <el-date-picker type="date" v-model="msg.StartTime"
                                        :picker-options="pickerBeginDateBefore" value-format="yyyy-MM-dd" placeholder></el-date-picker>
                        <el-date-picker type="date" v-model="msg.EndTime"
                                        :picker-options="pickerBeginDateAfter" value-format="yyyy-MM-dd" placeholder></el-date-picker>
                    </span>
        </li>
        <li>
                    <span>
                        <em>退款日期</em>
                        <el-date-picker type="date" v-model="msg.RefundStartTime"
                                        :picker-options="pickerBeginDateBefore" value-format="yyyy-MM-dd" placeholder></el-date-picker> -
                        <el-date-picker type="date" v-model="msg.RefundEndTime"
                                        :picker-options="pickerBeginDateAfter" value-format="yyyy-MM-dd" placeholder></el-date-picker>
                    </span>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="handleCurrentChange(),getList()" />
        </li>
      </ul>
    </div>
    <div class="cm_content">
      <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
        <tr>
          <th width="250">平台单号</th>
          <th width="100">金额</th>
          <th>支付方式</th>
          <th>支付日期</th>
          <th>状态</th>
          <th>退款金额</th>
        </tr>
        <tr v-for="item in dataList">
          <td>{{item.Trade_Order}}</td>
          <td>{{item.Money}}</td>
          <td>{{item.PayWayName}}</td>
          <td>{{item.Pay_Date}}</td>
          <td>{{item.PayStatus}}</td>
          <td>{{item.RefundMoney}}</td>
        </tr>
      </table>
      <div class="noDataNotice" v-if="dataList.length<1">
        <i class="iconfont icon-kong"></i>
        <p>{{$t("active.ld_noData")}}</p>
      </div>
    </div>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="msg.currentPage" :page-size="msg.pageSize"
                   layout="total,prev, pager, next, jumper" :total="msg.total"></el-pagination>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        msg:{
          pageIndex:1,
          pageSize:10,
          OrderId:'',
          OrderSource:0,
          Pay_Order:'',
          Trade_Order:'',
          Pay_Way:0,
          Mch_Id:'',
          StartTime:'',
          EndTime:'',
          RefundStartTime:'',
          RefundEndTime:'',
          Type:2,
          RefundStatus:0,
          FinanceId:'',
          currentPage:1,
          total: 0,
        },
        loading:false,
        orderList:[],
        dataList:[],
        pickerBeginDateBefore: {
          disabledDate: time => {
            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()
          }
        }
      }
    },
    methods:{
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      getList(){ //获取列表
        this.loading =true;
        this.apipost('OnlinePay_get_GetOrderPayMoneyInfo',this.msg,res=>{
          this.loading = false;
          if(res.data.resultCode==1){
            this.dataList = res.data.data.pageData;
            this.msg.total = res.data.data.count;
          }else{
            this.Error(res.data.message);
          }
        },err=>{})
      },
      //订单来源
      getOrderlist() {
        this.apipost(
          "order_post_GetOrderSource", {},
          res => {
            if (res.data.resultCode == 1) {
              this.orderList = res.data.data;
            }
          },null);
      },
    },
    mounted(){
      this.getOrderlist();
      this.getList();
    }
  }
</script>


