<template>
  <!-- 消费记录页面 -->
  <div class="withdrawalRecords">
    <el-row>
      <el-col :span="24" style="display: flex; align-items: center">
        <h2>{{ $t(`pay.consumption`) }}</h2>
        <i @click="handelRefresh" class="i ishuaxin1 Refresh"></i>
      </el-col>
    </el-row>

    <el-tabs v-model="activeName">
       <!-- 待处理订单 -->
    <el-tab-pane :label="$t(`pay.pendingProcessing`)" name="pending">
      <el-row>
      <el-col>
        <h5>{{ $t(`pay.pendingProcessing`) }}</h5>
        <el-table
          class="table"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          :data="PendingData"
          style="width: 100%"
          max-height="400"
        >
          <el-table-column prop="id" :label="$t(`pay.number`)" >
          </el-table-column>
          <el-table-column
            prop="createTime"
            :label="$t(`pay.date`)"
            width="160"
          >
            <template slot-scope="scope">
              {{ handelTime(scope.row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="amount" :label="$t(`pay.money`)" >
          </el-table-column>
          <el-table-column
            prop="content"
            :label="$t(`pay.consumptionInstructions`)"
          >
          </el-table-column>
          <el-table-column prop="status" :label="$t(`pay.status`)">
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    </el-tab-pane>
     <!-- 成功订单 -->
    <el-tab-pane :label="$t(`pay.successfulOrder`)" name="success">
        
    <el-row>
      <el-col>
        <h5>{{ $t(`pay.successfulOrder`) }}</h5>
        <el-table
          class="table"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          :data="successData"
          style="width: 100%"
          max-height="400"
        >
          <el-table-column prop="id" :label="$t(`pay.number`)" >
          </el-table-column>
          <el-table-column
            prop="createTime"
            :label="$t(`pay.date`)"
            width="160"
          >
            <template slot-scope="scope">
              {{ handelTime(scope.row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="amount" :label="$t(`pay.money`)" >
          </el-table-column>
          <el-table-column
            prop="content"
            :label="$t(`pay.consumptionInstructions`)"
          >
          </el-table-column>
          <el-table-column prop="status" :label="$t(`pay.status`)">
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    
    </el-tab-pane>
      <!-- 失败订单 -->
    <el-tab-pane :label="$t(`pay.withdrawalFailed`)" name="fail">
          
    <el-row>
      <el-col>
        <h5>{{ $t(`pay.withdrawalFailed`) }}</h5>
        <el-table
          class="table"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          :data="failData"
          style="width: 100%"
          max-height="400"
        >
          <el-table-column prop="id" :label="$t(`pay.number`)" >
          </el-table-column>
          <el-table-column
            prop="createTime"
            :label="$t(`pay.date`)"
            width="160"
          >
            <template slot-scope="scope">
              {{ handelTime(scope.row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="amount" :label="$t(`pay.money`)" >
          </el-table-column>
          <el-table-column
            prop="content"
            :label="$t(`pay.consumptionInstructions`)"
          >
          </el-table-column>
          <el-table-column prop="status" :label="$t(`pay.status`)">
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    </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;
}
.withdrawalRecords {
  width: 90%;
  height: 100%;
  //  background: firebrick;
  //  padding: 20px;
  box-sizing: border-box;
  margin: 0 auto;
  padding-top: 50px;
  //  outline: 1px solid red;

  .formBox {
    // outline: 1px solid red;
    width: 100%;
  }
  .dialog-footer {
    margin-top: 100px;
    display: flex;
    justify-content: space-evenly;
    box-sizing: border-box;
    padding: 0px 50px;
    // outline: 1px solid red;
  }

  //  ::v-deep .el-dialog{
  //     height: 300px;
  //   }
  .transferSuccessful {
    ::v-deep .el-dialog {
      height: 220px;
    }
  }
}
.mandatory {
  color: #f86c4d;
}
//邮箱验证码
.authCode {
  .inputBox {
    // outline: 1px solid red;
    width: 35%;
    display: flex;
    button {
      margin-left: 20px;
    }
  }
}

.withdrawalRecords {
  ::v-deep::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
  ::v-deep ::-webkit-scrollbar-track {
    background-color: #fff;
  }

  ::v-deep::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 3px;
  }
  ::v-deep::-webkit-scrollbar-corner {
    background-color: #f1f1f1;
  }
}
</style>
