<template>
  <!-- 充值记录-->
  <div class="payHistories" v-loading="rechargeRecord">
    <!-- 充值记录 -->

    <el-row >
      <el-col :span="24" style="display: flex;align-items: center;">
        <h2>{{ $t(`pay.rechargeRecord`) }}</h2>
        <i @click="handelRefresh"  class="i ishuaxin1 Refresh"></i>
      </el-col>    
    </el-row>

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- 待处理订单  -->
    <el-tab-pane :label="$t(`pay.pendingProcessing`)" name="pending">
      <div style="width: 100%; display: flex; justify-content: right">
          <div class="searchBox">
            <el-input
              :placeholder="$t(`pay.placeholderAddress`)"
              v-model="params.address"
              style="width: 88%"
              @keyup.enter.native="handelSearch(2)"
            >
            </el-input>
            <i class="i isousuo" @click="handelSearch(2)"></i>
          </div>
        </div>

        <!-- 待处理订单 -->
        <el-table
          class="table"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          :data="from2"
          style="width: 100%;text-transform: none;"
          max-height="600"
        >
          <el-table-column prop="id" :label="$t(`pay.number`)" width="80">
          </el-table-column>
          <el-table-column prop="email"  :label="$t(`pay.userEmail`)"> </el-table-column>
          <el-table-column
            prop="createTime"
            :label="$t(`pay.date`)"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ handelTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="userName" :label="$t(`pay.user`)">
          </el-table-column>
          <el-table-column prop="msgPage" :label="$t(`pay.PurchaseService`)" >
          </el-table-column> -->
          <el-table-column
            prop="amount"
            :label="$t(`pay.AmountPaid`)"
            width="100"
          >
          </el-table-column>
          <el-table-column prop="coin" :label="$t(`pay.currency`)" width="90">
          </el-table-column>
          <el-table-column prop="chain" :label="$t(`pay.network`)" width="90">
          </el-table-column>
          <!-- <el-table-column prop="userMsg" :label="$t(`pay.address`)">
          </el-table-column> -->
          <el-table-column prop="address" :label="$t(`pay.CollectionAddress`)">
          </el-table-column>
          <el-table-column prop="txid" :label="$t(`pay.Txid`)">
          </el-table-column>
          <el-table-column prop="status" :label="$t(`pay.PaymentStatus`)">
          </el-table-column>
          <!-- <el-table-column prop="userMsg" :label="$t(`pay.ServiceStatus`)">
          </el-table-column>  -->
        </el-table>
    </el-tab-pane>
      <!-- 成功订单 -->
    <el-tab-pane :label="$t(`pay.successfulOrder`)" name="success">
      <div style="width: 100%; display: flex; justify-content: right">
          <div class="searchBox">
            <el-input
              :placeholder="$t(`pay.placeholderAddress`)"
              v-model="params.address"
              style="width: 88%"
              @keyup.enter.native="handelSearch(1)"
            >
            </el-input>
            <i class="i isousuo" @click="handelSearch(1)"></i>
          </div>
        </div>


      <el-table
          class="table"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          :data="from1"
          style="width: 100%;text-transform: none;"
          max-height="600"
        >
          <el-table-column prop="id" :label="$t(`pay.number`)" width="80">
          </el-table-column>
          <el-table-column prop="email" style="text-transform: none;" :label="$t(`pay.userEmail`)"> </el-table-column>
          <el-table-column
            prop="createTime"
            :label="$t(`pay.date`)"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ handelTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="userName" :label="$t(`pay.user`)">
          </el-table-column>
          <el-table-column prop="msgPage" :label="$t(`pay.PurchaseService`)" >
          </el-table-column> -->
          <el-table-column
            prop="amount"
            :label="$t(`pay.AmountPaid`)"
            width="100"
          >
          </el-table-column>
          <el-table-column prop="coin" :label="$t(`pay.currency`)" width="90">
          </el-table-column>
          <el-table-column prop="chain" :label="$t(`pay.network`)" width="90">
          </el-table-column>
          <!-- <el-table-column prop="userMsg" :label="$t(`pay.address`)">
          </el-table-column> -->
          <el-table-column prop="address" :label="$t(`pay.CollectionAddress`)">
          </el-table-column>
          <el-table-column prop="txid" :label="$t(`pay.Txid`)">
          </el-table-column>
          <el-table-column prop="status" :label="$t(`pay.PaymentStatus`)">
          </el-table-column>
          <!-- <el-table-column prop="userMsg" :label="$t(`pay.ServiceStatus`)">
          </el-table-column>  -->
        </el-table>
    </el-tab-pane>
      <!-- 失败订单 -->
    <el-tab-pane :label="$t(`pay.withdrawalFailed`)" name="fail">
      <div style="width: 100%; display: flex; justify-content: right">
          <div class="searchBox">
            <el-input
              :placeholder="$t(`pay.placeholderAddress`)"
              v-model="params.address"
              style="width: 88%"
              @keyup.enter.native="handelSearch(0)"
            >
            </el-input>
            <i class="i isousuo" @click="handelSearch(0)"></i>
          </div>
        </div>


      <el-table
          class="table"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          :data="from0"
          style="width: 100%;text-transform: none;"
          max-height="600"
          
        >
          <el-table-column prop="id" :label="$t(`pay.number`)" width="80">
          </el-table-column>
          <el-table-column prop="email"  :label="$t(`pay.userEmail`)"> </el-table-column>
          <el-table-column
            prop="createTime"
            :label="$t(`pay.date`)"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ handelTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="userName" :label="$t(`pay.user`)">
          </el-table-column>
          <el-table-column prop="msgPage" :label="$t(`pay.PurchaseService`)" >
          </el-table-column> -->
          <el-table-column
            prop="amount"
            :label="$t(`pay.AmountPaid`)"
            width="100"
          >
          </el-table-column>
          <el-table-column prop="coin" :label="$t(`pay.currency`)" width="90">
          </el-table-column>
          <el-table-column prop="chain" :label="$t(`pay.network`)" width="90">
          </el-table-column>
          <!-- <el-table-column prop="userMsg" :label="$t(`pay.address`)">
          </el-table-column> -->
          <el-table-column prop="address" :label="$t(`pay.CollectionAddress`)">
          </el-table-column>
          <el-table-column prop="txid" :label="$t(`pay.Txid`)">
          </el-table-column>
          <el-table-column prop="status" :label="$t(`pay.PaymentStatus`)">
          </el-table-column>
          <!-- <el-table-column prop="userMsg" :label="$t(`pay.ServiceStatus`)">
          </el-table-column>  -->
        </el-table>
    
    </el-tab-pane>  
  </el-tabs>


  </div>
