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

</style>
<template>
  <div class='flexOne page-body'>
    <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()" /> -->
          <q-btn color="primary" size="11px" :label="$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>
