import * as echarts from "echarts";
import { handelWatermark, chartsWidth,emptyData } from "../../util/processingData"
export default {
    data() {
        return {
            //柱状图配置
            //柱状图配置
            columnar: {},
            params: {
                req: "",
                radius: "btc"
            },
            BuyData: [],
            buyDataLoading: false,
            introduce: "",//接口介绍
            value1: "",
            pickerOptions: {
                disabledDate: (time) => {
                    return time.getTime() > new Date(this.DateTime).getTime()
                },
            },
            DateTime: "",

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

        let menuObj = localStorage.getItem("params");
        this.params.req = JSON.parse(menuObj).componentReq;
        this.introduce = JSON.parse(menuObj).introduce;
        //监听localstorage变化
        window.addEventListener("setItem", () => {
            let menuObj = localStorage.getItem("params");
            this.params.req = JSON.parse(menuObj).componentReq;
            this.introduce = JSON.parse(menuObj).introduce;
        });
    },
    watch: {
        params: {
            handler(val) {
                if (val.req == "getBuyData" || val.req == "getBuyAmountData") {
                    this.value1 = ""
                    this.fetchBuyData(this.params.req, this.params.radius)
                } else {
                    return
                }

            },
            deep: true

        }
    },
    methods: {
        //初始化柱状图图表
        inCharts() {
            this.myChart = echarts.init(document.getElementById("BuyData"));

            this.myChart.setOption(this.columnar);
            chartsWidth("BuyData", this);
            window.addEventListener("resize", () => {
                if (this.myChart) this.myChart.resize();
            });
        },
        async fetchBuyData(req, radius, start) {
            this.buyDataLoading = true
            const { data } = await this.$API.getHolder(req, radius, start)
            this.BuyData = data.data
            //空数据处理
            let noData = emptyData(data.data, this.columnar.series, this.inCharts, this)
            if (noData) {
                this.buyDataLoading = false
                return
            }
            // this.columnar.xAxis[0].data.length = 0
            this.columnar.series[0].data.length = 0
            //添加水印
            this.columnar = handelWatermark(this.columnar)
            //对象数据转换成数组
            let arr = Object.entries(this.BuyData)
            let newData = []
            arr.forEach(item => {
                if (item[0] == "id" || item[0] == "date") {
                    if (item[0] == "date") {
                        this.DateTime = item[1].split("T")[0]
                        this.columnar.title.text = `${this.DateTime}`
                    }
                    return

                } else {

                    if (item[0].split("t")[0] == "buyAmoun") {
                        item[0] = Number(item[0].split("t")[1])
                    } else {
                        item[0] = Number(item[0].split("y")[1])
                    }
                    newData.push(item)
                }

            })
            this.columnar.series[0].data = newData

            this.inCharts()


            this.buyDataLoading = false
        },
        onOption() {
            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 = a / 1000
                            return `${value}k`
                        }
                    },

                },
                yAxis: {
                    // position: "left",
                    //坐标两边留白
                    // boundaryGap: true,
                    //网格线设置
                    // splitLine: {
                    //     color: "rgba(0,0,0,0.1)",
                    // },
                    // axisTick: {
                    //     color: "red"
                    // },
                    axisLabel: {
                        formatter: function (value) {

                            let label = value / 1000000
                            return `${label}M`
                        },
                    },
                    // axisLine: {
                    //     onZero: false
                    // }
                },
                dataZoom: [
                    {
                        show: false,
                        type: 'inside',
                        minSpan: 30,
                        start: 0,
                        end: 95
                    },
                    {
                        show: false,
                        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",
                        },
                    }
                ]
            }
        },
        //时间选择
        handeldate() {
            this.fetchBuyData(this.params.req, this.params.radius, this.value1)
        }
    }
}