import * as echarts from "echarts";
import { handelBtcPrice, handelProfitrate } from "../../util/processingData"
export default {
    data() {
        return {
            sumcsupplyLoading: false,
            params: {
                req: "sumcsupply",
                radius: "btc"
            },
            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;
                            },
                        },
                    },
                    {
                        type: "value",
                        // boundaryGap: [0, "100%"],
                        show: true,
                        position: "right"
                    },
                    {
                        type: "value",
                        // boundaryGap: [0, "100%"],
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                ],
                dataZoom: [
                    {
                        type: "inside",
                        start: 20,
                        end: 100,
                    },
                    {
                        start: 0,
                        end: 100,
                    },
                ],
                series: [
                    {
                        name: "Cumulative Circulating Supply",
                        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,
                                },
                            ],
                        },
                    },

                ],
            },
            sumcsupplyData: [],
            btcPrice: [],
            priceTime: "",
            parmesTime:{
                start:"",
                end:""
            }
        }
    },
    mounted() {
        this.fetchSumcsupply(this.params.req, this.params.radius)
    },
    methods: {
        //初始化图表
        inCharts() {
            this.myChart = echarts.init(document.getElementById("sumcsupplyBox"));

            this.myChart.setOption(this.option);

            window.addEventListener("resize", () => {
                if (this.myChart) this.myChart.resize();
            });
        },
        async fetchSumcsupply(req, radius, start, end) {
            this.sumcsupplyLoading = true
            const { data } = await this.$API.getCsupply(req, radius, start, end)
            this.sumcsupplyData = data.data
      
            //请求BTC价格
            const price = await this.$API.getBtcPrice(start, end);
            this.btcPrice = price.data.data

            let time = ""
            let sumcsupplyValueList = []
            let priceValueList = []
            let newPriceData = []
            this.sumcsupplyData.forEach(item => {
                time = item.date.split("T")[0]
                sumcsupplyValueList.push(Number(item.value.toFixed(2)))

                //判断渲染与上面数据时间一致得价格数据
                this.btcPrice.forEach(price => {

                    this.priceTime = price.time.split("T")[0]
                    // console.log(this.timer === this.priceTime);
                    if (time === this.priceTime) {

                        priceValueList.push(Number(parseInt(price.value*100)/100))
                        newPriceData.push(price)
                    }
                })
            })
            this.option.series[0].data = handelProfitrate(this.sumcsupplyData, sumcsupplyValueList)
            this.option.series[1].data = handelBtcPrice(newPriceData, priceValueList)

            this.inCharts()
            this.sumcsupplyLoading = false
        },
         //接收Home传的时间handelParmesTime
         handelSonTime(start, end) {
            this.parmesTime.start = start;
            this.parmesTime.end = end;
            this.fetchSumcsupply(this.params.req, this.params.radius,this.parmesTime.start, this.parmesTime.end)
        },
    }
}