import * as echarts from "echarts";
import { handelWatermark, chartsWidth ,emptyData} from "../../util/processingData"
export default {
    data() {
        return {
            // option: {
            //     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: {
            //         data:[],
            //         // splitLine: {
            //         //     color: "rgba(0,0,0,0.1)"
            //         // },
            //         // boundaryGap:true,
            //         axisLabel: {
            //             formatter: function (a) {
            //                 let value = a / 1000
            //                 return `${value}k`
            //             }
            //         }
            //     },
            //     yAxis: {
            //         position: "left",
            //         // offset:3,//Y轴偏移

            //         //网格线设置
            //         // 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: 10,
            //             end: 95
            //         },
            //         {
            //             show: false,
            //             type: 'inside',
            //             start: 10,
            //             end: 95
            //             // filterMode: 'none',
            //             // minSpan: 0.1,
            //             // maxSpan: 99,
            //             // yAxisIndex: [0],
            //             // startValue: -20,
            //             // endValue: 20
            //         }
            //     ],
            //     series: [
            //         {
            //             type: 'bar',
            //             showSymbol: false,
            //             // clip: true,
            //             data: [],
            //             itemStyle: {
            //                 color: "#fdaa56",
            //             },
            //         }
            //     ]
            // },
            params: {
                req: "",
                radius: "btc"
            },
            diffData: [],
            diffDataLoading: false,
            introduce: "",
            xData: [],
            value1: "",
            //柱状图配置
            columnar: {
                title: {
                    text: "",
                    left: "center",
                    textStyle: {
                        fontSize: 15,
                        fontWeight: "normal"
                    },
                },
                dataZoom: [
                    {
                        type: "inside",
                        start: 0,
                        end: 100,
                    },
                    {  type: "inside",
                        start: 0,
                        end: 100,
                    },
                ],
                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;
                    },
                },
                xAxis: [
                    {

                        // type: "category",
                        data: [],
                        axisLabel: {
                            formatter: function (a) {
                                let value = a / 1000
                                return `${value}k`
                            }
                        }

                    },

                ],
                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: [],
                    // },

                ],
            },
            DateTime: "",
            pickerOptions: {
                disabledDate: (time) => {
                    return time.getTime() > new Date(this.DateTime).getTime()
                },
            },

        }
    },
    // 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 == "getDiffData" || val.req == "getDiffAmountData") {
                    this.params.req = val.req
                    this.fetchDiffData(this.params.req, this.params.radius)
                    this.value1 = ""
                } else {
                    return
                }
            },
            deep: true,


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

            this.myChart.setOption(this.columnar);
            chartsWidth("diffData", this);
            window.addEventListener("resize", () => {
                if (this.myChart) this.myChart.resize();
            });
        },
        async fetchDiffData(req, radius, start) {
            this.diffDataLoading = true
            const { data } = await this.$API.getHolder(req, radius, start)
            this.diffData = data.data.list
            //空数据处理
            let noData = emptyData(this.diffData, this.columnar.series, this.inCharts, this)
            if (noData) {
                this.diffDataLoading = false
                return
            }
            this.columnar.xAxis[0].data.length = 0
            this.columnar.series[0].data.length = 0
            this.columnar.title.text = data.data.date
            this.DateTime = data.data.date

            //添加水印
            this.columnar = handelWatermark(this.columnar)
            //key改成对应数字        
            this.diffData.forEach(item => {
                if (req == "getDiffData") {
                    item.key = Number(item.key.split("f")[2])
                } else {
                    item.key = Number(item.key.split("t")[1])
                }


            })
            //数组根据Key排序
            let newArr = this.sortKey(this.diffData, 'key')
            newArr.forEach(item => {

                this.columnar.xAxis[0].data.push(item.key.toString())
                this.columnar.series[0].data.push(Number(item.value).toFixed(2))
            })

            // let obj = {}
            //obj 根据key排序
            // let res = this.objectToArray({ ...this.diffData })
            // console.log({ ...this.diffData },"及第三方1技术附件");
            // for (let index = res.length - 1; index > -1; index--) {
            //     let a = res[index]
            //     obj[a[0]] = a[1]
            // }
            //对象转数组
            // let arr = Object.entries(obj)
            // let newData = []
            // arr.forEach(item => {
            //     if (item[0] == "id" || item[0] == "date") {
            //         if (item[0] == "date") {
            //             let time = item[1].split("T")[0]
            //             this.option.title.text = `${time}`
            //         }
            //         return

            //     } else {                                    
            //         if (item[0].split("t")[0] == "diffAmoun") {//getDiffAmountData 页面数据
            //             if (item[0].split("M")[0]=="diffAmount") {//负数
            //                 item[0] = Number(`-${item[0].split("M")[1]}`)
            //             }else{                           
            //                 item[0] = Number(item[0].split("t")[1])
            //             }
            //         } else {//getDiffData 页面数据
            //             if (item[0].split("M")[0] == "diff") {                          
            //                 item[0] = Number(`-${item[0].split("M")[1]}`)

            //             } else {  

            //                 item[0] = Number(item[0].split("ff")[1])

            //             }
            //         }
            //         newData.push(item)                   
            //     }
            // })

            // this.option.series[0].data = newData

            this.inCharts()

            console.log(this.columnar, 556);
            this.diffDataLoading = false
        },

        formatName(name) {
            let arr = [...name]
            let a
            for (let i = 0; i < arr.length; i++) {
                if (!isNaN(arr[i])) {
                    let str = name.slice(i) //这是数字
                    if (arr[i - 1] === 'M') {
                        return {
                            isM: true,
                            value: str,
                            name
                        }
                    } else {
                        return {
                            isM: false,
                            value: str,
                            name
                        }
                    }
                }
            }
        },
        objectToArray(obj = {}) {
            const res = [];
            const keys = Object.keys(obj);

            for (let key of keys) {
                res.push([
                    key, obj[key]
                ]);
            };
            return res;
        },

        func(x) {
            x /= 10;
            return Math.sin(x) * Math.cos(x * 2 + 1) * Math.sin(x * 3 + 2) * 50;
        },
        generateData() {
            let data = [];
            for (let i = -200; i <= 200; i += 0.1) {
                data.push([i, this.func(i)]);
            }
            return data;
        },
        //时间选择
        handeldate() {

            this.fetchDiffData(this.params.req, this.params.radius, this.value1)
        },
        //数组Key排序
        sortKey(array, key) {
            return array.sort(function (a, b) {
                var x = a[key];
                var y = b[key];
                return ((x < y) ? -1 : (x > y) ? 1 : 0)
            })
        },

    }
}