import * as echarts from "echarts";
import { handelWatermark, chartsWidth ,emptyData} from "../../util/processingData"

export default {
    data() {
        return {
            //柱状图配置
            columnar: {
                title: {
                    text: "",
                    left: "center",
                    textStyle: {
                        fontSize: 15,
                        fontWeight: "normal"
                    },
                },
                tooltip: {
                    trigger: "axis",
                    textStyle: {
                        align: "left",
                    },
                    axisPointer: {
                        type: "cross",
                        crossStyle: {
                            color: "#999",
                        },
                    },
                    //   formatter: function (params) {
                    //   var res = params[0].axisValueLabel;

                    //   for (let i = 0; i <= params.length - 1; i++) {
                    //     res += `</br>${params[i].marker} <span style="font-weight: bold">${params[i].value[1]}</span> ${params[i].seriesName}`;
                    //   }
                    //   return "111";
                    // },
                },

                legend: {
                    right: 100,
                    formatter: function (name) {
                        return name;
                    },
                },
                dataZoom: [
                    {
                        type: "inside",
                        start: 0,
                        end: 100,
                    },
                    {  type: "inside",
                        start: 0,
                        end: 100,
                    },
                ],
                xAxis: [
                    {

                        type: "category",
                        data: [],
                        // axisLabel:{
                        //     formatter:(value)=>{                             
                        //         let label = null
                        //         if (value.search("y") !== -1) {
                        //             if (value.search("p") !== -1) {
                        //                 label = value.replace("p",".").replace("y","years")

                        //             }else{
                        //                 label = value.replace("y","years")
                        //             }

                        //         }else{
                        //             label=`${value}days`
                        //         }
                        //         return label
                        //     }
                        // }
                    },

                ],
                yAxis: [
                    {
                        type: "value",
                        // name: "Precipitation",
                        // min: 0,
                        // max: 250,
                        // interval: 50,
                        axisLabel: {
                            formatter: function (value) {

                                let label = value / 1000000
                                return `${label}M`
                            },
                        },
                    },

                ],
                series: [
                    {

                        type: "bar",
                        colorBy: "data",
                        // tooltip: {
                        //   valueFormatter: function (value) {
                        //     return value + " ml";
                        //   },
                        // },
                        data: [],
                        itemStyle: {
                            color: "#fdaa56",
                        },
                    },
                    // {
                    //     name: "Change 24h",
                    //     type: "bar",
                    //     itemStyle: {
                    //         color: "#607d8b",
                    //     },
                    //     // tooltip: {
                    //     //   valueFormatter: function (value) {
                    //     //     return value + " ml";
                    //     //   },
                    //     // },
                    //     data: [],
                    // },

                ],
            },
            params: {
                req: "holder",
                radius: "btc"
            },
            holderLoading: false,
            holderData: [],
            value1: "",
            DateTime: "",
            pickerOptions: {
                disabledDate: (time) => {
                    return time.getTime() > new Date(this.DateTime).getTime()
                },
            },

        }
    },
    mounted() {

        this.fetchHolder(this.params.req, this.params.radius, this.value1)
    },
    methods: {
        //初始化柱状图图表
        inCharts() {
            this.myChart = echarts.init(document.getElementById("holderColumnar"));

            this.myChart.setOption(this.columnar);
            chartsWidth("holderColumnar", this);
            window.addEventListener("resize", () => {
                if (this.myChart) this.myChart.resize();
            });
        },
        async fetchHolder(req, radius, start) {
            this.holderLoading = true
            const { data } = await this.$API.getHolder(req, radius, start)
            this.holderData = data.data
            //空数据处理
            let noData = emptyData(data.data, this.columnar.series, this.inCharts, this)
            if (noData) {
                this.holderLoading = 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.holderData)
            arr.forEach(item => {
                if (item[0] == "id" || item[0] == "dateTime") {
                    if (item[0] == "dateTime") {
                        let time = item[1].split("T")[0]
                        this.DateTime = item[1].split("T")[0]
                        this.columnar.title.text = `${time} `
                    }
                    return

                } else {

                    // this.columnar.xAxis[0].data.push( item[0].split("r")[1])
                    //X轴显示处理
                    let xLabel = item[0].split("r")[1]


                    if (xLabel.search("y") !== -1) {
                        if (xLabel.search("p") !== -1) {
                            this.columnar.xAxis[0].data.push(xLabel.replace("p", ".").replace("y", "years"))

                        } else {
                            this.columnar.xAxis[0].data.push(xLabel.replace("y", "years"))
                        }

                    } else {
                        this.columnar.xAxis[0].data.push(`${xLabel}days`)
                    }
                    // let days = item[0].split("r")[1]
                    // console.log('days',days)
                    this.columnar.series[0].data.push(item[1])
                }
            })

            this.inCharts()
            console.log(this.columnar);
            this.holderLoading = false

        },
        //时间选择
        handeldate() {

            this.fetchHolder(this.params.req, this.params.radius, this.value1)
        }
    }
}