<template>
  <div style="width: 100%; min-height: 700px">
   
    <div
      id="chartsBox"
      v-loading="NDloading"
      style="width: 100%; min-height: 700px"
    ></div>
    <!-- v-loading="NDloading" -->
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  resetTheChart,
  handelKlineGraph,
  handelClosePrice,
  handelData,
  handelTotalData,
  handelWatermark
} from "../util/processingData";
export default {
  data() {
    return {
      option: {        
        legend: {
          right: 100,
          itemWidth: 8,
          itemHeight: 9,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            animation: false,
            type: "cross",
            lineStyle: {
              color: "#376df4",
              width: 2,
              opacity: 0,
            },
            crossStyle: {
              //十字轴横线
              opacity: "0",
            },
          },
        },
        xAxis: {
          type: "time",
          data: [],
          axisLine: { lineStyle: { color: "#8392A5" } },
        },
        yAxis: [
          {
            scale: true,
            axisLine: { lineStyle: { color: "#8392A5" } },
            splitLine: { show: false },
          },
          {
            position: "right",
            type: "log",
            show: false,
          },
        ],
        grid: {
          bottom: 80,
        },
        dataZoom: [
          {
            // textStyle: {
            //   color: "#8392A5",
            // },
            // handleIcon://滚动条两边可以加图片样式
            // dataBackground: {
            //   areaStyle: {
            //     color: "#8392A5",
            //   },
            //   lineStyle: {
            //     opacity: 0.8,
            //     color: "#8392A5",
            //   },
            // },
            type: "inside",
            start: 30,
            end: 100,
            maxSpan: 100,
            minSpan: 8,
            brushSelect: true,
          },
          {
            // type: "inside",
            start: 0,
            end: 20,
            showDetail: false,
          },
        ],
        series: [
          {
            type: "candlestick",
            name: "Day",
            data: [],
            itemStyle: {
              color: "#FD1050",
              color0: "#0CF49B",
              borderColor: "#FD1050",
              borderColor0: "#0CF49B",
            },
          },
          {
            name: "close_price",
            type: "line",
            data: [],
            smooth: false,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            itemStyle: {
              color: "#22a6f2",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            lineStyle: {
              color: "#22a6f2",
              width: 1,
            },
          },
          {
            name: "Price [USD]",
            type: "line",
            smooth: false, //线条是否圆滑
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            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:{
              //   opacity:0
              // },
              label: {
                formatter: "{b}",
                fontSize: 10,
                color: "rgba(0,0,0,0.8)",
                align: "left",
              },
              data: [
                {
                  name: "$0.40",
                  yAxis: 0.4,
                },
                {
                  name: "$0.80",
                  yAxis: 0.8,
                },
                {
                  name: "$2",
                  yAxis: 2,
                },
                {
                  name: "$6",
                  yAxis: 6,
                },
                {
                  name: "$10",
                  yAxis: 10,
                },
                {
                  name: "$40",
                  yAxis: 40,
                },
                {
                  name: "$80",
                  yAxis: 80,
                },
                {
                  name: "$200",
                  yAxis: 200,
                },
                {
                  name: "$600",
                  yAxis: 600,
                },
                {
                  name: "$1K",
                  yAxis: 1000,
                },
                {
                  name: "$4K",
                  yAxis: 4000,
                },
                {
                  name: "$8K",
                  yAxis: 8000,
                },
                {
                  name: "$20K",
                  yAxis: 20000,
                },
                {
                  name: "$60K",
                  yAxis: 60000,
                },
                {
                  name: "$100K",
                  yAxis: 100000,
                },
                // {
                //   name: "两个坐标之间的标线",
                //   coord: [10, 20],
                // },
                // {
                //   coord: [20, 30],
                // },
              ],
            },
          },
        ],
      },
      dates: [], //X轴数据
      seriesData: [],
      params: {
        //当前是否渲染的NDAQ
        req: "NDAQ",
        radius: "",
      },
      pagingParams: {
        start: "",
        end: "",
      },
      priceParams: {
        req: "price",
        radius: "btc",
        start: "",
        end: "",
      },
      chooseTime: [],
      NDloading: false,
      label: "",
      show: "",
      priceData: [],
      ndaqTime: {
        start: "",
        end: "",
      },
    };
  },

  mounted() {
    //请求渲染NDAQ   
    this.fetchNdaqData();

    this.show = localStorage.getItem("currentTabComponent");
    //存显示图形的旗帜
    //监听localstorage改变赋值
    window.addEventListener("setItem", () => {
      this.show = localStorage.getItem("currentTabComponent");
      this.priceParams.radius = localStorage.getItem("radius");
    });

    
  },
  watch: {
    //监听时间变化 请求数据
    pagingParams: {
      handler(val) {
        //  this.option.xAxis.data.length = 0;
        this.option.series[0].data.length = 0;
        this.option.series[1].data.length = 0;
        this.option.series[2].data.length = 0;
        if (val.start && this.show == "false"||this.show == "NDAQ") {
          this.fetchNdaqData(this.pagingParams.start, this.pagingParams.end);
          // this.fetchPrice(
          //   this.priceParams.req,
          //   this.priceParams.radius,
          //   this.pagingParams.start,
          //   this.pagingParams.end
          // );
        }
      },
      deep: true,
      immediate: true,
    },

    
  },

  methods: {
    initEcharts() {
      this.myChart = echarts.init(document.getElementById(`chartsBox`));
      // myChart.clear();
      this.myChart.setOption(this.option);
      //  当窗口或者大小发生改变时执行resize，重新绘制图表
      window.addEventListener("resize", () => {
        if (this.myChart)this.myChart.resize();
      });
    },

    // 请求NDAQ数据
    async fetchNdaqData(start, end) {
      this.NDloading = true;
       //添加水印
      this.option= handelWatermark(this.option)
      if (start && end) {
        this.option.series[0].data.length = 0;
        this.option.series[1].data.length = 0;
        this.option.series[2].data.length = 0;
        const ndqaList = await this.$API.getPriceNDAQ("NDAQ", start, end);
        let data = ndqaList.data.data;
        this.option.xAxis.type = "category";
        this.option.series[0].data.length = 0;
        this.option.series[1].data.length = 0;
        this.option.xAxis.data.length = 0;
        data.forEach((item) => {
          //X轴数据处理

          let time = item.time.split("T")[0];
          this.option.xAxis.data.push(time);
          this.option.series[0].data.push([
            //series数据处理
            item.openPrice,
            item.closePrice,
            item.lowestPrice,
            item.highestPrice,
          ]);

          //收盘价处理渲染
          this.option.series[1].data.push(item.closePrice);
          this.option.dataZoom[0].start = 0;
          this.option.dataZoom[0].end = 100;
        });
      } else {
        const ndqaList = await this.$API.getPriceNDAQ("NDAQ");
        let data = ndqaList.data.data;

        this.option.xAxis.type = "category";
        this.option.series[0].data.length = 0;
        this.option.series[1].data.length = 0;
        this.option.xAxis.data.length = 0;
        data.forEach((item) => {
          //X轴数据处理

          let time = item.time.split("T")[0];
          this.option.xAxis.data.push(time);
          this.option.series[0].data.push([
            //series数据处理
            item.openPrice,
            item.closePrice,
            item.lowestPrice,
            item.highestPrice,
          ]);

          //收盘价处理渲染
          this.option.series[1].data.push(item.closePrice);
          this.option.dataZoom[0].start = 0;
          this.option.dataZoom[0].end = 100;
        });

        // this.option.xAxis.data.length= 0
        // this.option.xAxis.type = "time";
         
        // this.option.series[0].data = handelKlineGraph(data);
        // //收盘价处理渲染
        // this.closePrice = handelClosePrice(data);
        // // 收盘价处理成二维数组
        // this.option.series[1].data = handelKlineGraph(data, this.closePrice);
      }
      this.chooseTime = "";
      this.$forceUpdate();
      // resetTheChart(this);
      this.initEcharts();
      this.NDloading = false;
    },

    //请求BTC价格
    async fetchPrice(req, radius, start, end) {
      let screening = "ndaq";
      this.NDloading = true;
      if (req && radius && !start) {
        const price = await this.$API.getActiveaddress(req, radius);
        this.priceData = price.data.data;
        this.option.xAxis.type = "time";
        this.priceValueList = handelData(this.priceData);
        this.option.series[2].data = handelTotalData(
          this.priceData,
          this.priceValueList
        );
      } else {
        this.option.series[2].data.length = 0;
        // this.option.xAxis.data.length=0
        const price = await this.$API.getActiveaddress(
          req,
          `${radius},${screening}`,
          start,
          end
        );
        this.priceData = price.data.data;
        this.option.xAxis.type = "category";

        this.priceData.forEach((item) => {
          // let time = item.time.split("T")[0];
          // this.option.xAxis.data.push(time);
          this.option.series[2].data.push(item.value);
        });
      }

      // resetTheChart(this);
      this.initEcharts();
      this.NDloading = false;
    },

    //ETH价格
    async fetchPriceEth(start, end) {
      this.NDloading = true;
      if (start && end) {
        const price = await this.$API.getActiveaddress(
          "price",
          "eth,ndaq",
          start,
          end
        );
        this.priceEthData = price.data.data;
        this.option.xAxis.type = "category";

        this.priceData.forEach((item) => {         
          this.option.series[3].data.push(item.value);
        });

      } else {
        const price = await this.$API.getActiveaddress("price", "eth");
        this.priceEthData = price.data.data;
        this.option.xAxis.type = "time";
        this.priceEthValueList = handelData(this.priceEthData);
        this.option.series[3].data = handelTotalData(
          this.priceEthData,
          this.priceEthValueList
        );
      }

      this.initEcharts();
      this.NDloading = false;
    },

    handelSonTime(start, end) {
      this.pagingParams.start = start;
      this.pagingParams.end = end;
      // location.reload() //重新加载当前页
    },
  },
  beforeDestroy() {
    /* 页面组件销毁的时候，移除绑定的监听resize事件，多渲染几次 容易导致内存泄漏和额外CPU或GPU占用*/
    window.removeEventListener("resize", () => {
      if (this.myChart)this.myChart.resize();;
    });
  },
};
</script>

<style>
</style>