<template>
  <div v-loading="ethTopAddrMonitorListLoading">
    <!-- ---------------搜索框---------------------- -->
    <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>

    <!-- --------------------------------- -->
    <el-row>
      <el-col :span="24">
        <span class="copyStyle">{{ $t(`home.copyTabel`) }}</span>
        <el-table
          :data="tabelData"
          border
          style="width: 100%; font-size: 12px"
          height="600"
          :header-cell-style="{ 'text-align': 'center' }"
          @cell-dblclick="cellDblclick"
          :row-style="{ height: '10' }"
          :cell-style="{ padding: '2px' }"
        >
          <el-table-column
            type="index"
            :label="$t(`home.serialNumber`)"
            width="70px"
          ></el-table-column>
          <!-- 处理时间格式 -->
          <el-table-column prop="date" width="160" :label="$t(`home.date`)">
            <template slot-scope="scope">
              {{ formatTime(scope.row.date) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="amount"
            :formatter="stateFormat"
            sortable
            width="110px"
            :label="$t(`home.number`)"
          >
          </el-table-column>

          <el-table-column
            prop="height"
            :label="$t(`home.height`)"
            :formatter="stateFormat2"
            width="120px"
          >
          </el-table-column>
          <el-table-column prop="fromAddress" :label="$t(`home.toAddress`)">
          </el-table-column>
          <!-- <el-table-column
              prop="fromAbbr"
              :show-overflow-tooltip="true"
              :label="$t(`home.fromAbbr`)"
            >
            </el-table-column> -->
          <el-table-column
            prop="fromTag"
            width="120px"
            :show-overflow-tooltip="true"
            :label="$t(`home.fromTag`)"
          >
          </el-table-column>
          <el-table-column prop="toAddress" :label="$t(`home.outAddress`)">
          </el-table-column>
          <!-- <el-table-column
              prop="toAbbr"
              :show-overflow-tooltip="true"
              :label="$t(`home.toAbbr`)"
            >
            </el-table-column> -->
          <el-table-column
            prop="toTag"
            width="120px"
            :show-overflow-tooltip="true"
            :label="$t(`home.toTag`)"
          >
          </el-table-column>
          <el-table-column prop="txId" :label="$t(`home.hash`)">
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 分页 -->
    <el-row type="flex" justify="center">
      <el-col :span="13">
        <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>
</template>

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

<style lang="scss" scoped>
.copyStyle {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.3);
}
// 搜索框
.listbigBox{
  padding:0px 50px;
}
.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);
}
.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;
}
</style>