import * as echarts from "echarts";
import { getCdd2} from "@/api/realTimeData"
import { handelCddData,emptyData,dataLength,handelBtcPrice ,chartsWidth, getDateArray, handelZoom, handelLineType, handelWatermark, handelSwitchs, fetchBtcPrice, fetchEthPrice } from "../../util/processingData"
export default {
    data() {
        return {
            lengthTimer:null,
            cddLoading: false,
            option: {
                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++) {
                    //         res += `</br>${params[i].marker} <span style="font-weight: bold">${params[i].value[1]}</span> ${params[i].seriesName}`;
                    //     }
                    //     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,
                    },
                    data:[]
                },
                yAxis: [
                    {
                        position: "left",
                        type: "value",
                        // min: `dataMin`,
                        // max: `dataMax`,
                        axisLabel: {
                            formatter: function (value) {
                                let data
                                if (value > 10000000) {
                                    data = `${(value / 10000000)} KW`
                                } else if (value > 1000000) {
                                    data = `${(value / 1000000)} M`
                                } else if (value / 10000) {
                                    data = `${(value / 10000)} W`
                                }
                                return data
                            }
                        }
                    },
                    {
                        position: "right",
                        // type: "log",
                        splitNumber: "5",
                        show: true,
                    },
                    {
                        position: "right",
                        // type: "log",
                        splitNumber: "5",
                        show: false,
                    },
                    {
                        position: "right",
                        // type: "log",
                        splitNumber: "5",
                        show: false,
                    },
                ],
                dataZoom: [
                    {
                        type: "inside",
                        start: 10,
                        end: 100,
                        maxSpan: 100,
                        minSpan: 2,
                        animation: false,
                    },
                    {
                        type: "slider",
                        start: 10,
                        end: 100,
                        // showDetail: false,
                    },
                ],
                series: [
                    {
                        name: "CDD",
                        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: "CDD(CE)",
                        type: "line",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#379f71",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        yAxisIndex: 0,
                        lineStyle: {
                            //线条样式
                            color: "#379f71",
                            width: "1",
                        },
                        data: [],
                    },
                    // {
                    //     name: "saCDD",
                    //     type: "line",
                    //     smooth: false, //线条是否圆滑
                    //     symbol: "circle",
                    //     symbolSize: 5,
                    //     showSymbol: false,
                    //     itemStyle: {
                    //         color: "#9a60af",
                    //         borderColor: "rgba(221,220,107,0.1)",
                    //         borderWidth: 12,
                    //     },
                    //     lineStyle: {
                    //         //线条样式
                    //         color: "#9a60af",
                    //         width: "1",
                    //     },
                    //     yAxisIndex: 2,
                    //     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,
                        labelLayout: {
                            hideOverlap: true,
                            moveOverlap: "shiftY"
                        },
                        data: [],
                        //绘制右侧Y轴
                        // markLine: {
                        //     symbol: ["none", "none"], //去掉箭头
                        //     itemStyle: {
                        //         normal: {
                        //             lineStyle: { type: "solid", color: "rgba(0,0,0,0.01)" },
                        //         },
                        //     },
                        //     labelLayout:{
                        //         hideOverlap:true,
                        //         moveOverlap:"shiftY"
                        //     },
                        //     //  lineStyle:{
                        //     //   opacity:0
                        //     // },
                        //     label: {
                        //         formatter: "{b}",
                        //         fontSize: 10,
                        //         color: "rgba(0,0,0,0.8)",
                        //         align: "left",
                        //     },
                        //     data: [
                        //         // {
                        //         //   name: "$0.40",
                        //         //   yAxis: 0.4,
                        //         // },
                        //         // {
                        //         //   name: "$0.80",
                        //         //   yAxis: 0.8,
                        //         // },
                        //         {
                        //           name: "$2",
                        //           yAxis: 2,
                        //           position: 'insideEndTop',
                        //         },
                        //         {
                        //           name: "$6",
                        //           yAxis: 6,
                        //           position: 'insideEndTop',
                        //         },
                        //         {
                        //           name: "$10",
                        //           yAxis: 10,
                        //           position: 'insideEndTop',
                        //         },
                        //         {
                        //             name: "$15",
                        //             yAxis: 15,

                        //           },
                        //           {
                        //             name: "$20",
                        //             yAxis: 20,

                        //           },
                        //           {
                        //             name: "$25",
                        //             yAxis: 25,

                        //           },
                        //           {
                        //             name: "$30",
                        //             yAxis: 30,

                        //           },
                        //           {
                        //             name: "$35",
                        //             yAxis: 35,
                        //           },
                        //         {
                        //           name: "$40",
                        //           yAxis: 40,

                        //         },
                        //         {
                        //           name: "$80",
                        //           yAxis: 80,

                        //         },
                        //         {
                        //           name: "$200",
                        //           yAxis: 200,

                        //         },
                        //         {
                        //           name: "$600",
                        //           yAxis: 600,
                        //         },
                        //         {
                        //             name: "$0K",
                        //             yAxis: 0,
                        //         },
                        //         {
                        //             name: "$5K",
                        //             yAxis: 5000,
                        //         },
                        //         {
                        //             name: "$10K",
                        //             yAxis: 10000,
                        //         },
                        //         {
                        //             name: "$15K",
                        //             yAxis: 15000,
                        //         },
                        //         {
                        //             name: "$20K",
                        //             yAxis: 20000,
                        //         },
                        //         {
                        //             name: "$25K",
                        //             yAxis: 25000,
                        //         },
                        //         {
                        //             name: "$30K",
                        //             yAxis: 30000,
                        //         },
                        //         {
                        //             name: "$50K",
                        //             yAxis: 50000,
                        //         },
                        //         {
                        //             name: "$70K",
                        //             yAxis: 70000,
                        //         },
                        //         {
                        //             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: [],
                    // },

                ],
            },
            option2: {
                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++) {
                    //         res += `</br>${params[i].marker} <span style="font-weight: bold">${params[i].value[1]}</span> ${params[i].seriesName}`;
                    //     }
                    //     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,
                    },
                    data:[]
                },
                yAxis: [
                    {
                        position: "left",
                        type: "value",
                        // min: `dataMin`,
                        // max: `dataMax`,
                        axisLabel: {
                            formatter: function (value) {
                                let data
                                if (value > 10000000) {
                                    data = `${(value / 10000000)} KW`
                                } else if (value > 1000000) {
                                    data = `${(value / 1000000)} M`
                                } else if (value / 10000) {
                                    data = `${(value / 10000)} W`
                                }
                                return data
                            }
                        }
                    },
                    {
                        position: "right",
                        // type: "log",
                        splitNumber: "5",
                        show: true,
                    },
                    {
                        position: "right",
                        // type: "log",
                        splitNumber: "5",
                        show: false,
                    },
                    {
                        position: "right",
                        // type: "log",
                        splitNumber: "5",
                        show: false,
                    },
                ],
                dataZoom: [
                    {
                        type: "inside",
                        start: 10,
                        end: 100,
                        maxSpan: 100,
                        minSpan: 2,
                        animation: false,
                    },
                    {
                        type: "slider",
                        start: 10,
                        end: 100,
                        // showDetail: false,
                    },
                ],
                series: [
                    {
                        name: "CDD",
                        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: "eaCDD",
                        type: "line",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#379f71",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        yAxisIndex: 0,
                        lineStyle: {
                            //线条样式
                            color: "#379f71",
                            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,
                        labelLayout: {
                            hideOverlap: true,
                            moveOverlap: "shiftY"
                        },
                        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: 2,
                    //     data: [],
                    // },

                ],
            },
            params: {
                req: "CDD",
                radius: "BTC",
                start: "",
                end: ""
            },
            btcPrice: [],
            priceTime: "",
            time: "",
            cddValueList: [],
            priceValueList: [],
            newPriceData: [],
            eacddValueList: [],
            sacddValueList: [],
            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.fetchCdd(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.fetchCdd(this.params.req, this.params.radius)
            }else{
                this.realTimeData = true
                this.fetchCdd2()
            }
        },
        inChart() {
            if (this.myChart == null) {
                this.myChart = echarts.init(document.getElementById("cddBox"));
            }
            this.option = handelZoom(this.myChart, this.option, this, this.zoomStart, this.zoomEnd)

            this.myChart.setOption(this.option);
            chartsWidth("cddBox", this);
            window.addEventListener("resize", () => {
                if (this.myChart) this.myChart.resize();
            });
        },

        inChart2() {
            if (this.myChart2 == null) {
                this.myChart2 = echarts.init(document.getElementById("cddBox"));
            }
            this.option2 = handelZoom(this.myChart2, this.option2, this, this.zoomStart, this.zoomEnd)

            this.myChart2.setOption(this.option2);
            chartsWidth("cddBox", this);
            window.addEventListener("resize", () => {
                if (this.myChart2) this.myChart2.resize();
            });
        },
        async fetchCdd2(){
            this.cddLoading = true
            const { data } = await getCdd2()
            console.log(Cdd2Data,"几佛教覅");
            let Cdd2Data = data.data
            if (!Cdd2Data) {
                this.cddLoading = false
                this.option.series.forEach(item => {
                    item.data =[]
                })
                this.inChart()
                return
            }
            //空数据处理
            let noData = emptyData(data.data, this.option.series, this.inCharts, this)
            if (noData) {
                this.cddLoading = false
                return
            }

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

            this.option2.xAxis.data = xAxisData
            this.option2.series[0].data = cdd
            this.option2.series[1].data = eacdd
            this.option2.series[2].data = price

            this.myChart.clear()
            this.inChart2()
            this.cddLoading = false

        },
        //请求渲染数据
        async fetchCdd(req, radius, start, end, sma) {
            this.cddLoading = true
            const { data } = await this.$API.getMa370(req, radius, start, end, sma)
            this.cddData = data.data
            //空数据处理
            let noData = emptyData(data.data, this.option.series, this.inCharts, this)
            if (noData) {
                this.cddLoading = false
                return
            }
            this.start = this.cddData[0].date.split("T")[0]
            this.end = this.cddData[this.cddData.length - 1].date.split("T")[0]

            const price = await this.$API.getBtcPrice2(radius,  this.start, this.end );
           
            let priceData = price.data.data
            //添加水印
            this.option = handelWatermark(this.option)

           
            let priceList=[]
            priceData.forEach(item=>{
                priceList.push(item.value.toFixed(2))
            })
            let cddValueList = []
            let eacddValueList = []
            let sacddValueList = []
            let timeList=[]
         
            this.cddData.forEach((item,index)=> {
             
                // console.log(item.date);
                cddValueList.push(Number(item.cdd.toFixed(2)))
                eacddValueList.push(Number(item.eacdd.toFixed(2)))
                sacddValueList.push(Number(item.sacdd.toFixed(2)))
                timeList.push(item.date.split(`T`)[0])
                // if (priceData[index].value) {
                //     priceList.push(priceData[index].value) 
                // }

                // priceList.push(priceData[index].value) 



            })
            this.option.xAxis.data= timeList
            this.option.series[0].data=cddValueList
            this.option.series[1].data=eacddValueList
            // this.option.series[2].data=sacddValueList
            if (priceList[0] !== undefined) { 
                this.option.series[2].data=priceList
            }
            if (this.myChart2) {
                this.myChart2.clear()
            }
           
            this.inChart()
          
            this.cddLoading = false

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

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

            }, 10000)

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

        },

        //父级时间
        handelSonTime(start, end) {
            this.params.start = start;
            this.params.end = end;
            this.fetchCdd(this.params.req, this.params.radius, this.params.start, this.params.end, this.sma)
        },
        //父级点击BTC价格按钮
        handelSonBtcPrice(radius, flag) {
            this.btcFlag = flag
            fetchBtcPrice(radius, this.option.series[3], this.start, this.end, this.inChart, 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.inChart, this, this.ethFlag)
        },
        //父级选择Sma
        handelSonSma(smaDataList) {

            this.sma = smaDataList

            this.fetchCdd(this.params.req, this.params.radius, this.params.start, this.params.end, this.sma)

            this.$addStorageEvent(1, "sma", this.sma);
            this.realTimeData = false

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

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