import * as echarts from "echarts";
import {handelWatermark,handelZoom ,chartsWidth,emptyData} from "../../util/processingData"
export default {
  data() {
    return {
      NdaqBtcDayKlineLoading: false,     
      option:{},
      NDAQParams: "NDAQBTCPrice",
      BTCParams:"BTCNDAQPrice",
      requestTime: {
        start: "",
        end: ""
      },
      ys1:false,
      ys2:true,
      ys3:true,
      ys4:false,
      ndaqKlineData:[],
      buttonState:"NDAQ",
      sma:"",
      zoomStart: 0,
      zoomEnd: 0,

     
    }
  },
  mounted() {
    this.onOption()
    this.fetchNdaqBtcDayKline(this.NDAQParams, this.requestTime.start, this.requestTime.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: {
    inChart() {
      if (this.myChart == null) {
        this.myChart = echarts.init(document.getElementById("NdaqBtcDayKlineBox"));
      }
    this.option= handelZoom(this.myChart,this.option,this,this.zoomStart, this.zoomEnd)
   
      this.myChart.setOption(this.option);
      chartsWidth("NdaqBtcDayKlineBox", this);
      window.addEventListener("resize", () => {
        if (this.myChart)this.myChart.resize();
      });
    },
    async fetchNdaqBtcDayKline(req, start, end,sma) {
      this.NdaqBtcDayKlineLoading = true
      const { data } = await this.$API.getNDAQBTCPrice(req, start, end,sma)
      this.ndaqKlineData=data.data
      
    //空数据处理
    let noData=  emptyData(data.data,this.option.series,this.inChart, this)
    if (noData) {
      this.NdaqBtcDayKlineLoading = false
      return
    }
       //添加水印
       this.option= handelWatermark(this.option)
      this.option.xAxis[0].data.length=0
      this.option.xAxis[1].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 (req=="NDAQBTCPrice") {        
        this.ndaqKlineData.forEach(item=>{
          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(
            [item.ndaqOpenPrice,
            item.ndaqClosePrice,
            item.ndaqLowPrice,
            item.ndaqHighPrice]
          )
          this.option.series[1].data.push(item.btcOpenPrice)
          this.option.series[2].data.push(item.volume)
          // this.option.series[2].data.push(item.volume)
        })
        this.option.series[1].name ="BTC open"
      }else if(req=="BTCNDAQPrice"){
        this.ndaqKlineData.forEach(item=>{
          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(
            [item.btcOpenPrice,
            item.btcClosePrice,
            item.btcLowPrice,
            item.btcHighPrice]
          )
          let itemTime = new Date(time).getTime()
          //ndaq开盘价2021 9月22日之前的数据不渲染
          let ndaqTime = new Date(`2021-09-22`).getTime()
       
          if (itemTime < ndaqTime) {
            this.option.series[1].data.push("")
          }else{
            this.option.series[1].data.push(item.ndaqOpenPrice)
          }
          // this.option.series[1].data.push(item.ndaqOpenPrice)
         
          this.option.series[2].data.push(item.volume)
        })
        this.option.series[1].name ="NDAQ open"
      }

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

        return barColor;
      };
      this.inChart()
      


      this.NdaqBtcDayKlineLoading = false
    },
     //定义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[0].axisIndex !== 1,"sfjihfusihf");
          //   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">开盘价</span>\u00A0\u00A0\u00A0\u00A0 ${params[0].data[1]} 
          //     </br>${params[0].marker} <span style="font-weight: bold">收盘价</span>\u00A0\u00A0\u00A0\u00A0 ${params[0].data[2]} 
          //     </br>${params[0].marker} <span style="font-weight: bold">最高价</span>\u00A0\u00A0\u00A0\u00A0 ${params[0].data[3]} 
          //     </br>${params[0].marker} <span style="font-weight: bold">最低价</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: "82%",
            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: true,
          },
          {
            //显示在第二个grid坐标上
            gridIndex: 1,
            position: "right",
            type: "value",
            show: false,
          },
        ],
        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",
            data: [],
            itemStyle: {
              color: "#FD1050",
              color0: "#0CF49B",
              borderColor: "#FD1050",
              borderColor0: "#0CF49B",
            },
          },      
          {
            name: "开盘价",
            type: "line",
            data: [],
            smooth: false,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            itemStyle: {
              color: "#faa90e",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            yAxisIndex: 1,
            lineStyle: {
              color: "#faa90e",
              width: 1,
            },
          },      
          {
            type: "bar",
            name: "成交量",
            xAxisIndex: 1,
            yAxisIndex: 2,
            data: [],
            barCategoryGap: "30%",
            itemStyle: {
              color: "",
            },
          }

        ],

      }
    },
    //点击纳斯达克按钮
    handelNdaqKline(){
      this.buttonState="NDAQ"
      //按钮选中样式
      this.ys1 = !this.ys1
      this.ys2 = !this.ys2
      this.ys3 = !this.ys1
      this.ys4 =!this.ys2
      this.fetchNdaqBtcDayKline(this.NDAQParams, this.requestTime.start, this.requestTime.end,this.sma)
    },
    //点击BTC按钮
    handelBtcKline(){
      this.ys1 = true
      this.ys2 = false
      this.ys3 = false
      this.ys4 = true
      this.buttonState="BTC"
      this.fetchNdaqBtcDayKline(this.BTCParams, this.requestTime.start, this.requestTime.end,this.sma)
    },

     //时间接收
     handelSonTime(start, end) {
      this.requestTime.start = start;
      this.requestTime.end = end;
      if (this.buttonState =="BTC") {
        this.ys3 = false
        this.ys4 = true
        this.fetchNdaqBtcDayKline(this.BTCParams, this.requestTime.start, this.requestTime.end,this.sma)
      }else if(this.buttonState =="NDAQ"){
        this.ys1 = false
        this.ys2 =true
        this.fetchNdaqBtcDayKline(this.NDAQParams, this.requestTime.start, this.requestTime.end,this.sma)
      }
     
      // this.ys1=false
      // this.ys2=true
    },



     //父级选择Sma
     handelSonSma(smaNUm) {        
      this.sma = smaNUm
      if (this.buttonState =="BTC") {
        this.ys3 = false
        this.ys4 = true
        this.fetchNdaqBtcDayKline(this.BTCParams, this.requestTime.start, this.requestTime.end,this.sma)
      }else if(this.buttonState =="NDAQ"){
        this.ys1 = false
        this.ys2 =true
        this.fetchNdaqBtcDayKline(this.NDAQParams, this.requestTime.start, this.requestTime.end,this.sma)
      }
     
      this.$addStorageEvent(1, "sma", this.sma);
      // this.fatherSmaData = smaDataList
      // handelSmaData(smaDataList, this.option.series[3], this.inChart, this.start, this.end)

  },
  }
}