
import * as echarts from "echarts";
import { $addStorageEvent } from '../../util/processingData'
import { getEaVolume2, } from '../../api/realTimeData'
import {handelZoom, chartsWidth,emptyData,handelWatermark,handelLineType,handelSwitchs} from "../../util/processingData"

export default {
    data(){
        return{
            myChart:"",
            option: {
                legend: {
                    right: 100,
                    formatter: function (name) {
                        return name;
                    },
                },
                tooltip: {
                    trigger: "axis",
                    textStyle: {
                        align: "left",
                    },
                    animation: false,
                    axisPointer: {
                        animation: false,
                        snap: true,
                        label: {
                            precision: 2, //坐标轴保留的位数
                        },
                        type: "cross", //cross shadow
                        crossStyle: {
                            //十字轴横线
                            // opacity: "0",
                            width: 0.5,
                        },
                        lineStyle: {
                            // opacity: 0,
                        },
                    },
                },

                xAxis: {
                    // type: "time",
                    boundaryGap: false,
                    data: [],
                    axisTick: {
                        //去除刻度
                        show: false,
                    },
                    axisLine: {
                        //去除轴线
                        show: false,
                    },
                    data:[]
                },
                yAxis: [
                    {
                        position: "left",
                        type: "value",
                        axisLabel: {
                            formatter: (value) => {
                                let data
                                if (value >= 1000000000) {
                                    data = `${value / 1000000000}B`
                                } else if (value >= 1000000) {
                                    data = `${value / 1000000}M`
                                } else {
                                    data = `${value / 1000}K`
                                }
                                return data
                            }
                        }
                    },
                    {
                        type: "value",
                        position: "right",
                        // type: "log",
                        // splitNumber: "5",
                        show: true,
                        // min:`dataMin`,
                        // max:`dataMax`,
                    },
                    {
                        type: "value",
                        position: "right",
                        // type: "log",
                        // splitNumber: "5",
                        show: false,
                    },
                    {
                        type: "value",
                        position: "right",
                        // type: "log",
                        // splitNumber: "5",
                        show: false,
                    },
                ],
                dataZoom: [
                    {
                        type: "inside",
                        start: 10,
                        end: 100,
                        maxSpan: 100,
                        minSpan: 2,
                        animation: false,
                    },
                    {
                        start: 0,
                        end: 20,
                        // showDetail: false,
                    },
                ],
                series: [
                    {
                        name: "Transaction Volume (Entity-adjusted)",
                        type: "line",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#f7931a",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#f7931a",
                            width: "1",
                        },
                        emphasis: {
                            focus: 'series',


                        },
                        yAxisIndex: 0,
                        data: [],
                    },
                   
                    {
                        name: "Price[BTC]",
                        type: "line",
                        smooth: false,
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        // areaStyle: {},
                        itemStyle: {
                            color: "#000",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#000",
                            width: "1",
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        yAxisIndex: 1,
                        data: [],
                     
                    },
                  


                ],
            },
            zoomStart: 0,
            zoomEnd: 0,
            adjustedLoading:false,
            params: {
                req: "eaVolume",
                radius: "btc",
                sma: "",
                start:"",
                end:"",

            },
            dataSelection: [
                {
                  value: "1d",
                  label: "home.day1",
                  disabled:false,
                  authority:"guest",
                  grade:1,
                },
                {
                  value: "realTime",
                  label: "home.realTimeData",
                  disabled:false,
                  authority:"vip",
                  grade:4,
                },
              ],
              realTimeData:"",
              switch3: "",
              start:"",
              end:"",


            
        }
    },
    mounted(){
        this.switch3 = handelSwitchs(this.option, this.switch3)
        this.fetchEaVolume(this.params.req, this.params.radius)
    },
    methods:{
        handleSelect(activeValue){
            if (activeValue == `1d`) {
                this.realTimeData =false
                this.fetchEaVolume(this.params.req, this.params.radius, this.params.start, this.params.end, this.params.sma)
            }else{
                this.fetchEaVolume2()
                this.realTimeData =true
            }
        },
        inCharts(){
            if (!this.myChart) {
                this.myChart = echarts.init(document.getElementById("adjustedBox"));
              
            }           
            
            this.option = handelZoom(this.myChart, this.option, this, this.zoomStart, this.zoomEnd)
            this.myChart.setOption(this.option);
            chartsWidth("adjustedBox", this);
            window.addEventListener("resize", () => {
              if (this.myChart) this.myChart.resize();
            });
        },
  
         //请求交易量数据渲染
         async fetchEaVolume(req, radius, start, end, sma) {
            this.adjustedLoading = true
            const { data } = await this.$API.getVolume(req, radius, start, end, sma)
            let  volumeData = data.data
           
            //空数据处理
            let noData = emptyData(data.data, this.option.series, this.inCharts, this)
            if (noData) {
                this.adjustedLoading = false
                return
            }
            //添加水印
            handelWatermark(this.option, 750, 300)
            this.start =volumeData[0].date.split("T")[0]
            this.end = volumeData[volumeData.length - 1].date.split("T")[0]
            const price = await this.$API.getBtcPrice2("BTC", this.start,  this.end);
       
            let priceData =[]
            price.data.data.forEach(item=>{
                priceData.push(Number(item.value.toFixed(2)))
            })
            let volumeValueList = []
            let xAxisData = []
            volumeData.forEach(item => {

                volumeValueList.push(Number(item.value.toFixed(2)))
                xAxisData.push(item.date.split("T")[0])
            })
            this.option.xAxis.data = xAxisData
            this.option.series[0].data = volumeValueList
            this.option.series[1].data = priceData
            if (this.zoomStart) {
                this.option.dataZoom[0].start = this.zoomStart
                this.option.dataZoom[0].end = this.zoomEnd
            } else {
                this.option.dataZoom[0].start = 10
                this.option.dataZoom[0].end = 100
            }




            this.inCharts()

         


            setTimeout(() => {//监听echarts 图表滚动
                this.myChart.on("dataZoom", function (e) {
                    this.zoomStart = e.start || e.batch[0].start;
                    this.zoomEnd = e.end|| e.batch[0].end;
                    $addStorageEvent(1, "zoomStart", this.zoomStart);
                    $addStorageEvent(1, "zoomEnd", this.zoomEnd);

                });


            })

            this.adjustedLoading = false

      



        },
        //实时数据
        async fetchEaVolume2(){
            this.adjustedLoading = true
            const { data } = await getEaVolume2()
              //空数据处理
              let noData = emptyData(data.data, this.option.series, this.inCharts, this)
              if (noData) {
                  this.adjustedLoading = false
                  return
              }
            let BTCVolumeData = data.data
            let Volume=[]
            let xAxisData = []
            let priceData =[]
            BTCVolumeData.forEach(item=>{
                item.date= `${item.date.split(`T`)[0]} ${item.date.split(`T`)[1].split(`.`)[0]}`
                xAxisData.push(item.date)
                Volume.push(item.value.toFixed(2))
                priceData.push(Number(item.price.toFixed(2)))
            })

            this.option.xAxis.data = xAxisData
            this.option.series[0].data = Volume
            this.option.series[1].data = priceData
           
            
            this.inCharts()
            this.adjustedLoading = false
        },
         //父级时间
         handelSonTime(start, end) {
            this.params.start = start;
            this.params.end = end;
            this.fetchEaVolume(this.params.req, this.params.radius, this.params.start, this.params.end, this.params.sma)
        },
             //父级选择Sma
             handelSonSma(smaNUm) {
                this.params.sma = smaNUm
                this.fetchEaVolume(this.params.req, this.params.radius, this.params.start, this.params.end, this.params.sma)
                this.$addStorageEvent(1, "sma",this.params.sma);
                this.realTimeData =false
    
            },
               //点击对数/线性按钮切换
        handelLineSwitch() {
            this.option = handelLineType(this.option)
            this.switch3 = handelSwitchs(this.option, this.switch3)
            this.myChart.setOption(this.option);

        },


    },
}