import { watch } from "vue";
import { getCoinInfo, getPoolPower, getMinerCount, getLuck, getBlockInfo, getNetPower, getParam } from "../../api/home"
import { line } from "../../utils/echarts";
import * as echarts from "echarts";
import { Debounce, throttle } from "../../utils/publicMethods";

export default {

    data() {
        return {
            activeName: "second",

            option: {
                tooltip: {
                    trigger: "axis",
                    //解决tooltip显示不全问题1 
                    confine: true,

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


                        for (let i = 0; i <= params.length - 1; i++) {

                            if (params[i].seriesName == "Currency Price" || params[i].seriesName == "币价") {
                                res += `</br>${params[i].marker} ${params[i].seriesName} &nbsp&nbsp&nbsp&nbsp <span style="font-weight: bold">${params[i].value} USD</span>`
                            } else {
                                res += `</br>${params[i].marker} ${params[i].seriesName} &nbsp&nbsp&nbsp&nbsp <span style="font-weight: bold">${params[i].value}</span>`
                            }

                        }



                        return res;
                    },

                },
                legend: {
                    right: "30",

                },
                // grid: {//解决Y轴显示不全
                //     left: "10%",//10%
                //     containLabel: true
                // },
                grid: {
                    left: "10%",
                    right: "15%",
                    top: "20%",
                    bottom: "12%",
                },


                xAxis: {
                    // type: "time",
                    boundaryGap: false,

                    // axisTick: {
                    //     //去除刻度
                    //     show: false,
                    // },
                    // axisLine: {
                    //     //去除轴线
                    //     show: false,
                    // },
                    data: []
                },
                yAxis: [
                    {
                        // position: "left",
                        type: "value",
                        name: "GH/s",
                        nameTextStyle: {

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

                        position: "right",
                        // type: "log",
                        // splitNumber: "5",
                        show: true,
                        // min: 0,
                        // max: this.maxValue,
                        splitLine: {//不显示右侧Y轴横线
                            show: false
                        },
                        name: "USD",
                        nameTextStyle: {

                            padding: [0, 0, 0, 40],
                        }
                    },

                ],
                dataZoom: [
                    {
                        type: "inside",
                        start: 0,
                        end: 100,
                        maxSpan: 100,
                        minSpan: 2,
                        animation: false,
                    },
                    {
                        type: "inside",//slider
                        start: 0,
                        end: 100,
                        // showDetail: false,
                    },
                ],
                series: [
                    {
                        name: "Computational power",
                        type: "line",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#5721E4",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#5721E4",
                            width: "2",
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgb(210,195,234)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgb(255, 255, 255)'
                                }
                            ])
                        },
                        zlevel: 1, z: 1,
                        data: [],
                    },
                    {
                        name: "Refusal rate",
                        type: "line",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#FE2E74",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#FE2E74",
                            width: "2",
                        },
                        areaStyle: {
                            origin: 'start',//颜色始终显示在线条下
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgb(252,220,233)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgb(255, 255, 255)'
                                }
                            ])
                        },
                        data: [],
                        yAxisIndex: 1,
                        zlevel: 2, z: 2,
                    },



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

                        for (let i = 0; i <= params.length - 1; i++) {

                            if (params[i].seriesName == "Currency Price" || params[i].seriesName == "币价") {
                                res += `</br>${params[i].marker} ${params[i].seriesName} &nbsp&nbsp&nbsp&nbsp <span style="font-weight: bold">${params[i].value} USD</span>`
                            } else {
                                res += `</br>${params[i].marker} ${params[i].seriesName} &nbsp&nbsp&nbsp&nbsp <span style="font-weight: bold">${params[i].value}</span>`
                            }

                        }

                        return res;
                    },
                    // axisPointer: {
                    //     animation: false,
                    //     snap: true,
                    //     label: {
                    //         precision: 2, //坐标轴保留的位数
                    //     },
                    //     type: "cross", //cross shadow
                    //     crossStyle: {
                    //         //十字轴横线
                    //         // opacity: "0",
                    //         width: 0.5,
                    //     },
                    //     lineStyle: {
                    //         // opacity: 0,
                    //     },
                    // },
                },
                grid: {
                    left: "10%",
                    right: "15%",
                    top: "20%",
                    bottom: "12%",
                },

                xAxis: {
                    // type: "time",
                    boundaryGap: false,

                    axisTick: {
                        //去除刻度
                        show: false,
                    },
                    axisLine: {
                        //去除轴线
                        show: false,
                    },
                    data: []
                },
                yAxis: [
                    {
                        position: "left",
                        type: "value",
                        // min: `dataMin`,
                        // max: `dataMax`,
                        name: "GH/s",
                        nameTextStyle: {
                            padding: [0, 0, 0, -40],
                        },
                        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 value
                            }
                        }
                    },
                    {
                        position: "right",
                        // type: "log",
                        // splitNumber: "5",
                        show: true,
                        // min: 0,
                        // max: this.maxValue,
                        splitLine: {//不显示右侧Y轴横线
                            show: false
                        },
                        name: "USD",
                        nameTextStyle: {

                            padding: [0, 0, 0, 40],
                        }
                    },

                ],
                dataZoom: [
                    {
                        type: "inside",
                        start: 0,
                        end: 100,
                        maxSpan: 100,
                        minSpan: 2,
                        animation: false,
                    },
                    {
                        type: "inside",//slider
                        start: 0,
                        end: 100,
                        // showDetail: false,
                    },
                ],
                series: [
                    {
                        name: "全网算力",
                        type: "line",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#5721E4",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#5721E4",
                            width: "2",
                        },
                        areaStyle: {
                            origin: 'start',
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgb(210,195,234)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgb(255, 255, 255)'
                                }
                            ])
                        },

                        data: [],
                    },
                    {
                        name: "币价",
                        type: "line",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#FE2E74",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#FE2E74",
                            width: "2",
                        },
                        // rgb(253,64,128)
                        areaStyle: {
                            origin: 'start',//颜色始终显示在线条下
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgb(252,220,233)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgb(255, 255, 255)'
                                }
                            ])
                        },
                        data: [],
                        yAxisIndex: 1,
                        zlevel: 2, z: 2,
                    },





                ],
            },
            CountOption: { ...line },
            powerDialogVisible: false,
            minerDialogVisible: false,
            currentPage: 1,
            currency: "nexa",
            currencyPath: `${this.$baseApi}img/nexa.png`,
            currencyList: [
                {
                    path: "nexaAccess",
                    value: "nexa",
                    label: "nexa",
                    img: require("../../assets/img/currency-nexa.png"),
                    imgUrl: `${this.$baseApi}img/nexa.png`,
                    name: "course.NEXAcourse",
                    show: true,
                    amount: 10000,

                },
                {
                    path: "grsAccess",
                    value: "grs",
                    label: "grs",
                    img: require("../../assets/img/currency/grs.svg"),
                    imgUrl: `${this.$baseApi}img/grs.svg`,
                    name: "course.GRScourse",
                    show: true,
                    amount: 1,

                },
                {
                    path: "monaAccess",
                    value: "mona",
                    label: "mona",
                    img: require("../../assets/img/currency/mona.svg"),
                    imgUrl: `${this.$baseApi}img/mona.svg`,
                    name: "course.MONAcourse",
                    show: true,
                    amount: 1,

                },
                {
                    path: "dgbsAccess",
                    value: "dgbs",
                    // label: "dgb-skein-pool1",
                    label: "dgb(skein)",
                    img: require("../../assets/img/currency/DGB.svg"),
                    imgUrl: `${this.$baseApi}img/dgb.svg`,
                    name: "course.dgbsCourse",
                    show: true,
                    amount: 1,
                },
                {
                    path: "dgbqAccess",
                    value: "dgbq",
                    // label: "dgb(qubit-pool1)",
                    label: "dgb(qubit)",
                    img: require("../../assets/img/currency/DGB.svg"),
                    imgUrl: `${this.$baseApi}img/dgb.svg`,
                    name: "course.dgbqCourse",
                    show: true,
                    amount: 1,
                },
                {
                    path: "dgboAccess",
                    value: "dgbo",
                    // label: "dgb-odocrypt-pool1",
                    label: "dgb(odocrypt)",
                    img: require("../../assets/img/currency/DGB.svg"),
                    imgUrl: `${this.$baseApi}img/dgb.svg`,
                    name: "course.dgboCourse",
                    show: true,
                    amount: 1,
                },
                {
                    path: "rxdAccess",
                    value: "rxd",
                    label: "radiant(rxd)",
                    img: require("../../assets/img/currency/rxd.png"),
                    imgUrl: `${this.$baseApi}img/rxd.png`,
                    name: "course.RXDcourse",
                    show: true,
                    amount: 100,

                },
                {
                    path: "enxAccess",
                    value: "enx",
                    label: "Entropyx(enx)",
                    img: require("../../assets/img/currency/enx.svg"),
                    imgUrl: `${this.$baseApi}img/enx.svg`,
                    name: "course.ENXcourse",
                    show: true,
                    amount: 5000,

                },
                {
                    path: "alphminingPool",
                    value: "alph",
                    label: "alephium",
                    img: require("../../assets/img/currency/alph.svg"),
                    imgUrl: `${this.$baseApi}img/alph.svg`,
                    name: "course.alphCourse",
                    show: true,
                    amount: 1,

                },
            
                // { //告知已删除此币种  Radiant
                //     value: "dgb2_odo",
                //     label: "dgb-odocrypt-pool2",
                //     img: require("../../assets/img/currency/DGB.svg"),
                //     imgUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/109.png",
                // },
                // {
                //     value: "dgb_qubit_a10",
                //     label: "dgb-qubit-pool2",
                //     img: require("../../assets/img/currency/DGB.svg"),
                //     imgUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/109.png",
                // },
                // {
                //     value: "dgb_skein_a10",
                //     label: "dgb-skein-pool2",
                //     img: require("../../assets/img/currency/DGB.svg"),
                //     imgUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/109.png",
                // },
                // {
                //     value: "dgb_odo_b20",
                //     label: "dgb-odoscrypt-pool3",
                //     img: require("../../assets/img/currency/DGB.svg"),
                //     imgUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/109.png",
                // },

            ],
            params: {
                coin: "nexa",
                interval: "rt",
            },
            PowerParams: {
                coin: "nexa",
                interval: "rt",
            },
            BlockInfoParams: {
                coin: "nexa",
                limit: 10,
                page: 1,
            },
            CoinData: {
                algorithm: "",
                height: "",
                totalDifficulty: "",
                totalPower: "",
                price: "",
                poolPower: "",
                poolMc: "",
            },
            luckData: {
                luck3d: "96.26 %",
                luck7d: "96.26 %",
                luck30d: "96.26 %",
                luck90d: "96.26 %",
            },
            BlockInfoData: [
                // {
                //     height: "847545",
                //     date: "2024-06-12 09:11:57",
                //     hash: "00000…9392577",
                //     reward: "3.12500000",
                //     fees: "0.40962024",
                // },
                // {
                //     height: "847545",
                //     date: "2024-06-12 09:11:57",
                //     hash: "00000…9942577",
                //     reward: "3.12500000",
                //     fees: "0.40962024",
                // }, {
                //     height: "847545",
                //     date: "2024-06-12 09:11:57",
                //     hash: "00000…9925757",
                //     reward: "3.12500000",
                //     fees: "0.40962024",
                // }, {
                //     height: "847545",
                //     date: "2024-06-12 09:11:57",
                //     hash: "00000…9925677",
                //     reward: "3.12500000",
                //     fees: "0.40962024",
                // }, {
                //     height: "847545",
                //     date: "2024-06-12 09:11:57",
                //     hash: "00000…9925877",
                //     reward: "3.12500000",
                //     fees: "0.40962024",
                // }, {
                //     height: "847545",
                //     date: "2024-06-12 09:11:57",
                //     hash: "00000…9928577",
                //     reward: "3.12500000",
                //     fees: "0.40962024",
                // },


            ],
            intervalList: [
                // {
                //     value: "1h",
                //     label: "home.hour",
                // },
                {
                    value: "rt",
                    label: "home.realTime",
                },
                {
                    value: "1d",
                    label: "home.day",
                },
            ],
            offset: 0,
            itemWidth: 30, // 每个小容器（包含图片）的宽度
            listWidth: 1000, // 整个图片列表的宽度（10 个小容器的宽度总和）
            itemActive: "nexa",
            timeActive: "rt",
            powerActive: true,
            minerChartLoading: false,
            newBlockInfoData: [
                // {
                //     height:"556",
                //     date:"",
                //     hash:"SDJFIOSJISJIODJIFJ",
                //     reward:"545",
                //     fees:"56",
                // },
                // {
                //     height:"5556",
                //     date:"",
                //     hash:"SDJFIOSJISJ66IODJIFJ",
                //     reward:"5465",
                //     fees:"56",
                // },
                // {
                //     height:"5556",
                //     date:"",
                //     hash:"SDJFIOSJISJ66IODJIFJ",
                //     reward:"5465",
                //     fees:"56",
                // },
                // {
                //     height:"5556",
                //     date:"",
                //     hash:"SDJFIOSJISJ66IODJIFJ",
                //     reward:"5465",
                //     fees:"56",
                // },
                // {
                //     height:"5556",
                //     date:"",
                //     hash:"SDJFIOSJISJ66IODJIFJ",
                //     reward:"5465",
                //     fees:"56",
                // },
                // {
                //     height:"5556",
                //     date:"",
                //     hash:"SDJFIOSJISJ66IODJIFJ",
                //     reward:"5465",
                //     fees:"56",
                // },
                // {
                //     height:"5556",
                //     date:"",
                //     hash:"SDJFIOSJISJ66IODJIFJ",
                //     reward:"5465",
                //     fees:"56",
                // },
                // {
                //     height:"5556",
                //     date:"",
                //     hash:"SDJFIOSJISJ66IODJIFJ",
                //     reward:"5465",
                //     fees:"56",
                // },

            ],
            reportBlockLoading: false,
            BlockShow: true,
            showCalculator: false,
            value: "nexa",
            input3: "",
            select: "GH/s",
            selectTime: [
                {
                    value: "day",
                    label: "home.everyDay",
                },
                {
                    value: "week",
                    label: "home.weekly",
                },
                {
                    value: "month",
                    label: "home.monthly",
                },
                {
                    value: "year",
                    label: "home.annually",
                },
            ],
            time: "day",
            input: "",
            inputPower: 1,
            profit: "",
            factor: "",
            CalculatorData: {
                hpb: "10",
                reward: "20",
                price: "30",
                costTime: "600",
                poolFee: "0.15",
            },
            transactionFeeList: [//没有交易费

                {
                    label: "grs",
                    coin: "grs",
                    feeShow: false,
                },
                {
                    label: "mona",
                    coin: "mona",
                    feeShow: false,
                },
                {
                    label: "radiant",
                    coin: "rxd",
                    feeShow: false,
                },
                // {

                //     label:"dgb(skein)",
                //     coin: "dgbs",
                //     feeShow: false,
                // },
                // {

                //     coin: "dgbq",               
                //     label:"dgb(qubit)",
                //     feeShow: false,
                // },
                // {

                //     coin: "dgbo",
                //     label: "dgb(odocrypt)",
                //     feeShow: false,
                // },


            ],
            FeeShow: true,
            lang: 'en',
            activeItemCoin: {
                value: "nexa",
                label: "nexa",
                img: require("../../assets/img/currency-nexa.png"),
                imgUrl: `${this.$baseApi}img/nexa.png`,

            },
            isInternalChange: false,





        };
    },
    watch: {
        "$i18n.locale": (val) => {
            location.reload();//刷新页面 刷新echarts

        },
        activeItemCoin: {
            handler(newVal) {
                // 防止无限循环
                if (this.isInternalChange) {
                    return;
                }
                this.handleActiveItemChange(newVal);
            },
            deep: true
        }
    },
    mounted() {



        this.lang = this.$i18n.locale; // 初始化语言值
        this.$addStorageEvent(1, `activeItemCoin`, JSON.stringify(this.currencyList[0]))
        this.minerChartLoading = true
        if (this.$isMobile) {
            this.option.yAxis[1].show = false
            this.option.grid.left = "16%"
            this.option.grid.right = "5%"
            this.option.grid.top = "10%"
            this.option.grid.bottom = "45%"

            this.option.legend.bottom = 5
            this.option.legend.right = "30%"
            this.option.xAxis.axisLabel = {
                interval: 8,
                rotate: 70
            }

            this.minerOption.yAxis[1].show = false
            this.minerOption.grid.left = "16%"
            this.minerOption.grid.right = "5%"
            this.minerOption.grid.top = "10%"
            this.minerOption.grid.bottom = "45%"

            this.minerOption.legend.bottom = 5
            this.minerOption.legend.right = "30%"
            this.minerOption.xAxis.axisLabel = {
                interval: 8,
                rotate: 70
            }


        }else{ //动态计算图表的grid.left  让左侧的Y轴标签显示完全

           
            const yAxis = this.option.yAxis[0]; // 第一个 Y 轴
            const maxValue = Math.max(...this.option.series[0].data); // 获取数据最大值
            const formatter = yAxis.axisLabel.formatter;
            const formattedValue = formatter(maxValue); // 格式化最大值
         
          
            // 创建一个临时 DOM 元素计算宽度
            const tempDiv = document.createElement('div');
            tempDiv.style.position = 'absolute';
            tempDiv.style.visibility = 'hidden';
            tempDiv.style.fontSize = '12px'; // 与 axisLabel.fontSize 一致
            tempDiv.innerText = formattedValue;
            document.body.appendChild(tempDiv);
            const labelWidth = tempDiv.offsetWidth;
            document.body.removeChild(tempDiv);
          
            // 动态设置 grid.left，加上安全边距
            const safeMargin = 20;
            this.option.grid.left = labelWidth + safeMargin + 'px';


            // ------------全网算力图---------------
            // 
               
            const yAxis2 = this.minerOption.yAxis[0]; // 第一个 Y 轴
            const maxValue2 = Math.max(...this.minerOption.series[0].data); // 获取数据最大值
            const formatter2 = yAxis2.axisLabel.formatter;
            const formattedValue2 = formatter2(maxValue2); // 格式化最大值
         
          
            // 创建一个临时 DOM 元素计算宽度
            const tempDiv2 = document.createElement('div');
            tempDiv2.style.position = 'absolute';
            tempDiv2.style.visibility = 'hidden';
            tempDiv2.style.fontSize = '12px'; // 与 axisLabel.fontSize 一致
            tempDiv2.innerText = formattedValue2;
            document.body.appendChild(tempDiv2);
            const labelWidth2 = tempDiv2.offsetWidth;
            document.body.removeChild(tempDiv2);          
            // 动态设置 grid.left，加上安全边距
            const safeMargin2 = 20;
            this.minerOption.grid.left = labelWidth2 + safeMargin2 + 'px';
            
          
        }

   


        this.getBlockInfoData(this.BlockInfoParams)
        this.getCoinInfoData(this.params)
        this.getPoolPowerData(this.PowerParams)

         // 注册需要在网络恢复后自动重新调用的方法
    this.registerRecoveryMethod('getCoinInfoData', this.params);
    this.registerRecoveryMethod('getPoolPowerData', this.PowerParams);
    this.registerRecoveryMethod('getBlockInfoData', this.BlockInfoParams);

        this.$addStorageEvent(1, `currencyList`, JSON.stringify(this.currencyList))
        if (this.$refs.select) {
            this.$refs.select.$el.children[0].children[0].setAttribute('style', "background:url(https://test.m2pool.com/img/nexa.png) no-repeat 10PX;background-size: 20PX 20PX;color:#333;padding-left: 30PX;");

        }
        this.fetchParam({ coin: this.params.coin })

        this.minerChartLoading = false

        // let activeItemCoin =localStorage.getItem(`activeItemCoin`)
        // this.activeItemCoin=JSON.parse(activeItemCoin)
        window.addEventListener("setItem", () => {
            let value = localStorage.getItem(`activeItemCoin`)
            this.activeItemCoin = JSON.parse(value)

        });

    },


    methods: {

        handelOptionYAxis(option){
            const yAxis = option.yAxis[0]; // 第一个 Y 轴
            const maxValue = Math.max(...option.series[0].data); // 获取数据最大值
            const formatter = yAxis.axisLabel.formatter;
            const formattedValue = formatter(maxValue); // 格式化最大值
         
          
            // 创建一个临时 DOM 元素计算宽度
            const tempDiv = document.createElement('div');
            tempDiv.style.position = 'absolute';
            tempDiv.style.visibility = 'hidden';
            tempDiv.style.fontSize = '12px'; // 与 axisLabel.fontSize 一致
            tempDiv.innerText = formattedValue;
            document.body.appendChild(tempDiv);
            const labelWidth = tempDiv.offsetWidth;
            document.body.removeChild(tempDiv);
          
            // 动态设置 grid.left，加上安全边距
            const safeMargin = 20;
            option.grid.left = labelWidth + safeMargin + 'px';

            return option
        },
        slideLeft() {
            const allLength = this.currencyList.length * 120
            const boxLength = document.getElementById('list-box').clientWidth
            if (allLength < boxLength) return
            const listEl = document.getElementById('list')
            const leftMove = Math.abs(parseInt(window.getComputedStyle(listEl, null)?.left))
            if (leftMove + boxLength - 360 < boxLength) {
                // 到最开始的时候
                listEl.style.left = '0PX'
            } else {
                listEl.style.left = '-' + (leftMove - 360) + 'PX'
            }
        },


        //初始化图表
        inCharts() {
            if (this.myChart == null) {
                this.myChart = echarts.init(document.getElementById("chart"));
            }
            // this.maxValue = Math.round(this.maxValue * 3)
            // if (this.maxValue > 0) {
            //     this.option.yAxis[1].max = this.maxValue
            // }

            // this.option.legend.show = false


            this.option.series[0].name = this.$t(`home.computingPower`)
            this.option.series[1].name = this.$t(`home.currencyPrice`)

            this.myChart.setOption(this.option);
            // 回调函数，在渲染完成后执行
            this.myChart.on('finished', () => {
                // 在这里执行显示给用户的操作
                // console.log('图表渲染完成，显示给用户');
                this.minerChartLoading = false

            });
            // window.addEventListener("resize", () => {
            //     if (this.myChart) this.myChart.resize();
            // });

            window.addEventListener('resize', throttle(() => {
                if (this.myChart) this.myChart.resize();
            }, 200));
        },
        inChartsMiner() {
            if (this.MinerChart == null) {
                this.MinerChart = echarts.init(document.getElementById("minerChart"));
            }

            this.minerOption= this.handelOptionYAxis(this.minerOption) // Y轴文字显示动态调整grid.left
            this.minerOption.series[0].name = this.$t(`home.networkPower`)
            this.minerOption.series[1].name = this.$t(`home.currencyPrice`)
            this.MinerChart.setOption(this.minerOption);
            // 回调函数，在渲染完成后执行
            this.MinerChart.on('finished', () => {
                // console.log('图表渲染完成，显示给用户');
                this.minerChartLoading = false
            });

            window.addEventListener('resize', throttle(() => {
                if (this.MinerChart) this.MinerChart.resize();
            }, 200));

        },
        countInCharts() {
            this.countChart = echarts.init(document.getElementById("minerChart"));

            this.countChart.setOption(this.CountOption);

            // window.addEventListener("resize", () => {
            //     if (this.myChart) this.myChart.resize();
            // });
        },
        async fetchParam(params) {
            try {
                const data = await getParam(params)
                if (data && data.code == 200) {
                    this.CalculatorData = data.data

                } else {
                    for (const key in this.CalculatorData) {
                        this.CalculatorData[key] = 0
                    }
                }

                this.calculateIncome(this.CalculatorData)
            } catch (error) {
                console.log(error, 'error')
            }

        },
        //获取币种信息
        // async getCoinInfoData(params) {
        //     const data = await getCoinInfo(params)

        //     if (data && data.code == 200) {
        //         this.CoinData = data.data

        //         // this.CoinData.poolPower =Number(this.CoinData.poolPower) .toFixed(2)//算力保留两位小数
        //         // this.CoinData.price =this.CoinData.price.toFixed(8)
        //     }
        // },
        getCoinInfoData: Debounce(async function (params) {

            const data = await getCoinInfo(params)

            if (data && data.code == 200) {
                this.CoinData = data.data

                // this.CoinData.poolPower =Number(this.CoinData.poolPower) .toFixed(2)//算力保留两位小数
                // this.CoinData.price =this.CoinData.price.toFixed(8)
            } else {
                this.CoinData = {}
            }

        }, 200),

    
        getPoolPowerData: Debounce(async function (params) {
            // this.minerChartLoading = true
            this.setLoading('minerChartLoading', true);
            try {
                const data = await getPoolPower(params)
                if (!data) {
                    // this.minerChartLoading = false
                    this.setLoading('minerChartLoading', false);
                    if (this.myChart) {
                        this.myChart.dispose()//销毁图表实列
                    }
                    return
                }
                let chartData = data.data
                let xData = []
                let pvData = []
                let rejectRate = []
                let price = []
                chartData.forEach(item => {

                    if (item.date.includes(`T`) && params.interval == `rt`) {

                        item.date = `${item.date.split("T")[0]} ${item.date.split("T")[1].split(`.`)[0]}`
                    } else if (item.date.includes(`T`) && params.interval == `1d`) {
                        item.date = item.date.split("T")[0]
                    }


                    xData.push(item.date)
                    pvData.push(Number(item.pv).toFixed(2))
                    // rejectRate.push((item.rejectRate * 100).toFixed(2))
                    if (item.price == 0) {
                        price.push(item.price)
                    } else if (item.price < 1) {
                        price.push(Number(item.price).toFixed(8))

                    } else {
                        price.push(Number(item.price).toFixed(2))
                    }



                });
                // this.maxValue = Math.max(...rejectRate);
                // let leftYMaxData =  Math.max(...pvData);
                // this.option.yAxis[0].max =leftYMaxData*2
                this.option.xAxis.data = xData
                this.option.series[0].data = pvData
                // this.option.series[1].data = rejectRate
                this.option.series[1].data = price
                this.$nextTick(() => {
                    this.inCharts()
                })

            } catch {
                console.error('获取数据失败:', error);
            } finally {
                // 确保无论成功失败都设置loading为false
                this.setLoading('minerChartLoading', false);
            }






        }, 200),
        async fetchNetPower(params) {
            // this.minerChartLoading = true
            this.setLoading('minerChartLoading', true);
            const data = await getNetPower(params)
            if (!data) {
                this.minerChartLoading = false
                if (this.MinerChart) {
                    this.MinerChart.dispose()
                }
                return
            }
            let MinerCount = data.data
            let xData = []
            let pvData = []
            let price = []
            MinerCount.forEach(item => {
                if (item.date.includes(`T`) && params.interval == `rt`) {

                    item.date = `${item.date.split("T")[0]} ${item.date.split("T")[1].split(`.`)[0]}`
                } else if (item.date.includes(`T`) && params.interval == `1d`) {
                    item.date = item.date.split("T")[0]
                }
                xData.push(item.date)
                pvData.push(Number(item.pv).toFixed(2))
                if (item.price == 0) {
                    price.push(item.price)
                } else if (item.price < 1) {
                    price.push(Number(item.price).toFixed(8))

                } else {
                    price.push(Number(item.price).toFixed(2))
                }



            });


            this.minerOption.xAxis.data = xData
            this.minerOption.series[0].data = pvData
            this.minerOption.series[1].data = price
            this.$nextTick(() => {
                this.inChartsMiner()
            })




            // this.minerChartLoading = false
            this.setLoading('minerChartLoading', false);

        },
        // async getMinerCountData(params) {
        //     this.minerChartLoading = true
        //     const data = await getMinerCount(params)
        //     if (!data) {
        //         this.minerChartLoading = false
        //         if (this.MinerChart) {
        //             this.MinerChart.dispose()
        //         }
        //         return
        //     }
        //     let MinerCount = data.data
        //     let xData = []
        //     let Count = []
        //     MinerCount.forEach((item) => {
        //         if (item.date.includes(`T`)) {
        //             // item.date= `${item.date.split("T")[0]} ${item.date.split("T")[1].split(`.`)[0]}`
        //             xData.push(`${item.date.split("T")[0]} ${item.date.split("T")[1].split(`.`)[0]}`)
        //         } else {
        //             xData.push(item.date)
        //         }

        //         Count.push(item.value)
        //     })


        //     this.minerOption.xAxis.data = xData
        //     this.minerOption.series[0].data = Count
        //     this.$nextTick(() => {
        //         this.inChartsMiner()
        //     })

        //     this.minerChartLoading = false


        // },

        getMinerCountData: Debounce(async function (params) {
            // this.minerChartLoading = true
            this.setLoading('minerChartLoading', true);
            const data = await getMinerCount(params)
            if (!data) {
                this.minerChartLoading = false
                if (this.MinerChart) {
                    this.MinerChart.dispose()
                }
                return
            }
            let MinerCount = data.data
            let xData = []
            let Count = []
            MinerCount.forEach((item) => {
                if (item.date.includes(`T`)) {
                    // item.date= `${item.date.split("T")[0]} ${item.date.split("T")[1].split(`.`)[0]}`
                    xData.push(`${item.date.split("T")[0]} ${item.date.split("T")[1].split(`.`)[0]}`)
                } else {
                    xData.push(item.date)
                }

                Count.push(item.value)
            })


            this.minerOption.xAxis.data = xData
            this.minerOption.series[0].data = Count
            this.$nextTick(() => {
                this.inChartsMiner()
            })
            this.setLoading('minerChartLoading', false);
            // this.minerChartLoading = false



        }, 200),

        

        getBlockInfoData: Debounce(async function (params) {
            try {
                 // this.reportBlockLoading = true
            this.setLoading('reportBlockLoading', true);
            const data = await getBlockInfo(params)
            if (data && data.code == 200) {
                this.BlockShow = true
                this.newBlockInfoData = []
                this.BlockInfoData = data.rows
                if (!this.BlockInfoData[0]) {
                    // this.reportBlockLoading = false
                    this.setLoading('reportBlockLoading', false);
                    return
                }


                this.BlockInfoData.forEach((item, index) => {
                    item.date = `${item.date.split("T")[0]} ${item.date.split("T")[1].split(`.`)[0]}`
                    if (index < 8) {
                        this.newBlockInfoData.push(item)
                    }
                })

            } else {
                this.BlockShow = false
            }
            this.setLoading('reportBlockLoading', false);
            // this.reportBlockLoading = false
            } catch (error) {
                console.error('获取区块信息失败:', error);
                this.BlockShow = false;
            }finally {
                // 确保在任何情况下都会重置 loading 状态
                this.setLoading('reportBlockLoading', false);
              }


           



        }, 200),
        calculateIncome(data) {

            for (const key in this.CalculatorData) {
                if (!this.CalculatorData[key]) {

                    this.profit = 0
                    // var myDiv = document.getElementById('myDiv');
                    // this.disableElement(myDiv);
                    return
                }
            }
            // 收益计算器实现算法：

            // 每日币收益 = （目标算力 / 全网算力）* 全网每日出块 * 单个块奖励 * (1 - 矿池手续费率)
            // 每日美元收益 = 每日币收益 * 币价(美元计)
            let target_hashrate
            switch (this.select) {
                case `GH/s`://GH/S（吉哈希每秒）：1 GH/S 就是 1×10^9 哈希每秒。
                    target_hashrate = this.inputPower * Math.pow(10, 9)
                    break;
                case `MH/s`://MH/S（兆哈希每秒）：1 MH/S 是 1×10^6 哈希每秒
                    target_hashrate = this.inputPower * Math.pow(10, 6)
                    break;
                case `TH/s`:// TH/S（太哈希每秒）：1 TH/S 是 1×10^12 哈希每秒
                    target_hashrate = this.inputPower * Math.pow(10, 12)
                    break;
                default:
                    break;
            }
            // 这里从response中解析出全网算力、矿池算力、区块奖励
            const net_hashrate = this.CalculatorData.netHashrate // 全网算力,这里的数据是模拟的，实际数据从response中解析
            const reward = this.CalculatorData.reward// 区块奖励, 同上
            // 计算
            const target_hashrate_ratio = target_hashrate / net_hashrate // 用户算力全网占比
            const per_day_reward = (reward * (1 - this.CalculatorData.poolFee)) * this.CalculatorData.count // 全网每日奖励
            const result = target_hashrate_ratio * per_day_reward

            switch (this.time) {
                case "day":
                    this.profit = result.toFixed(8)
                    // this.profit = Math.floor(result * 1e10) / 1e10;
                    // this.profit = this.toFixedNoRound(result, 10);
                    break;
                case "week":
                    this.profit = (result * 7).toFixed(8)
                    // this.profit = Math.floor(result * 7 * 1e10) / 1e10;
                    // this.profit = this.toFixedNoRound(result * 7, 10);
                    break;
                case "month":
                    this.profit = (result * 30).toFixed(8)
                    // this.profit = Math.floor(result * 30 * 1e10) / 1e10;
                    // this.profit = this.toFixedNoRound(result * 30, 10);
                    break;
                case "year":
                    this.profit = (result * 365).toFixed(8)
                    // this.profit = Math.floor(result * 365 * 1e10) / 1e10;
                    // this.profit = this.toFixedNoRound(result * 365, 10);
                    break;

                default:
                    break;
            }
            const nexaFormatter = new Intl.NumberFormat("en-US", {
                minimumFractionDigits: 2, // 强制显示 2 位小数（不足补零）
                maximumFractionDigits: 2, // 可选：限制最多 2 位小数（避免多余位数）
                useGrouping: true,       // 不使用千位分隔符（如 1,000）
            });
            if (this.value == "nexa") {
                this.profit = nexaFormatter.format(this.profit);
            } else {
                const formatter = new Intl.NumberFormat("en-US", {
                    minimumFractionDigits: 8, // 强制显示足够多的小数位
                    useGrouping: true,       // 不使用千位分隔符（如 1,000）
                });


                this.profit = formatter.format(this.profit);
            }


            // const formatter = new Intl.NumberFormat("en-US", {
            //     minimumFractionDigits: 8, // 强制显示足够多的小数位
            //     useGrouping: false,       // 不使用千位分隔符（如 1,000）
            // });


            // this.profit = formatter.format(this.profit);


        },
        toFixedNoRound(value, decimals = 10) {//保留10位小数 不四舍五入
            const factor = 10 ** decimals;
            return (value < 0 ? Math.ceil(value * factor) : Math.floor(value * factor)) / factor;
        },
        ProfitCalculator(target_hashrate, fee) {
            // 收益计算器实现算法：

            // 每日币收益 = （目标算力 / 全网算力）* 全网每日出块 * 单个块奖励 * (1 - 矿池手续费率)
            // 每日美元收益 = 每日币收益 * 币价(美元计)

            // 这里从response中解析出全网算力、矿池算力、区块奖励
            const net_hashrate = 5646.62  // 全网算力,这里的数据是模拟的，实际数据从response中解析
            const reward = 10000000 // 区块奖励, 同上
            // 计算
            const target_hashrate_ratio = target_hashrate / net_hashrate // 用户算力全网占比
            const per_day_reward = (reward * (1 - fee)) * 720 // 全网每日奖励
            const result = target_hashrate_ratio * per_day_reward
            return result
        },
        //禁用
        disableElement(element) {
            element.setAttribute('data-disabled', true);
            element.style.pointerEvents = 'none'; // 阻止鼠标事件
            element.style.opacity = '0.5'; // 设置半透明度
            // 其他CSS样式可以根据需要添加
        },
        handelProfitCalculation() {

            for (const key in this.CalculatorData) {
                if (!this.CalculatorData[key]) {
                    //  this.$message({
                    //      message:  this.$t(`home.acquisitionFailed`),
                    //      type: "error",
                    //    });
                    this.profit = 0
                    // var myDiv = document.getElementById('myDiv');
                    // this.disableElement(myDiv);
                    this.fetchParam({ coin: this.params.coin })
                    return
                }
            }


            this.showCalculator = true
        },
        handelClose() {
            this.showCalculator = false
        },

        changeSelection(scope) {
            let brand = scope
            for (let index in this.currencyList) {
                let aa = this.currencyList[index];
                let value = aa.value;
                if (brand === value) {
                    this.$refs.select.$el.children[0].children[0].setAttribute('style', "background:url(" + aa.imgUrl + ") no-repeat 10PX;background-size: 20PX 20PX;color:#333;padding-left: 35PX;");
                }
            }
            this.fetchParam({ coin: this.value })

        },
        handelJump(url) {

            if (url === '/AccessMiningPool') {
                const coin = this.currencyList.find(item => item.value === this.params.coin);
                if (!coin) return;
                let jumpName = coin.path.charAt(0).toUpperCase() + coin.path.slice(1) //name跳转 首字母大写
                // 使用 name 进行导航，避免重复的路由参数
                this.$router.push({
                    name: jumpName,
                    params: {
                        lang: this.lang,
                        coin: this.params.coin,
                        imgUrl: this.currencyPath

                    },
                    replace: false // 保留历史记录，允许回退
                });

            } else {
                // 移除开头的斜杠，统一处理路径格式
                const cleanPath = url.startsWith('/') ? url.slice(1) : url;
                this.$router.push(`/${this.lang}/${cleanPath}`);
            }

        },
        handelCalculation() {
            this.calculateIncome()
        },
 // 获取单个币种项目的完整宽度（包含margin）
 getItemFullWidth() {
    const listEl = this.$refs.currencyList;
    if (!listEl) return 120;
    
    const firstItem = listEl.querySelector('.list-item');
    if (!firstItem) return 120;
    
    const style = window.getComputedStyle(firstItem);
    const width = firstItem.offsetWidth;
    const marginLeft = parseInt(style.marginLeft) || 0;
    const marginRight = parseInt(style.marginRight) || 0;
    
    return width + marginLeft + marginRight;
  },

  // 左滑动逻辑
  scrollLeft() {
    const allLength = this.currencyList.length * 120
    const boxLength = document.getElementById('list-box').clientWidth
    if (allLength < boxLength) return
    const listEl = document.getElementById('list')
    const leftMove = Math.abs(parseInt(window.getComputedStyle(listEl, null)?.left))
    if (leftMove + boxLength - 360 < boxLength) {
        // 到最开始的时候
        listEl.style.left = '0PX'
    } else {
        listEl.style.left = '-' + (leftMove - 360) + 'PX'
    }
},
// 右滑动逻辑
scrollRight() {
    const allLength = this.currencyList.length * 120
    const boxLength = document.getElementById('list-box').clientWidth
    if (allLength < boxLength) return
    const listEl = document.getElementById('list')
    const leftMove = Math.abs(parseInt(window.getComputedStyle(listEl, null)?.left))
    if (leftMove + boxLength + 360 > allLength) {
        listEl.style.left = '-' + (allLength - boxLength) + 'PX'
    } else {
        listEl.style.left = '-' + (leftMove + 360) + 'PX'
    }
},

  
  
        // // 左滑动逻辑
        // scrollLeft() {
        //     const allLength = this.currencyList.length * 120
        //     const boxLength = document.getElementById('list-box').clientWidth
        //     if (allLength < boxLength) return
        //     const listEl = document.getElementById('list')
        //     const leftMove = Math.abs(parseInt(window.getComputedStyle(listEl, null)?.left))
        //     if (leftMove + boxLength - 360 < boxLength) {
        //         // 到最开始的时候
        //         listEl.style.left = '0PX'
        //     } else {
        //         listEl.style.left = '-' + (leftMove - 360) + 'PX'
        //     }
        // },
        // // 右滑动逻辑
        // scrollRight() {
        //     const allLength = this.currencyList.length * 120
        //     const boxLength = document.getElementById('list-box').clientWidth
        //     if (allLength < boxLength) return
        //     const listEl = document.getElementById('list')
        //     const leftMove = Math.abs(parseInt(window.getComputedStyle(listEl, null)?.left))
        //     if (leftMove + boxLength + 360 > allLength) {
        //         listEl.style.left = '-' + (allLength - boxLength) + 'PX'
        //     } else {
        //         listEl.style.left = '-' + (leftMove + 360) + 'PX'
        //     }
        // },

 
        handleActiveItemChange(item) {
            if (!item) return;


            this.currency = item.label;
            this.currencyPath = item.imgUrl;
            this.params.coin = item.value;

            console.log(this.params.coin, "item");
            this.BlockInfoParams.coin = item.value;
            this.itemActive = item.value;
            this.PowerParams.coin = item.value;

            // 调用相关数据更新方法
            this.getCoinInfoData(this.params);
            this.getBlockInfoData(this.BlockInfoParams);

            if (this.powerActive) {
                this.handelPower();
            } else {
                this.handelMiner();
            }

            this.handelCoinLabel(item.value);
        },

        clickCurrency(item) {
            if (!item) return;
            // 设置标记，防止触发 watch
            this.isInternalChange = true;
            this.activeItemCoin = item;
            this.$addStorageEvent(1, `activeItemCoin`, JSON.stringify(item))
            // this.currency = item.label
            // this.currencyPath = item.imgUrl
            // this.params.coin = item.value
            // this.BlockInfoParams.coin = item.value
            // this.itemActive = item.value
            // this.PowerParams.coin = item.value
            // this.getCoinInfoData(this.params)
            // this.getBlockInfoData(this.BlockInfoParams)

            // 在下一个事件循环中重置标记
            this.$nextTick(() => {
                this.isInternalChange = false;
            });


            // 直接调用处理方法
            this.handleActiveItemChange(item);

        },
        clickReportBlock() {
            this.$router.push({
                path: `/${this.lang}/reportBlock`,
                query: {
                    coin: this.params.coin,
                    imgUrl: this.currencyPath
                }
            });
        },
        handleClick(tab, event) {
        },
        handelPower() {
            // this.powerDialogVisible = true;
            if (this.MinerChart) {
                this.MinerChart.dispose();
                this.MinerChart = null;
            }

            // 初始化相关数据
            this.option.xAxis.data = [];
            this.option.series[0].data = [];
            this.option.series[1].data = [];

            this.powerActive = true
            this.PowerParams.coin = this.params.coin
            this.getPoolPowerData(this.PowerParams)

        },
        intervalChange(value) {
            this.PowerParams.interval = value
            this.params.interval = value
            this.timeActive = value
            if (this.powerActive) {
                this.getPoolPowerData(this.PowerParams)
            } else if (!this.powerActive) {
                this.fetchNetPower(this.params)
            }


        },
        handelMiner() {
            // this.minerDialogVisible = true;
            // 先销毁可能存在的上一个图表实例
            if (this.myChart) {
                this.myChart.dispose();
                this.myChart = null;
            }
            // 初始化相关数据
            this.minerOption.xAxis.data = [];
            this.minerOption.series[0].data = [];

            this.powerActive = false
            // this.getMinerCountData(this.params)
            this.fetchNetPower(this.params)

        },
        handelLabel(coin) {
            let obj = this.currencyList.find(item => item.value == coin)
            if (obj) {
                return obj.label
            } else {
                return ""
            }


        },
        handelLabel2(coin) {
            if (coin.includes("dgb")) {
                return "dgb"
            } else {
                return coin
            }

        },
        handelCoinLabel(coin) {
            let obj = {
                coin: "",
            }

            if (coin) {
                obj = this.transactionFeeList.find(item => item.coin == coin)
                this.FeeShow = false
            }
            if (!obj) {
                this.FeeShow = true
            }

        },




    },

}