import * as echarts from "echarts";
import { handelBtcPrice, handelProfitrate,handelLineType,handelSwitchs } from "../../util/processingData"

export default {
    data(){
        return {
            tronUsdtVolumeLoading:false,
            params:{
                req:"tronUsdtVolume",
                radius:"ETH",
                start:"",
                end:""
            },
            option: {
                tooltip: {
                    trigger: "axis",
                    position: function (pt) {
                        return [pt[0], "10%"];
                    },
                },
                legend: {
                    right:"100",
                    // data:[`sopr`,'asopr','easopr','lthsopr','sthsopr',],
                    // selected:{
                    //     'asopr': false,
                    //     'easopr': false,
                    //     'lthsopr': false,
                    //     'sthsopr': false,                      
                    // }
                },
                xAxis: {
                    type: "time",
                    boundaryGap: false,
                    //   axisLabel: {
                    //     formatter: `{yyyy}-{MM}-{dd}`,
                    //   },
                    data: []
                },
                yAxis: [
                    {
                        type: "value",
                        // boundaryGap: [0, "100%"],
                        axisLabel: {
                          formatter: function (e) {

                            let value;
                            if (e > 100000000) {
                                value = `${e / 100000000}E`;
                            } else if (e > 1000000) {//百万
                                value = `${e / 1000000}M`;
                            } else if (e > 10000) {//万
                                value = `${e / 10000}W`;
                            } else {
                                value = e;
                            }
                            return value;
                          },
                        },
                        min:"dataMin",
                        max:"dataMax",
                      
                    },
                    {
                        type: "value",
                        // boundaryGap: [0, "100%"],
                        show: true,
                        position: "right",
                        min:"dataMin",
                        max:"dataMax",
                        
                    },
                  
                ],
                dataZoom: [
                    {
                        type: "inside",
                        start: 20,
                        end: 100,
                    },
                    {
                        start: 0,
                        end: 100,
                    },
                ],
                series: [
                    {
                        name: "number of token transferred",
                        type: "line",
                        smooth: false,
                        symbol: "circle",
                        showSymbol: false,
                        symbolSize: 5,
                        // areaStyle: {},
                        itemStyle: {
                            color: "#f7931a",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#f7931a",
                            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: 1,
                    //     data: [],
                    //     //绘制右侧Y轴
                    //     markLine: {
                    //         symbol: ["none", "none"], //去掉箭头
                    //         itemStyle: {
                    //             normal: {
                    //                 lineStyle: { type: "solid", color: "rgba(0,0,0,0.01)" },
                    //             },
                    //         },
                    //         // lineStyle:{
                    //         //   color:"red"
                    //         // },

                    //         label: {
                    //             formatter: "{b}",
                    //             fontSize: 10,
                    //             color: "rgba(0,0,0,0.8)",
                    //             align: "left",
                    //         },
                    //         data: [
                    //             // {
                    //             //     name: "0",
                    //             //     yAxis: 0,
                    //             // },
                    //             //  {
                    //             //   name: "$40W",
                    //             //   yAxis: 400000,
                    //             // },
                    //             {
                    //                 name: "$70W",
                    //                 yAxis: 700000,
                    //             },
                    //             {
                    //                 name: "$40W",
                    //                 yAxis: 400000,
                    //             },

                    //             {
                    //                 name: "$10W",
                    //                 yAxis: 100000,
                    //             },
                    //             {
                    //                 name: "$100W",
                    //                 yAxis: 1000000,
                    //                 // position: ['100%', '50'],
                    //             },
                    //             {
                    //                 name: "$120W",
                    //                 yAxis: 1200000,
                    //             },

                    //             {
                    //                 name: "$140W",
                    //                 yAxis: 1400000,
                    //             },
                    //         ],
                    //     },
                    // },

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

            this.myChart.setOption(this.option);

            window.addEventListener("resize", () => {
                if (this.myChart) this.myChart.resize();
            });
        },
        //返回了三个字段  目前只做volumeSelf 
        async fetchTronUsdtVolume(req, radius, start, end){
            this.tronUsdtVolumeLoading = true
            const { data } = await this.$API.getCsupply(req, radius, start, end)
            let tronUsdtVolumeData = data.data         
        
            
             let time =""
             let volumeSelfList = []           
             tronUsdtVolumeData.forEach(item=>{
                time = item.date.split("T")[0]
                volumeSelfList.push(parseInt(item.volumeSelf*100)/100)           
              
            })
            this.option.series[0].data = handelProfitrate(tronUsdtVolumeData, volumeSelfList)
          
            this.inCharts()
            this.tronUsdtVolumeLoading = false
        },
         //接收Home传的时间handelParmesTime
         handelSonTime(start, end) {
            this.params.start = start;
            this.params.end = end;
            this.fetchTronUsdtVolume(this.params.req,this.params.radius,this.params.start, this.params.end)
        },
         //点击对数/线性按钮切换
         handelLineSwitch() {
            this.option = handelLineType(this.option)          
            this.switch3 = handelSwitchs(this.option, this.switch3)
            this.myChart.setOption(this.option);          

        },
       
    }
}