<template>
  <div v-loading="topListLoading" style="min-height:800px">
    <el-row>
      <el-col>
        
        <!-- ------下拉框------------ -->
        <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.searchAddress`)"
              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 type="flex" justify="center">
      <!-- width: 95%;  -->
      <el-col :span="23">
        <h3   v-show="tabelShow ==`true`">{{date}} {{$t(`home.topList`) }}</h3>
        <span class="copyStyle">{{$t(`home.copyTabel`)}}</span>
        <el-table
          class="table"
          v-show="tabelShow==`true`"
          :data="tableData"
          border
          style="font-size: 10px;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="value" :label="$t(`home.number`)" :formatter="stateFormat" :show-overflow-tooltip="true" > </el-table-column>
          <el-table-column prop="address" :label="$t(`home.address`)"  :show-overflow-tooltip="true" > </el-table-column>
          <el-table-column prop="txId" :label="$t(`home.transaction`)"  :show-overflow-tooltip="true" > </el-table-column>
          <el-table-column prop="tag" :label="$t(`home.tag1`)"  :show-overflow-tooltip="true" > </el-table-column>

        </el-table>
        <!-- ----------getTopListWatch页面表格----------------------- -->
        
          <el-table
          class="table"
          v-show="tabelShow==`false`"
          :data="tableData"
          border
          style="font-size: 10px;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="date" :label="$t(`home.date`)"> </el-table-column>
          <el-table-column prop="outHeight" :label="$t(`home.height`)" :formatter="stateFormat" :show-overflow-tooltip="true" > </el-table-column>
          <el-table-column prop="outValue" :label="$t(`home.aCurrency`)" :formatter="stateFormat" :show-overflow-tooltip="true" > </el-table-column>
          <el-table-column prop="address" :label="$t(`home.address`)"  :show-overflow-tooltip="true" > </el-table-column>        
          <el-table-column prop="outTxId" :label="$t(`home.transaction`)"  :show-overflow-tooltip="true" > </el-table-column>
          <el-table-column prop="tag" :label="$t(`home.tag1`)"  :show-overflow-tooltip="true" > </el-table-column>
          <!-- <el-table-column prop="id" label="id"> </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 "./index";
export default {
  mixins: [indexJs],
};
</script>

<style lang="scss" scoped>
.topBox {
  height: 50px;
  width: 99%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: right;
  // outline: 1px solid red;
  // padding: 0px 50px;
}
.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);

}
.copyStyle{
  font-size: 12px;
  color: rgba(0, 0, 0, 0.3);
  // outline: 1px solid red;
}
</style>

<style  lang="scss">
.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>