import * as echarts from "echarts";
import { getCddwaveEth, } from "../../api/pages"
import { chartsWidth,emptyData,dataLength, handelProfitrate, handelLineType, handelZoom, handelWatermark, handelSwitchs, fetchBtcPrice, fetchEthPrice, handelSmaData, getDateArray } from "../../util/processingData"

export default {
  data() {
    return {
      lengthTimer:null,
      cddwaveEthLoading: false,
      option: {
        tooltip: {
          trigger: "axis",
          //解决tooltip显示不全问题1 
          confine: true,
          //    formatter: function (params) {                 
          //     var res = params[0].axisValueLabel;

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

          //     }


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

          //     return echarts.format.truncateText(name, 100, '14px Microsoft Yahei', '…');
          // },
          tooltip: {
            show: true
          }
        },
        xAxis: {
          type: "time",
          boundaryGap: false,
          //   axisLabel: {
          //     formatter: `{yyyy}-{MM}-{dd}`,
          //   },
          data: []
        },
        yAxis: [
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            axisLabel: {
              formatter: function (e) {

                let value;
                if (e > 100000000) {
                  value = `${(e / 100000000).toFixed(2)}E`;
                } else if (e > 1000000) {//百万
                  value = `${(e / 1000000).toFixed(2)}M`;
                } else if (e >= 10000) {//万
                  value = `${(e / 10000).toFixed(2)}W`;
                } else if (e < -1000000) {//百万
                  value = `${(e / 1000000).toFixed(2)}M`;
                } else if (e < -10000) {//万
                  value = `${(e / 10000).toFixed(2)}W`;
                }
                else {
                  value = e;
                }
                return value;
              },
            },
            min: "dataMin",
            max: "dataMax",
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            show: false,
            min: "dataMin",
            max: "dataMax",
            position: "right"
          },
          {
            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,
            position: "right"
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            min: "dataMin",
            max: "dataMax",
            show: true,
            position: "right"
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            min: "dataMin",
            max: "dataMax",
            show: false,
          },
        ],
        dataZoom: [
          {
            type: "inside",
            start: 80,
            end: 100,
            // minSpan:70
          },
          {
            start: 0,
            end: 100,
          },
        ],
        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',

                }
              }
            ]
          }

        ],
        series: [
          {
            name: "cdd > 1 day and cdd <= 1 week",
            type: "line",
            smooth: true,
            symbol: "circle",
            showSymbol: false,
            symbolSize: 5,
            // stack: 'Total',
            // areaStyle: {},
            itemStyle: {
              // color: "#f7864c",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
              color: 'rgb(255, 0, 135)',
            },
            yAxisIndex: 0,
            lineStyle: {
              //线条样式
              // color: "#f7864c",
              width: "0",
              color: 'rgb(255, 0, 135)',
            },
            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",
            smooth: false,
            symbol: "circle",
            // stack: 'Total',
            showSymbol: false,
            symbolSize: 5,
            // areaStyle: {},
            itemStyle: {
              // color: "#40200d",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
              color: 'rgb(55, 162, 255)',
            },
            yAxisIndex: 1,
            lineStyle: {
              //线条样式
              // color: "#40200d",
              width: "0",
              color: 'rgb(55, 162, 255)',
            },
            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 month and cdd <= 2 months",
            type: "line",
            smooth: false,
            symbol: "circle",
            // stack: 'Total',
            showSymbol: false,
            symbolSize: 5,
            // areaStyle: {},
            itemStyle: {
              // color: "#13a72c",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
              color: 'rgb(255, 191, 0)'
            },
            yAxisIndex: 2,
            lineStyle: {
              //线条样式
              // color: "#13a72c",
              width: "0",
              color: 'rgb(255, 191, 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 > 2 month and cdd <= 3 months",
            type: "line",
            smooth: false,
            symbol: "circle",
            showSymbol: false,
            symbolSize: 5,
            // stack: 'Total',
            // areaStyle: {},
            itemStyle: {
              // color: "#595856",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
              color: 'rgb(0, 221, 255)',
            },
            yAxisIndex: 3,
            lineStyle: {
              //线条样式
              // color: "#595856",
              width: "0",
              color: 'rgb(0, 221, 255)',
            },
            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 > 3 month and cdd <= 6 months",
            type: "line",
            smooth: false,
            symbol: "circle",
            showSymbol: false,
            // stack: 'Total',
            symbolSize: 5,
            // areaStyle: {},
            itemStyle: {
              // color: "#1d2088",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
              color: 'rgb(128, 255, 165)'
            },
            yAxisIndex: 4,
            lineStyle: {
              //线条样式
              color: "#1d2088",
              width: "1",
              color: 'rgb(128, 255, 165)'
            },
            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 > 6 months and cdd <= 1 year",
            type: "line",
            smooth: false,
            symbol: "circle",
            showSymbol: false,
            symbolSize: 5,
            // areaStyle: {},
            itemStyle: {
              // color: "#8618c6",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
              color: '#d9315f'
            },
            yAxisIndex: 5,
            lineStyle: {
              //线条样式
              // color: "#8618c6",
              width: "0",
              color: '#d9315f'
            },
            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 > 1 year and cdd <= 2 year",
            type: "line",
            smooth: false,
            symbol: "circle",
            showSymbol: false,
            symbolSize: 5,
            // stack: 'Total',
            // areaStyle: {},
            itemStyle: {
              // color: "#d732a7",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
              color: '#331970'
            },
            yAxisIndex: 6,
            lineStyle: {
              //线条样式
              // color: "#d732a7",
              width: "0",
              color: '#331970'
            },
            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 > 2 year",
            type: "line",
            smooth: false,
            symbol: "circle",
            showSymbol: false,
            symbolSize: 5,
            // stack: 'Total',
            // areaStyle: {},
            itemStyle: {
              // color: "#d90013",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
              color: '#f3c8d7'
            },
            yAxisIndex: 7,
            lineStyle: {
              //线条样式
              // color: "#d90013",
              width: "0",
              color: '#f3c8d7'
            },
            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,
          //     // areaStyle: {},
          //     itemStyle: {
          //         color: "#888888",
          //         borderColor: "rgba(221,220,107,0.1)",
          //         borderWidth: 12,
          //     },
          //     lineStyle: {
          //         //线条样式
          //         color: "#888888",
          //         width: "1",
          //     },
          //     yAxisIndex: 8,
          //     data: [],


          // },
          {
            name: "Price [ETH]",
            type: "line",
            smooth: false, //线条是否圆滑
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            itemStyle: {
              color: "#627eea",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            lineStyle: {
              //线条样式
              color: "#627eea",
              width: "2",
            },
            yAxisIndex: 9,
            data: [],
          },

        ],
      },
      switch3: "",
      oldY: null,
      btcFlag: null,
      ethFlag: null,
      fatherSmaData: [],
      start: "",
      end: "",
      params: {
        start: "",
        end: "",
        sma: ""
      },
      zoomStart: 0,
      zoomEnd: 0,


    }
  },
  mounted() {
    this.fetchcddwaveEth()
    //禁用时间框
    this.$addStorageEvent(1, "timeDisable", true);
    this.switch3 = handelSwitchs(this.option, this.switch3)
    this.oldY = this.option.yAxis

    this.ethFlag = JSON.parse(localStorage.getItem("ethFlag"));
    this.btcFlag = JSON.parse(localStorage.getItem("btcFlag"));
    this.$addStorageEvent(1, "zoomStart", this.zoomStart);
    this.$addStorageEvent(1, "zoomEnd", this.zoomEnd);

    window.addEventListener("setItem", () => {
      this.ethFlag = JSON.parse(localStorage.getItem("ethFlag"));
      this.btcFlag = JSON.parse(localStorage.getItem("btcFlag"));
      this.zoomStart = localStorage.getItem("zoomStart")
      this.zoomEnd = localStorage.getItem("zoomEnd")

    })
  },
  methods: {
    //初始化图表
    inCharts() {
      if (this.myChart == null) {
        this.myChart = echarts.init(document.getElementById("cddwaveEthBox"));
      }
      this.option = handelZoom(this.myChart, this.option, this, this.zoomStart, this.zoomEnd)

      this.myChart.setOption(this.option);
      chartsWidth("cddwaveEthBox", this);
      window.addEventListener("resize", () => {
        if (this.myChart) this.myChart.resize();
      });
    },
    async fetchcddwaveEth(params) {
      this.cddwaveEthLoading = true
      const { data } = await getCddwaveEth(params)

      if (data.code !== 200) {
        this.$message({
          message: data.msg,
          type: "error",
          customClass: "messageClass",
        });
        return
      }


      //空数据处理
      let noData = emptyData(data.data, this.option.series, this.inCharts, this)
      if (noData) {
        this.cddwaveEthLoading = false
        return
      }
      let cddwaveEthData = data.data
      this.start = cddwaveEthData[0].date.split("T")[0]
      this.end = cddwaveEthData[cddwaveEthData.length - 1].date.split("T")[0]
      //  //添加水印
      this.option = handelWatermark(this.option)

      //根据渲染的数据时间渲染对应的价格线和移动平均线
      //   this.$nextTick(() => {               

      //       //渲染ETH
      //       if (this.ethFlag) {
      //         this.$addStorageEvent(1, "ethFlag", JSON.stringify(this.ethFlag));
      //         this.handelSonEthPrice("ETH", this.ethFlag)
      //     }
      //     //渲染BTC价格
      //     if (this.btcFlag) {
      //         this.$addStorageEvent(1, "btcFlag", JSON.stringify(this.btcFlag));
      //         this.handelSonBtcPrice("BTC", this.btcFlag)
      //     }



      // })
      this.handelSonEthPrice("ETH", true)
      let cdd1ValueList = []
      let cdd7ValueList = []
      let cdd30ValueList = []
      let cdd60ValueList = []
      let cdd90ValueList = []
      let cdd180ValueList = []
      let cdd365ValueList = []
      let cdd730ValueList = []

      cddwaveEthData.forEach(item => {




        cdd1ValueList.push(Number(item.cdd1.toFixed(2)))
        cdd7ValueList.push(Number(item.cdd7.toFixed(2)))
        cdd30ValueList.push(Number(item.cdd30.toFixed(2)))
        cdd60ValueList.push(Number(item.cdd60.toFixed(2)))
        cdd90ValueList.push(Number(item.cdd90.toFixed(2)))
        cdd180ValueList.push(Number(item.cdd180.toFixed(2)))
        cdd365ValueList.push(Number(item.cdd365.toFixed(2)))
        cdd730ValueList.push(Number(item.cdd730.toFixed(2)))


      })
      this.option.series[0].data = handelProfitrate(cddwaveEthData, cdd1ValueList)
      this.option.series[1].data = handelProfitrate(cddwaveEthData, cdd7ValueList)
      this.option.series[2].data = handelProfitrate(cddwaveEthData, cdd30ValueList)
      this.option.series[3].data = handelProfitrate(cddwaveEthData, cdd60ValueList)
      this.option.series[4].data = handelProfitrate(cddwaveEthData, cdd90ValueList)
      this.option.series[5].data = handelProfitrate(cddwaveEthData, cdd180ValueList)
      this.option.series[6].data = handelProfitrate(cddwaveEthData, cdd365ValueList)
      this.option.series[7].data = handelProfitrate(cddwaveEthData, cdd730ValueList)

      this.inCharts()

      this.cddwaveEthLoading = 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.params.start = start;
      this.params.end = end;
      this.fetchcddwaveEth(this.params)
    },
    //点击对数/线性按钮切换
    handelLineSwitch() {
      this.option = handelLineType(this.option, this.oldY)
      this.switch3 = handelSwitchs(this.option, this.switch3)
      this.myChart.setOption(this.option);

    },
    //父级点击BTC价格按钮
    handelSonBtcPrice(radius, flag) {
      this.btcFlag = flag
      fetchBtcPrice("BTC", this.option.series[8], this.start, this.end, this.inCharts, this, this.btcFlag)

    },
    //父级点击ETH价格按钮
    handelSonEthPrice(radius, flag) {
      this.ethFlag = flag
      fetchEthPrice("ETH", this.option.series[8], this.start, this.end, this.inCharts, this, this.ethFlag)
    },
    //父级选择Sma
    handelSonSma(smaDataList) {

      this.params.sma = smaDataList
      this.fetchcddwaveEth(this.params)
      this.$addStorageEvent(1, "sma", smaDataList);
      // this.fatherSmaData = smaDataList
      // handelSmaData(smaDataList, this.option.series[2], this.inCharts,this.start, this.end,)

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