import * as echarts from "echarts";
import { handelLineType,handelSwitchs } from "../../util/processingData"
export default {
    data() {
        return {
            capRealLoading: false,
            option: {
                legend: {
                    right: 100,
                    formatter: function (name) {
                        return name;
                    },
                },
                tooltip: {
                    trigger: "axis",
                    textStyle: {
                        align: "left",
                    },
                    animation: false,
                    formatter: function (params) {
                        // console.log(params,565612);
                        var res = params[0].axisValueLabel;

                        res += `</br>${params[0].marker} <span style="font-weight: bold"> ${params[0].seriesName}</span>\u00A0\u00A0\u00A0\u00A0 ${( params[0].value/100000000).toFixed(2)} 亿`

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

                xAxis: {
                    // type: "time",
                    boundaryGap: false,
                    data: [],
                    axisTick: {
                        //去除刻度
                        show: false,
                    },
                    axisLine: {
                        //去除轴线
                        show: false,
                    },
                },
                yAxis: [
                    {
                        position: "left",
                        type: "value",
                        min: `dataMin`,
                        max: `dataMax`,
                        axisLabel: {
                            formatter: function (value) {

                                return `${value / 100000000} E`
                            }
                        }
                    },
                    {
                        position: "right",
                        // type: "log",
                        // splitNumber: "5",
                        show: false,
                    },
                ],
                dataZoom: [
                    {
                        type: "inside",
                        start: 10,
                        end: 100,
                        maxSpan: 100,
                        minSpan: 2,
                        animation: false,
                    },
                    {
                        start: 0,
                        end: 20,
                        showDetail: false,
                    },
                ],
                series: [
                    {
                        name: "capReal",
                        type: "line",
                        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",
                        },
                        data: [],
                    },
                    {
                        name: "Price [USD]",
                        type: "line",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        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:{
                            //   opacity:0
                            // },
                            label: {
                                formatter: "{b}",
                                fontSize: 10,
                                color: "rgba(0,0,0,0.8)",
                                align: "left",
                            },
                            data: [
                                // {
                                //   name: "$0.40",
                                //   yAxis: 0.4,
                                // },
                                // {
                                //   name: "$0.80",
                                //   yAxis: 0.8,
                                // },
                                // {
                                //   name: "$2",
                                //   yAxis: 2,
                                // },
                                // {
                                //   name: "$6",
                                //   yAxis: 6,
                                // },
                                // {
                                //   name: "$10",
                                //   yAxis: 10,
                                // },
                                // {
                                //   name: "$40",
                                //   yAxis: 40,
                                // },
                                // {
                                //   name: "$80",
                                //   yAxis: 80,
                                // },
                                // {
                                //   name: "$200",
                                //   yAxis: 200,
                                // },
                                // {
                                //   name: "$600",
                                //   yAxis: 600,
                                // },
                                {
                                    name: "$0K",
                                    yAxis: 0,
                                },
                                {
                                    name: "$5K",
                                    yAxis: 5000,
                                },
                                {
                                    name: "$10K",
                                    yAxis: 10000,
                                },
                                {
                                    name: "$15K",
                                    yAxis: 15000,
                                },
                                {
                                    name: "$20K",
                                    yAxis: 20000,
                                },
                                {
                                    name: "$25K",
                                    yAxis: 25000,
                                },
                                {
                                    name: "$30K",
                                    yAxis: 30000,
                                },
                                {
                                    name: "$50K",
                                    yAxis: 50000,
                                },
                                {
                                    name: "$70K",
                                    yAxis: 70000,
                                },
                                {
                                    name: "$100K",
                                    yAxis: 100000,
                                },
                            ],
                        },
                    },


                ],
            },
            capRealData: [],
            parmesTime: {
                start: "",
                end: ""
            },
            time: "",
            priceTime: "",
            switch3:""

        }
    },
    mounted() {
        this.fetchCapReal()
        this.switch3 = handelSwitchs(this.option, this.switch3)
    },
    methods: {
        inChart() {
            this.myChart = echarts.init(document.getElementById("capRealChart"));

            this.myChart.setOption(this.option);

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

        //请求数据渲染
        async fetchCapReal(start, end) {
            this.capRealLoading = true
            const capReal = await this.$API.getCapReal(start, end);
            const price = await this.$API.getBtcPrice(start, end);
            this.btcPrice = price.data.data
            this.capRealData = capReal.data.data

          
            this.option.xAxis.data.length = 0
            this.option.series[0].data.length = 0
            this.option.series[1].data.length = 0
            //市值数据处理 
            this.capRealData.forEach((item, index) => {
                this.time = item.time.split("T")[0]
                this.option.xAxis.data.push(this.time)
                // let capReal =`${Number((item.capReal/100000000).toFixed(2))} 亿` 
                this.option.series[0].data.push(Number(item.capReal.toFixed(2)))
                // this.option.series[0].data.push(capReal)
                //重置时间格式 处理价格数据
                this.btcPrice.forEach(price => {
                    this.priceTime = price.time.split("T")[0]
                    if (this.time == this.priceTime) {
                       
                        this.option.series[1].data.push(Number(parseInt(price.value*100)/100))
                    }
                })

            })



            this.inChart()
        
            this.capRealLoading = false
        },


        //父级时间
        handelSonTime(start, end) {
            this.parmesTime.start = start;
            this.parmesTime.end = end;
            this.fetchCapReal(this.parmesTime.start, this.parmesTime.end)
            this.parmesTime.start = ""
            this.parmesTime.end = ""
        },

         //点击对数/线性按钮切换
         handelLineSwitch() {
            this.option = handelLineType(this.option)          
            this.switch3 = handelSwitchs(this.option, this.switch3)
            this.myChart.setOption(this.option);          

        }
    }
}