import * as echarts from "echarts";
export default {
    data() {
        return {
            option: {
                legend: {
                    right: 100,
                    formatter: function (name) {
                        return name;
                    },
                },
                tooltip: {
                    trigger: "axis",
                    textStyle: {
                        align: "left",
                    },
                    animation: false,

                    axisPointer: {
                        animation: false,
                        snap: true,
                        label: {
                            precision: 2, //坐标轴保留的位数
                        },
                        type: "cross", //cross shadow
                        crossStyle: {
                            //十字轴横线
                            // opacity: "0",
                            width: 0.5,
                        },
                        lineStyle: {
                            // opacity: 0,
                        },
                    },
                },

                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: [],
                    axisTick: {
                        //去除刻度
                        show: false,
                    },
                    axisLine: {
                        //去除轴线
                        show: false,
                    },
                },
                yAxis: [
                    {
                        // name: "MVRV",
                        position: "left",
                        type: "value",
                    },
                    {
                        // name: "MVRV",
                        position: "right",
                        type: "log",
                        show: false
                    },
                    {
                        // name: "MVRV",
                        position: "right",
                        type: "log",
                        show: false
                    },
                    {
                        // name: "MVRV",
                        position: "right",
                        type: "value",
                        show: true,
                        axisLabel:{
                            formatter(value){
                                let data
                                if (value > 100000000) {
                                    data = `${value/100000000} E`
                                }else if (value > 10000) {
                                    data = `${value/10000} W`
                                }else{
                                    data = value 
                                }
                                return data
                            }
                        }
                    },
                ],
                dataZoom: [
                    {
                        type: "slider",
                        start: 10,
                        end: 100,
                        maxSpan: 100,
                        minSpan: 2,
                        animation: false,
                    },
                    {
                        type: "inside",
                        start: 0,
                        end: 20,
                        showDetail: false,
                    },
                ],
                series: [
                    {
                        type: "line",
                        name: "volume",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#f7931a",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#f7931a",
                            width: "1",
                        },
                        yAxisIndex: 0,
                        data: [],
                    },
                    // {
                    //     type: "line",
                    //     name: "fromVolume",
                    //     smooth: false, //线条是否圆滑
                    //     symbol: "circle",
                    //     symbolSize: 5,
                    //     showSymbol: false,
                    //     itemStyle: {
                    //         color: "#f7931a",
                    //         borderColor: "rgba(221,220,107,0.1)",
                    //         borderWidth: 12,
                    //     },
                    //     lineStyle: {
                    //         //线条样式
                    //         color: "#f7931a",
                    //         width: "1",
                    //     },
                    //     yAxisIndex: 1,
                    //     data: [],
                    // },
                    // {
                    //     type: "line",
                    //     name: "spenderVolume",
                    //     smooth: false, //线条是否圆滑
                    //     symbol: "circle",
                    //     symbolSize: 5,
                    //     showSymbol: false,
                    //     itemStyle: {
                    //         color: "#e74135",
                    //         borderColor: "rgba(221,220,107,0.1)",
                    //         borderWidth: 12,
                    //     },
                    //     lineStyle: {
                    //         //线条样式
                    //         color: "#e74135",
                    //         width: "1",
                    //     },
                    //     yAxisIndex: 2,
                    //     data: [],
                    // },
                    // {
                    //     type: "line",
                    //     name: "toVolume",
                    //     smooth: false, //线条是否圆滑
                    //     symbol: "circle",
                    //     symbolSize: 5,
                    //     showSymbol: false,
                    //     itemStyle: {
                    //         color: "#2ac2d1",
                    //         borderColor: "rgba(221,220,107,0.1)",
                    //         borderWidth: 12,
                    //     },
                    //     lineStyle: {
                    //         //线条样式
                    //         color: "#2ac2d1",
                    //         width: "1",
                    //     },
                    //     yAxisIndex: 3,
                    //     data: [],
                    // },
                ],
            },
            dailyTradingLoading: false,
            params: {
                req: "",
                radius: "eth",
            },
            times: {
                start: "",
                end: ""
            },
            dataCount: [],
            introduce: "",
            req:""
        }
    },
    mounted() {
       
        //按钮禁用
        this.$addStorageEvent(1, "buttonShow", false);
        let menuObj = localStorage.getItem("params");
        this.req = JSON.parse(menuObj).componentReq;
        this.introduce = JSON.parse(menuObj).introduce;
        //监听localstorage变化
        window.addEventListener("setItem", () => {
            let menuObj = localStorage.getItem("params");
            this.req = JSON.parse(menuObj).componentReq;
            this.introduce = JSON.parse(menuObj).introduce;
        });

        this.fetchDailyTrading(this.req, this.params.radius)


    },
  
    methods: {
        initCharts() {
            this.myChart = echarts.init(document.getElementById("usdtVolume"));
            // this.myChart.clear();
            this.myChart.setOption(this.option);
            //  当窗口或者大小发生改变时执行resize，重新绘制图表
            window.addEventListener("resize", () => {
                if (this.myChart)this.myChart.resize();
            });
        },
        //请求折线图数据
        async fetchDailyTrading(req, radius, start, end, type) {
            this.dailyTradingLoading = true
            const { data } = await this.$API.getBigDealsCount(
                req,
                radius,
                start,
                end,
                type
            );
            this.dataCount = data.data
            this.option.series[0].data.length = 0;
            // this.option.series[1].data.length = 0;
            // this.option.series[2].data.length = 0;
            // this.option.series[3].data.length = 0;
            this.option.xAxis.data.length = 0;

            this.dataCount.forEach(item => {
                let time = item.dateTime.split("T")[0];
                // let spenderVolume = item.spenderVolume.toFixed(3)
                // let toVolume = Number(item.toVolume.toFixed(3))
                // let fromVolume = item.fromVolume.toFixed(3)
                this.option.xAxis.data.push(time);
                this.option.series[0].data.push(parseInt(item.volume*100)/100 );
                // this.option.series[1].data.push(fromVolume);
                // this.option.series[2].data.push(spenderVolume);
                // this.option.series[3].data.push(toVolume);
            })

            if (req=="usdtVolume") {
                this.option.series[0].name = `usdt(eth) volume`
            }else if(req=="usdcVolume"){
                this.option.series[0].name = `usdc(eth) volume`
            }
          
            this.initCharts();

            this.dailyTradingLoading = false
        },
        //获取父级时间
        handelSonTime(start, end) {
            this.times.start = start;
            this.times.end = end;
            this.fetchDailyTrading(this.req, this.params.radius, this.times.start, this.times.end)
        },
    }
}