import * as echarts from "echarts";
import { MoneyStockMeasures } from "../../api/pages"
import { chartsWidth, emptyData, handelLineType, handelZoom, handelWatermark, handelSwitchs, fetchBtcPrice, fetchEthPrice, handelSmaData, getDateArray } from "../../util/processingData"

export default {
    data() {
        return {
            MoneyStockMeasuresLoading: false,
            option: {
                // tooltip: {
                //     trigger: "axis",
                //     //解决tooltip显示不全问题1 
                //     confine: true,

                //     formatter: function (params) {
                //         var res = params[0].axisValueLabel;

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


                //         }


                //         return res;
                //     },

                // },
                // legend: {
                //     right: "100",
                    
                    
                // },
                // 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 > 100000000) {
                //                     value = `${e / 100000000}E`;
                //                 } else if (e > 1000000) {//百万
                //                     value = `${e / 1000000}M`;
                //                 } else if (e >= 10000) {//万
                //                     value = `${e / 10000}W`;
                //                 } else if (e < -1000000) {//百万
                //                     value = `${e / 1000000}M`;
                //                 } else if (e < -10000) {//万
                //                     value = `${e / 10000}W`;
                //                 }
                //                 else {
                //                     value = e;
                //                 }
                //                 return value;
                //             },
                //         },
                //         min: "dataMin",
                //         max: "dataMax",
                //     },
                //     {
                //         type: "value",
                //         // boundaryGap: [0, "100%"],
                //         show: true,
                //         min: "dataMin",
                //         max: "dataMax",
                //         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: 0,
                //         end: 100,
                //     },
                //     {
                //         start: 0,
                //         end: 100,
                //     },
                // ],
                // series: [
                //     {
                //         name: "M1",
                //         type: "line",
                //         smooth: false,
                //         symbol: "circle",
                //         showSymbol: false,
                //         symbolSize: 5,
                //         // areaStyle: {},
                //         itemStyle: {
                //             color: "#f7864c",
                //             borderColor: "rgba(221,220,107,0.1)",
                //             borderWidth: 12,
                //         },
                //         yAxisIndex: 0,
                //         lineStyle: {
                //             //线条样式
                //             color: "#f7864c",
                //             width: "2",
                //         },
                //         data: [],
                //     },
                //     {
                //         name: "M2",
                //         type: "line",
                //         smooth: false,
                //         symbol: "circle",
                //         showSymbol: false,
                //         symbolSize: 5,
                //         // areaStyle: {},
                //         itemStyle: {
                //             color: "#e43961",
                //             borderColor: "rgba(221,220,107,0.1)",
                //             borderWidth: 12,
                //         },
                //         yAxisIndex: 0,
                //         lineStyle: {
                //             //线条样式
                //             color: "#e43961",
                //             width: "2",
                //         },
                //         data: [],
                //     },
                //     {
                //         name: "Mb",
                //         type: "line",
                //         smooth: false,
                //         symbol: "circle",
                //         showSymbol: false,
                //         symbolSize: 5,
                //         // areaStyle: {},
                //         itemStyle: {
                //             color: "#383d71",
                //             borderColor: "rgba(221,220,107,0.1)",
                //             borderWidth: 12,
                //         },
                //         yAxisIndex: 0,
                //         lineStyle: {
                //             //线条样式
                //             color: "#383d71",
                //             width: "2",
                //         },
                //         data: [],
                //     },

                // ],
            },
            switch3: "",
            oldY: null,
            btcFlag: null,
            ethFlag: null,
            fatherSmaData: [],
            start: "",
            end: "",
            params: {
                start: "",
                end: "",
                ifAdjusted: 0
            },
            zoomStart: 0,
            zoomEnd: 0,
            choiceList: [{
                value: 0,
                label: "home.Unadjusted",
            }, {//经过季节性调整
                value: 1,
                label: "home.Adjusted",
            },],
            isactive: 0,


        }
    },
    mounted() {
        this.fetchMoneyStockMeasuresIndicator(this.params)
        //禁用时间框
        // this.$addStorageEvent(1, "timeDisable", true);
        // this.switch3 = handelSwitchs(this.option, this.switch3)
        this.oldY = this.option.yAxis

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

        })
        chartsWidth("MoneyStockMeasuresBox", this);
       
    },
    methods: {
        //初始化图表
        inCharts() {
            if (this.myChart == null) {
                this.myChart = echarts.init(document.getElementById("MoneyStockMeasuresBox"));
            }
            this.option = handelZoom(this.myChart, this.option, this, this.zoomStart, this.zoomEnd)

            this.myChart.setOption(this.option);
            chartsWidth("MoneyStockMeasuresBox", this);
            window.addEventListener("resize", () => {
                if (this.myChart) this.myChart.resize();
            });
        },
        async fetchMoneyStockMeasuresIndicator(params) {
            this.MoneyStockMeasuresLoading = true
            let timer
            if (timer) {
                clearTimeout(timer)
            }
            const { data } = await MoneyStockMeasures(params)
            let MoneyStockMeasuresData = data.data
            var option1
            var option2
            //空数据处理
            if (MoneyStockMeasuresData.length == 0) {
                this.$message({
                    message: this.$t(`home.NoData`),
                    type: 'warning'
                  });
                  if ( this.myChart) {
                    this.myChart.dispose();
                }

                  this.MoneyStockMeasuresLoading = false
                  return
            }



          
            let m1ValueList = []
            let m2ValueList = []
            let mbValueList = []
            let timeList = []
            MoneyStockMeasuresData.forEach(item => {
                m1ValueList.push(Number(item.m1.toFixed(2)))
                m2ValueList.push(Number(item.m2.toFixed(2)))
                if (item.mb) {
                    mbValueList.push(Number(item.mb.toFixed(2)))
                }

                item.date = `${item.date.split("T")[0].split("-")[0]}-${item.date.split("T")[0].split("-")[1]}`
                timeList.push(item.date)

            })           
            //有MB数据的情况 显示legend
            if (MoneyStockMeasuresData[0].mb) {
                if ( this.myChart) {
                    this.myChart.dispose();
                }
              
                this.myChart = echarts.init(document.getElementById("MoneyStockMeasuresBox"));
              
                option1 = {
                    tooltip: {
                        trigger: "axis",
                        //解决tooltip显示不全问题1 
                        confine: true,
    
                        formatter: function (params) {
                            var res = params[0].axisValueLabel;
    
                            for (let i = 0; i < params.length; i++) {
                                res += `</br>${params[i].marker} ${params[i].seriesName} &nbsp&nbsp&nbsp&nbsp <span style="font-weight: bold">$${params[i].value} </span>`
    
    
                            }
    
    
                            return res;
                        },
    
                    },
                    legend: {
                        right: "100",
                        
                        
                    },
                    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 > 100000000) {
                                        value = `${e / 100000000}E`;
                                    } else if (e > 1000000) {//百万
                                        value = `${e / 1000000}M`;
                                    } else if (e >= 10000) {//万
                                        value = `${e / 10000}W`;
                                    } else if (e < -1000000) {//百万
                                        value = `${e / 1000000}M`;
                                    } else if (e < -10000) {//万
                                        value = `${e / 10000}W`;
                                    }
                                    else {
                                        value = e;
                                    }
                                    return value;
                                },
                            },
                            min: "dataMin",
                            max: "dataMax",
                        },
                        {
                            type: "value",
                            // boundaryGap: [0, "100%"],
                            show: true,
                            min: "dataMin",
                            max: "dataMax",
                            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: 0,
                            end: 100,
                        },
                        {
                            start: 0,
                            end: 100,
                        },
                    ],
                    series: [
                        {
                            name: "M1",
                            type: "line",
                            smooth: false,
                            symbol: "circle",
                            showSymbol: false,
                            symbolSize: 5,
                            // areaStyle: {},
                            itemStyle: {
                                color: "#f7864c",
                                borderColor: "rgba(221,220,107,0.1)",
                                borderWidth: 12,
                            },
                            yAxisIndex: 0,
                            lineStyle: {
                                //线条样式
                                color: "#f7864c",
                                width: "2",
                            },
                            data: [],
                        },
                        {
                            name: "M2",
                            type: "line",
                            smooth: false,
                            symbol: "circle",
                            showSymbol: false,
                            symbolSize: 5,
                            // areaStyle: {},
                            itemStyle: {
                                color: "#e43961",
                                borderColor: "rgba(221,220,107,0.1)",
                                borderWidth: 12,
                            },
                            yAxisIndex: 0,
                            lineStyle: {
                                //线条样式
                                color: "#e43961",
                                width: "2",
                            },
                            data: [],
                        },
                        {
                            name: "Mb",
                            type: "line",
                            smooth: false,
                            symbol: "circle",
                            showSymbol: false,
                            symbolSize: 5,
                            // areaStyle: {},
                            itemStyle: {
                                color: "#383d71",
                                borderColor: "rgba(221,220,107,0.1)",
                                borderWidth: 12,
                            },
                            yAxisIndex: 0,
                            lineStyle: {
                                //线条样式
                                color: "#383d71",
                                width: "2",
                            },
                            data: [],
                        },
    
                    ],
                }
                option1.series[0].data = m1ValueList
                option1.series[1].data = m2ValueList             
                option1.series[2].data = mbValueList
                option1.xAxis.data = timeList
                option1=  handelWatermark(option1)  //添加水印
                this.myChart.setOption(option1);
             
            }else if (!MoneyStockMeasuresData[0].mb) {
                if ( this.myChart) {
                    this.myChart.dispose();
                }
               
                this.myChart = echarts.init(document.getElementById("MoneyStockMeasuresBox"));
  
                option2 = {
                    tooltip: {
                        trigger: "axis",
                        //解决tooltip显示不全问题1 
                        confine: true,
    
                        formatter: function (params) {
                            var res = params[0].axisValueLabel;
    
                            for (let i = 0; i < params.length; i++) {
                                res += `</br>${params[i].marker} ${params[i].seriesName} &nbsp&nbsp&nbsp&nbsp <span style="font-weight: bold">$${params[i].value} </span>`
    
    
                            }
    
    
                            return res;
                        },
    
                    },
                    legend: {
                        right: "100",
                        selected: {
                            "Mb": 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 > 100000000) {
                                        value = `${e / 100000000}E`;
                                    } else if (e > 1000000) {//百万
                                        value = `${e / 1000000}M`;
                                    } else if (e >= 10000) {//万
                                        value = `${e / 10000}W`;
                                    } else if (e < -1000000) {//百万
                                        value = `${e / 1000000}M`;
                                    } else if (e < -10000) {//万
                                        value = `${e / 10000}W`;
                                    }
                                    else {
                                        value = e;
                                    }
                                    return value;
                                },
                            },
                            min: "dataMin",
                            max: "dataMax",
                        },
                        {
                            type: "value",
                            // boundaryGap: [0, "100%"],
                            show: true,
                            min: "dataMin",
                            max: "dataMax",
                            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: 0,
                            end: 100,
                        },
                        {
                            start: 0,
                            end: 100,
                        },
                    ],
                    series: [
                        {
                            name: "M1",
                            type: "line",
                            smooth: false,
                            symbol: "circle",
                            showSymbol: false,
                            symbolSize: 5,
                            // areaStyle: {},
                            itemStyle: {
                                color: "#f7864c",
                                borderColor: "rgba(221,220,107,0.1)",
                                borderWidth: 12,
                            },
                            yAxisIndex: 0,
                            lineStyle: {
                                //线条样式
                                color: "#f7864c",
                                width: "2",
                            },
                            data: [],
                        },
                        {
                            name: "M2",
                            type: "line",
                            smooth: false,
                            symbol: "circle",
                            showSymbol: false,
                            symbolSize: 5,
                            // areaStyle: {},
                            itemStyle: {
                                color: "#e43961",
                                borderColor: "rgba(221,220,107,0.1)",
                                borderWidth: 12,
                            },
                            yAxisIndex: 0,
                            lineStyle: {
                                //线条样式
                                color: "#e43961",
                                width: "2",
                            },
                            data: [],
                        },
                      
    
                    ],
                }
                option2.series[0].data = m1ValueList
                option2.series[1].data = m2ValueList             
                option2.xAxis.data = timeList
                option2=  handelWatermark(option2)  //添加水印
                this.myChart.setOption(option2);
               
            }


            timer = setTimeout(() => {
                  //添加水印
            //   this.option = handelWatermark(this.option)
           
 
            //   this.inCharts()
                this.MoneyStockMeasuresLoading = false
            }, 1000)

        },

        //接收Home传的时间handelParmesTime
        handelSonTime(start, end) {
            this.params.start = start;
            this.params.end = end;
            this.fetchMoneyStockMeasuresIndicator(this.params)
        },
        //点击对数/线性按钮切换
        handelLineSwitch() {
            this.option = handelLineType(this.option, this.oldY)
            this.switch3 = handelSwitchs(this.option, this.switch3)
            this.myChart.setOption(this.option);

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

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

            this.params.sma = smaDataList
            this.fetchMoneyStockMeasuresIndicator(this.params)
            this.$addStorageEvent(1, "sma", smaDataList);
            // this.fatherSmaData = smaDataList
            // handelSmaData(smaDataList, this.option.series[2], this.inCharts,this.start, this.end,)

        },

        handelZone(value, index) {
            this.params.ifAdjusted = value
            this.isactive = index
            // console.log(value, index,"尽快if就覅");


           

            this.fetchMoneyStockMeasuresIndicator(this.params)

        },
    }
}