<template>
  <div class="main" style="width: 100%">
 
    <!-- 滚动通知栏 -->
    <div class="roll">
    
      <i class="i itongzhi font"></i>
      <ul :class="{ marquee_top: animate }">
        <li>
          <span class="txtWrap">
            <span class="txt"
              >{{ $t(`home.tradingVolume`) }}:{{ notice || 0 }}
            </span>
            <span class="txt1">
              {{ $t(`home.tradingHours`) }}：{{ amountTime || 0 }}</span
            >
            <span class="details" @click="handelDetails">{{
              $t(`home.checkDetails`)
            }}</span>
          </span>
        </li>
      </ul>
    </div>
    <!-- 对数线性显示切换 -->
    <el-row class="switch">
      <el-col>
        <!-- @handelSwitch="handelSwitch"     -->
         <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>

    <!-- ----------通知栏的详情弹窗------------------------- -->
    <el-dialog
      :title="$t(`home.details`)"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <div class="dialogBox">
        <p>
          <span>{{ $t(`home.date`) }}:</span> <span>{{ dialogDate }}</span>
        </p>
        <p>
          <span >{{ $t(`home.number`) }}:</span>
          <span>{{ dialogData.amount }}</span>
        </p>
        <p>
          <span>{{ $t(`home.address`) }}:</span>
          <span>{{
            (dialogData.vout = dialogData.vout
              ? dialogData.vout
              : $t(`home.no`))
          }}</span>
        </p>
        <!-- <p>
          <span>{{ $t(`home.toAddress`) }}:</span>
          <span>{{
            (dialogData.fromAddress = dialogData.fromAddress
              ? dialogData.fromAddress
              : $t(`home.no`))
          }}</span>
        </p> -->
        <p>
          <span>{{ $t(`home.height`) }}:</span>
          <span>{{ dialogData.height }}</span>
        </p>
        <!-- <p>
          <span>{{ $t(`home.outAddress`) }}:</span>
          <span>{{
            (dialogData.toAddress = dialogData.toAddress
              ? dialogData.toAddress
              : $t(`home.no`))
          }}</span>
        </p> -->
        <p>
          <span>{{ $t(`home.transaction`) }}:</span>
          <span>{{ dialogData.txId }}</span>
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
        <el-button type="primary" size="small" @click="dialogVisible = false">{{
          $t(`home.shutDown`)
        }}</el-button>
      </span>
    </el-dialog>
   
    <!-- echarts图 -->    
    <el-row>
      <el-col :span="24">
        <div style="padding-left: 8%;font-size:12px;color:rgba(0,0,0,0.6);margin-top: 10px;">{{ $t(`home.figure`) }}</div>
        <div
          id="bigDealsBox"
          ref="chartBox"
          v-loading="bigloading"
          style="width: 100%; height: 600px;"
        ></div>
      </el-col>
    </el-row>
    <!-- v-show="tableShow" -->

    



    <div v-loading="tabelloading" id="tebelBox" ref="tabelBox">
      <div class="searchResults">{{ $t(`home.bigTable`) }}</div>     

         <!-- 查询Big Deals 搜索框 -->
     <el-row class="search">
      <el-col class="searchBox">
        <!-- ------下拉框------------ -->
        <el-select
          v-model="amountValue"
          @change="handelChang"
          size="small"
          filterable
          :placeholder="$t(`home.Range`)"
        >
          <el-option
            v-for="item in amountList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <!-- ----------搜索框---------- -->
        <el-input
          v-model="state"
          placeholder="Search by Address/amount/txid"
          size="small"
          style="width: 80%"
          @keydown.enter.native="handelSearch"
          @change="handelInput"
        ></el-input>
        <i class="i isousuo searchButton" @click="handelSearch"></i>
      </el-col>
    </el-row>


      <!-- 大额交易表格 -->
      <el-row type="flex" justify="center">
        <el-col :span="22">
          <div class="tableAnnotation">{{ $t(`home.table`) }}  </div>
          <!-- <span class="copyStyle">{{ $t(`home.copyTabel`) }}</span> -->
          <!-- ETH表格 -->
          <el-table
            :data="tableData"
            v-show="!currency"
            @cell-dblclick="cellDblclick"
            border
            style="width: 100%; font-size: 12px"
            height="400"
            :header-cell-style="{ 'text-align': 'center' }"
            @cell-click="handleClickEth"
            :cell-class-name="cellClass"
            :row-style="{ height: '10' }"
            :cell-style="{ padding: '2px' }"
          >
            <el-table-column
              type="index"
              :label="$t(`home.serialNumber`)"
              width="45"
            ></el-table-column>
            <!-- 处理时间格式 -->
            <el-table-column width="150" prop="date" :label="$t(`home.date`)">
              <template slot-scope="scope">
                {{ formatTime(scope.row.date) }}
              </template>
            </el-table-column>
            <el-table-column
              width="100"
              prop="amount"
              :label="$t(`home.number`)"
              :formatter="stateFormat"
            >
            </el-table-column>
            <el-table-column
              prop="fromAddress"
              width="230"
              :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
              width="80"
              prop="sellPrice"
              :label="$t(`home.sellPrice`)"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="fromTag"
              width="120"
              :show-overflow-tooltip="true"
              :label="$t(`home.fromTag`)"
            >
            </el-table-column>
            <el-table-column
              prop="toAddress"
              width="230"
              :label="$t(`home.outAddress`)"
            >
            </el-table-column>
            <!-- <el-table-column
              width="80"
              prop="toAbbr"
              :show-overflow-tooltip="true"
              :label="$t(`home.toAbbr`)"
            >
            </el-table-column> -->
            <!-- <el-table-column
              width="70"
              prop="buyPrice"
              :label="$t(`home.buyPrice`)"
              :show-overflow-tooltip="true"
            >
            </el-table-column> -->
            <!-- <el-table-column
              width="70"
              prop="profit"
              :label="$t(`home.profit`)"
              ::show-overflow-tooltip="true"
            >
            </el-table-column> -->
            <el-table-column
              width="120"
              prop="toTag"
              :show-overflow-tooltip="true"
              :label="$t(`home.toTag`)"
            >
            </el-table-column>
            <el-table-column
              prop="height"
              :label="$t(`home.height`)"
              :formatter="stateFormat2"
              width="110px"
            >
            </el-table-column>
            <el-table-column
              prop="txId"
              :show-overflow-tooltip="true"
              :label="$t(`home.transaction`)"
            >
            </el-table-column>
            <el-table-column
              prop="tag"
              :show-overflow-tooltip="true"
              :label="$t(`home.tag1`)"
            >
            </el-table-column>
          </el-table>
          <!-- BTC表格 -->
          <el-table
            :data="tableData"
            v-show="currency"
            @cell-dblclick="cellDblclick"
            border
            style="width: 100%; font-size: 12px"
            height="400"
            :header-cell-style="{ 'text-align': 'center' }"
            @cell-click="handleClick"
            :cell-class-name="cellClass"
          >
            <el-table-column
              type="index"
              :label="$t(`home.serialNumber`)"
              width="45px"
            ></el-table-column>
            <!-- 处理时间格式 -->
            <el-table-column width="150px" prop="date" :label="$t(`home.date`)">
              <template slot-scope="scope">
                {{ formatTime(scope.row.date) }}
              </template>
            </el-table-column>
            <el-table-column
              width="80px"
              prop="amount"
              :formatter="stateFormat"
              :label="$t(`home.number`)"
            >
            </el-table-column>
            <!-- <el-table-column
              prop="tag"
              :label="$t(`home.markName`)"
            ></el-table-column> -->
            <el-table-column class="vout" prop="vout" :label="$t(`home.vout`)">
            </el-table-column>
            <el-table-column
              width="80px"
              prop="voutn"
              :show-overflow-tooltip="true"
              :label="$t(`home.voutn`)"
            >
            </el-table-column>
            <el-table-column
              width="100px"
              prop="voutType"
              :show-overflow-tooltip="true"
              :label="$t(`home.vouttype`)"
            >
            </el-table-column>
            <el-table-column
              width="100px"
              prop="height"
              :formatter="stateFormat2"
              :show-overflow-tooltip="true"
              :label="$t(`home.height`)"
            >
            </el-table-column>
            <el-table-column
              width="50px"
              prop="days"
              :label="$t(`home.days`)"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <!-- <el-table-column
              prop="buyPrice"
              :label="$t(`home.buyPrice`)"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="sellPrice"
              :label="$t(`home.sellPrice`)"
              :show-overflow-tooltip="true"
            >
            </el-table-column> -->
            <el-table-column
              width="100px"
              prop="profit"
              :label="$t(`home.profit`)"
              ::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"
              :show-overflow-tooltip="true"
              :label="$t(`home.tag1`)"
            >
            </el-table-column>
          </el-table>

          <!-- ------------tabel弹窗--------------------------- -->
          <!-- <div class="dialogBox">
          <el-dialog  :visible.sync="dialogTableVisible"  v-loading="dialogLoading">
            <iframe class="tabelDialog" :src="tabelUrl" frameborder="0"></iframe>
          </el-dialog>
          </div> -->
          <div class="dialogBox1" v-show="dialog">
            <div class="close" @click="handelClose">
              {{ $t(`home.shutDown`) }} 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 :span="10">
        <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 * as echarts from "echarts";

