<template>
  <!-- 稳定币大额交易监控 -->
 <div v-loading="USDTMonitoringLoading"> 

    <el-row v-loading="chartLoading">
      <el-col :span="24" style="position: relative;">   
        <span style="font-size: 12px;color: rgba(0, 0, 0, 0.6);position: absolute;left: 160px;">{{ $t(`home.figure`) }}</span>   
        <div
          id="USDTMonitoringBox"
          style="width: 100%; min-height: 700px"
        ></div>
      </el-col>
    </el-row>

      <!-- -----------------大额交易监控表格---------------- -->
    <div v-loading="tabelloading" id="tebelBox" ref="tabelBox">
      <div class="searchResults">{{$t(`menu.USDTETH`)}}</div>
      <!-- 大额交易表格 -->
      <el-row type="flex"    justify="center">
        <el-col :span="22">
          <div class="tableAnnotation">{{$t(`home.table`)}}</div>
           <span class="copyStyle">{{ $t(`home.copyTabel`) }}</span>    
          <el-table
            :data="tableData"
            border
            style="width: 100%; font-size: 12px"
            height="400"
            :header-cell-style="{ 'text-align': 'center' }"      
              @cell-dblclick="cellDblclick"       
          >
            <el-table-column
              type="index"
              :label="$t(`home.serialNumber`)"
              width="70px"
            ></el-table-column>
            <!-- 处理时间格式 -->
            <el-table-column prop="date" :label="$t(`home.date`)">
              <template slot-scope="scope">
                {{ formatTime(scope.row.date) }}
              </template>
            </el-table-column>
            <el-table-column prop="amount"  :formatter="stateFormat" :label="$t(`home.number`)"> </el-table-column>
            <el-table-column prop="fromAddress" :label="$t(`home.toAddress`)"  :show-overflow-tooltip="true" >
            </el-table-column>
             <el-table-column
              prop="fromTag"
              :show-overflow-tooltip="true"
              :label="$t(`home.fromTag`)"
            >
            </el-table-column>
            <el-table-column prop="toAddress" :label="$t(`home.outAddress`)"  :show-overflow-tooltip="true" >
            </el-table-column>
              <el-table-column
              prop="toTag"
              :show-overflow-tooltip="true"
              :label="$t(`home.toTag`)"
            >
            </el-table-column>
            <el-table-column prop="height" :label="$t(`home.height`)" width="120px"  :formatter="stateFormat2" :show-overflow-tooltip="true" >
            </el-table-column>
            <el-table-column prop="txId" :label="$t(`home.hash`)"  :show-overflow-tooltip="true" > </el-table-column>
          </el-table>

        </el-col>
      </el-row>
        <!-- 分页 -->
      <el-row type="flex" justify="center">
        <el-col :span="10" class="page" >
          <el-pagination
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :current-page="currentPage4"
            :page-sizes="[50, 100, 200, 300]"
            :page-count="totalPage"
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </el-col>
      </el-row>

    </div>

       <!-- -----------------大额交易监控表格---------------- -->
    <div v-loading="tronTabelloading" id="tebelBox" ref="tabelBox">
      <div class="searchResults">{{$t(`menu2.tronUSDTBigTx`)}}</div>
      <!-- 大额交易表格 -->
      <el-row type="flex" justify="center">
        <el-col :span="22">
           <div class="tableAnnotation2">{{$t(`home.table2`)}}</div>
            <span class="copyStyle">{{ $t(`home.copyTabel`) }}</span>    
          <el-table
            :data="tronTableData"
            border
            style="width: 100%; font-size: 12px"
            height="400"
            :header-cell-style="{ 'text-align': 'center' }"   
              @cell-dblclick="cellDblclick"          
          >
            <el-table-column
              type="index"
              :label="$t(`home.serialNumber`)"
              width="70px"
            ></el-table-column>
            <!-- 处理时间格式 -->
            <el-table-column prop="date" :label="$t(`home.date`)">
              <template slot-scope="scope">
                {{ formatTime(scope.row.date) }}
              </template>
            </el-table-column>
            <el-table-column prop="amount"  :formatter="stateFormat" :label="$t(`home.number`)"> </el-table-column>
            <el-table-column prop="fromAddress" :label="$t(`home.toAddress`)"  :show-overflow-tooltip="true" >
            </el-table-column>
             <el-table-column
              prop="fromTag"
              :show-overflow-tooltip="true"
              :label="$t(`home.fromTag`)"
            >
            </el-table-column>
            <el-table-column prop="toAddress" :label="$t(`home.outAddress`)"  :show-overflow-tooltip="true" >
            </el-table-column>
              <el-table-column
              prop="toTag"
              :show-overflow-tooltip="true"
              :label="$t(`home.toTag`)"
            >
            </el-table-column>
            <el-table-column prop="height" :label="$t(`home.height`)" width="100px"  :formatter="stateFormat" :show-overflow-tooltip="true" >
            </el-table-column>
            <el-table-column prop="txId" :label="$t(`home.hash`)"  :show-overflow-tooltip="true" > </el-table-column>
          </el-table>

        </el-col>
      </el-row>
        <!-- 分页 -->
      <el-row type="flex" justify="center">
        <el-col :span="10" class="page" >
          <el-pagination
            @current-change="handleCurrentChangeTron"
            @size-change="handleSizeChangTron"
            :current-page="tronCurrentPage4"
            :page-sizes="[50, 100, 200, 300]"
            :page-count="tronTotalPage"
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </el-col>
      </el-row>

    </div>

  </div>
</template>

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

<style lang="scss" scope>
#tebelBox{
  // outline: 1px solid red;
  margin-top: 50px;
}
  .searchResults{
    text-align: center;
  }
  .page{
    margin-top: 10px;
  }
   .tableAnnotation{
  color: rgba(0, 0, 0, 0.6);
  padding: 2px 0px;
  font-size: 13px;
}
  .tableAnnotation2{
  color: rgba(0, 0, 0, 0.6);
  padding: 2px 0px;
  font-size: 13px;
}
.copyStyle {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.3);
}
</style>