</template>

<script>
import IndexJs from "./index";
export default {
  mixins: [IndexJs],
};
</script>

<style lang="scss" scoped>
.Refresh{
  // outline: 1px solid red;
  // height: 20px;

  // position: absolute;
  // left: 100px;
  // top: 28px;
  cursor: pointer;
  margin-left: 10px;
  
}
.Refresh:hover{
  color: #f7931a;
}
.payHistories {
  // outline: 1px solid red;
  // background:#fef4e8 ;
  padding: 20px 100px;
  height: 100vh;
  width: 100%;
}
.chart {
  outline: 1px solid rgba(0, 0, 0, 0.5);

  text-align: center;
}
.table {
  // outline: 1px solid red;
  margin-top: 10px;
  outline: 1px solid rgba(0, 0, 0, 0.5);
}
//留言数量
.information {
  //  outline: 1px solid rgba(0,0,0,0.5);
  padding: 5px 10px;
  // outline: 1px solid red;
  width: 100%;
  font-size: 15px;
  display: flex;
  margin-top: 5px;
  font-weight: 600;
  // span{

  //   display: inline-block;
  //   width: 100px;
  //   //  outline: 1px solid red;
  //    text-align: right;

  // }
  span:nth-of-type(1) {
    display: inline-block;
    //  outline: 1px solid red;
    width: 150px;
  }
  .num {
    color: #21a0ff;
    display: inline-block;
    width: 100px;
    text-align: left;
    //  outline: 1px solid red;
    font-weight: 600;
  }
}

.replyDialog {
  // border: 1px solid red;
  width: 60%;
  margin: 0 auto;
}

.searchBox {
  display: flex;
  align-items: center;
  // outline: 1px solid red;
  width: 20%;
  background: #fff;
  .isousuo {
    font-size: 18px;
  }
  .isousuo:hover {
    color: #f7931a;
    cursor: pointer;
  }
}
</style>
<style >
</style>
