import * as echarts from "echarts";
export default {
    data() {
        return {
            option: {
                legend: {
                    right: 100,
                    formatter: function (name) {
                        return name;
                    },
                },
                tooltip: {
                    trigger: "axis",
                    textStyle: {
                        align: "left",
                    },
                    animation: false,
                    // 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 res;
                    // },
                    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: this.$t(`home.figure`),
                        // name: "MVRV",
                        position: "left",
                        type: "value",
                    },
                ],
                dataZoom: [
                    {
                        type: "slider",
                        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",
                        },

                        data: [],
                    },
                ],
            },
            params: {
                req: "tronUSDCBigTx",
                radius: "eth",
                page: 1,
                limit:50,
            },
            paramsCount: {
                req: "tronUSDCBigTxCount",
                radius: "eth",
            },          
            times: {
                start: "",
                end: ""
            },
            tabelloading: false,
            tableData: [],
            tronUSDCBigTxLoading: false,
            dialog: false,
            tabelUrl: "",
            color: "",
            introduce: "",
            valueList: [
                {
                    value: 50000,
                    label: "余额 > 5W",
                },
                {
                    value: 100000,
                    label: "余额 > 10W",
                },
                {
                    value: 150000,
                    label: "余额 > 15W",
                },
                {
                    value: 250000,
                    label: "余额 > 25W",
                },
                {
                    value: 500000,
                    label: "余额 > 50W",
                },
                {
                    value: 1000000,
                    label: "余额 > 100W",
                },
            ],
            state: "",
            value: "",
            tabelParams: {
                req: "",
                address: "",
                txId: "",
                type: "",
            },
            animate: false,
            notice: "",
            amountTxid: "",
            amountTime: "",
            dialogVisible: false,
            dialogData: [],
            dialogDate: "",
            rollingData: [],
            setInTime: null,
            currencyName: "",
            currentPage4: 1,//当前页数
            totalPage: 0,
            list:[],
            setInTimeout:null,
            search:""

        }
    },
    mounted() {
     
        //请求数据
        this.fetchTronUSDCBigTx(this.params.req, this.params.radius, this.search, this.times.start, this.times.end, this.params.page,this.params.limit)
        this.fetchTronUSDCBigTxxcount(this.paramsCount.req, this.paramsCount.radius)

        // let menuObj = localStorage.getItem("params");
        // this.introduce = JSON.parse(menuObj).introduce;
        // this.show = localStorage.getItem("currentTabComponent");
        let obj = localStorage.getItem("src");
        // this.color = JSON.parse(obj).color;
        window.addEventListener("setItem", () => {
            // let menuObj = localStorage.getItem("params");
            // // this.params.req = JSON.parse(menuObj).componentReq;
            // this.introduce = JSON.parse(menuObj).introduce;
            let obj = localStorage.getItem("src");
            // this.color = JSON.parse(obj).color;
        });
        this.$addStorageEvent(1, "buttonShow", false)
        // this.$addStorageEvent(1, "introduce", this.introduce);
        if (this.setInTimeout || this.setInTime) {
            clearInterval(this.setInTime)
            clearTimeout(this.setInTimeout)
        }

    },

    methods: {
        initCharts() {
            this.myChart = echarts.init(document.getElementById("tronUSDCBigTx"));
            // this.myChart.clear();
            this.myChart.setOption(this.option);
            //  当窗口或者大小发生改变时执行resize，重新绘制图表
            window.addEventListener("resize", () => {
                if (this.myChart)this.myChart.resize();
            });
        },
        //请求页面tabel数据
        async fetchTronUSDCBigTx(req, radius, search, start, end, page,limit) {
            this.tronUSDCBigTxLoading = true
            const { data } = await this.$API.getETHTokenBigtx(req, radius, search, start, end, page,limit);
            this.tableData = data.data.data
            this.list = [...data.data.data]
            this.totalPage = data.data.totalPage
   

            // this.rollingData = data.data
            //通知栏滚动
            if (this.setInTimeout || this.setInTime) {
                clearInterval(this.setInTime)
                clearTimeout(this.setInTimeout)
            }
            
            setInterval(() => {
                this.showMarquee(JSON.parse(JSON.stringify(this.tableData)))
            }, 3000);
          
            if (page) {
                this.currentPage4 = page
            } else {
                this.currentPage4 = 1
            }

            this.tronUSDCBigTxLoading = false
        },
        //请求折线图数据
        async fetchTronUSDCBigTxxcount(req, radius, start, end, type) {
            // this.usdtbigtxLoading = true
            const { data } = await this.$API.getBigDealsCount(
                req,
                radius,
                start,
                end,
                type
            );
            // console.log(data, 98);
            this.dataCount = data.data
            this.option.series[0].data.length = 0;
            this.option.xAxis.data.length = 0;
            this.dataCount.forEach(item => {
                let time = item.dataTime.split("T")[0];
                this.option.xAxis.data.push(time);
                this.option.series[0].data.push(item.num);
            })
            this.option.series[0].name = req
            // this.option.series[0].itemStyle.color = this.color;
            // this.option.series[0].lineStyle.color = this.color;
            this.currentPage4 = 1
            this.initCharts();

            // this.usdtbigtxLoading = false
        },
        //处理表格里的时间
        formatTime(value) {
            let newTime = value.split(".")[0].replace("T", " ");
            return newTime;
        },

        //关闭弹窗
        handelClose() {
            this.dialog = false;
        },
        //下拉框选择
        handelChang(e) {
            this.state = ""
            this.params.page=1
            this.search = this.value
            this.fetchTronUSDCBigTx(this.params.req, this.params.radius, this.value,this.times.start,this.times.end, this.params.page,this.params.limit)
            // this.value = ""
        },
        handelSearch(b) {
            //搜索框输入参数   
            this.value = ""
            this.params.page=1
            this.search = this.state
            this.fetchTronUSDCBigTx(this.params.req, this.params.radius, this.state,this.times.start,this.times.end, this.params.page,this.params.limit)
            // this.state = ""
        },
        //获取父级时间
        handelSonTime(start, end) {
            this.times.start = start;
            this.times.end = end;
            let search
            if (this.state) {
                search = this.state
            } else if (this.value) {
                search = this.value
            }

            this.fetchTronUSDCBigTx(this.params.req, this.params.radius,search,this.times.start,this.times.end, this.params.page,this.params.limit)
            this.fetchTronUSDCBigTxxcount(this.paramsCount.req, this.paramsCount.radius,this.times.start,this.times.end)
            //this.times.start = "";
            //this.times.end = "";
        },
        //点击滚动通知栏的查看详情
        handelDetails() {
            this.dialogVisible = true;
            this.dialogData = this.list.find((item) => {
                return item.txId == this.amountTxid;
            });
            this.dialogDate = this.dialogData.dateTime.split(".")[0].replace("T", " ");
        },
        // 通知栏滚动
        showMarquee(data) {
            this.animate = true;
         
            this.setInTimeout = setTimeout(() => {
                // this.notice.push(rollingData[0].label);
              
                this.amountTxid = this.list[0].txId;
                this.amountTime = this.list[0].date
                    .split(".")[0]
                    .replace("T", "  ");
                this.notice = this.list[0].amount.toFixed(3);
                // this.currencyName = this.list[0].abbr;
                this.list.push(this.list[0]);
                this.list.shift();
                this.animate = false;
              
            }, 500);

        },
        //点击的改变页数
        handleCurrentChange(value) {
            this.params.page = value         
            this.fetchTronUSDCBigTx(this.params.req, this.params.radius, this.search,this.times.start,this.times.end, this.params.page,this.params.limit)
           
            // this.currentPage4 =  this.params.page
        },
           //改变每页条数
           handleSizeChange(val) {
            this.params.page = 1;
            this.params.limit = val;
            this.fetchTronUSDCBigTx(this.params.req, this.params.radius, this.search,this.times.start,this.times.end, this.params.page,this.params.limit)

        },
    },

    beforeDestroy(){
        clearInterval(this.setInTime)
        clearTimeout(this.setInTimeout)
        console.log("组件离开");
    },
    //组件激活唤醒函数
    activated() {
        console.log("组件激活");
    },
    //组件销毁唤醒函数
    deactivated() {
        clearInterval(this.setInTime)
        clearTimeout(this.setInTimeout)
        console.log("组件离开");
     
    },
   

}