import {
  handelBigDeals,
  handelLineType,
  getcurDate,
  fetchBtcPrice,
  fetchEthPrice,
  handelSmaData,
  getDateArray,
  handelWatermark,
  handelZoom,
  handelBtcPrice,
  chartsWidth,
  emptyData,
  dataLength,
} from "../util/processingData";

import { ethPrice} from "../api/apiPost"
export default {
  data() {
    return {
      lengthTimer:null,

      option: {
        legend: {
          right: 100,
          // formatter: function (name) {
          //   return name;
          // },
        },
        tooltip: {
          trigger: "axis",
          //解决tooltip显示不全问题1
          confine: true,
          textStyle: {
            align: "left",
          },
          animation: false,
          
          axisPointer: {
            animation: false,
            snap: true,
            label: {
              precision: 2, //坐标轴保留的位数
            },
            type: "cross", //cross shadow
            crossStyle: {
              //十字轴横线
              // opacity: "0",
              width: 0.5,
            },
            lineStyle: {
              // opacity: 0,
            },
          },
          formatter: function (params) {
                        const date = new Date(params[0].value[0]);
                        const year = date.getFullYear();
                        const month = date.getMonth() + 1;
                        const day = date.getDate();
                        let time =  `${year}-${month}-${day}`;
                        var res =time                       

                        for (let i = 0; i < params.length; i++) {
                            res += `</br>${params[i].marker} ${params[i].seriesName} &nbsp&nbsp&nbsp&nbsp <span style="font-weight: bold">${params[i].value[1]}</span>`

                        }
                        return res;
                    }


          // position: function (point, params, dom, rect, size) {
          //   // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
          //   // 提示框位置
          //   var x = 0; // x坐标位置
          //   var y = 0; // y坐标位置

          //   // 当前鼠标位置
          //   var pointX = point[0];
          //   var pointY = point[1];

          //   // 外层div大小
          //   // var viewWidth = size.viewSize[0];
          //   // var viewHeight = size.viewSize[1];

          //   // 提示框大小
          //   var boxWidth = size.contentSize[0];
          //   var boxHeight = size.contentSize[1];

          //   // boxWidth > pointX 说明鼠标左边放不下提示框
          //   if (boxWidth > pointX) {
          //     x = 5;
          //   } else {
          //     // 左边放的下
          //     x = pointX - boxWidth;
          //   }

          //   // boxHeight > pointY 说明鼠标上边放不下提示框
          //   if (boxHeight > pointY) {
          //     y = 5;
          //   } else {
          //     // 上边放得下
          //     y = pointY - boxHeight;
          //   }

          //   return [x, y];
          // },
        },

        xAxis: {
          type: "time",
          boundaryGap: false,
          data: [],
          axisTick: {
            //去除刻度
            show: false,
          },
          axisLine: {
            //去除轴线
            show: false,
          },
        },
        yAxis: [
          {
            // name: this.$t(`home.figure`),
            // name: "MVRV",
            position: "left",
            type: "value",
            //  min:"dataMin",
            // max:"dataMax",
          },
          {
            // name: "MVRV",
            position: "right",
            // type: "value",
            //  min:"dataMin",
            // max:"dataMax",
            show: true,
          },
          {
            // name: "MVRV",
            position: "right",
            // type: "value",
            //  min:"dataMin",
            // max:"dataMax",
            show: false,
          },
        ],
        dataZoom: [
          {
            type: "slider",
            start: 10,
            end: 100,
            maxSpan: 100,
            minSpan: 2,
            animation: false,
          },
          {
            // type: "inside",
            start: 0,
            end: 20,
            
            // showDetail: false,
          },
        ],
        series: [
          {
            type: "line",
            name: "Number of Big transaction",
            smooth: false, //线条是否圆滑
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            itemStyle: {
              color: "#f7931a",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            lineStyle: {
              //线条样式
              color: "#f7931a",
              width: "1",
            },

            data: [],
          },
          {
            name: "Price[BTC]",
            type: "line",
            smooth: false,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            // areaStyle: {},
            itemStyle: {
              color: "#888888",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            lineStyle: {
              //线条样式
              color: "#888888",
              width: "1",
            },
            yAxisIndex: 1,
            data: [],
            //绘制右侧Y轴
            markLine: {
              symbol: ["none", "none"], //去掉箭头
              itemStyle: {
                normal: {
                  lineStyle: { type: "solid", color: "rgba(0,0,0,0.01)" },
                },
              },
              // lineStyle:{
              //   color:"red"
              // },

              label: {
                formatter: "{b}",
                fontSize: 10,
                color: "rgba(0,0,0,0.8)",
                align: "left",
              },
              data: [
                // {
                //     name: "0",
                //     yAxis: 0,
                // },
                //  {
                //   name: "$40W",
                //   yAxis: 400000,
                // },
                {
                  name: "$70W",
                  yAxis: 700000,
                },
                {
                  name: "$40W",
                  yAxis: 400000,
                },

                {
                  name: "$10W",
                  yAxis: 100000,
                },
                {
                  name: "$100W",
                  yAxis: 1000000,
                  // position: ['100%', '50'],
                },
                {
                  name: "$120W",
                  yAxis: 1200000,
                },

                {
                  name: "$140W",
                  yAxis: 1400000,
                },
              ],
            },
          },
          {
            name: "Price [ETH]",
            type: "line",
            smooth: false, //线条是否圆滑
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            itemStyle: {
              color: "#627eea",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            lineStyle: {
              //线条样式
              color: "#627eea",
              width: "1",
            },
            yAxisIndex: 2,
            data: [],
          },
        ],
      },
      params: {
        req: "btcbigtxcount",
        radius: "btc",
        type: "week",
        page: 1,
      },
      show: "",
      color: "#f7931a",
      bigloading: false,
      tableData: [],
      ParmesTime: {
        start: "",
        end: "",
      },
      searchParams: {
        req: "bigamountvout",
      },
      tabelParams: {
        req: "bigSell",
        address: "",
        txId: "",
        type: "",
      },
      search: "",
      newTime: "",
      tabelloading: false,
      currency: true,
      tabelUrl: "",
      dialogTableVisible: false,
      dialog: false,
      radius: "",
      ethParams: {
        req: "ethbigtxcount",
        search: "ethbigtx",
      },
      amountValue: "",
      amountList: [
        {
          value: 500,
          label: "amount > 500",
        },
        {
          value: 1500,
          label: "amount > 1500",
        },
        {
          value: 5000,
          label: "amount > 5000",
        },
        {
          value: 10000,
          label: "amount > 10000",
        },
        {
          value: 15000,
          label: "amount > 15000",
        },
      ],
      state: "",
      currentPage4: 1,
      totalPage: 0,
      page: 1,
      animate: "",
      notice: "",
      amountTime: "",
      scrollingData: [],
      setInTime: "",
      amountTxid: "",
      amountTime: "",
      notice: "",
      dialogDate: "",
      dialogVisible: false,
      dialogData: [],
      limit: 50,
      switch3: "",
      setInTimeout: null,
      oldYAxis: null,
      btcFlag: null,
      ethFlag: null,
      fatherSmaData: [],
      start: "",
      end: "",
      noticeList: [],
      sma: "",
      zoomStart: 0,
      zoomEnd: 0,
    };
  },

  mounted() {
    this.radius = localStorage.getItem("radius");
    this.params.radius = localStorage.getItem("radius");
    this.show = localStorage.getItem("currentTabComponent");
    this.$addStorageEvent(1, "zoomStart", this.zoomStart);
    this.$addStorageEvent(1, "zoomEnd", this.zoomEnd);
    this.ethFlag = JSON.parse(localStorage.getItem("ethFlag"));
    this.btcFlag = JSON.parse(localStorage.getItem("btcFlag"));
    window.addEventListener("setItem", () => {
      let obj = localStorage.getItem("src");
      this.show = localStorage.getItem("currentTabComponent");
      this.params.radius = localStorage.getItem("radius");
      this.radius = localStorage.getItem("radius");
      // this.color = JSON.parse(obj).color;
      this.ethFlag = JSON.parse(localStorage.getItem("ethFlag"));
      this.btcFlag = JSON.parse(localStorage.getItem("btcFlag"));
      this.zoomStart = localStorage.getItem("zoomStart");
      this.zoomEnd = localStorage.getItem("zoomEnd");
    });
    //拿到当前时间传入请求
    this.newTime = getcurDate();

    //通知栏滚动
    if (this.setInTime || this.setInTimeout) {
      clearInterval(this.setInTime);
      clearTimeout(this.setInTimeout);
    }
    this.oldYAxis = this.option.yAxis;
    this.handelSwitch(this.option);
  },
  watch: {
    radius(val) {
      this.ParmesTime.start = "";
      this.ParmesTime.end = "";
      if (val == "BTC") {
        this.params.req = "btcbigtxcount";
        // this.currency = true;
      } else if (val == "ETH") {
        this.params.req = "ethbigtxcount";
        // this.searchParams.req = "ethbigtx";
        // this.currency = false;
      }
    },

    //监听币种 改变请求接口字段
    params: {
      handler(val) {
        if (
          val.req == "btcbigtxcount" ||
          this.ethParams.req == "ethbigtxcount"
        ) {
          this.page = 1;
          if (val.radius == "BTC") {
            this.searchParams.req = "bigamountvout";
            this.fetchBigDealscount(
              this.params.req,
              this.params.radius,
              this.ParmesTime.start,
              this.ParmesTime.end
            );
            this.fetchBigDeal(
              this.searchParams.req,
              this.params.radius,
              this.search,
              this.page,
              this.limit
            );

            // this.params.req = "btcbigtxcount";
            this.currency = true;
          } else if (val.radius == "ETH") {
            this.searchParams.req = "ethbigtx";
            this.fetchBigDealscount(
              this.ethParams.req,
              this.params.radius,
              this.ParmesTime.start,
              this.ParmesTime.end
            );
            this.fetchBigDeal(
              this.searchParams.req,
              this.params.radius,
              this.search,
              this.page,
              this.limit
            );
            // this.params.req = "ethbigtxcount";
            this.searchParams.req = "ethbigtx";
            this.currency = false;
          }
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    initCharts() {
      // this.myChart.clear();

      if (this.myChart == null) {
        this.myChart = echarts.init(document.getElementById("bigDealsBox"));
      }
      this.option = handelZoom(
        this.myChart,
        this.option,
        this,
        this.zoomStart,
        this.zoomEnd
      );

      this.myChart.setOption(this.option);
      chartsWidth("bigDealsBox", this);
      //  当窗口或者大小发生改变时执行resize，重新绘制图表
      window.addEventListener("resize", () => {
        if (this.myChart) this.myChart.resize();
      });
    },
    //请求大额交易数量
    async fetchBigDealscount(req, radius, start, end, type, sma) {
      this.bigloading = true;
      this.option.series[0].data.length = 0;
      this.option.xAxis.data.length = 0;
      //添加水印
      this.option = handelWatermark(this.option);
      if (req && start && end && type) {
        const list = await this.$API.getBigDealsCount(
          req,
          radius,
          start,
          end,
          type,
          sma
        );
        this.countData = list.data.data;
      } else if (req && start && end && !type) {
        const list = await this.$API.getBigDealsCount(
          req,
          radius,
          start,
          end,
          type,
          sma
        );
        this.countData = list.data.data;
      } else {
        const list = await this.$API.getBigDealsCount(
          req,
          radius,
          start,
          end,
          type,
          sma
        );
        this.countData = list.data.data;
      }

      //空数据处理
    let noData=  emptyData(this.countData,this.option.series,this.initCharts, this)
      if (noData) {
        this.bigloading = false
        return
      }



      this.start = this.countData[0].dataTime.split("T")[0];
      this.end =
        this.countData[this.countData.length - 1].dataTime.split("T")[0];
      
      //根据不同币种显示不同价格曲线
      if (radius == "BTC") {
        console.log("走这里");
        
        this.option.series= this.option.series.filter(item=>item.name !== "Price [ETH]")
        this.handelSonBtcPrice("BTC", true);
      }else if(radius == "ETH"){
        this.option.series= this.option.series.filter(item=>item.name !== "Price[BTC]")
        this.fetchEthPrice({start:this.start,end:this.end})

      }
      let numValueList = [];

      this.countData.forEach((item) => {
        numValueList.push(Number(item.num.toFixed(2)));
      });
      this.option.series[0].data = handelBigDeals(this.countData, numValueList);
   
      this.initCharts();
      this.bigloading = false;
      //判定页面条数是否一致
      if (this.lengthTimer) {
                clearTimeout(this.lengthTimer)
            }
            this.lengthTimer = setTimeout(() => {

                this.$addStorageEvent(1, "lengthFlag", dataLength(this.option, this.option.series[0].data.length), );

            }, 10000)

    },
    //请求大额交易搜索接口
    async fetchBigDeal(req, radius, search, page, limit) {
      this.tabelloading = true;
      const data = await this.$API.getBigDeals3(
        req,
        radius,
        search,
        page,
        limit
      );

      this.totalPage = data.data.data.totalPage;
      if (this.setInTime || this.setInTimeout) {
        clearInterval(this.setInTime);
        clearTimeout(this.setInTimeout);
      }
      this.setInTime = setInterval(() => {
        this.showMarquee(JSON.parse(JSON.stringify(this.tableData)));
      }, 3000);

      if (radius == "BTC") {
        //买入卖出价格目前是除以交易额
        this.tableData = data.data.data.data;

        this.tableData.forEach((item) => {
          item.buyPrice = Number(
            parseInt((item.buyPrice / item.amount) * 100) / 100
          );
          item.days = parseInt(item.days);
          item.profit = `${(( item.profit) * 100).toFixed(5)}%`;
          item.sellPrice = Number(
            parseInt((item.sellPrice / item.amount) * 100) / 100
          );
          item.amount = Number(parseInt(item.amount * 100) / 100);
        });
      } else {
        this.tableData = data.data.data.data;

        this.tableData.forEach((item) => {
          //买入卖出价格目前是除以交易额
          item.buyPrice = Number(
            parseInt((item.buyPrice / item.amount) * 100) / 100
          );
          item.profit = Number(item.profit.toFixed(2));
          item.sellPrice = Number(
            parseInt((item.sellPrice / item.amount) * 100) / 100
          );
          item.amount = Number(parseInt(item.amount * 100) / 100);
          //如果 转入合约、转出合约 有值就直接拼接到地址栏
          if (item.fromAbbr) {
            item.fromAddress = `${item.fromAddress}(${item.fromAbbr})`;
          }

          if (item.toAbbr) {
            item.toAddress = `${item.toAddress}(${item.toAbbr})`;
          }
        });
      }
      this.noticeList = [...data.data.data.data];
      this.currentPage4 = page;
      this.$addStorageEvent(1, "tableData", JSON.stringify(this.tableData));
      this.tabelloading = false;
    },
    //请求tabel单元格数据 新接口未用待定是否删除
    async fetchTabel(req, radius, address, txId) {
      let { data } = await this.$API.getBigDealsTabel(
        req,
        radius,
        address,
        txId
      );
    },
    //请求ETH价格接口
    async fetchEthPrice(params){
      const {data} = await ethPrice(params)
      let PriceData = data.data
      let PriceValueList = []
      PriceData.forEach(item => {
        PriceValueList.push(item.value.toFixed(2))

      })

      this.option.series[1].data = handelBtcPrice(PriceData, PriceValueList);
      this.initCharts();
    },

    //获取父级时间
    handelSonTime(start, end) {
      this.ParmesTime.start = start;
      this.ParmesTime.end = end;
      let type;
      this.fetchBigDealscount(
        this.params.req,
        this.params.radius,
        this.ParmesTime.start,
        this.ParmesTime.end,
        type,
        this.sma
      );
    },
    //下拉框数据
    handelChang() {
      this.page = 1;
      this.state = "";
      // this.fetchBigDeal(
      //   this.searchParams.req,
      //   this.params.radius,
      //   this.amountValue,
      //   this.page,
      //   this.limit
      // );
      this.search = this.amountValue;
    },
    // 输入搜索条件
    handelInput(){
      this.page = 1;
      this.search = this.state;
      this.amountValue = "";
    },
    //点击的改变页数
    handleCurrentChange(value) {
      this.page = value;
      this.fetchBigDeal(
        this.searchParams.req,
        this.params.radius,
        this.search,
        this.page,
        this.limit
      );
    },
    //改变每页条数
    handleSizeChange(val) {
      this.page = 1;
      this.limit = val;
      this.fetchBigDeal(
        this.searchParams.req,
        this.params.radius,
        this.search,
        this.page,
        this.limit
      );
      // this.params.limit = val
      // this.fetchTabelData(this.params.req, this.radius, this.params.page,val)
      // this.params.limit = 50
    },
    //点击搜索
    handelSearch() {
      // this.search = this.state;
      // this.amountValue = "";
   
      this.page = 1;
      this.fetchBigDeal(
        this.searchParams.req,
        this.params.radius,
        this.search,
        this.page,
        this.limit
      );
    },

    //点击搜索栏的查看详情
    handelDetails() {
      this.dialogVisible = true;
      this.dialogData = this.noticeList.find((item) => {
        return item.txId == this.amountTxid;
      });
      this.dialogDate = this.dialogData.date.split(".")[0].replace("T", " ");
    },
    //点击搜索后 滚到到tabel
    scrollToTabel() {
      let tebelBox = document.querySelector(`#bigDealsBox`);

      window.scrollTo({
        top: tebelBox.scrollHeight,
        behavior: "smooth",
      });
    },
    //处理表格里的时间
    formatTime(value) {
      let newTime = value.split(".")[0].replace("T", " ");
      return newTime;
    },

    //点击表格tabel 弹窗详情页
    handleClick(row, column) {
      this.tabelUrl = "";

      this.dialogLoading = true;
      switch (column.label) {
        case "number":
        case "date":
        case "amount":
        case "height":
          return;

          break;

        default:
          break;
      }

      if (column.label == "txId" || column.label == "交易ID") {
        this.tabelParams.txId = row.txId;
        this.tabelParams.address = row.txId;
        this.tabelParams.type = "tx";
      } else if (column.label == "vout" || column.label == "接收地址") {
        this.tabelParams.address = row.vout;
        this.tabelParams.type = "address";
      } else {
        return;
      }

 

      this.tabelUrl = ` https://bitcoinexplorer.org/${this.tabelParams.type}/${this.tabelParams.address}`;
      // this.dialogTableVisible=true
      this.dialog = true;
      this.dialogLoading = false;

      // window.open(
      //   ` https://bitcoinexplorer.org/${this.tabelParams.type}/${this.tabelParams.address}`,
      //   "_top"
      // );
      // this.fetchTabel(this.tabelParams.req,this.params.radius,this.tabelParams.address,this.tabelParams.txId)
    },
    //点击ETH表格的地址弹出详情 不跳转页面
    handleClickEth(row, column) {
      // console.log(row, column);

      if (column.property == "fromAddress") {
        this.dialogData = this.tableData.find((item) => {
          return item.fromAddress == row.fromAddress;
        });
        this.dialogVisible = true;
      } else if (column.property == "toAddress") {
        this.dialogData = this.tableData.find((item) => {
          return item.toAddress == row.toAddress;
        });
        this.dialogVisible = true;
      }

      this.dialogDate = this.dialogData.date.split(".")[0].replace("T", " ");
    },
    //单独给点击单元格加class名字
    cellClass({ row, column, rowIndex, columnIndex }) {
      if (
        column.label == "vout" ||
        column.label == "txId" ||
        column.label == "交易ID" ||
        column.label == "接收地址"
      ) {
        return "test";
      }
    },
    // 通知栏滚动
    showMarquee(data) {
      this.animate = true;
      if (this.setInTimeout) {
        clearTimeout(this.setInTimeout);
      }
      this.setInTimeout = setTimeout(() => {
        this.amountTxid = this.noticeList[0].txId;
        this.amountTime = this.noticeList[0].date
          .split(".")[0]
          .replace("T", "  ");
        this.notice = this.noticeList[0].amount.toFixed(3);
        // this.currencyName = rollingData[0].abbr;
        this.noticeList.push(this.noticeList[0]);
        this.noticeList.shift();
        this.animate = false;
        // console.log(rollingData,56565);
      }, 500);
    },
    //关闭弹窗
    handelClose() {
      this.dialog = false;
    },

    //默认判断显示对数/线性
    handelSwitch(data) {
      //判断子级option是不是数组 并改变默认值（线性/对数）
      if (Array.isArray(data.yAxis)) {
        if (data.yAxis[0].type == "log") {
          this.switch3 = "home.switch2";
        } else {
          this.switch3 = "home.switch1";
        }
      } else {
        if (data.yAxis.type == "log") {
          this.switch3 = "home.switch2";
        } else {
          this.switch3 = "home.switch1";
        }
      }
    },
    //点击对数/线性按钮切换
    handelLineSwitch() {
      this.option = handelLineType(this.option, this.oldYAxis);
      this.handelSwitch(this.option);

      this.myChart.setOption(this.option);
    },

    //父级点击BTC价格按钮
    handelSonBtcPrice(radius, flag) {
      //父级BTC默认是true 在ETH页面btcFlag 取反才能正常点击父级就渲染
      this.btcFlag = flag;
      // if (this.params.radius == "ETH") {
      //   this.btcFlag = !flag;
      // } else {
      //   this.btcFlag = flag;
      // }

      fetchBtcPrice(
        "BTC",
        this.option.series[1],
        this.start,
        this.end,
        this.initCharts,
        this,
        this.btcFlag
      );
    },
    //父级点击ETH价格按钮
    handelSonEthPrice(radius, flag) {
      this.ethFlag = flag;
      fetchEthPrice(
        "ETH",
        this.option.series[1],
        this.start,
        this.end,
        this.initCharts,
        this,
        this.ethFlag
      );
    },
    //父级选择Sma
    handelSonSma(smaDataList) {
      let type;
      this.sma = smaDataList;
      this.fetchBigDealscount(
        this.params.req,
        this.params.radius,
        this.ParmesTime.start,
        this.ParmesTime.end,
        type,
        this.sma
      );
      this.$addStorageEvent(1, "sma", this.sma);

      // this.fatherSmaData = smaDataList;
      // handelSmaData(
      //   smaDataList,
      //   this.option.series[1],
      //   this.initCharts,
      //   this.start,
      //   this.end
      // );
    },
    //双击表格单元格复制
    cellDblclick(row, column, cell, event) {
      if (event.type === "dblclick") {
        var save = (e) => {
          e.clipboardData.setData("text/plain", event.target.innerText);
          e.preventDefault(); //阻止默认行为
        };
        document.addEventListener("copy", save);
        document.execCommand("copy");
        document.removeEventListener("copy", save);
      }
      this.$message({ message: this.$t(`home.copy`), type: "success" }); //加提示
    },
  },
  beforeDestroy() {
    //离开清除定时器
    clearInterval(this.setInTime);
    clearTimeout(this.setInTimeout);
    clearTimeout(this.lengthTimer)
  },
};
</script>
<style lang="scss" scoped>
.main {
  position: relative;
  .search {
    // outline: 1px solid red; 
    position: relative;
    /* height: 50px; */
    display: flex;
    justify-content: right;
    align-items: center;
    padding-right: 80px;
    border: none;
    // position: absolute;
    // top: 32px;
    // right: 0px;
    margin: 20px 0px;
    width: 100%;
  }
}
.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;
}
.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;
}
// 搜索框样式

.searchBox {
  height: 34px;
  width: 390px;
  border: 1px solid rgba(0, 0, 0, 0.3);

  // position: absolute;
  // top: -33px;
  // right: 90px;
  // top: 0px;
  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;
  // outline: 1px solid red;
}
.searchBox::before {
  content: "";
  width: 1px;
  height: 31px;
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  right: 338px;
  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);
}
//滚动通知栏样式
.roll {
  width: 100%;
  // background: rgb(216, 165, 24);
  // background: rgba(0, 0, 0, 0.2);
  opacity: 0.5;
  height: 30px;
  // padding: 5px 10px;
  padding: 1.5px 7%;
  color: #000;
  font-size: 13px;
  // outline: 1px solid red;  
  overflow: hidden;
  display: flex;
  justify-content: left;
  align-items: center;
  // background: #e8f9ff;
  margin-bottom: 30px;
}
.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: 150px;
  // 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;
}
//切换线型样式
.switch {
  // outline: 1px solid red;
  padding: 5px 0px;
}
.tableAnnotation {
  color: rgba(0, 0, 0, 0.6);
  padding: 2px 0px;
  font-size: 13px;
}
.copyStyle {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.3);
}
</style>
<style >
.search {
  /* outline: 1px solid red; */
  /* height: 50px; */
  display: flex;
  justify-content: right;
  align-items: center;
  padding-right: 90px;
  border: none;
  position: absolute;
}
.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;
}
</style>
