<template>
  <div v-loading="loading">
 
    <div class="main-title">{{$t('backendSystem.pendingPaymentSummary')}}</div>
    <el-table
      :data="pendingPaymentData"
      border
      style="width: 100%; margin-bottom: 18px"
      :header-cell-style="{ 'text-align': 'left' }"
      :cell-style="{ 'text-align': 'left' }"
      height="60vh"
    >      
      <el-table-column prop="coin" :label="$t('backendSystem.coin2')"   show-overflow-tooltip>
        <template slot-scope="scope" >
          <div style="display: flex; align-items: center;justify-content: left;">
            <img :src="handelImg(scope.row.coin)" style="width: 20px" />
            <span style="margin-left: 5px">{{ handelCoinLabel(scope.row.coin) }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="user" :label="$t('backendSystem.minerUser2')" show-overflow-tooltip/>
      <el-table-column prop="shouldOutDate" :label="$t('backendSystem.AllocateTime')" show-overflow-tooltip >
         <template slot-scope="scope">
          <span>{{ handelTime(scope.row.shouldOutDate ) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="maxHeight" :label="$t('backendSystem.allocateHeight')"  show-overflow-tooltip/>
      <el-table-column prop="startPayAmount" :label="$t('backendSystem.startPayAmount')" show-overflow-tooltip/>
      
      <el-table-column prop="needPayAmount" :label="$t('backendSystem.needPayAmount')"  show-overflow-tooltip>
        <template slot-scope="scope">
          <span :class="{ 'amount-highlight': Number(scope.row.needPayAmount) >= Number(scope.row.startPayAmount) }">
            {{ scope.row.needPayAmount }}
          </span>
        </template>
      </el-table-column>
      
    


    </el-table>

    <el-row>
      <el-col :span="24" style="display: flex; justify-content: center;">
        <el-pagination
    style="margin:0 auto;margin-top: 10px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-sizes="pageSizes"
      :page-size="pendingPaymentParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
      </el-col>
     
    </el-row>
   

  </div>
</template>

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

}
</script>
<style lang="scss" scoped>
.main-title {
  font-size: 24px;
  font-weight: bold;

  color: #333;
  margin-bottom: 18px;
}
.amount-highlight {
  font-weight: 700;
  color: #f56c6c;
}
</style>