<template>
  <div v-loading="blockAmountBoxloading">
    <!-- 对数线性显示切换 -->
    <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-row>
      <el-col :span="24">
        <div
          id="blockAmountBox"
          style="width: 100%; min-height: 700px"
        ></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  handelBlockAmount,
  handelBlock,
  getDate,
  resetTheChart,
  handelLineType
} from "../util/processingData";
export default {
  data() {
    return {
      option: {
        tooltip: {
          trigger: "axis",
          position: function (pt) {
            return [pt[0], "10%"];
          },
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
          axisLabel: {
            formatter: function (e) {
              let value = e.split(" ")[1].split(":");
              return `${value[0]}:${value[1]}`;
            },
          },
        },
        yAxis: [
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            axisLabel: {
              formatter: function (e) {
                let value;
                if (e > 1000000) {
                  value = e / 100000;
                } else if (e > 100000) {
                  value = e / 1000;
                } else {
                  value = e / 100;
                }
                return value;
              },
            },
            // min: "dataMin",
            // max: "dataMax",
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            show: true,
            // min: "dataMin",
            // max: "dataMax",
          },
        ],
        dataZoom: [
          {
            type: "inside",
            start: 90,
            end: 100,
          },
          {
            start: 0,
            end: 100,
          },
        ],
        series: [
          {
            name: "交易量",
            type: "line",
            smooth: false,
            symbol: "circle",
            showSymbol: false,
            symbolSize: 5,
            // areaStyle: {},
            itemStyle: {
              color: "#f7931a",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            lineStyle: {
              //线条样式
              color: "#f7931a",
              width: "1",
            },
            data: [],
          },

          {
            name: "高度",
            type: "line",
            show: false,
            smooth: false,
            symbol: "circle",
            showSymbol: false,
            symbolSize: 0,
            // areaStyle: {},
            itemStyle: {
              color: "#e53d30",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            lineStyle: {
              //线条样式
              color: "#e53d30",
              width: "0",
            },
            yAxisIndex: 1,
            data: [],
          },
          {
            name: "价格",
            type: "line",
            show: true,
            // smooth: false,
            symbol: "circle",
            // showSymbol: false,
            symbolSize: 0,
            // areaStyle: {},
            itemStyle: {
              color: "#888888",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            lineStyle: {
              //线条样式
              color: "#888888",
              width: "0",
            },
            yAxisIndex: 1,
            data: [],
          },
        ],
      },
      show: "",
      params: {
        req: "blockAmount",
        radius: "btc",
        start: "",
        end: "",
      },
      blockData: [],
      show: "",
      blockAmountBoxloading: false,
      switch3: "",
    };
  },
  mounted() {
    //默认渲染最近7天
    this.params.start = getDate("day", -7);
    this.params.end = getDate();
    this.fetchBlockAmount(this.params.req, this.params.radius);
    //进入页面发起请求
    // this.fetchBlockAmount(
    //   this.params.req,
    //   this.params.radius,
    //   this.params.start,
    //   this.params.end
    // );
    this.show = localStorage.getItem("currentTabComponent");

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

    this.handelSwitch(this.option)
  },
  // watch: {
  //   //监听时间变化发起请求
  //   params: {
  //     handler(val) {
  //       if (val.start && this.show == "blockAmount") {
  //         // this.fetchBlockAmount(
  //         //   this.params.req,
  //         //   this.params.radius,
  //         //   this.params.start,
  //         //   this.params.end
  //         // );
  //       }
  //     },
  //     deep: true,
  //     immediate: true,
  //   },
  // },
  methods: {
    //初始化图表
    inCharts(option) {
      this.myChart = echarts.init(document.getElementById("blockAmountBox"));

      this.myChart.setOption(option);

      window.addEventListener("resize", () => {
        if (this.myChart) this.myChart.resize();
      });
    },
    //请求数据
    async fetchBlockAmount(req, radius, start, end) {
      this.blockAmountBoxloading = true;
      let list = await this.$API.getNewAddress(req, radius, start, end);
      this.blockData = list.data.data;

      if (this.myChart) {
        this.myChart.clear();
      }
      this.blockData.forEach((item) => {
        let year = item.dateTime.split("T")[0];
        let hours = item.dateTime.split("T")[1].split(".")[0];
        let time = `${year} ${hours}`;
        this.option.xAxis.data.push(time);
        // let height = item.height / 100;

        this.option.series[0].data.push(item.amount.toFixed(2));

        this.option.series[1].data.push(item.height.toFixed(2));
        this.option.series[2].data.push(item.price.toFixed(2));
        // this.option.series[1].data.push(height);
      });

      resetTheChart(this);
      this.inCharts(this.option);
      this.blockAmountBoxloading = false;
    },
    //拿到父级时间
    handelSonTime(star, end) {
      this.params.start = star;
      this.params.end = end;
      this.fetchBlockAmount(
        this.params.req,
        this.params.radius,
        this.params.start,
        this.params.end
      );
      let time = [star, end];
      this.$addStorageEvent(1, "chooseTime", JSON.stringify(time));
    },
    //默认判断显示对数/线性
    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.handelSwitch(this.option);

      this.myChart.setOption(this.option);
    },
  },
};
</script>

<style>
</style>