import * as echarts from "echarts";
import { handelLineType,dataLength, chartsWidth,emptyData, handelSwitchs, handelZoom, fetchBtcPrice, fetchEthPrice, handelWatermark, handelSmaData, getDateArray, handelUsdt } from "../../util/processingData"
export default {
    data() {
        return {
            lengthTimer:null,
        
            params: {
                req: "utxos2nd",
                radius: "btc"
            },
            utxosLoading: false,
      
            //折线图配置
            option: {
                tooltip: {
                    //解决tooltip显示不全问题1 
                    confine: true,
                    trigger: "axis",
                    textStyle: {
                        align: "left",
                    },

                    animation: false,
                    // formatter: function (params) {
                    //     var res
                    //     res = params[0].axisValueLabel;
                    //     res += `</br>${params[0].marker} <span style="font-weight: bold">${params[0].seriesName}</span>\u00A0\u00A0\u00A0\u00A0 ${params[0].value}% 
                    //     </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}`;

                    //     return res;
                    // },
                    axisPointer: {
                        animation: false,
                        snap: true,
                        label: {
                            precision: 2, //坐标轴保留的位数
                        },
                        type: "cross", //cross shadow
                        crossStyle: {
                            //十字轴横线
                            // opacity: "0",
                            width: 0.5,
                        },
                        lineStyle: {
                            // opacity: 0,
                        },
                    },
                },
                legend: {
                    right: "100",
                    //处理legengd过长
                    // formatter: function (name) {

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

                xAxis: {
                    // type: "time",
                    boundaryGap: false,
                    data: [],
                    axisTick: {
                        //去除刻度
                        show: false,
                    },
                    axisLine: {
                        //去除轴线
                        show: false,
                    },
                    data:[]
                    // axisLabel: {
                    //     formatter: (params) => {
                    //         let time = params.split(" ")[1]
                    //         return time
                    //     }
                    // }
                },
                yAxis: [
                    {
                        // name: this.$t(`home.figure`),
                        position: "left",
                        type: "value",
                        min: "dataMin",
                        max: "dataMax",
                        axisLabel: {
                            formatter: function (value) {

                                return `${(value / 10000).toFixed(2)} W`
                            }
                        }
                    },
                    {

                        position: "right",
                        type: "value",
                        // type: "log",
                        // splitNumber: "5",
                        // min: "dataMin",
                        // max: "dataMax",
                        show: true,
                    },
                    {
                        position: "right",
                        type: "log",
                        // splitNumber: "5",
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                    {
                        position: "right",
                        type: "value",
                        // splitNumber: "5",
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                    {
                        position: "right",
                        type: "value",
                        // splitNumber: "5",
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                    {
                        position: "right",
                        type: "value",
                        // splitNumber: "5",
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },

                ],
                dataZoom: [
                    {
                        type: "inside",
                        start: 0,
                        end: 100,
                        maxSpan: 100,
                        minSpan: 2,
                        animation: false,
                    },
                    {
                        // type: "inside",
                        start: 0,
                        end: 20,
                        // showDetail: false,
                    },
                ],
                series: [
                    {
                        name: "Balance < 0.01/ Total",
                        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",
                        },
                        data: [],
                    },
                  
                    {
                        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: 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: 5,
                    //     data: [],
                    // },



                ],
            },
       
            //折线图配置比率图
            ratio: {

                tooltip: {
                    //解决tooltip显示不全问题1 
                    confine: true,
                    trigger: "axis",
                    textStyle: {
                        align: "left",
                    },
                    animation: false,
                    formatter: function (params) {
                        var res

                        res = params[0].axisValueLabel;
                        for (let i = 0; i < params.length; i++) {
                            res += `</br>${params[i].marker} <span style="font-weight: bold">${params[i].seriesName}</span>\u00A0\u00A0\u00A0\u00A0 ${Number(parseInt(params[i].value * 1000000) / 1000000)}%  `;

                        }


                        return res;
                    },
                    axisPointer: {
                        animation: false,
                        snap: true,
                        label: {
                            precision: 2, //坐标轴保留的位数
                        },
                        type: "cross", //cross shadow
                        crossStyle: {
                            //十字轴横线
                            // opacity: "0",
                            width: 0.5,
                        },
                        lineStyle: {
                            // opacity: 0,
                        },
                    },
                },
                legend: {
                    right: "100",
                    //处理legengd过长
                    // formatter: function (name) {

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

                xAxis: {
                    // type: "time",
                    boundaryGap: false,
                    data: [],
                    axisTick: {
                        //去除刻度
                        show: false,
                    },
                    axisLine: {
                        //去除轴线
                        show: false,
                    },
                    data:[]
                    // axisLabel: {
                    //     formatter: (params) => {
                    //         let time = params.split(" ")[1]
                    //         return time
                    //     }
                    // }
                },
                yAxis: [
                    {
                        // name: this.$t(`home.figure3`),
                        position: "left",
                        type: "value",
                        min: "dataMin",
                        max: "dataMax",
                        axisLabel: {
                            formatter: function (value) {

                                return `${(value).toFixed(3)} %`
                            }
                        }
                    },
                    {
                        position: "right",
                        // type: "log",
                        // splitNumber: "5",
                        // min: "dataMin",
                        // max: "dataMax",
                        show: true,
                    },
                    {
                        position: "right",
                        type: "log",
                        // splitNumber: "5",
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                    {
                        position: "right",
                        type: "value",
                        // splitNumber: "5",
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                    {
                        position: "right",
                        type: "value",
                        // splitNumber: "5",
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                    {
                        position: "right",
                        type: "log",
                        // splitNumber: "5",
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                    {
                        position: "right",
                        type: "value",
                        // splitNumber: "5",
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                    {
                        position: "right",
                        type: "value",
                        // splitNumber: "5",
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },

                ],
                dataZoom: [
                    {
                        type: "inside",
                        start: 0,
                        end: 100,
                        maxSpan: 100,
                        minSpan: 2,
                        animation: false,
                    },
                    {
                        // type: "inside",
                        start: 0,
                        end: 20,
                        // showDetail: false,
                    },
                ],
                series: [
                    {
                        name: "Balance < 0.01/ Total",
                        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",
                        },
                        data: [],
                    },
                 



                ],
            },
         
            switch3: "",
            btcFlag: null,
            ethFlag: null,
            fatherSmaData: [],
            start: "",
            end: "",
            sma: "",
            times: {
                start: "",
                end: ""
            },
            zoomStart: 0,
            zoomEnd: 0,
        }   
    },
    mounted() {

        this.fetchUtxos(this.params.req, this.params.radius)
        this.switch3 = handelSwitchs(this.option, this.switch3)
        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: {
        //初始化折线图图表
        inChartsLine() {
            if (this.myChart == null) {
                this.myChart = echarts.init(document.getElementById("utxosLine"));
            }
            this.option = handelZoom(this.myChart, this.option, this, this.zoomStart, this.zoomEnd)

            this.myChart.setOption(this.option);
            chartsWidth("utxosLine", this);
            // window.addEventListener("resize", () => {
            //     if (this.myChart) this.myChart.resize();
            // });
        },
   
        //初始化比率折线图图表
        inChartSratioLine() {
            if (this.myChart3 == null) {
                this.myChart3 = echarts.init(document.getElementById("ratioLine"));
            }
            this.ratio = handelZoom(this.myChart3, this.ratio, this, this.zoomStart, this.zoomEnd)

            this.myChart3.setOption(this.ratio);
            chartsWidth("ratioLine", this);
            // window.addEventListener("resize", () => {
            //     if (this.myChart3) this.myChart3.resize();;
            // });
        },
       

        //请求数据
        async fetchUtxos(req, radius, start, end, sma) {
            this.utxosLoading = true
            let { data } = await this.$API.getNewAddress(req, radius, start, end, sma)

            this.UtxosData = data.data
            //空数据处理
            let noData = emptyData(data.data, this.option.series, this.inChartsLine, this)
            if (noData) {
                // emptyData(data.data, this.option2.series, this.inChartsLine2, this)
                emptyData(data.data, this.ratio.series, this.inChartSratioLine, this)
                // emptyData(data.data, this.ratio2.series, this.inChartSratioLine2, this)
                this.utxosLoading = false
                return
            }
        
            this.start = this.UtxosData[0].dateTime.split("T")[0]
            this.end = this.UtxosData[this.UtxosData.length - 1].dateTime.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)))
            })
            //添加水印
            this.option = handelWatermark(this.option)
            this.ratio = handelWatermark(this.ratio)
            //根据渲染的数据时间渲染对应的价格线和移动平均线
           

            let balance0List = []          
            let rate0List = []            
            let xAxisData= []   
            this.UtxosData.forEach(item => {
                balance0List.push(item.balanceAmount0)           
                rate0List.push((Number(item.rateAmount0)* 100).toFixed(4))
                xAxisData.push(item.dateTime.split("T")[0])
            })
            this.option.xAxis.data = xAxisData
            this.option.series[0].data = balance0List
            this.option.series[1].data = priceData
            this.ratio.xAxis.data = xAxisData
             this.ratio.series[0].data =rate0List
           

            this.inChartsLine()
            this.inChartSratioLine()
         

            this.utxosLoading = false

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

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

            }, 10000)

        },
        //父级时间
        handelSonTime(start, end) {
            this.times.start = start;
            this.times.end = end;
            this.fetchUtxos(this.params.req, this.params.radius, this.times.start, this.times.end, this.sma)
           


        },


        //点击对数/线性按钮切换
        handelLineSwitch() {
            this.option = handelLineType(this.option)
            this.ratio = handelLineType(this.ratio)
            this.switch3 = handelSwitchs(this.option, this.switch3)
            this.myChart.setOption(this.option);
            this.myChart3.setOption(this.ratio);

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

        },
        //父级点击ETH价格按钮
        handelSonEthPrice(radius, flag) {
            this.ethFlag = flag
            this.$addStorageEvent(1, "ethFlag", JSON.stringify(this.ethFlag));
            fetchEthPrice("ETH", this.option.series[5], this.start, this.end, this.inChartsLine, this, this.ethFlag)
            fetchEthPrice("ETH", this.option2.series[5], this.start, this.end, this.inChartsLine2, this, this.ethFlag)
        },
        //父级选择Sma
        handelSonSma(smaDataList, start, end) {

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

            // 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)

        },

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