import * as echarts from "echarts";
import {
    handelLineType, emptyData,
    fetchBtcPrice, fetchEthPrice, dataLength, handelProfitrate, chartsWidth, handelZoom, getDateArray, handelWatermark
} from "../../util/processingData";
export default {
    data() {
        return {
            lengthTimer: null,
            jzr60Loading: false,
            option: {
                legend: {
                    right: 100,
                    formatter: function (name) {
                        return name;
                    },
                },
                tooltip: {
                    trigger: "axis",
                    //解决tooltip显示不全问题1 
                    confine: true,
                    textStyle: {
                        align: "left",
                    },
                    animation: false,
                    formatter: function (params) {

                        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      
                        console.log(params,"就覅积分覅就");
                        for (let i = 0; i <= params.length - 1; i++) {
                            console.log(i,params.length - 1);
                            if (i == params.length - 1) {
                                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>`

                            }

                        }



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

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

                        // }


                        return res;
                    },
                    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,
                    },
                },
                yAxis: [
                    {
                        // name: this.$t(`home.figure`),
                        position: "left",
                        type: "value",
                        axisLabel: {
                            // formatter:function(value){

                            //     return `${value/1000} k`
                            // }
                        }
                    },
                    {
                        position: "right",
                        type: "value",
                        splitNumber: "5",
                        show: false,
                    },
                    {
                        position: "right",
                        type: "value",
                        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: "7 days of cumulative gains",
                        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: "30 days of cumulative gains",
                        type: "line",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#b82eae",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#b82eae",
                            width: "1",
                        },

                        data: [],
                    },
                    {
                        name: "60 days of cumulative gains",
                        type: "line",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#ab334f",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#ab334f",
                            width: "1",
                        },
                        data: [],
                    },
                    {
                        name: "90 days of cumulative gains",
                        type: "line",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#1a7f54",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#1a7f54",
                            width: "1",
                        },
                        data: [],
                    },

                    {
                        name: "Price[BTC]",
                        type: "line",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#888888",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#888888",
                            width: "1",
                        },
                        yAxisIndex: 1,
                        data: [],
                        markLine: {
                            symbol: ["none", "none"], //去掉箭头
                            itemStyle: {
                                normal: {
                                    lineStyle: { type: "solid", color: "rgba(0,0,0,0.01)" },
                                },
                            },
                            //  lineStyle:{
                            //   opacity:0
                            // },
                            label: {
                                formatter: "{b}",
                                fontSize: 10,
                                color: "rgba(0,0,0,0.8)",
                                align: "left",
                            },
                            data: [
                                {
                                    name: "$0",
                                    yAxis: 0,
                                },
                                {
                                    name: "$10k",
                                    yAxis: 10000,
                                },
                                {
                                    name: "$20K",
                                    yAxis: 20000,
                                },
                                {
                                    name: "$30K",
                                    yAxis: 30000,
                                },
                                {
                                    name: "$40K",
                                    yAxis: 40000,
                                },
                                {
                                    name: "$50K",
                                    yAxis: 50000,
                                },
                                {
                                    name: "$60K",
                                    yAxis: 60000,
                                },
                                {
                                    name: "$70K",
                                    yAxis: 70000,
                                },
                                {
                                    name: "$80K",
                                    yAxis: 80000,
                                },
                                {
                                    name: "$90K",
                                    yAxis: 90000,
                                },
                                {
                                    name: "$100K",
                                    yAxis: 100000,
                                },

                            ],
                        },
                    },
                    {
                        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: 2,
                        data: [],
                    },

                ],
            },
            dayOption: {
                legend: {
                    right: 100,
                    formatter: function (name) {
                        return name;
                    },
                },
                tooltip: {
                    trigger: "axis",
                    textStyle: {
                        align: "left",
                    },
                    animation: false,
                    formatter: function (params) {
                        var res = params[0].axisValueLabel;

                        for (let i = 0; i <= params.length - 1; i++) {
                            if (i == params.length - 1) {
                                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;
                    },
                    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,
                    },
                    axisLabel: {
                        formatter: function (value) {
                            let hours = value.split(" ")[1].split(":")[0];
                            let min = value.split(" ")[1].split(":")[1];
                            return `${hours}:${min}`;
                        },
                    },
                },
                yAxis: [
                    {
                        // name: this.$t(`home.figure2`),
                        position: "left",
                        type: "value",
                        // min: `dataMin`,
                        // max: `dataMax`,
                        // axisLabel:{
                        //     formatter:function(value){
                        //         let data = (value/10000).toFixed(3)
                        //         return `${data} W`
                        //     }
                        // }
                    },
                    {
                        position: "right",
                        type: "value",
                        min: `dataMin`,
                        max: `dataMax`,
                        show: false,
                    },
                    {
                        position: "right",
                        type: "value",
                        min: `dataMin`,
                        max: `dataMax`,
                        // 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: "7 days of cumulative gains",
                        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: "30 days of cumulative gains",
                        type: "line",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#b82eae",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#b82eae",
                            width: "1",
                        },
                        data: [],
                    },
                    {
                        name: "60 days of cumulative gains",
                        type: "line",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#ab334f",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#ab334f",
                            width: "1",
                        },
                        data: [],
                    },
                    {
                        name: "90 days of cumulative gains",
                        type: "line",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#1a7f54",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#1a7f54",
                            width: "1",
                        },
                        data: [],
                    },
                    {
                        name: "Price[BTC]",
                        type: "line",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#888888",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#888888",
                            width: "1",
                        },
                        yAxisIndex: 0,
                        data: [],
                        // markLine: {
                        //     symbol: ["none", "none"], //去掉箭头
                        //     itemStyle: {
                        //         normal: {
                        //             lineStyle: { type: "solid", color: "rgba(0,0,0,0.01)" },
                        //         },
                        //     },
                        //     //  lineStyle:{
                        //     //   opacity:0
                        //     // },
                        //     label: {
                        //         formatter: "{b}",
                        //         fontSize: 10,
                        //         color: "rgba(0,0,0,0.8)",
                        //         align: "left",
                        //     },
                        //     data: [
                        //         {
                        //             name: "$0",
                        //             yAxis: 0,
                        //         },
                        //         {
                        //             name: "$10k",
                        //             yAxis: 10000,
                        //         },
                        //         {
                        //             name: "$20K",
                        //             yAxis: 20000,
                        //         },
                        //         {
                        //             name: "$30K",
                        //             yAxis: 30000,
                        //         },
                        //         {
                        //             name: "$40K",
                        //             yAxis: 40000,
                        //         },
                        //         {
                        //             name: "$50K",
                        //             yAxis: 50000,
                        //         },
                        //         {
                        //             name: "$60K",
                        //             yAxis: 60000,
                        //         },
                        //         {
                        //             name: "$70K",
                        //             yAxis: 70000,
                        //         },
                        //         {
                        //             name: "$80K",
                        //             yAxis: 80000,
                        //         },
                        //         {
                        //             name: "$90K",
                        //             yAxis: 90000,
                        //         },
                        //         {
                        //             name: "$100K",
                        //             yAxis: 100000,
                        //         },

                        //     ],
                        // },
                    },
                    {
                        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: 0,
                        data: [],
                    },


                ],
            },
            timeParams: {
                req: "jzr60",
                start: "",
                end: ""
            },
            dayParams: {
                req: "jzr60day",
                start: "",
                end: ""
            },
            jzrData: [],
            jzrDayData: [],
            radius: "btc",
            timer: "",
            btcFlag: null,
            ethFlag: null,
            fatherSmaData: [],
            start: "",
            end: "",
            sma: "",
            zoomStart: 0,
            zoomEnd: 0,



        }
    },
    watch: {
        radius(val) {

            this.fetchJzr(this.timeParams.req, this.radius)
            this.fetchJzrDay(this.dayParams.req, this.radius)

        }

    },
    mounted() {
        this.radius = localStorage.getItem("radius");
        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"));


        //监听localstorage变化
        window.addEventListener("setItem", () => {
            this.radius = localStorage.getItem("radius");
            this.zoomStart = localStorage.getItem("zoomStart")
            this.zoomEnd = localStorage.getItem("zoomEnd")
            this.ethFlag = JSON.parse(localStorage.getItem("ethFlag"));
            this.btcFlag = JSON.parse(localStorage.getItem("btcFlag"));


        });

        if (this.timer) {
            clearInterval(this.timer)
        }
        //5分钟请求一次页面
        this.timer = setInterval(() => {
            this.fetchJzr(this.timeParams.req, this.radius)
            this.fetchJzrDay(this.dayParams.req, this.radius)
        }, 300000)




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

            this.myChart.setOption(this.option);
            chartsWidth("jzr60Box", this);
            window.addEventListener("resize", () => {
                if (this.myChart) this.myChart.resize();
            });
        },
        //初始化
        inChartDay() {
            if (this.myChartDay == null) {
                this.myChartDay = echarts.init(document.getElementById("jzr60DayBox"));
            }
            this.dayOption = handelZoom(this.myChartDay, this.dayOption, this, this.zoomStart, this.zoomEnd)

            this.myChartDay.setOption(this.dayOption);
            chartsWidth("jzr60DayBox", this);
            window.addEventListener("resize", () => {
                this.myChartDay.resize();
            });
        },
        //请求
        async fetchJzr(req, radius, start, end, sma) {
            this.jzr60Loading = true
            const { data } = await this.$API.getMa370(req, radius, start, end, sma)
            this.jzrData = data.data

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

            this.start = this.jzrData[0].date.split("T")[0]
            this.end = this.jzrData[this.jzrData.length - 1].date.split("T")[0]
            //添加水印
            this.option = handelWatermark(this.option)


            //不同币种显示不同价格曲线
            if (radius == "BTC") {
                this.option.series = this.option.series.filter(item => item.name !== "Price [ETH]")
                // this.handelSonBtcPrice("BTC", true)
            } else if (radius == "ETH") {
                this.option.series = this.option.series.filter(item => item.name !== "Price[BTC]")
                // this.handelSonEthPrice("ETH", true)
            }

            let jzr7ValueList = []
            let jzr30ValueList = []
            let jzr60ValueList = []
            let jzr90ValueList = []
            let priceList = []
            this.jzrData.forEach(item => {

                jzr7ValueList.push(Number((item.jzr7 * 100).toFixed(2)))
                jzr30ValueList.push(Number((item.jzr30 * 100).toFixed(2)))
                jzr60ValueList.push(Number((item.jzr60 * 100).toFixed(2)))
                jzr90ValueList.push(Number((item.jzr90 * 100).toFixed(2)))
                priceList.push(item.price.toFixed(2))
            })


            this.option.series[0].data = handelProfitrate(this.jzrData, jzr7ValueList)
            this.option.series[1].data = handelProfitrate(this.jzrData, jzr30ValueList)
            this.option.series[2].data = handelProfitrate(this.jzrData, jzr60ValueList)
            this.option.series[3].data = handelProfitrate(this.jzrData, jzr90ValueList)
            this.option.series[4].data = handelProfitrate(this.jzrData, priceList)

            this.inChart()
            this.jzr60Loading = 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.dayOption, this.dayOption.series[0].data.length),);

            }, 15000)
        },
        //请求JzrDay渲染数据
        async fetchJzrDay(req, radius, start, end, sma) {

            const { data } = await this.$API.getMa370(req, radius, start, end, sma)

            //空数据处理
            let noData = emptyData(data.data, this.dayOption.series, this.inChartDay, this)
            if (noData) {

                return
            }

            this.jzrDayData = data.data
            this.dayOption.xAxis.data.length = 0
            this.dayOption.series[0].data.length = 0
            // this.dayOption.series[1].data.length = 0
            //添加水印
            this.dayOption = handelWatermark(this.dayOption)

            //不同币种显示不同价格曲线
            if (radius == "BTC") {
                this.dayOption.series = this.dayOption.series.filter(item => item.name !== "Price [ETH]")
                // this.handelSonBtcPrice("BTC", true)
            } else if (radius == "ETH") {
                this.dayOption.series = this.dayOption.series.filter(item => item.name !== "Price[BTC]")
                // this.handelSonEthPrice("ETH", true)
            }

            this.dayOption.series[0].data = []
            this.dayOption.series[1].data = []
            this.dayOption.xAxis.data = []
            this.jzrDayData.forEach(item => {
                let year = item.date.split("T")[0]
                let hour = item.date.split("T")[1].split(".")[0]
                let time = `${year} ${hour}`
                this.dayOption.xAxis.data.push(time)
                //判断负数保留两位小数处理
                // if (item.jzr60.toString().indexOf("-") !== -1) {
                //     item.jzr60 = 0 - Number(Math.abs(item.jzr60).toFixed(4))
                // } else {
                //     item.jzr60 = Number(item.jzr60.toFixed(4))
                // }
                this.dayOption.series[0].data.push(Number(item.jzr7 * 100).toFixed(4))
                this.dayOption.series[1].data.push(Number(item.jzr30 * 100).toFixed(4))
                this.dayOption.series[2].data.push(Number(item.jzr60 * 100).toFixed(4))
                this.dayOption.series[3].data.push(Number(item.jzr90 * 100).toFixed(4))
                this.dayOption.series[4].data.push(item.price)
                // this.dayOption.series[1].data.push(Number(item.price.toFixed(2)))
            })
            this.inChartDay()

        },

        //父级时间
        handelSonTime(start, end) {
            this.timeParams.start = start;
            this.timeParams.end = end;
            this.fetchJzr(this.timeParams.req, this.radius, this.timeParams.start, this.timeParams.end, this.sma)
            // if (this.radius =="BTC") {
            //     //this.handelSonEthPrice()
            // }else{
            //     this.handelSonBtcPrice("BTC",true)
            // }

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

            //  if (this.radius == "ETH") {
            //     this.btcFlag = !flag;
            // } else {
            //     this.btcFlag = flag;
            // }
            this.btcFlag = flag;
            fetchBtcPrice("BTC", this.option.series[1], this.start, this.end, this.inChart, this, this.btcFlag)

        },
        //父级点击ETH价格按钮
        handelSonEthPrice(radius, flag) {
            //父级BTC默认是true 在ETH页面btcFlag 取反才能正常点击父级就渲染          
            // if (this.radius== "ETH") {
            //     this.ethFlag = !flag;
            // } else {
            //     this.ethFlag = flag;
            // }
            this.ethFlag = flag;
            this.$addStorageEvent(1, "ethFlag", JSON.stringify(this.ethFlag));
            fetchEthPrice("ETH", this.option.series[1], this.start, this.end, this.inChart, this, this.ethFlag)
        },
        //父级选择Sma
        handelSonSma(smaDataList) {
            this.sma = smaDataList
            this.fetchJzr(this.timeParams.req, this.radius, this.timeParams.start, this.timeParams.end, this.sma)
            this.$addStorageEvent(1, "sma", this.sma);

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

        },


    },
    beforeDestroy() {
        // console.log("销毁咯 清除定时器");
        clearInterval(this.timer)
        if (this.lengthTimer) {
            clearTimeout(this.lengthTimer)
        }
    },
}