import * as echarts from "echarts";
import { getSoag2 } from "../../api/realTimeData";
import { chartsWidth, dataLength, emptyData, handelLineType, handelSwitchs, handelZoom, handelWatermark, fetchBtcPrice, handelProfitrate } from "../../util/processingData"
export default {
  data() {
    return {
      lengthTimer: null,
      soagLoading: false,
      params: {
        req: "soag",
        radius: "btc"
      },
      option: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              show: false,
              // precision: 0, //坐标轴保留的位数
            },
          },

          //解决tooltip显示不全问题1
          confine: true,
          formatter: (params) => {
            if (params[0].axisType == `xAxis.time`) {
              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    
          }else{
              var res = params[0].axisValue
          }
           


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

                } else {
                  res += `</br>${params[i].marker} ${params[i].seriesName} &nbsp&nbsp&nbsp&nbsp <span style="font-weight: bold">${params[i].value[1]}</span>`

                }

              } else {

                if (params[i].seriesName !== `Price[BTC]`) {
                  res += `</br>${params[i].marker} ${params[i].seriesName} &nbsp&nbsp&nbsp&nbsp <span style="font-weight: bold">${params[i].value}%</span>`

                } else {
                  res += `</br>${params[i].marker} ${params[i].seriesName} &nbsp&nbsp&nbsp&nbsp <span style="font-weight: bold">${params[i].value}</span>`

                }

              }

            }

            return res
          }
        },
        legend: {
          right: "100",
          //处理legengd过长
          // formatter: function(name){

          //         return echarts.format.truncateText(name, 100, '14px Microsoft Yahei', '…');
          // },
          tooltip: {
            show: true,

          },
          //默认不显示线条
          selected: {
            'cdd > 1 week and cdd <= 1 month': false,
            'cdd > 1 month and cdd <= 2 months': false,
            'cdd > 2 months and cdd <=3 months': false,
            'cdd > 3 months and cdd <=6 months': false,
            'cdd > 6 months and cdd <= 1 year': false,
            'cdd > 1 year': false,

          }
        },
        xAxis: {
          type: "time",
          boundaryGap: false,
          //   axisLabel: {
          //     formatter: `{yyyy}-{MM}-{dd}`,
          //   },
          // data: []
        },
        yAxis: [
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            axisLabel: {
              formatter: (value) => {
                let data
                if (value >= 1000000000) {
                  data = `${(value / 1000000000).toFixed(2)}B`
                } else if (value >= 1000000) {
                  data = `${(value / 1000000).toFixed(2)}M`
                } else if (value >= 1000) {
                  data = `${(value / 1000).toFixed(2)}K`
                } else if (value <= -1000000000) {
                  data = `${(value / 1000000000).toFixed(2)}B`
                } else if (value <= -1000000) {
                  data = `${(value / 1000000).toFixed(2)}M`
                } else if (value <= -1000) {
                  data = `${(value / 1000).toFixed(2)}K`
                } else {
                  data = value

                }

                return data
              }
            },
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            show: true,
            position: "right",
            axisLabel: {
              formatter: (value) => {
                let data
                if (value >= 1000000000) {
                  data = `${(value / 1000000000).toFixed(2)}B`
                } else if (value >= 1000000) {
                  data = `${(value / 1000000).toFixed(2)}M`
                } else if (value >= 1000) {
                  data = `${(value / 1000).toFixed(2)}K`
                } else if (value <= -1000000000) {
                  data = `${(value / 1000000000).toFixed(2)}B`
                } else if (value <= -1000000) {
                  data = `${(value / 1000000).toFixed(2)}M`
                } else if (value <= -1000) {
                  data = `${(value / 1000).toFixed(2)}K`
                } else {
                  data = value

                }

                return data
              }
            },
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            min: "dataMin",
            max: "dataMax",
            show: false,
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            min: "dataMin",
            max: "dataMax",
            show: false,
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            min: "dataMin",
            max: "dataMax",
            show: false,
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            min: "dataMin",
            max: "dataMax",
            show: false,
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            min: "dataMin",
            max: "dataMax",
            show: false,
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            // min:"dataMin",
            // max:"dataMax",
            show: false,
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            // min:"dataMin",
            // max:"dataMax",
            show: false,
          },
        ],
        dataZoom: [
          {
            type: "inside",
            start: 95,
            end: 100,
            minSpan: 1.5
          },
          {
            start: 0,
            end: 100,


          },
        ],
        series: [
          {
            name: "cdd <=1 day",
            type: "line",
            smooth: true,
            symbol: "circle",
            showSymbol: false,
            stack: 'Total',
            symbolSize: 5,
            // areaStyle: {},
            itemStyle: {
              // color: "#f7931a",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
              color: 'rgb(55, 162, 255)',
            },
            lineStyle: {
              //线条样式
              // color: "#f7931a",
              color: 'rgb(55, 162, 255)',
              width: "0",
            },
            data: [],
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(55, 162, 255)'
                },
                {
                  offset: 1,
                  color: 'rgb(116, 21, 219)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
          },
          {
            name: "cdd > 1 day and cdd <= 1 week",
            type: "line",
            stack: 'Total',
            smooth: true,
            symbol: "circle",
            showSymbol: false,
            symbolSize: 5,
            // areaStyle: {},
            itemStyle: {
              // color: "#9ed4e8",
              color: 'rgb(255, 0, 135)',
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            lineStyle: {
              // //线条样式
              // color: "#9ed4e8",
              width: "0",
              color: 'rgb(255, 0, 135)'
            },
            yAxisIndex: 0,
            data: [],
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255, 0, 135)'
                },
                {
                  offset: 1,
                  color: 'rgb(135, 0, 157)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
          },
          {
            name: "cdd > 1 week and cdd <= 1 month",
            type: "line",
            stack: 'Total',
            smooth: true,
            symbol: "circle",
            showSymbol: false,
            symbolSize: 5,
            // areaStyle: {},
            itemStyle: {
              // color: "#fbd88b",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
              color: 'rgb(255, 191, 0)'
            },
            lineStyle: {
              //线条样式
              // color: "#fbd88b",
              width: "0",
              color: 'rgb(255, 191, 0)'
            },
            yAxisIndex: 0,
            data: [],
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255, 191, 0)'
                },
                {
                  offset: 1,
                  color: 'rgb(224, 62, 76)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
          },
          {
            name: "cdd > 1 month and cdd <= 2 months",
            type: "line",
            smooth: true,
            symbol: "circle",
            showSymbol: false,
            stack: 'Total',
            symbolSize: 5,
            // areaStyle: {},
            itemStyle: {
              // color: "#b2dd9a",
              borderColor: "rgba(221,220,107,0.1)",
              color: 'rgb(0, 221, 255)',
              borderWidth: 12,
            },
            lineStyle: {
              //线条样式
              // color: "#b2dd9a",
              color: 'rgb(0, 221, 255)',
              width: "0",
            },
            yAxisIndex: 0,
            data: [],
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(0, 221, 255)'
                },
                {
                  offset: 1,
                  color: 'rgb(77, 119, 255)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
          },
          {
            name: "cdd > 2 months and cdd <=3 months",
            type: "line",
            stack: 'Total',
            symbol: "circle",
            showSymbol: false,
            smooth: true,
            symbolSize: 5,
            // areaStyle: {},
            itemStyle: {
              // color: "#879bd7",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
              color: 'rgb(128, 255, 165)'
            },
            lineStyle: {
              //线条样式
              // color: "#879bd7",
              width: "0",
              color: 'rgb(128, 255, 165)'
            },
            yAxisIndex: 0,
            data: [],
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(128, 255, 165)'
                },
                {
                  offset: 1,
                  color: 'rgb(1, 191, 236)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
          },
          {
            name: "cdd > 3 months and cdd <=6 months",
            type: "line",
            smooth: true,
            symbol: "circle",
            showSymbol: false,
            stack: 'Total',
            symbolSize: 5,
            // areaStyle: {},
            itemStyle: {
              // color: "#b6b7e9",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
              color: '#d9315f'
            },
            lineStyle: {
              //线条样式
              // color: "#b6b7e9",
              width: "0",
              color: '#d9315f'
            },
            yAxisIndex: 0,
            data: [],
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#fa1e04'
                },
                {
                  offset: 1,
                  color: '#d9315f'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
          },
          {
            name: "cdd > 6 months and cdd <= 1 year",
            type: "line",
            smooth: true,
            stack: 'Total',
            symbol: "circle",
            showSymbol: false,
            symbolSize: 5,
            // areaStyle: {},
            itemStyle: {
              // color: "#d732a7",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
              color: '#331970'
            },
            lineStyle: {
              //线条样式
              // color: "#d732a7",
              width: "0",
              color: '#331970'
            },
            yAxisIndex: 0,
            data: [],
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#331970'
                },
                {
                  offset: 1,
                  color: '#3273a0'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
          },
          {
            name: "cdd > 1 year",
            type: "line",
            smooth: true,
            stack: 'Total',
            symbol: "circle",
            showSymbol: false,
            symbolSize: 5,
            // areaStyle: {},
            itemStyle: {
              // color: "#fc8452",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
              color: '#f3c8d7'
            },
            lineStyle: {
              //线条样式
              // color: "#fc8452",
              width: "0",
              color: '#f3c8d7'
            },
            yAxisIndex: 0,
            data: [],
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#f3c8d7'
                },
                {
                  offset: 1,
                  color: '#f2597f'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
          },
          {
            name: "Price[BTC]",
            type: "line",
            smooth: false,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            // stack: 'Total',
            // 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,
            //         },
            //     ],
            // },
          },

        ],
        graphic: [
          {
            type: 'group',
            // rotation: Math.PI / 2,
            bounding: 'raw',
            right: "50%",
            top: "40%",
            // z: 10,
            // rotation: 6,
            children: [
              {
                type: 'text',
                left: 'center',
                top: 'center',

                silent: true,//不影响鼠标事件

                style: {
                  fill: `rgba(0,0,0,0.1)`,
                  text: `coinbus.cc`,
                  font: 'bold 80px sans-serif',

                }
              }
            ]
          }

        ],//添加水印
      },
      parmesTime: {
        start: "",
        end: ""
      },
      switch3: "",
      sma: "",
      zoomStart: 0,
      zoomEnd: 0,
      start: "",
      end: "",
      btcFlag: true,
      ethFlag: null,
      dataSelection: [
        {
          value: "1d",
          label: "home.day1",
          disabled: false,
          authority: "guest",
          grade: 1,
        },
        {
          value: "realTime",
          label: "home.realTimeData",
          disabled: false,
          authority: "vip",
          grade: 4,
        },
      ],
      realTimeData: "",

    }
  },
  mounted() {
    this.fetchSoag(this.params.req, this.params.radius)
    this.switch3 = handelSwitchs(this.option, this.switch3)

    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: {
    handleSelect(activeValue) {
      if (activeValue == "1d") {
        this.realTimeData = false
        this.fetchSoag(this.params.req, this.params.radius)
      } else {
        this.fetchSoag2()
        this.realTimeData = true
      }
    },
    //初始化图表
    inCharts() {
      if (this.myChart == null) {
        this.myChart = echarts.init(document.getElementById("soagBox"));
      }
      this.option = handelZoom(this.myChart, this.option, this, this.zoomStart, this.zoomEnd)

      this.myChart.setOption(this.option);
      chartsWidth("soagBox", this);
      window.addEventListener("resize", () => {
        if (this.myChart) this.myChart.resize();
      });
    },
    async fetchSoag2() {
      this.soagLoading = true
      const { data } = await getSoag2()
      let Soag2Data = data.data
      //空数据处理
      let noData = emptyData(data.data, this.option.series, this.inCharts, this)
      if (noData) {
        this.soagLoading = false
        return
      }

      this.option.xAxis.type = "category"
      this.option = handelWatermark(this.option)
      let valueList0 = []
      let valueList1 = []
      let valueList2 = []
      let valueList3 = []
      let valueList4 = []
      let valueList5 = []
      let valueList6 = []
      let valueList7 = []
      let xAxisData = []
      let price = []
      Soag2Data.forEach(item => {
        item.date = `${item.date.split("T")[0]} ${item.date.split("T")[1].split(`.`)[0]
          } `;
        valueList0.push(Number(item.day1.toFixed(2)))
        valueList1.push(Number(item.day7.toFixed(2)))
        valueList2.push(Number(item.day30.toFixed(2)))
        valueList3.push(Number(item.day60.toFixed(2)))
        valueList4.push(Number(item.day90.toFixed(2)))
        valueList5.push(Number(item.day180.toFixed(2)))
        valueList6.push(Number(item.day365.toFixed(2)))
        valueList7.push(Number(item.day730.toFixed(2)))
        xAxisData.push(item.date)
        price.push(item.price.toFixed(2))
      })

      this.option.xAxis.data = xAxisData
      this.option.series[0].data = valueList0
      this.option.series[1].data = valueList1
      this.option.series[2].data = valueList2
      this.option.series[3].data = valueList3
      this.option.series[4].data = valueList4
      this.option.series[5].data = valueList5
      this.option.series[6].data = valueList6
      this.option.series[7].data = valueList7
      this.option.series[8].data = price

      this.inCharts()
      this.soagLoading = false

    },
    async fetchSoag(req, radius, start, end, sma) {
      this.soagLoading = true
      const { data } = await this.$API.getSoag(req, radius, start, end, sma)
      this.soagData = data.data
      //空数据处理
      let noData = emptyData(data.data, this.option.series, this.inCharts, this)
      if (noData) {
        this.soagLoading = false
        return
      }
      this.start = this.soagData[0].date.split("T")[0]
      this.end = this.soagData[this.soagData.length - 1].date.split("T")[0]

      this.handelSonBtcPrice("BTC", true)
      this.option.xAxis.type = "time"
      //添加水印
      this.option = handelWatermark(this.option)

      // this.option.xAxis.data.length = 0
      this.option.series.forEach(series => series.data.length = 0)
      let valueList0 = []
      let valueList1 = []
      let valueList2 = []
      let valueList3 = []
      let valueList4 = []
      let valueList5 = []
      let valueList6 = []
      let valueList7 = []

      this.soagData.forEach(item => {
        //  this.option.xAxis.data.push(item.date.split("T")[0])
        valueList0.push(Number(item.day1.toFixed(2)))
        valueList1.push(Number(item.day7.toFixed(2)))
        valueList2.push(Number(item.day30.toFixed(2)))
        valueList3.push(Number(item.day60.toFixed(2)))
        valueList4.push(Number(item.day90.toFixed(2)))
        valueList5.push(Number(item.day180.toFixed(2)))
        valueList6.push(Number(item.day365.toFixed(2)))
        valueList7.push(Number(item.day730.toFixed(2)))



        //  this.option.series[0].data.push(Number(item.day1.toFixed(2)))
        //  this.option.series[1].data.push( Number(item.day7.toFixed(2)))
        //  this.option.series[2].data.push(Number(item.day30.toFixed(2)))
        //  this.option.series[3].data.push(Number(item.day60.toFixed(2)))
        //  this.option.series[4].data.push(Number(item.day90.toFixed(2)))
        //  this.option.series[5].data.push(Number(item.day180.toFixed(2)))
        //  this.option.series[6].data.push(Number(item.day365.toFixed(2)))
        //  this.option.series[7].data.push(Number(item.day730.toFixed(2)))


      })
      // this.option.xAxis.data=[]
      this.option.series[0].data = handelProfitrate(this.soagData, valueList0)
      this.option.series[1].data = handelProfitrate(this.soagData, valueList1)
      this.option.series[2].data = handelProfitrate(this.soagData, valueList2)
      this.option.series[3].data = handelProfitrate(this.soagData, valueList3)
      this.option.series[4].data = handelProfitrate(this.soagData, valueList4)
      this.option.series[5].data = handelProfitrate(this.soagData, valueList5)
      this.option.series[6].data = handelProfitrate(this.soagData, valueList6)
      this.option.series[7].data = handelProfitrate(this.soagData, valueList7)
      this.inCharts()
      console.log(this.option, "没开门方法");
      this.soagLoading = false

      //判定页面条数是否一致
      if (this.lengthTimer) {
        clearTimeout(this.lengthTimer)
      }
      this.lengthTimer = setTimeout(() => {

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

      }, 10000)

    },

    //接收Home传的时间handelParmesTime
    handelSonTime(start, end) {
      this.parmesTime.start = start;
      this.parmesTime.end = end;
      this.fetchSoag(this.params.req, this.params.radius, this.parmesTime.start, this.parmesTime.end, this.sma)
    },
    //点击对数/线性按钮切换
    handelLineSwitch() {
      this.option = handelLineType(this.option)
      this.switch3 = handelSwitchs(this.option, this.switch3)
      this.myChart.setOption(this.option);

    },
    //父级选择Sma
    handelSonSma(smaDataList) {

      this.sma = smaDataList
      this.fetchSoag(this.params.req, this.params.radius, this.parmesTime.start, this.parmesTime.end, this.sma)
      this.$addStorageEvent(1, "sma", this.sma);
      this.realTimeData = false
      // this.fatherSmaData = smaDataList
      // handelSmaData(smaDataList, this.option.series[4], this.inChartsLine, this.start, this.end)
      // handelSmaData(smaDataList, this.option2.series[4], this.inChartsLine2,  this.start, this.end)

    },
    //父级点击BTC价格按钮
    handelSonBtcPrice(radius, flag) {
      this.btcFlag = flag

      fetchBtcPrice("BTC", this.option.series[8], this.start, this.end, this.inCharts, this, this.btcFlag)


    },

  },
  beforeDestroy() {
    if (this.lengthTimer) {
      clearTimeout(this.lengthTimer)
    }
  }
}