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`),
                        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: "",
                radius: "eth",
            },
            paramsCount: {
                req: "usdcbigtxcount",
                radius: "eth",
            },
            searchParams: {
                search: "",
                start: "",
                end: ""
            },
            times: {
                start: "",
                end: ""
            },
            tabelloading: false,
            tableData: [],
            usdcbigtxLoading: false,
            dialog: false,
            tabelUrl: "",
            color: "",
            introduce: "",
            valueList: [
                {
                    value: 500,
                    label: "amount > 500",
                },
                {
                    value: 1500,
                    label: "amount > 1500",
                },
                {
                    value: 5000,
                    label: "amount > 5000",
                },
                {
                    value: 10000,
                    label: "amount > 10000",
                },
                {
                    value: 15000,
                    label: "amount > 15000",
                },
            ],
            state: "",
            value: "",
            tabelParams: {
                req: "",
                address: "",
                txId: "",
                type: "",
            },
            animate: false,
            notice: "",
            amountTxid: "",
            amountTime: "",
            dialogVisible: false,
            dialogData: [],
            dialogDate: "",
            noticeList: [],
            setInTimeout: null,
            setInTime: null,
            page:1,
            limit:50,
            currentPage4:1,
            totalPage:0,
            search:""

        }
    },
    mounted() {
       
        this.$addStorageEvent(1, "buttonShow", false)
        let menuObj = localStorage.getItem("params");
        this.params.req = JSON.parse(menuObj).componentReq;
        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.fetchUsdtbigtxcount(this.paramsCount.req, this.paramsCount.radius)
        this.fetchUsdtbigtx(this.params.req, this.params.radius,this.search,this.searchParams.start,this.searchParams.end,this.page,this.limit)


        //通知栏滚动
        if (this.setInTime || this.setInTimeout) {
            clearInterval(this.setInTime);
            clearTimeout(this.setInTimeout)
        }
    },
   
    methods: {
        initCharts() {
            this.myChart = echarts.init(document.getElementById("usdcbigtx"));
            // this.myChart.clear();
            this.myChart.setOption(this.option);
            //  当窗口或者大小发生改变时执行resize，重新绘制图表
            window.addEventListener("resize", () => {
                if (this.myChart) this.myChart.resize();
            });
        },
        //请求页面tabel数据
        async fetchUsdtbigtx(req, radius, search, start, end,page,limit) {
            this.usdcbigtxLoading = true
            const { data } = await this.$API.getBigDeals2(req, radius, search,start, end,page,limit);

            this.tableData = data.data.data 
            console.log( data,56565);          
            this.totalPage=data.data.totalPage
            this.noticeList = [...data.data.data]

            //通知栏滚动
            if (this.setInTime || this.setInTimeout) {
                clearInterval(this.setInTime);
                clearTimeout(this.setInTimeout)
            }

            this.setInTime= setInterval(() => {
                this.showMarquee(JSON.parse(JSON.stringify(this.tableData)))
            }, 3000);
            this.currentPage4 = page
            this.usdcbigtxLoading = false
        },
        //请求折线图数据
        async fetchUsdtbigtxcount(req, radius, start, end, type) {
            // this.usdcbigtxLoading = true
            const { data } = await this.$API.getBigDealsCount(
                req,
                radius,
                start,
                end,
                type
            );
            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.initCharts();
            // this.usdcbigtxLoading = false
        },
        //处理表格里的时间
        formatTime(value) {
            let newTime = value.split(".")[0].replace("T", " ");
            return newTime;
        },
        //单独给点击单元格加class名字
        cellClass({ row, column, rowIndex, columnIndex }) {
            if (
                column.label == "vout" ||
                column.label == "txId" ||
                column.label == "fromAddress" ||
                column.label == "toAddress"
            ) {
                return "test";
            }
        },
        //点击表格tabel 弹窗详情页
        handleClick(row, column) {
            this.tabelUrl = "";

            this.dialogLoading = true;

            if (column.label == "fromAddress") {
                this.tabelParams.address = row.fromAddress;
                this.tabelParams.type = "address";
            } else if (column.label == "toAddress") {
                this.tabelParams.address = row.toAddress;
                this.tabelParams.type = "address";
            } else if (column.label == "txId") {
                this.tabelParams.txId = row.txId;
                this.tabelParams.address = row.txId;
                this.tabelParams.type = "tx";
            } else if (column.label == "vout") {
                this.tabelParams.address = row.vout;
                this.tabelParams.type = "address";
            }

            this.tabelUrl = ` https://bitcoinexplorer.org/${this.tabelParams.type}/${this.tabelParams.address}`;
            // this.dialogTableVisible=true
            this.dialog = true;
            this.dialogLoading = false;

            // window.open(
            //   ` https://bitcoinexplorer.org/${this.tabelParams.type}/${this.tabelParams.address}`,
            //   "_top"
            // );
            // this.fetchTabel(this.tabelParams.req,this.params.radius,this.tabelParams.address,this.tabelParams.txId)
        },
        //关闭弹窗
        handelClose() {
            this.dialog = false;
        },
        //下拉框选择
        handelChang(e) {
            this.page =1
            // this.searchParams.search = e
            this.search=e
            this.fetchUsdtbigtx(this.params.req, this.params.radius, this.value, this.searchParams.start,  this.searchParams.end,this.page,this.limit)
            this.state = ""
        },
        handelSearch() {
            this.page =1
            //搜索框输入参数     
            this.search= this.state
            this.fetchUsdtbigtx(this.params.req, this.params.radius, this.state,this.searchParams.start,  this.searchParams.end,this.page,this.limit)
            // this.searchParams.search = this.state
            // this.state = ""
            this.value = ""
        },
        //获取父级时间
        handelSonTime(start, end) {
            this.page =1
            this.searchParams.start = start;
            this.searchParams.end = end;
            this.fetchUsdtbigtx(this.params.req, this.params.radius,this.search,this.searchParams.start,this.searchParams.end,this.page,this.limit)
            this.fetchUsdtbigtxcount(this.paramsCount.req, this.paramsCount.radius, this.searchParams.start, this.searchParams.end)

        },
        //点击滚动通知栏的查看详情
        handelDetails() {
            this.dialogVisible = true;

            this.dialogData = this.noticeList.find((item) => {
                return item.txId == this.amountTxid;
            });
            this.dialogDate = this.dialogData.date.split(".")[0].replace("T", " ");
        },
        // 通知栏滚动
        showMarquee(data) {
            this.animate = true;

            // let rollingData = data
            // setTimeout
            // console.log(rollingData,633);
            if (this.setInTimeout) {
                clearTimeout(this.setInTimeout)
            }
            this.setInTimeout = setTimeout(() => {
                this.amountTxid = this.noticeList[0].txId;
                this.amountTime = this.noticeList[0].date
                    .split(".")[0]
                    .replace("T", "  ");
                this.notice = this.noticeList[0].amount.toFixed(3);
                // this.currencyName = rollingData[0].abbr;
                this.noticeList.push(this.noticeList[0]);
                this.noticeList.shift();
                this.animate = false;
                // console.log(rollingData,56565);
            }, 500);


        },

        //点击的改变页数
        handleCurrentChange(value) {
            this.page = value;
            this.fetchUsdtbigtx(this.params.req, this.params.radius,this.search,this.searchParams.start,this.searchParams.end,this.page,this.limit)

          
        },
        //改变每页条数
    handleSizeChange(val) {
        this.page = 1;
        this.limit = val;
        this.fetchUsdtbigtx(this.params.req, this.params.radius,this.search,this.searchParams.start,this.searchParams.end,this.page,this.limit)

      
      },


        
    },

    beforeDestroy() {
        clearInterval(this.setInTime);
        clearTimeout(this.setInTimeout)
        console.log("离开");
    },


}