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: '{b}: {c}: {d}'
                    valueFormatter: (value) => {
                        return `${(value / 1000000).toFixed(2)}M`
                    }
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: 150,
                    // top: 20,
                    // bottom: 20,
                    // data: []
                },
                graphic: [{
                    type: 'group',
                    // rotation: Math.PI / 2,
                    bounding: 'raw',
                    right: "50%",
                    top: "40%",
                    // z: 10,
                    // rotation: 6,
                    children: [
                        {
                            type: 'text',
                            left: 'center',
                            top: 'center',
                            // z: 100,
                            style: {
                                fill: `rgba(0,0,0,0.1)`,
                                text: `coinbus.cc`,
                                font: 'bold 80px sans-serif',

                            }
                        }
                    ]
                }],
                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: "",
                radius: "btc"
            },
            profitData: [],
            profitLoading: false,
            introduce: "",//接口介绍
            value1: "",
            DateTime: "",
            pickerOptions: {
                disabledDate: (time) => {
                    return time.getTime() > new Date(this.columnar.title.text).getTime()
                },
            },
        }
    },
    created() {
        this.onOption();
    },
    mounted() {
        console.log("我of窘境 ");
        let menuObj = localStorage.getItem("params");
        this.params.req = JSON.parse(menuObj).componentReq;
        this.introduce = JSON.parse(menuObj).introduce;
        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;
        });
    },
    watch: {
        params: {
            handler(val) {
                if (val.req == "getProfitData" || val.req == "getProfitAmountData") {
                    this.fetchProfitData(this.params.req, this.params.radius)
                    this.value1 = ""
                } else {
                    return
                }

            },
            deep: true

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

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

        },
        //初始化饼图
        inChartsPieChart() {
            this.myChart = echarts.init(document.getElementById("profitPieChart"));

            this.myChart.setOption(this.pieChart);
            chartsWidth("profitPieChart", this);
            // window.addEventListener("resize", () => {
            //     if (this.myChart)this.myChart.resize();;
            // });
        },
        async fetchProfitData(req, radius, start) {
            this.profitLoading = true
            const { data } = await this.$API.getHolder(req, radius, start)
            this.profitData = data.data.list
            //空数据处理
            let noData = emptyData( this.profitData, this.columnar.series, this.inCharts, this)
            if (noData) {
                this.profitLoading = false
                emptyData( this.profitData, 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 newData = []
            this.profitData.forEach(item => {
                // console.log( this.profitData,65656);
                if (item.key.split("t")[1] == "_amoun") {//getProfitAmountData 的数据
                    let key = item.key
                    item.key = Number(key.split("t")[2])
                    let value = Number(item.value)
                    item.value = +value.toFixed(2)
                } else {//getProfitData 的数据           

                    let key = item.key
                    item.key = Number(key.split("t")[1])
                    item.value = Number(item.value)
                }

                newData.push([item.key, item.value])
            })

            for (let i = 0; i < newData.length - 1; i++) {
                for (let j = 0; j < newData.length - 1; j++) {
                    if (newData[j][0] > newData[j + 1][0]) {
                        var temp = newData[j + 1];
                        newData[j + 1] = newData[j];
                        newData[j] = temp;

                    }
                }

            }
            //添加水印
            //  this.pieChart= handelWatermark(this.pieChart)
            //  console.log(this.pieChart,"交电费1111极地反击");
            let item1Sum = 0
            this.pieChart.series[0].data.length = 0
            newData.map(item => {//饼图赋值

                if ((item[0] * 100) <= 100) {

                    this.pieChart.series[0].data.push({ value: item[1], name: `${(item[0] * 100).toFixed(0)}%` })
                } else {
                    item1Sum += item[1]
                }


            })
            this.pieChart.series[0].data.push({ value: item1Sum, name: `> 100%` })

            this.columnar.title.text = `${data.data.date}`
            // for (let i = 0; i < newData.length; i++) {
            //     console.log(newData[i][0]);
            //     if (newData[i][0] >= 100) {
            //         newData[i][0]=newData[i][0]/1000
            //         newData[i][2]="k"
            //     }else{
            //         newData[i][0]= newData[i][0]
            //     }

            // }newData
            this.columnar.xAxis.data.length = 0
            this.columnar.series[0].data.length = 0
            newData.forEach(item => {


                this.columnar.xAxis.data.push(`${(item[0] * 100).toFixed(0)}%`)
                this.columnar.series[0].data.push(item[1])
            })
            // this.columnar.xAxis[0].data =newData[0]
            // this.columnar.series[0].data = newData[1]


            this.inCharts()
            this.inChartsPieChart()

            this.profitLoading = 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",
                    },
                    valueFormatter: (value) => {
                        return `${(value / 1000000).toFixed(2)}M`
                    },
                    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 `${a}%`
                    //     }
                    // },
                    data: [],
                    //最大值和最小值显示
                    showMinLabel: true,
                    showMaxLabel: true

                },
                yAxis: {
                    // name:this.$t(`home.figure`),
                    type: "log",
                    position: "left",
                    //坐标两边留白
                    // boundaryGap: "5%",
                    //网格线设置
                    // splitLine: {
                    //     color: "rgba(0,0,0,0.1)",
                    // },

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

                            return `${label}M`
                        },
                    },
                    axisLine: {
                        onZero: false
                    }
                },
                dataZoom: [
                    {
                        show: true,
                        type: 'inside',
                        // minSpan: 10,
                        start: 0,
                        end: 12
                    },
                    {
                        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",
                        },
                    }
                ]
            }
        },
        //时间选择
        handeldate() {

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