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

export default {
    data() {
        return {
            lengthTimer:null,
            distributionEthLoading: 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++) {
                    //         if (i==0) {
                    //            res +=  `</br>${params[0].marker} ${params[0].seriesName} &nbsp&nbsp&nbsp&nbsp <span style="font-weight: bold">${params[0].value[1]}M</span>`
                    //         }else{
                    //             res +=  `</br>${params[i].marker} ${params[i].seriesName} &nbsp&nbsp&nbsp&nbsp <span style="font-weight: bold">${params[i].value[1]}</span>`
                    //         }

                    //     }


                    //     return res;
                    // },
                },
                legend: {
                    right: "100",
                    //处理legengd过长
                    // formatter: function (name) {

                    //     return echarts.format.truncateText(name, 100, '14px Microsoft Yahei', '…');
                    // },
                    tooltip: {
                        show: true
                    }
                },
                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).toFixed(2)}E`;
                                } else if (e > 1000000) {//百万
                                    value = `${(e / 1000000).toFixed(2)}M`;
                                } else if (e >= 10000) {//万
                                    value = `${(e / 10000).toFixed(2)}W`;
                                } else if (e < -1000000) {//百万
                                    value = `${(e / 1000000).toFixed(2)}M`;
                                } else if (e < -10000) {//万
                                    value = `${(e / 10000).toFixed(2)}W`;
                                }
                                else {
                                    value = e;
                                }
                                return value;
                            },
                        },
                        min: "dataMin",
                        max: "dataMax",
                    },
                    {
                        type: "value",
                        // boundaryGap: [0, "100%"],
                        show: false,
                        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,
                    },
                    {
                        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,
                    },
                    {
                        type: "value",
                        // boundaryGap: [0, "100%"],
                        min: "dataMin",
                        max: "dataMax",
                        show: true,
                    },
                    {
                        type: "value",
                        // boundaryGap: [0, "100%"],
                        min: "dataMin",
                        max: "dataMax",
                        show: true,
                    },
                    {
                        type: "value",
                        // boundaryGap: [0, "100%"],
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                ],
                dataZoom: [
                    {
                        type: "inside",
                        start: 0,
                        end: 100,
                    },
                    {
                        start: 0,
                        end: 100,
                    },
                ],
                series: [
                    {
                        name: "balance >= 0  and balance < 1",
                        type: "line",
                        smooth: false,
                        symbol: "circle",
                        showSymbol: false,
                        symbolSize: 5,
                        // areaStyle: {},
                        itemStyle: {
                            color: "#aa3550",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        yAxisIndex: 5,
                        lineStyle: {
                            //线条样式
                            color: "#aa3550",
                            width: "1",
                        },
                        data: [],
                    },
                    {
                        name: "balance >= 1  and balance < 10 ",
                        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: "1",
                        },
                        data: [],
                    },
                    {
                        name: "balance >= 10  and balance < 100",
                        type: "line",
                        smooth: false,
                        symbol: "circle",
                        showSymbol: false,
                        symbolSize: 5,
                        // areaStyle: {},
                        itemStyle: {
                            color: "#40200d",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        yAxisIndex: 1,
                        lineStyle: {
                            //线条样式
                            color: "#40200d",
                            width: "1",
                        },
                        data: [],
                    },
                    {
                        name: "balance >= 100  and balance < 1000",
                        type: "line",
                        smooth: false,
                        symbol: "circle",
                        showSymbol: false,
                        symbolSize: 5,
                        // areaStyle: {},
                        itemStyle: {
                            color: "#13a72c",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        yAxisIndex: 2,
                        lineStyle: {
                            //线条样式
                            color: "#13a72c",
                            width: "1",
                        },
                        data: [],
                    },
                    {
                        name: "balance >= 1000  and balance < 10000",
                        type: "line",
                        smooth: false,
                        symbol: "circle",
                        showSymbol: false,
                        symbolSize: 5,
                        // areaStyle: {},
                        itemStyle: {
                            color: "#595856",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        yAxisIndex: 3,
                        lineStyle: {
                            //线条样式
                            color: "#595856",
                            width: "1",
                        },
                        data: [],
                    },
                    {
                        name: "balance >= 10000",
                        type: "line",
                        smooth: false,
                        symbol: "circle",
                        showSymbol: false,
                        symbolSize: 5,
                        // areaStyle: {},
                        itemStyle: {
                            color: "#1d2088",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        yAxisIndex: 4,
                        lineStyle: {
                            //线条样式
                            color: "#1d2088",
                            width: "1",
                        },
                        data: [],
                    },

                    // {
                    //     name: "Price[BTC]",
                    //     type: "line",
                    //     smooth: false,
                    //     symbol: "circle",
                    //     symbolSize: 5,
                    //     showSymbol: false,
                    //     // areaStyle: {},
                    //     itemStyle: {
                    //         color: "#888888",
                    //         borderColor: "rgba(221,220,107,0.1)",
                    //         borderWidth: 12,
                    //     },
                    //     lineStyle: {
                    //         //线条样式
                    //         color: "#888888",
                    //         width: "1",
                    //     },
                    //     yAxisIndex: 8,
                    //     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: 9,
                        data: [],
                    },

                ],
            },
            switch3: "",
            oldY: null,
            btcFlag: null,
            ethFlag: null,
            fatherSmaData: [],
            start: "",
            end: "",
            params: {
                start: "",
                end: "",
                sma: ""
            },
            zoomStart: 0,
            zoomEnd: 0,


        }
    },
    mounted() {
        this.fetchDistributionEth()
        //禁用时间框
        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")

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

            this.myChart.setOption(this.option);
            chartsWidth("distributionEthBox", this);
            window.addEventListener("resize", () => {
                if (this.myChart) this.myChart.resize();
            });
        },
        async fetchDistributionEth(params) {
            this.distributionEthLoading = true
            const { data } = await getDistributionEth(params)

            if (data.code !== 200) {
                this.$message({
                    message: data.msg,
                    type: "error",
                    customClass: "messageClass",
                });
                return
            }

            //空数据处理
            let noData = emptyData(data.data, this.option.series, this.inCharts, this)
            if (noData) {
                this.distributionEthLoading = false
                return
            }
            let distributionEthData = data.data
            this.start = distributionEthData[0].date.split("T")[0]
            this.end = distributionEthData[distributionEthData.length - 1].date.split("T")[0]
            //  //添加水印
            this.option = handelWatermark(this.option)

            //根据渲染的数据时间渲染对应的价格线和移动平均线
            //   this.$nextTick(() => {               

            //       //渲染ETH
            //       if (this.ethFlag) {
            //         this.$addStorageEvent(1, "ethFlag", JSON.stringify(this.ethFlag));
            //         this.handelSonEthPrice("ETH", this.ethFlag)
            //     }
            //     //渲染BTC价格
            //     if (this.btcFlag) {
            //         this.$addStorageEvent(1, "btcFlag", JSON.stringify(this.btcFlag));
            //         this.handelSonBtcPrice("BTC", this.btcFlag)
            //     }



            // })
            this.handelSonEthPrice("ETH", true)
            let balance1ValueList = []
            let balance1kValueList = []
            let balance10ValueList = []
            let balance10kValueList = []
            let balance100ValueList = []
            let nozeroValueList = []


            distributionEthData.forEach(item => {

                balance1ValueList.push(Number(item.balance1.toFixed(2)))
                balance1kValueList.push(Number(item.balance1k.toFixed(2)))
                balance10ValueList.push(Number(item.balance10.toFixed(2)))
                balance10kValueList.push(Number(item.balance10k.toFixed(2)))
                balance100ValueList.push(Number(item.balance100.toFixed(2)))
                nozeroValueList.push(Number(item.nozero.toFixed(2)))


            })
            this.option.series[1].data = handelProfitrate(distributionEthData, balance1ValueList)
            this.option.series[2].data = handelProfitrate(distributionEthData, balance10ValueList)
            this.option.series[3].data = handelProfitrate(distributionEthData, balance100ValueList)
            this.option.series[4].data = handelProfitrate(distributionEthData, balance1kValueList)
            this.option.series[5].data = handelProfitrate(distributionEthData, balance10kValueList)
            this.option.series[0].data = handelProfitrate(distributionEthData, nozeroValueList)


            this.inCharts()

            this.distributionEthLoading = 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.params.start = start;
            this.params.end = end;
            this.fetchDistributionEth(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[6], this.start, this.end, this.inCharts, this, this.btcFlag)

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

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

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