import * as echarts from "echarts";
import { handelWatermark, chartsWidth ,emptyData} from "../../util/processingData"
export default {
    data() {
        return {
            //柱状图配置
            columnar: {

            },
            //饼图配置
            pieChart: {
                // title: {
                //     text: '同名数量统计',
                //     subtext: '纯属虚构',
                //     left: 'center'
                //   },
                tooltip: {
                    trigger: 'item',
                    // formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: 150,
                    // top: 20,
                    // bottom: 20,
                    // data: []
                },
                series: [
                    {
                        //   name: '姓名',
                        type: 'pie',
                        radius: '55%',
                        center: ['40%', '50%'],
                        data: [],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            },

            params: {
                req: "getDayBalanceData",
                radius: "btc",
                value: "",
            },
            //折线图
            option: {
                tooltip: {
                    trigger: "axis",
                    position: function (pt) {
                        return [pt[0], "10%"];
                    },
                    // formatter:(value)=>{
                    //     console.log(value,"交多少就覅");
                    // }

                },
                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",

                    },
                    {
                        type: "value",
                        // boundaryGap: [0, "100%"],
                        show: false,
                        position: "right",
                        min: "dataMin",
                        max: "dataMax",

                    },

                ],
                dataZoom: [
                    {
                        type: "inside",
                        start: 20,
                        end: 100,
                    },
                    {
                        start: 0,
                        end: 100,
                    },
                ],
                series: [
                    {
                        name: "MVRV",
                        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,
                                },
                            ],
                        },
                    },
                    {
                        name: "Price [ETH]",
                        type: "line",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#627eea",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#627eea",
                            width: "1",
                        },
                        yAxisIndex: 2,
                        data: [],
                    },


                ],
            },
            paramsTime: {
                start: "",
                end: ""
            },
            balanceData: [],
            balanceLoading: false,
            introduce: "",//接口介绍
            timeFlag: "",//时间变化的时候才发起请求
            value1: "",
            DateTime: "",
            pickerOptions: {
                disabledDate: (time) => {
                    return time.getTime() > new Date(this.DateTime).getTime()
                },
            },


        }
    },
    created() {
        this.onOption();
    },
    mounted() {

        this.$addStorageEvent(1, "buttonShow", false);
        let menuObj = localStorage.getItem("params");
        this.params.req = JSON.parse(menuObj).componentReq;
        this.introduce = JSON.parse(menuObj).introduce;
        this.params.value = JSON.parse(menuObj).parameter;
        window.addEventListener("resize", () => {
            if (this.myChart) this.myChart.resize();
        });
        //监听localstorage变化
        window.addEventListener("setItem", () => {
            let menuObj = localStorage.getItem("params");
            this.params.req = JSON.parse(menuObj).componentReq;
            this.introduce = JSON.parse(menuObj).introduce;
            this.params.value = JSON.parse(menuObj).parameter;
        });
    },
    watch: {

        params: {
            handler(val) {

                if (val.req == "getDayBalanceData" || val.req == "getDayBalanceAmountData") {

                  
                    this.fetchBalanceData(this.params.req, this.params.radius, val.value)

                    
                    this.value1 = ""
                } else {
                    return
                }
            },
            deep: true

        },
        //监听时间变化发起请求
        timeFlag: {
            handler(time) {
                if (this.params.req == "getDayBalanceData" || this.params.req == "getDayBalanceAmountData") {
                    this.fetchBalanceData(this.params.req, this.params.radius, this.params.value, this.paramsTime.start, this.paramsTime.end)
                    this.paramsTime.start = ""
                    this.paramsTime.end = ""
                }
            },
            deep: true

        }
    },
    methods: {
        //初始化柱状图图表
        inCharts() {
            this.myChart = echarts.init(document.getElementById("balanceData"));
            this.myChart.setOption(this.columnar);
            chartsWidth("balanceData", this);
        },
        //初始化饼图
        inChartsPieChart() {
            this.myChart = echarts.init(document.getElementById("balanceDataPieChart"));

            this.myChart.setOption(this.pieChart);
            chartsWidth("balanceDataPieChart", this);
        },
        async fetchBalanceData(req, radius, value, start, end) {
            this.balanceLoading = true
            const { data } = await this.$API.getBalanceData(req, radius, value, start, end)

            this.balanceData = data.data
            //空数据处理
            let noData = emptyData(data.data, this.columnar.series, this.inCharts, this)
            if (noData) {
                this.balanceLoading = false
                emptyData(data.data, this.pieChart.series, this.inChartsPieChart, this)
                return
            }
            this.columnar.xAxis.data.length = 0
            this.columnar.series[0].data.length = 0
            //添加水印
            this.columnar = handelWatermark(this.columnar)

            //更新数据后渲染


            let arr = Object.entries(this.balanceData[0])

            arr.forEach(item => {
                if (item[0] == "id" || item[0] == "dateTime") {
                    if (item[0] == "dateTime") {

                        this.DateTime = item[1].split(" ")[0]
                        this.columnar.title.text = `${this.DateTime}`
                    }
                    return

                } else {

                    let days = item[0].split("y")[1]
                    if (days >= 365) {


                        this.columnar.xAxis.data.push(`${(days / 365).toFixed(0)}years`)
                    } else {

                        this.columnar.xAxis.data.push(`${days}days`)
                    }

                    this.columnar.series[0].data.push(Number(item[1]).toFixed(2))
                }
            })

            this.inCharts()
            this.balanceLoading = false
        },
        onOption() {
            let that = this
            this.columnar = {
                animation: false,
                title: {
                    text: "",
                    left: "center",
                    textStyle: {
                        fontSize: 15,
                        fontWeight: "normal"
                    },
                },
                grid: {
                    right: 80,
                },
                tooltip: {
                    trigger: "axis",
                    textStyle: {
                        align: "left",
                    },
                    axisPointer: {
                        type: "cross",
                        crossStyle: {
                            color: "#999",
                        },
                    },
                },
                xAxis: {
                    // type:"category",
                    splitLine: {
                        color: "rgba(0,0,0,0.1)"
                    },
                    // axisLabel: {
                    //     formatter: function (a) {
                    //         let value
                    //         if (a>=10000) {
                    //             value = `${a / 1000}k`
                    //         }else{
                    //             value =a
                    //         }

                    //         return value
                    //     }
                    // },
                    data: [],
                    //最大值和最小值显示
                    // showMinLabel: true,
                    // showMaxLabel: true

                },
                yAxis: {
                    name: this.$t(`home.figure`),
                    // type: "log",
                    position: "left",
                    //坐标两边留白

                    //网格线设置
                    // splitLine: {
                    //     color: "rgba(0,0,0,0.1)",
                    // },

                    axisLabel: {
                        // interval:0
                        // formatter: function (value) {
                        //     let label
                        //     label = value / 1000000

                        //     return `${label}M`
                        // },
                    },
                    axisLine: {
                        onZero: false
                    }
                },
                dataZoom: [
                    {
                        show: true,
                        type: 'inside',
                        // minSpan: 10,
                        start: 1,
                        end: 100
                    },
                    {
                        show: true,
                        type: 'inside',
                        // filterMode: 'none',
                        // minSpan: 0.1,
                        // maxSpan: 99,
                        // yAxisIndex: [0],
                        // startValue: -20,
                        // endValue: 20
                    }
                ],
                series: [
                    {
                        type: 'bar',
                        showSymbol: false,
                        // clip: true,
                        data: [],
                        itemStyle: {
                            color: "#fdaa56",
                        },
                    }
                ]
            }
        },
        //替换对象的key
        objKeyReplace(obj) {
            let time = obj.dateTime.split(" ")[0]
            let keyMap = {
                "dateTime": "dateTime",
                "day0": `${time}_0`,
                "day1": `${time}_1`,
                "day2": `${time}_2`,
                "day3": `${time}_3`,
                "day4": `${time}_4`,
                "day5": `${time}_5`,
                "day6": `${time}_6`,
                "day7": `${time}_7`,
                "day15": `${time}_15`,
                "day30": `${time}_30`,
                "day60": `${time}_60`,
                "day90": `${time}_90`,
                "day180": `${time}_180`,
                "day360": `${time}_360`,
                "day540": `${time}_540`,
                "day720": `${time}_720`,
                "day1080": `${time}_1080`,
                "day1440": `${time}_1440`,
                "day1880": `${time}_1880`,
                "day2160": `${time}_2160`,
                "day2520": `${time}_2520`,
                "day2880": `${time}_2880`,
                "day3240": `${time}_3240`,
                "day3600": `${time}_3600`,
                "day3960": `${time}_3960`,
            }
            for (const key in obj) {
                let newKey = keyMap[key]
                if (newKey) {
                    obj[newKey] = obj[key]
                    delete obj[key]
                }
            }
            return obj
        },
        handelSonTime(start, end) {
            this.paramsTime.start = start;
            this.paramsTime.end = end;
            this.timeFlag = start
        },
        //时间选择
        handeldate() {

            this.fetchBalanceData(this.params.req, this.params.radius, this.params.value, this.value1)
        }
    }
}