import * as echarts from "echarts";
import { handelZoom, handelSonSma } from "../../util/processingData"
import { getErcVolume } from "../../api/pages"
export default {
    data() {
        return {
            option: {
                legend: {
                    right: 100,
                    formatter: function (name) {
                        return name;
                    },
                },
                tooltip: {
                    trigger: "axis",
                    textStyle: {
                        align: "left",
                    },
                    animation: false,

                    axisPointer: {
                        animation: false,
                        snap: true,
                        label: {
                            precision: 2, //坐标轴保留的位数
                        },
                        type: "cross", //cross shadow
                        crossStyle: {
                            //十字轴横线
                            // opacity: "0",
                            width: 0.5,
                        },
                        lineStyle: {
                            // opacity: 0,
                        },
                    },
                },

                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: [],
                    axisTick: {
                        //去除刻度
                        show: false,
                    },
                    axisLine: {
                        //去除轴线
                        show: false,
                    },
                },
                yAxis: [
                    {
                        // name: "MVRV",
                        position: "left",
                        type: "value",
                        // min: `dataMin`,
                        // max: `dataMax`,
                    },
                    {
                        // name: "MVRV",
                        position: "right",
                        type: "value",
                        // min: `dataMin`,
                        // max: `dataMax`,
                        show: true,
                        axisLabel: {
                            formatter: function (value) {
                                let data
                                if (value > 100000000) {
                                    data = `${value / 100000000} E`
                                } else {
                                    data = value
                                }
                                return data
                            }
                        }

                    },
                ],
                dataZoom: [
                    {
                        type: "inside",
                        start: 10,
                        end: 100,
                        maxSpan: 100,
                        minSpan: 2,
                        animation: false,
                    },
                    {
                        start: 0,
                        end: 20,
                        showDetail: false,
                    },
                ],
                series: [
                    {
                        type: "line",
                        name: "活跃地址数",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#f7931a",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#f7931a",
                            width: "1",
                        },
                        yAxisIndex: 0,
                        data: [],
                    },
                    {
                        type: "line",
                        name: "交易量",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#24acf2",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#24acf2",
                            width: "1",
                        },
                        yAxisIndex: 1,
                        data: [],
                    },

                ],
            },
            TokenVolumeLoading: false,
            params: {
                req: "ETHTokenVolume",
                radius: "eth",
            },
            times: {
                start: "",
                end: ""
            },
            dataCount: [],
            introduce: "",
            activeNames: "",
            ercVolumeData: [],
            chartLoading: false,
            seriesData: [],
            list: [],
            chartDom: [],
            type: "",

            bigLine: {
                tooltip: {
                    trigger: 'axis',
                    position: function (pt) {
                        return [pt[0], '10%'];
                    }
                },
                // grid: {
                //     top: 1,
                //     bottom: 20,
                //     left: 50,
                //     right: 5,
                // },

                xAxis: {
                    // type: 'time',
                    boundaryGap: false,
                    data: []
                },
                yAxis: {
                    // type:"value",
                    show: true,
                    scale: true,
                    position: 'left',
                    axisLine: { show: false },
                    axisTick: { show: false },
                    splitLine: { show: false },
                    axisLabel: { inside: false, interval: 0 }
                },
                dataZoom: [
                    {
                        type: 'inside',
                        start: 0,
                        end: 100
                    },

                ],
                series: [
                    {
                        name: '币价',
                        type: 'line',
                        smooth: false,
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#ffa3a8",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            color: "#ffa3a8",
                            width: 1,
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        { offset: 0, color: 'red' },
                                        { offset: 0.5, color: 'pink' },
                                        { offset: 1, color: '#ddd' }
                                    ]
                                )
                            }
                        },

                        data: []
                    }
                ]

            },
            timeData: [],
            ids: "",
            chartLoading: false,
            abbrArr: [],
            zoomStart: 0,
            zoomEnd: 0,
            params1: {
                abbr: "TUSD",
                sma: 0
            }

        }
    },
    mounted() {

        this.$addStorageEvent(1, "timeShow", true);
        this.$addStorageEvent(1, "timeDisable", true);
        //按钮禁用
        this.$addStorageEvent(1, "buttonShow", false);

        // this.fetchTokenVolume(this.params.req, this.params.radius, this.times.start, this.times.end)
        this.fetchTokenVolume()


        this.$addStorageEvent(1, "zoomStart", this.zoomStart);
        this.$addStorageEvent(1, "zoomEnd", this.zoomEnd);
        window.addEventListener("setItem", () => {
            this.zoomStart = localStorage.getItem("zoomStart")
            this.zoomEnd = localStorage.getItem("zoomEnd")
        })

    },

    methods: {
        initCharts() {
            // this.myChart.clear();
            if (this.myChart == null) {
                this.myChart = echarts.init(document.getElementById("TokenVolume"));
            }
            this.option = handelZoom(this.myChart, this.option, this, this.zoomStart, this.zoomEnd)

            this.myChart.setOption(this.option);
            //  当窗口或者大小发生改变时执行resize，重新绘制图表
            window.addEventListener("resize", () => {
                if (this.myChart) this.myChart.resize();
            });
        },
        //请求折线图数据
        async fetchTokenVolume(params) {

            this.TokenVolumeLoading = true



            const { data } = await getErcVolume(params)


            this.dataCount = data.data
         

            if (this.dataCount.length == 0) {
                this.$message({
                    message: this.$t(`home.NoData`),
                    type: 'warning'
                  });
                this.TokenVolumeLoading=false
                return
            }



            this.dataCount.forEach(item => {
                this.list.push([item.list, item.abbr])
                this.chartDom.push({ params: item.abbr })
            })

            //处理数据格式
            this.seriesData = this.handelLIst(this.list)



            this.TokenVolumeLoading = false
        },
        //下拉折线图渲染
        handelClick(currency, id, index) {
            this.chartLoading = true

            if (currency !== this.type) {
                this.type = currency
                this.ids = `echarts${id}`
                this.bigEchart = echarts.init(document.getElementById(this.ids))
                this.bigLine = {
                    tooltip: {
                        trigger: 'axis',
                        //解决tooltip显示不全问题1 
                        confine: true,
                    },
                    // grid: {
                    //     top: 1,
                    //     bottom: 20,
                    //     left: 50,
                    //     right: 5,
                    // },
                    graphic: [
                        {
                            type: 'group',
                            // rotation: Math.PI / 2,
                            bounding: 'raw',
                            right: "50%",
                            top: "40%",

                            // z: 10,
                            // rotation: 6,
                            children: [
                                {
                                    type: 'text',
                                    left: 'center',
                                    top: 'center',
                                    silent: true,
                                    // z: 100,
                                    style: {
                                        fill: `rgba(0,0,0,0.1)`,
                                        text: `coinbus.cc`,
                                        font: 'bold 80px sans-serif',

                                    }
                                }
                            ]
                        }
                    ],


                    xAxis: {
                        // type: 'time',
                        boundaryGap: false,
                        data: this.seriesData[index].map(item => item[0]),
                        // axisLabel:{
                        //     formatter: (value)=>{
                        //      let time =value.split(" ")[1]
                        //     return time
                        //     }
                        // }
                    },
                    yAxis: {
                        // type:"value",
                        show: true,
                        scale: true,
                        position: 'left',
                        axisLine: { show: false },
                        axisTick: { show: false },
                        splitLine: { show: false },
                        // axisLabel: { inside: false, interval: 0 },
                        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;
                            },
                        },
                    },
                    dataZoom: [
                        {
                            type: 'inside',
                            start: 0,
                            end: 100
                        },

                    ],
                    series: [
                        {
                            name: 'Transaction volume for token',
                            type: 'line',
                            smooth: false,
                            symbol: "circle",
                            symbolSize: 5,
                            showSymbol: false,
                            itemStyle: {
                                color: "#ffa3a8",
                                borderColor: "rgba(221,220,107,0.1)",
                                borderWidth: 12,
                            },
                            lineStyle: {
                                color: "#ffa3a8",
                                width: 1,
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            { offset: 0, color: 'red' },
                                            { offset: 0.5, color: 'pink' },
                                            { offset: 1, color: '#ddd' }
                                        ]
                                    )
                                }
                            },

                            data: this.seriesData[index].map(item => item[1])
                        }
                    ]

                }
                this.bigEchart.setOption(this.bigLine, true)

                this.$nextTick(() => {
                    this.bigEchart.resize();
                });
                // echart.setOption(this.bigLine);
                //  当窗口或者大小发生改变时执行resize，重新绘制图表
                window.addEventListener("resize", () => {
                    this.bigEchart.resize();
                });

            } else {
                this.type = ''
                // echart.dispose()
            }

            this.chartLoading = false
        },
        handelChang() {

        },
        //获取父级时间
        handelSonTime(start, end) {
            this.times.start = start;
            this.times.end = end;
            this.fetchTokenVolume(this.params.req, this.params.radius, this.times.start, this.times.end)
            this.times.start = "";
            this.times.end = "";
        },

        //处理折线图数据格式
        handelLIst(data) {

            let sumArr = []
            let arr = []
            data.forEach(item => {
                if (item[0]) {
                    item[0].forEach(item => {
                        // Number(item.price).toFixed(2)
                        // 
                        let price = Number(parseInt(item.volume * 10000) / 10000)
                        let year = item.dateTime.split("T")[0]
                        let hours = item.dateTime.split("T")[1].split(".")[0]
                        // let time = `${year} ${hours} `
                        let time = year

                        arr.push([time, Number(price), item.abbr])
                    })
                } else {
                    arr.push(["", "", item[1]])
                }

            })
            // sumArr.push(arr)

            this.abbrArr = arr
            let newArr = []
            let a = []
            for (const i of arr) {
                if (a.indexOf(i[2]) === -1) {
                    newArr.push([[i[0], i[1]]])
                    a.push(i[2])
                } else {
                    newArr[a.indexOf(i[2])].push([i[0], i[1]])
                }
            }

            newArr.forEach(item => {
                item.sort((a, b) => {

                    return a[0] > b[0] ? 1 : -1
                })
            })


            return newArr

        },
        //选择Sma
        handelSonSma(smaDataList) {


            this.params1.sma = smaDataList

            this.fetchTokenVolume(this.params1)

            this.$addStorageEvent(1, "sma", this.params1.sma);

        },


    }
}