<template>
  <div v-loading="ethTopAddrListLoading">
   
    <!-- ---------------搜索框---------------------- -->
    <el-row>
      <el-col class="listbigBox">
    <!-- ------下拉框------------ -->
    <div class="topBox">
          <div class="searchBox">
            <el-select
              v-model="value"
              @change="handelChang"
              size="small"
              filterable
              clearable
              :placeholder="$t(`home.Range`)"
            >
              <el-option
                v-for="item in valueList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
    <!-- ----------搜索框---------- -->
    <el-input
              v-model="state"
              :placeholder="$t(`home.searchs`)"
              size="small"
              style="width: 80%"
              @keydown.enter.native="handelSearch"
            ></el-input>
            <i class="i isousuo searchButton" @click="handelSearch"></i>
        
          </div>
        </div>
      </el-col>
    </el-row>
  
    <!-- -----------------表格---------------- -->
    <div id="tebelBox" ref="tabelBox">
      <div class="searchResults">{{$t(`home.ethereum`)}}</div>
      <!-- 大额交易表格 -->
      <el-row type="flex" justify="center">
        
        <el-col :span="22">
               <span class="copyStyle">{{ $t(`home.copyTabel`) }}</span>
          <el-table
            :data="tableData"
            border
            style="width: 100%; font-size: 12px;text-transform: none;"
            height="600"
            :header-cell-style="{ 'text-align': 'center' }"
             @cell-dblclick="cellDblclick"
            :cell-style="{ 'text-align': 'center' }"
          >
            <el-table-column
              type="index"
              :label="$t(`home.serialNumber`)"
              width="70px"
            ></el-table-column>

            <el-table-column prop="address" :label="$t(`home.address`)"  :show-overflow-tooltip="true" > </el-table-column>
            <el-table-column prop="balance"  :formatter="stateFormat"    sortable :label="$t(`home.balance`)"  :show-overflow-tooltip="true" > </el-table-column>
            <el-table-column prop="tag" :label="$t(`home.tag`)"  :show-overflow-tooltip="true" >
            </el-table-column>
          </el-table>

          <!-- ------------tabel弹窗--------------------------- -->
          <!-- <div class="dialogBox1" v-show="dialog">
            <div class="close" @click="handelClose">关闭 X</div>
            <iframe class="tabel1" :src="tabelUrl" frameborder="0"></iframe>
          </div>
          <div v-show="dialog" class="mask"></div> -->
        </el-col>
      </el-row>
    </div>
    <!-- 分页 -->
    <el-row type="flex" justify="center">
      <el-col class="Pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :current-page="currentPage4"
          :page-sizes="[50, 100, 200, 300]"
          :page-size="50"
          :page-count="totalPage"
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import indeJs from "./index";
export default {
  mixins: [indeJs],
};
</script>
<style lang="scss" scoped>
#tebelBox {
  /* border: 1px solid red; */
  display: flex;
  flex-flow: column;
  /* padding-left: 100px; */
}
.searchResults {
  text-align: center;
  font-size: 20px;
  line-height: 50px;
  margin-bottom: 20px;
}
.tabelDialog {
  width: 70vw;
  height: 600px;
}
.dialogBox1 {
  position: fixed;
  z-index: 9999;
  top: 20px;
  left: 20%;
  width: 70vw;
  height: 650px;
  padding: 10px;
  background: #ccc;
  padding-top: 30px;
}
.listbigBox{
  padding:0px 50px;
}
.close {
  color: #fff;
  position: absolute;
  top: 5px;
  right: 20px;
  cursor: pointer;
  font-size: 14px;
}
.close:hover {
  color: bisque;
}
.tabel1 {
  width: 100%;
  height: 100%;
}
.mask {
  width: 100vw;
  height: 100vh;
  z-index: 999;
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0px;
  left: 0px;
}
.el-table {
  cursor: pointer;
  color: #000;
}
.vout:hover {
  background: red;
}
.topBox {
  // outline: 1px solid red;
  height: 50px;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: right;
}
.searchBox {
  // background: gold;
  height: 32px;
  width: 390px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  // position: absolute;
  // right: 300px;
  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;
}
.searchBox .searchButton {
  font-size: 20px;
  color: #f7931a;
  transition: 0.3s;
  cursor: pointer;
  margin-right: 10px;
}
.searchBox button:hover {
  background: rgba(0, 0, 0, 0.2);
}
h3 {
  text-align: center;
  color: rgba(0, 0, 0, 0.6);
}
// ----------滚动通知栏-----------------
.roll {
  // background: rgb(216, 165, 24);
  background: rgba(0, 0, 0, 0.2);
  opacity: 0.5;
  height: 26px;
  // padding: 5px 10px;
  padding: 0px 10px;
  color: #000;
  font-size: 13px;
  // outline: 1px solid red;
  overflow: hidden;
  display: flex;
  justify-content: left;
  align-items: center;
}
.txtWrap {
  // background: red;
  // margin-top: 0px;
  margin: 10px 10px;
}
.font {
  color: #f5921a;
}
.marquee_top {
  transition: all 0.6s;
  margin-top: -50px; /* 容器高度 */
}
.txt {
  transition: all 0.6s;
}
.txt1 {
  margin-left: 20px;
}
//滚动通知栏的查看详情
.details {
  color: #f5390e;
  margin-left: 50px;
  cursor: pointer;
}
.details:hover {
  color: darkblue;
}
.dialogBox {
  // outline: 1px solid red;
  padding-top: 5px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.dialogBox p {
  // outline: 1px solid red;
  padding: 2px 0px;
  margin-top: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.dialogBox p:last-child {
  border: none;
}
.dialogBox p > span:nth-of-type(1) {
  display: inline-block;
  width: 100px;
  // outline: 1px solid red;
  text-align: right;
}
.dialogBox p > span:nth-of-type(2) {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  padding-left: 5px;
}
.Pagination{
  display: flex;
  justify-content: center;
}
.copyStyle {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.3);
}
</style>

<style  lang="scss">
.dialogBox .el-dialog {
  width: 75vw !important;
}
.dialogBox.el-dialog__headerbtn {
  top: 0px !important;
}
.el-table tbody td:hover {
  color: #000 !important;
}
.el-table tbody .test {
  color: rgba(0, 0, 0, 0.6);
  text-decoration: underline;
}
.searchBox .el-input__inner {
  border: none !important;
  font-size: 10px !important;
  // background: #f5921a;
  line-height: 0 !important;
  // background: pink;
  height: 32px !important;
  margin: 0 !important;
}
.timeChooseBox .el-input__inner {
  margin-top: 0 !important;
}
.table {
  margin: 30px 0px;
}
</style>