<template>
  <div>
    <el-row v-loading="BuySellDataloading">
      <el-col :span="24" class="box">
        <h3 class="tltle">{{ $t(`bian.details`) }}</h3>
        <el-table
          :data="BuySellData"
          height="600"
          border
          style="width: 100%"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column
            type="index"
            :label="$t(`home.serialNumber`)"
            width="70px"
          ></el-table-column>
          <el-table-column prop="dateTime" :label="$t(`bian.date`)" width="100">
            <template slot-scope="scope">
              {{ formatTime(scope.row.dateTime) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="buyVolume"
            :label="$t(`bian.buy`)"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="sellVolume"
            :label="$t(`bian.sell`)"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="height"
            :label="$t(`bian.block`)"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="price"
            :label="$t(`bian.transaction`)"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="profit"
            :label="$t(`bian.income`)"
            :show-overflow-tooltip="true"
          >
          </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>
export default {
  data() {
    return {
      params: {
        req: "dailyBuySell",
        radius: "btc",
        start: "",
        end: "",
      },
      BuySellData: [],
      show: "",
      BuySellDataloading: false,
      currentPage4: 1,
      totalPage: 0,
      page: 1,
      limit: 50,
    };
  },
  mounted() {
    this.fetchdailyBuySell(
      this.params.req,
      this.params.radius,
      this.params.start,
      this.params.end,
      this.page,
      this.limit
    );

    this.show = localStorage.getItem("currentTabComponent");
    //监听localstorage变化
    window.addEventListener("setItem", () => {
      this.show = localStorage.getItem("currentTabComponent");
    });
  },

  methods: {
    //请求数据
    async fetchdailyBuySell(req, radius, start, end, page, limit) {
      this.BuySellDataloading = true;
      let list = await this.$API.getDailyBuySell(
        req,
        radius,
        start,
        end,
        page,
        limit
      );

      this.BuySellData = list.data.data.data;
      this.totalPage = list.data.data.totalPage;
      this.BuySellData.forEach((item) => {
        item.buyVolume = item.buyVolume.toFixed(2);
        item.sellVolume = item.sellVolume.toFixed(2);
        item.profit = Number(item.profit).toFixed(2);
      });
      this.currentPage4 = page;
      this.BuySellDataloading = false;
    },
    //处理表格里的时间
    formatTime(value) {
      let newTime = value.split(".")[0].replace("T", " ").split(" ")[0];
      return newTime;
    },
    //点击的改变页数
    handleCurrentChange(page) {
      this.page = page;
      this.fetchdailyBuySell(
        this.params.req,
        this.params.radius,
        this.params.start,
        this.params.end,
        this.page,
        this.limit
      );
    },
    //改变每页条数
    handleSizeChange(val) {
      this.page = 1;
       this.limit =val
      this.fetchdailyBuySell(
        this.params.req,
        this.params.radius,
        this.params.start,
        this.params.end,
        this.page,
        this.limit
      );
    },
    //拿到父级时间
    handelSonTime(star, end) {
      this.params.start = star;
      this.params.end = end;
      this.page = 1;
      this.fetchdailyBuySell(
        this.params.req,
        this.params.radius,
        this.params.start,
        this.params.end,
        this.page,
        this.limit
      );
    },
  },
};
</script>

<style scoped>
.tltle {
  display: block;
  width: 100%;
  /* background: gold; */
  text-align: center;
}
</style>