import * as echarts from "echarts";
import { handelLineType,handelSwitchs,handelWatermark } from "../../util/processingData"
export default {
    data() {
        return {
            minerBalanceLoading: false,
            params: {
                req: "minerBalance",
                radius: "btc"
            },
            option: {
                tooltip: {
                    trigger: "axis",
                    position: function (point, params, dom, rect, size) {
                        // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
                        // 提示框位置
                        var x = 0; // x坐标位置
                        var y = 0; // y坐标位置

                        // 当前鼠标位置
                        var pointX = point[0];
                        var pointY = point[1];

                        // 外层div大小
                        // var viewWidth = size.viewSize[0];
                        // var viewHeight = size.viewSize[1];

                        // 提示框大小
                        var boxWidth = size.contentSize[0];
                        var boxHeight = size.contentSize[1];

                        // boxWidth > pointX 说明鼠标左边放不下提示框
                        if (boxWidth > pointX) {
                            x = 5;
                        } else {
                            // 左边放的下
                            x = pointX - boxWidth;
                        }

                        // boxHeight > pointY 说明鼠标上边放不下提示框
                        if (boxHeight > pointY) {
                            y = 5;
                        } else {
                            // 上边放得下
                            y = pointY - boxHeight;
                        }

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

                    //     return echarts.format.truncateText(name, 60, '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}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: "log",
                        // 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,
                    },
                ],
                dataZoom: [
                    {
                        type: "inside",
                        start: 20,
                        end: 100,
                    },
                    {
                        start: 0,
                        end: 100,
                    },
                ],
                series: [
                    {
                        name: "Balance of Miner Address",
                        type: "line",
                        smooth: false,
                        symbol: "circle",
                        showSymbol: false,
                        symbolSize: 5,
                        // areaStyle: {},
                        itemStyle: {
                            color: "#f7931a",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        yAxisIndex: 0,
                        lineStyle: {
                            //线条样式
                            color: "#f7931a",
                            width: "1",
                        },
                        data: [],
                    },                 

                ],
            },
            switch3:""
        }
    },
    mounted() {
      
        this.fetchMinerBalance(this.params.req, this.params.radius)
        this.switch3 = handelSwitchs(this.option, this.switch3)
        
    },
    methods: {
        //初始化图表
        inCharts() {
            if ( this.myChart == null) {
                this.myChart = echarts.init(document.getElementById("minerBalanceBox"));

            }

            this.myChart.setOption(this.option);

            window.addEventListener("resize", () => {
                if (this.myChart) this.myChart.resize();
            });
        },
        async fetchMinerBalance(req, radius, start, end) {
            this.minerBalanceLoading = true
            const { data } = await this.$API.getCsupply(req, radius, start, end)
   
            let minerData = data.data
            this.option.xAxis.data.length = 0
            this.option.series[0].data.length = 0
            //添加水印
            this.option= handelWatermark(this.option)
            minerData.forEach(item => {
                this.option.xAxis.data.push(item.date.split("T")[0])
                this.option.series[0].data.push(item.value.toFixed(2))
            })
            this.inCharts()
            this.minerBalanceLoading = false    
        },
          //接收Home传的时间handelParmesTime
          handelSonTime(start, end) {
           
            this.fetchMinerBalance(this.params.req, this.params.radius,start, end)
        },
        //点击对数/线性按钮切换
        handelLineSwitch() {
            this.option = handelLineType(this.option)          
            this.switch3 = handelSwitchs(this.option, this.switch3)
            this.myChart.setOption(this.option);          

        }
    }
}