<template>
 
 <div class="main" v-loading="mintedBUSDLoading">
   <!-- 对数线性显示切换 -->

    <!-- <el-row class="switch">
      <el-col>
         <el-button @click="handelLineSwitch"
         style="margin-left:100px;height:35px;border-radius:6px;"
         >{{ $t(`home.switch`)
          }}<span class="according"> {{ $t(switch3) }}</span></el-button
        >
      </el-col>
    </el-row> -->

       <!-- 查询Big Deals 搜索框 -->
    <el-row class="searchBusd">
      <el-col class="searchBox">
        <!-- ------下拉框------------ -->
        <el-select
          v-model="search.action"
          @change="handelChang"
          size="small"
          filterable
          placeholder="范围选择查询"
        >
          <el-option
            v-for="item in actionList"
            :key="item.value"
            :label="$t(item.label)"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <!-- ----------搜索框---------- -->
        <el-input
          v-model="search.total"
          placeholder="Search by Address/amount/txid"
          size="small"
          style="width: 80%"
          @keydown.enter.native="handelSearch"
        ></el-input>
        <i class="i isousuo searchButton" @click="handelSearch"></i>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">      
        <div
          id="mintedBUSDBox"
          style="width: 100%; min-height: 700px"
        ></div>
      </el-col>
    </el-row>
    
          <!-- -----------------表格---------------- -->
    <div v-loading="tableLoading" id="tebelBox" ref="tabelBox">
      <!-- <div class="searchResults">{{$t(`menu.large2`)}}</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`)"  width="200" >
            </el-table-column>
            <el-table-column prop="toAddress" :label="$t(`home.outAddress`)"  width="200" >
            </el-table-column>            
            <el-table-column prop="height" :label="$t(`home.height`)"  :formatter="stateFormat2" width="120px"  :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-column prop="action" :label="$t(`home.action`)"  :show-overflow-tooltip="true" > 
              <template slot-scope="scope">
                  {{ handelAction(scope.row.action) }}
              </template>
            </el-table-column>

          </el-table>

        </el-col>
      </el-row>
        <!-- 分页 -->
      <el-row type="flex" justify="center">
        <el-col :span="8" 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>
</template>

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

<style lang="scss" scoped>

  .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);
}
// 搜索框
.searchBusd {
    // outline: 1px solid red; 
    /* height: 50px; */
    display: flex;
    justify-content: right;
    align-items: center;
    padding-right: 90px;
    border: none;
    // position: fixed;    
    // top: 11%;
    // right: 25%;
    // background: #fff;
    z-index: 99;
    padding: 20px 100px;
    width: 100%;
    // background: red;
  }

  .searchBox {
  height: 34px;
  width: 390px;
  border: 1px solid rgba(0, 0, 0, 0.3);
    
  // position: absolute;
  // top: -33px;
  // right: 90px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  // background: #f5921a;
  //  margin-bottom: 10px;
  border-radius: 3px;
  overflow: hidden;
  line-height: 20px;
  padding-right: 5px;
  background: #fff;
 
}
// .searchBox::before {
//   content: "";
//   width: 1px;
//   height: 31px;
//   background: rgba(0, 0, 0, 0.2);
//   // position: absolute;
//   // right: 250px;
//   // top: 0px;
//   z-index: 22;
//   // outline: 1px solid red;

// }
.searchBox .searchButton {
  // padding: 7px 10px;
  // margin-left: 10px;
  // margin-bottom: 7px;
  // border: 1px solid rgba(0, 0, 0, 0.3);

  // border: none;
  font-size: 20px;
  color: #f7931a;
  // border-radius: 2px;
  transition: 0.3s;
  // font-size: 13px;
  cursor: pointer;
}
.searchBox button:hover {
  // border: 1px solid rgba(0, 0, 0, 0.6);
  // outline: 1px solid rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.2);
  
}

</style>