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

export default {
    data() {
        return {
            lengthTimer: null,
            dormancyLoading: false,
            params: {
                req: "dormancy",
                radius: "btc"
            },
            dormancyData: [],
            option: {
                tooltip: {
                    trigger: "axis",
                    //解决tooltip显示不全问题1 
                    confine: true,
                },
                legend: {
                    right: "100",
                    //处理legengd过长
                    formatter: function (name) {

                        return echarts.format.truncateText(name, 100, '14px Microsoft Yahei', '…');
                    },
                    // data:[`sopr`,'asopr','easopr','lthsopr','sthsopr',],
                    // selected:{
                    //     'asopr': false,
                    //     'easopr': false,
                    //     'lthsopr': false,
                    //     'sthsopr': false,                      
                    // }
                },
                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 > 1000000) {
                        //       value = e / 100000;
                        //     } else if (e > 100000) {
                        //       value = e / 1000;
                        //     } else {
                        //       value = e / 100;
                        //     }
                        //     return value;
                        //   },
                        // },
                    },
                    {
                        type: "value",
                        // boundaryGap: [0, "100%"],
                        show: true,
                        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,
                    },
                ],
                dataZoom: [
                    {
                        type: "inside",
                        start: 20,
                        end: 100,
                    },
                    {
                        start: 0,
                        end: 100,
                    },
                ],
                series: [
                    {
                        name: "Dormancy",
                        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: "saDormancy",
                    //     type: "line",
                    //     smooth: false,
                    //     symbol: "circle",
                    //     showSymbol: false,
                    //     symbolSize: 5,
                    //     // areaStyle: {},
                    //     itemStyle: {
                    //         color: "#3ba173",
                    //         borderColor: "rgba(221,220,107,0.1)",
                    //         borderWidth: 12,
                    //     },
                    //     lineStyle: {
                    //         //线条样式
                    //         color: "#3ba173",
                    //         width: "1",
                    //     },
                    //     yAxisIndex: 1,
                    //     data: [],
                    // },
                    {
                        name: "Dormancy(CE)",
                        type: "line",
                        smooth: false,
                        symbol: "circle",
                        showSymbol: false,
                        symbolSize: 5,
                        // areaStyle: {},
                        itemStyle: {
                            color: "#9a60b4",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#9a60b4",
                            width: "1",
                        },
                        yAxisIndex: 0,
                        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: [],
                        //绘制右侧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: "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: [],
                    // },

                ],
            },
            option2: {
                tooltip: {
                    trigger: "axis",
                    //解决tooltip显示不全问题1 
                    confine: true,
                },
                legend: {
                    right: "100",
                    //处理legengd过长
                    formatter: function (name) {

                        return echarts.format.truncateText(name, 100, '14px Microsoft Yahei', '…');
                    },
                    // data:[`sopr`,'asopr','easopr','lthsopr','sthsopr',],
                    // selected:{
                    //     'asopr': false,
                    //     'easopr': false,
                    //     'lthsopr': false,
                    //     'sthsopr': false,                      
                    // }
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    //   axisLabel: {
                    //     formatter: `{yyyy}-{MM}-{dd}`,
                    //   },
                    data: []
                },
                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;
                        //   },
                        // },
                    },
                    {
                        type: "value",
                        // boundaryGap: [0, "100%"],
                        show: true,
                        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,
                    },
                ],
                dataZoom: [
                    {
                        type: "inside",
                        start: 20,
                        end: 100,
                    },
                    {
                        start: 0,
                        end: 100,
                    },
                ],
                series: [
                    {
                        name: "Dormancy",
                        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: "eaDormancy",
                        type: "line",
                        smooth: false,
                        symbol: "circle",
                        showSymbol: false,
                        symbolSize: 5,
                        // areaStyle: {},
                        itemStyle: {
                            color: "#9a60b4",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#9a60b4",
                            width: "1",
                        },
                        yAxisIndex: 0,
                        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: [],
                        //绘制右侧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: "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: [],
                    // },

                ],
            },
            parmesTime: {
                start: "",
                end: ""
            },
            switch3: "",
            btcFlag: null,
            ethFlag: null,
            fatherSmaData: [],
            start: "",
            end: "",
            sma: "",
            zoomStart: 0,
            zoomEnd: 0,
            dataSelection: [
                {
                    value: "1d",
                    label: "home.day1",
                    disabled: false,
                    authority: "guest",
                    grade: 1,
                },
                {
                    value: "realTime",
                    label: "home.realTimeData",
                    disabled: false,
                    authority: "vip",
                    grade: 4,
                },
            ],
            realTimeData: "",
        }
    },
    mounted() {
        this.fetchDormancy(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: {
        handleSelect(activeValue) {
            if (activeValue == "1d") {
                this.realTimeData = false
                this.fetchDormancy(this.params.req, this.params.radius)
            } else {
                this.realTimeData = true
                this.fetchDormancy2()
            }
        },
        //初始化图表
        inCharts() {
            if (this.myChart == null) {
                this.myChart = echarts.init(document.getElementById("dormancyBox"));
            }
            this.option = handelZoom(this.myChart, this.option, this, this.zoomStart, this.zoomEnd)

            this.myChart.setOption(this.option);
            chartsWidth("dormancyBox", this);
            window.addEventListener("resize", () => {
                if (this.myChart) this.myChart.resize();
            });
        },
        //初始化图表
        inCharts2() {
            if (this.myChart2 == null) {
                this.myChart2 = echarts.init(document.getElementById("dormancyBox"));
            }
            this.option2 = handelZoom(this.myChart2, this.option2, this, this.zoomStart, this.zoomEnd)

            this.myChart2.setOption(this.option2);
            chartsWidth("dormancyBox", this);
            window.addEventListener("resize", () => {
                if (this.myChart2) this.myChart2.resize();
            });
        },
        //实时数据
        async fetchDormancy2() {
            const { data } = await getDormancy2()
            let Dormancy2Data = data.data
            //空数据处理
            let noData = emptyData(data.data, this.option.series, this.inCharts, this)
            if (noData) {
                this.dormancyLoading = false
                return
            }

            this.option2 = handelWatermark(this.option2)
            let dormancy =[]
            let eadormancy =[]
            let xAxisData=[]
            let price=[]
            Dormancy2Data.forEach(item=>{
               item.date=`${item.date.split("T")[0]} ${
                   item.date.split("T")[1].split(`.`)[0]
                 } `;
                 dormancy.push(item.dormancy.toFixed(2))
                 eadormancy.push(item.eadormancy.toFixed(2))
               xAxisData.push(item.date)
               price.push(item.price.toFixed(2))
            })

            this.option2.xAxis.data = xAxisData
            this.option2.series[0].data = dormancy
            this.option2.series[1].data = eadormancy
            this.option2.series[2].data = price
            this.myChart.clear()
            console.log();
            this.inCharts2()
        },

        async fetchDormancy(req, radius, start, end, sma) {
            this.dormancyLoading = true
            const { data } = await this.$API.getDormancy(req, radius, start, end, sma)
            this.dormancyData = data.data
            //空数据处理
            let noData = emptyData(data.data, this.option.series, this.inCharts, this)
            if (noData) {
                this.dormancyLoading = false
                return
            }
            this.start = this.dormancyData[0].date.split("T")[0]
            this.end = this.dormancyData[this.dormancyData.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)))
            })
            //添加水印
            this.option = handelWatermark(this.option)
            // //根据渲染的数据时间渲染对应的价格线和移动平均线
            // this.$nextTick(() => {
            //     //移动平均线没值 才渲染正常价格数据 
            //     if (this.start && !this.fatherSmaData[0]) {
            //         this.handelSonBtcPrice("BTC", true)
            //     }
            //     //点击时间 移动平均线有值 就渲染查询移动平均线
            //     if (this.fatherSmaData[0] && this.start) {
            //         this.handelSonSma(this.fatherSmaData, this.start, this.end)
            //     }
            //     //渲染ETH
            //     if (this.ethFlag) {
            //         this.$addStorageEvent(1, "ethFlag", JSON.stringify(this.ethFlag));
            //         this.handelSonEthPrice("ETH", this.ethFlag)
            //     }
            // })


            let dormancyValueList = []
            let eadormancyValueList = []
            let sadormancyValueList = []
            let xAxisData = []
            this.dormancyData.forEach(item => {
                xAxisData.push(item.date.split("T")[0])
                dormancyValueList.push(Number(item.dormancy.toFixed(2)))
                eadormancyValueList.push(Number(item.eadormancy.toFixed(2)))
                sadormancyValueList.push(Number(item.sadormancy).toFixed(6))

            })
            this.option.xAxis.data = xAxisData
            this.option.series[0].data = dormancyValueList
            // this.option.series[1].data = sadormancyValueList
            this.option.series[1].data = eadormancyValueList
            this.option.series[2].data = priceData

            // this.option.series[0].data = handelProfitrate(this.dormancyData, dormancyValueList)
            // this.option.series[1].data = handelProfitrate(this.dormancyData, sadormancyValueList)
            // this.option.series[2].data = handelProfitrate(this.dormancyData, eadormancyValueList)

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

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

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

            this.sma = smaDataList

            this.fetchDormancy(this.params.req, this.params.radius, this.parmesTime.start, this.parmesTime.end, this.sma)

            this.$addStorageEvent(1, "sma", this.sma);

            this.realTimeData = false

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

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