import * as echarts from "echarts";
import {handelWatermark ,handelZoom,chartsWidth,emptyData} from "../../util/processingData"

export default {
  data() {
    return {
      option: {
      },
      params: {
        req: "NDAQohlc",
        start: "",
        end: ""
      },
      maParams: {
        req: "NDAQma",
      },
      NDloading: false,
      NDAQData: [],
      lineData: [],
      indicators05: "",
      indicators10: "",
      indicators20: "",
      NDAQObj:{},
      yesterday:{

      },
      sma:"",
      zoomStart: 0,
      zoomEnd: 0,
    }
  },

  // created() {
  //   this.onOption();
  // },
  //对象为空的时候取值是undefind 这是时候他会显示默认值  但是用数组 [][0] 这是时候是undefind 再去取键会报错，因为不是一个对象嗦嘎
  mounted() {
    //初始化option
    this.onOption();
    this.fetchNdaqData(this.params.req, this.params.start, this.params.end)
    this.fetchNDAQma(this.maParams.req, this.params.start, this.params.end)
    this.$addStorageEvent(1, "zoomStart", this.zoomStart);
    this.$addStorageEvent(1, "zoomEnd", this.zoomEnd);   
    window.addEventListener("setItem", () => {      
        this.zoomStart= localStorage.getItem("zoomStart")
        this.zoomEnd= localStorage.getItem("zoomEnd")
    })

  },
  methods: {
    initEcharts() {
      // myChart.clear();
      if (this.myChart == null) {
        this.myChart = echarts.init(document.getElementById(`chartsBox`));
      }
    this.option= handelZoom(this.myChart,this.option,this,this.zoomStart, this.zoomEnd)
   
      this.myChart.setOption(this.option);
      chartsWidth("chartsBox", this);
      //  当窗口或者大小发生改变时执行resize，重新绘制图表
      window.addEventListener("resize", () => {
        if (this.myChart)this.myChart.resize();
      });
    },
    // 请求NDAQ数据
    async fetchNdaqData(req, start, end,sma) {
      this.NDloading = true;

      const { data } = await this.$API.getPriceNDAQ(req, start, end,sma);
      this.NDAQData = data.data
      
    //空数据处理
    let noData=  emptyData(data.data,this.option.series,this.initEcharts, this)
    if (noData) {
      this.NDloading = false
      return
    }
      
       //添加水印
       this.option= handelWatermark(this.option)
      this.NDAQObj=this.NDAQData[this.NDAQData.length-1]
      this.yesterday=this.NDAQData[this.NDAQData.length-2]
      this.option.xAxis.type = "category";
      this.option.series[0].data.length = 0;
      this.option.series[1].data.length = 0;
      this.option.series[2].data.length = 0;
      this.option.series[7].data.length = 0
      this.option.xAxis[0].data.length = 0;
      this.option.xAxis[1].data.length = 0;
      this.NDAQData.forEach(item => {
        //X轴数据处理
        let time = item.date.split("T")[0];
        this.option.xAxis[0].data.push(time);
        this.option.xAxis[1].data.push(time);
        this.option.series[0].data.push([
          //series K线数据处理
          item.openPrice,
          item.closePrice,
          item.lowestPrice,
          item.highestPrice,
        ]);
        //涨跌额、涨跌幅
        this.option.series[1].data.push(item.increase)
        let netChangeRatio = `${item.netChangeRatio}%`

        this.option.series[2].data.push(Number(item.netChangeRatio) )
        //成交量处理 亿为单位
        let amount = `${Number((item.amount / 100000000).toFixed(2))} 亿股`
        this.option.series[3].data.push(Number((item.amount / 100000000).toFixed(2)))
        this.option.series[7].data.push(Number(item.amount.toFixed(2)))

      })

      let barColor
      //处理柱状图颜色
      let arr = this.option.series[0].data.map((item) => {
        return [item[0], item[1]];
      });
      this.option.series[7].itemStyle.color = function (params) {
        if (
          Number(arr[params.dataIndex][1] || 0) >=
          Number(arr[params.dataIndex][0])
        ) {
          barColor = "#f64e56";
        } else {
          barColor = "#54ea92";
        }

        return barColor;
      };
      this.$forceUpdate();
      // resetTheChart(this);
      this.initEcharts();  
      this.NDloading = false;
    },
    //请求三条折线数据
    async fetchNDAQma(req, start, end,sma) {
      const { data } = await this.$API.getPriceNDAQ(req, start, end,sma);
      this.lineData = data.data
      this.indicators05 = this.lineData[0].ma5Price
      this.indicators10 = this.lineData[0].ma10Price
      this.indicators20 = this.lineData[0].ma20Price
      this.option.series[4].data.length = 0
      this.option.series[5].data.length = 0
      this.option.series[6].data.length = 0
      this.lineData.forEach(item => {
        this.option.series[4].data.push(item.ma5Price)
        this.option.series[5].data.push(item.ma10Price)
        this.option.series[6].data.push(item.ma20Price)
      })
      this.initEcharts();
  
    },
    //定义OPtion
    onOption() {
      this.option = {

        tooltip: {
          trigger: "axis",
          axisPointer: {
            animation: false,
            type: "cross",
            lineStyle: {
              color: "#376df4",
              width: 2,
              opacity: 0,
            },

            crossStyle: {
              //十字轴横线
              opacity: "0",
            },
          },

          formatter: (params) => {
            var res
            // console.log(params,);
            if (params[0].axisIndex !== 1) {            
              res = params[0].axisValueLabel;           
              this.indicators05 = params[4].data
              this.indicators10 = params[5].data
              this.indicators20 = params[6].data
              res += `</br>${params[0].marker} <span style="font-weight: bold">open</span>\u00A0\u00A0\u00A0\u00A0 ${params[0].data[1]} 
              </br>${params[0].marker} <span style="font-weight: bold">close</span>\u00A0\u00A0\u00A0\u00A0 ${params[0].data[2]} 
              </br>${params[0].marker} <span style="font-weight: bold">lowest</span>\u00A0\u00A0\u00A0\u00A0 ${params[0].data[3]} 
              </br>${params[0].marker} <span style="font-weight: bold">highest</span>\u00A0\u00A0\u00A0\u00A0 ${params[0].data[4]} 
              </br>${params[1].marker} <span style="font-weight: bold"> ${params[1].seriesName}</span>\u00A0\u00A0\u00A0\u00A0 ${params[1].value}
              </br>${params[2].marker} <span style="font-weight: bold"> ${params[2].seriesName}</span>\u00A0\u00A0\u00A0\u00A0 ${params[2].value}%
              </br>${params[3].marker} <span style="font-weight: bold"> ${params[3].seriesName}</span>\u00A0\u00A0\u00A0\u00A0 ${params[3].value}亿股`;

            }


            return res;
          },
        },
        grid: [
          {
            // left: 0,
            top: "3%",
            right: "10%",
            height: "77%",
            // borderWidth: 10,
            // containLabel: true,
          },
          {
            // left: 0,
            top: "85%",
            right: "10%",
            height: "20%",
            // containLabel:true
          },],
        xAxis: [{
          // type: "time",
          data: [],
          axisLine: { lineStyle: { color: "#8392A5" } },
          //显示在第一个grid坐标上
          gridIndex: 0,
        },
        {
          //是否显示X轴
          show: false,
          //显示在第一个grid坐标上
          gridIndex: 1,
          // 网格线
          splitLine: {
            show: false,
            lineStyle: {
              color: "rgba(225,225,225)",
              width: 1,
              type: "solid",
            },
          },
          // 数据
          data: [],
        }],
        yAxis: [
          {
            //显示在第一个grid坐标上
            gridIndex: 0,
            scale: true,
            axisLine: { lineStyle: { color: "#8392A5" } },
            splitLine: { show: false },
          },
          {
            //显示在第一个grid坐标上
            gridIndex: 0,
            position: "right",
            type: "value",
            show: false,
          },
          {
            //显示在第一个grid坐标上
            gridIndex: 0,
            position: "right",
            type: "value",
            show: true,
            min: "dataMin",
            max: "dataMax",
          },
          {
            //显示在第一个grid坐标上
            gridIndex: 0,
            position: "right",
            type: "value",
            show: false,
          },
          {
            //显示在第二个grid坐标上
            gridIndex: 1,
            position: "right",
            type: "value",
            show: true,
          },
        ],
        dataZoom: [
          {

            type: "inside",
            xAxisIndex: [0, 1],
            start: 0,
            end: 100,
            maxSpan: 100,
            minSpan: 8,
            brushSelect: true,
            minValueSpan:6,
          },
          {
            type: "inside",
            xAxisIndex: [0, 1],
            start: 0,
            end: 20,
            showDetail: false,
          },
        ],
        series: [
          {
            type: "candlestick",
            name: "Day",
            symbol: "none",
            data: [],
            itemStyle: {
              color: "#FD1050",
              color0: "#0CF49B",
              borderColor: "#FD1050",
              borderColor0: "#0CF49B",
            },
          },
          {//涨跌额
            name: "Amount of rise and fall",
            type: "line",
            data: [],
            smooth: false,
            // symbol: "none",
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            itemStyle: {
              color: "#f5a622",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            yAxisIndex: 1,
            lineStyle: {
              color: "#f5a622",
              width: 2,
            },
          },
          {//涨跌幅
            name: "Rise and fall",
            type: "line",
            data: [],
            smooth: false,
            // symbol: "none",
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            itemStyle: {
              color: "#235195",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            yAxisIndex: 2,
            lineStyle: {
              color: "#235195",
              width: 2,
            },
          },
          {//成交量
            name: "Volume of trading",
            type: "line",
            data: [],
            smooth: false,
            // symbol: "none",
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            itemStyle: {
              color: "#ad70c8",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            yAxisIndex: 3,
            lineStyle: {
              color: "#ad70c8",
              width: 2,
            },
          },
          {
            // name: "close_price",
            type: "line",
            data: [],
            // smooth: false,
            symbol: "none",
            // symbol: "circle",
            // symbolSize: 5,
            // showSymbol: false,
            itemStyle: {
              color: "#faa90e",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            // yAxisIndex: 0,
            lineStyle: {
              color: "#faa90e",
              width: 0,
            },
          },
          {
            // name: "close_price",
            type: "line",
            data: [],
            smooth: false,
            symbol: "none",
            // symbol: "circle",
            // symbolSize: 5,
            // showSymbol: false,
            itemStyle: {
              color: "#ff7e52",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            // yAxisIndex: 3,
            lineStyle: {
              color: "#ff7e52",
              width: 0,
            },
          },
          {
            // name: "close_price",
            type: "line",
            data: [],
            smooth: false,
            symbol: "none", //none 
            // symbol: "circle",
            // symbolSize: 5,
            // showSymbol: false,
            itemStyle: {
              color: "#416df9",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            // yAxisIndex: 3,
            lineStyle: {
              color: "#416df9",
              width: 0,
            },
          },

          {
            type: "bar",
            name: "成交量",
            xAxisIndex: 1,
            yAxisIndex: 4,
            data: [],
            barCategoryGap: "30%",
            itemStyle: {
              symbol: "none",
              color: "",
            },
          }

        ],

      }
    },
    //时间接收
    handelSonTime(start, end) {
      this.params.start = start;
      this.params.end = end;
      this.fetchNdaqData(this.params.req, this.params.start, this.params.end,this.sma)
      this.fetchNDAQma(this.maParams.req, this.params.start, this.params.end,this.sma)
  
    },

       //父级选择Sma
       handelSonSma(smaNUm) {        
        this.sma = smaNUm
        this.fetchNdaqData(this.params.req, this.params.start, this.params.end,this.sma)
        this.fetchNDAQma(this.maParams.req, this.params.start, this.params.end,this.sma)
        this.$addStorageEvent(1, "sma", this.sma);
        // this.fatherSmaData = smaDataList
        // handelSmaData(smaDataList, this.option.series[3], this.inChart, this.start, this.end)

    },

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

}