import * as echarts from "echarts";
import { chartsWidth,emptyData,dataLength, handelProfitrate, handelZoom, handelLineType, handelSwitchs, handelUsdt, handelWatermark } from "../../util/processingData"

export default {
    data() {
        return {
            lengthTimer:null,
            USDCLoading: false,
            params: {
                req: "usdcVolume",
                radius: "ETH",
                start: "",
                end: ""
            },
            tronParams: {
                req: "tronUsdcVolume",
                radius: "ETH",
            },
            option: {
                tooltip: {
                    trigger: "axis",
                    //解决tooltip显示不全问题1 
                    confine: true,
                    formatter: function (params) {
                        const date = new Date(params[0].value[0]);
                        const year = date.getFullYear();
                        const month = date.getMonth() + 1;
                        const day = date.getDate();
                        let time =  `${year}-${month}-${day}`;
                        var res =time                       

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

                        }
                        return res;
                    }
                },
                legend: {
                    right: "100",
                    // data:[`sopr`,'asopr','easopr','lthsopr','sthsopr',],
                    // selected:{
                    //     'asopr': false,
                    //     'easopr': false,
                    //     'lthsopr': false,
                    //     'sthsopr': false,                      
                    // }
                },
                xAxis: {
                    type: "time",
                    boundaryGap: false,
                    //   axisLabel: {
                    //     formatter: `{yyyy}-{MM}-{dd}`,
                    //   },
                    data: []
                },
                yAxis: [
                    {
                        type: "value",
                        // boundaryGap: [0, "100%"],
                        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;
                            },
                        },
                        min: "dataMin",
                        max: "dataMax",

                    },
                    {
                        type: "value",
                        // boundaryGap: [0, "100%"],
                        show: true,
                        position: "right",
                        min: "dataMin",
                        max: "dataMax",

                    },

                ],
                dataZoom: [
                    {
                        type: "inside",
                        start: 0,
                        end: 100,
                    },
                    {
                        start: 0,
                        end: 100,
                    },
                ],
                series: [
                    {
                        name: "USDC on ETH",
                        type: "line",
                        smooth: false,
                        symbol: "circle",
                        showSymbol: false,
                        symbolSize: 5,
                        // areaStyle: {},
                        itemStyle: {
                            color: "#f7931a",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#f7931a",
                            width: "1",
                        },
                        data: [],
                    },
                    {
                        name: "USDC on TRON",
                        type: "line",
                        smooth: false,
                        symbol: "circle",
                        showSymbol: false,
                        symbolSize: 5,
                        // areaStyle: {},
                        itemStyle: {
                            color: "#f49495",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#f49495",
                            width: "1",
                        },
                        data: [],
                        yAxisIndex: 0
                    },


                ],
            },
            switch3: "",
            sma: "",
            zoomStart: 0,
            zoomEnd: 0,
        }
    },
    mounted() {
        this.switch3 = handelSwitchs(this.option, this.switch3)

        this.fetchUSDC(this.params.req, this.params.radius)

        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: {
        //初始化图表
        inCharts() {
            if (this.myChart == null) {
                this.myChart = echarts.init(document.getElementById("USDCBox"));
            }
            this.option = handelZoom(this.myChart, this.option, this, this.zoomStart, this.zoomEnd)

            this.myChart.setOption(this.option);
            chartsWidth("USDCBox", this);
            window.addEventListener("resize", () => {
                if (this.myChart) this.myChart.resize();
            });
        },
        async fetchUSDC(req, radius, start, end, sma) {
            this.USDCLoading = true
            const { data } = await this.$API.getCsupply(req, radius, start, end, sma)
            let usdtData = data.data

            const tron = await this.$API.getCsupply(this.tronParams.req, this.tronParams.radius, start, end, sma)
            let tronData = tron.data.data

            //空数据处理
            let noData = emptyData(data.data, this.option.series, this.inCharts, this)
            if (noData) {
                this.USDCLoading = false
                return
            }

            let usdtValueList = []
            //添加水印 
            this.option = handelWatermark(this.option)

            //渲染usdt
            usdtData.forEach(item => {
                usdtValueList.push(parseInt(item.volume * 100) / 100)
            })
            let tronValueList = []
            //渲染usdt  USDt on TRON交易量
            tronData.forEach(item => {
                if (!item.date) return
                tronValueList.push(parseInt(item.volumeSelf * 100) / 100)
            })
            this.option.series[0].data = handelUsdt(usdtData, usdtValueList)
            //判断USDt on TRON交易量 没有数据返回
            if (tronData[0].date) {
                this.option.series[1].data = handelProfitrate(tronData, tronValueList)
            }


            this.inCharts()

            this.USDCLoading = false

            //判定页面条数是否一致
            if (this.lengthTimer) {
                clearTimeout(this.lengthTimer)
            }
            this.lengthTimer = setTimeout(() => {

                this.$addStorageEvent(1, "lengthFlag", dataLength(this.option, this.option.series[0].data.length), );

            }, 10000)
        },
        //接收Home传的时间handelParmesTime
        handelSonTime(start, end) {
            let type
            this.params.start = start;
            this.params.end = end;
            this.fetchUSDC(this.params.req, this.params.radius, this.params.start, this.params.end, this.sma)
        },
        //点击对数/线性按钮切换
        handelLineSwitch() {
            this.option = handelLineType(this.option)
            this.switch3 = handelSwitchs(this.option, this.switch3)
            this.myChart.setOption(this.option);

        },
        //父级选择Sma
        handelSonSma(smaNUm) {
            this.sma = smaNUm
            let type
            this.fetchUSDC(this.params.req, this.params.radius, this.params.start, this.params.end, this.sma)
            this.$addStorageEvent(1, "sma", this.sma);
            // this.fatherSmaData = smaDataList
            // handelSmaData(smaDataList, this.option.series[3], this.inChart, this.start, this.end)

        },

    },
    beforeDestroy() {
        if (this.lengthTimer) {
            clearTimeout(this.lengthTimer)
        }
    }
}