import * as echarts from "echarts";
import { handelProfitrate,chartsWidth,dataLength, emptyData,handelLineType, handelSwitchs, handelZoom,fetchBtcPrice, handelWatermark,fetchEthPrice, handelSmaData, } from "../../util/processingData"
export default {
  data() {
    return {
      lengthTimer:null,
      addressLoading: false,
      option: {
        tooltip: {
          trigger: "axis",
          //解决tooltip显示不全问题1 
          confine: true,
        },
        legend: {
          right: "100",
          //处理legengd过长
          // formatter: function (name) {

          //   return echarts.format.truncateText(name, 100, '14px Microsoft Yahei', '…');
          // },
        },
        xAxis: {
          type: "time",
          boundaryGap: false,
          axisLabel: {
            formatter: `{yyyy}-{MM}-{dd}`,
          },
        },
        yAxis: [
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            axisLabel: {
              formatter: function (e) {
                let value;
                if (e > 1000000) {
                  value = e / 100000;
                } else if (e > 100000) {
                  value = e / 1000;
                } else {
                  value = e / 100;
                }
                return value;
              },
            },
            min: "dataMin",
            max: "dataMax",
          },
          {
            type: "value",
            position: "right",
            // boundaryGap: [0, "100%"],
            show: true,
            min: "dataMin",
            max: "dataMax",
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            show: false,
            min: "dataMin",
            max: "dataMax",
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            show: false,
            min: "dataMin",
            max: "dataMax",
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            show: true,
            min: "dataMin",
            max: "dataMax",
            position: "right",
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            show: false,
            min: "dataMin",
            max: "dataMax",
          },
        ],
        dataZoom: [
          {
            type: "inside",
            start: 30,
            end: 100,
          },
          {
            start: 30,
            end: 100,
          },
        ],
        series: [
          {
            name: "Active Address",
            type: "line",
            smooth: false,
            symbol: "circle",
            showSymbol: false,
            symbolSize: 5,
            // areaStyle: {},
            itemStyle: {
              color: "#f7931a",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            lineStyle: {
              //线条样式
              color: "#f7931a",
              width: "1",
            },
            data: [],
          },
          {
            name: "Receive Address",
            type: "line",
            smooth: false,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            // areaStyle: {},
            itemStyle: {
              color: "#9ed4e8",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            lineStyle: {
              //线条样式
              color: "#9ed4e8",
              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,
            //     },
            //   ],
            // },
          },
          {
            name: "Send Address",
            type: "line",
            smooth: false,
            symbol: "circle",
            showSymbol: false,
            symbolSize: 5,
            // areaStyle: {},
            itemStyle: {
              color: "#f29494",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            yAxisIndex: 1,
            lineStyle: {
              //线条样式
              color: "#f29494",
              width: "1",
            },
            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: "1",
            },
            yAxisIndex: 4,
            data: [],
          },


        ],
      },
      params: {
        req: "address",
        radius: "eth",
        start: "",
        end: "",
      },
      switch3: "",
      btcFlag: null,
      ethFlag: null,
      fatherSmaData: [],
      start: "",
      end: "",
      sma:"",
      zoomStart: 0,
      zoomEnd: 0,

    }
  },
  mounted() {
   
    //进入页面发起请求
    this.fetchAddress(
      this.params.req,
      this.params.radius,
      this.params.start,
      this.params.end
    );
      

    this.switch3 = handelSwitchs(this.option, this.switch3)
    this.$addStorageEvent(1, "zoomStart", this.zoomStart);
    this.$addStorageEvent(1, "zoomEnd", this.zoomEnd);

    this.ethFlag = JSON.parse(localStorage.getItem("ethFlag"));
    this.btcFlag = JSON.parse(localStorage.getItem("btcFlag"));
    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("addressBox"));
      }
    this.option= handelZoom(this.myChart,this.option,this,this.zoomStart, this.zoomEnd)
   
      this.myChart.setOption(this.option);
      chartsWidth("addressBox", this);
      window.addEventListener("resize", () => {
        if (this.myChart) this.myChart.resize();
      });
    },
    async fetchAddress(req, radius, start, end,sma) {
      this.addressLoading = true
      const { data } = await this.$API.getCsupply(req, radius, start, end,sma)
      let addressData = data.data


    //空数据处理
    let noData=  emptyData(data.data,this.option.series,this.inCharts, this)
      if (noData) {
        this.addressLoading = false
        return
      }

      // if (data.data.length === 0) {//空数据处理

      //   this.$message({
      //     message: this.$t(`home.NoData`),
      //     type: 'warning'
      //   });


      //   if (Array.isArray(this.option.series)) {
      //     this.option.series.forEach(item=>{
      //       item.data=[]
      //     })
      //   }else{
      //     this.option.series.data=[]
      //   }
       
      //   this.inCharts()
      //   this.addressLoading = false
      //   return
      // }

      this.start = addressData[0].date.split("T")[0]
      this.end = addressData[addressData.length - 1].date.split("T")[0]
      
      //根据渲染的数据时间渲染对应的价格线和移动平均线
      // this.$nextTick(() => {      
      //   if (this.start ) {
      //     this.handelSonEthPrice("ETH", false);
       
      //   }
      //   //点击时间 移动平均线有值 就渲染查询移动平均线
      //   if (this.fatherSmaData[0] && this.start) {
      //     this.handelSonSma(this.fatherSmaData, this.start, this.end)
      //   }
      //   //渲染BTC价格
      //   if (this.btcFlag) {                 
      //     this.$addStorageEvent(1, "btcFlag", JSON.stringify(this.btcFlag));
      //     this.handelSonBtcPrice("BTC",this.btcFlag)
      // }
      // })

      // this.handelSonEthPrice("ETH", false);//值取反的 false渲染ETH
      this.option= handelWatermark(this.option,750,300)
      let activeAddressList = []
      let receiveAddressList = []
      let sendAddressList = []
      let PriceValueList = []
      addressData.forEach(item => {

        activeAddressList.push(Number(item.activeAddress.toFixed(2)))
        receiveAddressList.push(Number(item.receiveAddress.toFixed(2)))
        sendAddressList.push(Number(item.sendAddress.toFixed(2)))
        PriceValueList.push(Number(item.price.toFixed(2)))


      })

      this.option.series[0].data = handelProfitrate(addressData, activeAddressList)
      this.option.series[1].data = handelProfitrate(addressData, receiveAddressList)
      this.option.series[2].data = handelProfitrate(addressData, sendAddressList)
      this.option.series[3].data = handelProfitrate(addressData, PriceValueList)

      this.inCharts()
    
      this.addressLoading = 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.fetchAddress(this.params.req, this.params.radius, this.params.start, this.params.end,this.sma)
      // this.handelSonBtcPrice("BTC",true)
    },
    //点击对数/线性按钮切换
    handelLineSwitch() {
      this.option = handelLineType(this.option)
      this.switch3 = handelSwitchs(this.option, this.switch3)
      this.myChart.setOption(this.option);

    },
    //父级点击BTC价格按钮
    handelSonBtcPrice(radius, flag) {
      //父级BTC默认是true 在ETH页面btcFlag 取反才能正常点击父级就渲染

      // if (this.params.radius == "eth") {
      //   this.btcFlag = !flag;
      // } else {
      //   this.btcFlag = flag;
      // }
      this.btcFlag = flag;
      fetchBtcPrice("BTC", this.option.series[3], this.start, this.end, this.inCharts, this, this.btcFlag)

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

      this.sma = smaDataList
      this.fetchAddress(this.params.req, this.params.radius, this.params.start, this.params.end,this.sma)
      this.$addStorageEvent(1, "sma", this.sma);

      // this.fatherSmaData = smaDataList
      // handelSmaData(smaDataList, this.option.series[3], this.inCharts, this.start, this.end,)

    },
  },

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