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

export default {
    data() {
        return {
            lengthTimer:null,
            BUSDMonitoringLoading: false,
            chartLoading: false,
            params: {
                req: "busdbigtx",
                radius: "eth",
                start: "",
                end: ""
            },
            paramsCount: {
                req: "busdbigtxcount",
                radius: "eth",
            },
            tronParams: {//暂时无接口
                // req: "tronBUSDBigTx",
                radius: "eth",
            },
            tronParamsCount: {
                // req: "tronBUSDBigTxCount",
                radius: "eth",
            },
            dataCount: [],
            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: [
                    {
                        // name: this.$t(`home.figure`),
                        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: "BUSD 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: "BUSD 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: 1
                    // },


                ],
            },
            tabelloading: false,
            tableData: [],
            page: 1,
            limit: 50,
            search: "",
            currentPage4: 1,
            tronTabelloading: false,
            tronTableData: [],
            tronTotalPage: 0,
            tronCurrentPage4: 1,
            tronPage: 1,
            tronLimit: 50,
            totalPage: 0,
            sma: "",
            zoomStart: 0,
            zoomEnd: 0,

        }
    },
    mounted() {

        this.fetchBusdbigtx(this.params.req, this.params.radius, this.search, this.params.start, this.params.end, this.page, this.limit)
        // this.fetchTronbigtx(this.tronParams.req, this.tronParams.radius,this.search, this.params.start, this.params.end, this.page, this.limit)
        this.fetchBusdbigtxcount()

        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("BUSDMonitoringBox"));
            }
            this.option = handelZoom(this.myChart, this.option, this, this.zoomStart, this.zoomEnd)

            this.myChart.setOption(this.option);
            chartsWidth("BUSDMonitoringBox", this);
            window.addEventListener("resize", () => {
                if (this.myChart) this.myChart.resize();
            });
        },
        //请求页面tabel数据 大额交易监控表格
        async fetchBusdbigtx(req, radius, search, start, end, page, limit) {
            this.BUSDMonitoringLoading = true
            //大额交易监控表格
            const { data } = await this.$API.getBigDeals2(req, radius, search, start, end, page, limit);
            this.tableData = data.data.data
            this.totalPage = data.data.totalPage
            this.currentPage4 = page
            this.BUSDMonitoringLoading = false
        },
        //请求页面tabel数据 BUSD on TRON大额交易 暂时无接口
        //  async fetchTronbigtx(req,radius, search, start, end, page, limit) {

        //     //大额交易监控表格
        //     const { data } = await this.$API.getBigDeals2( req,radius,search, start, end, page, limit);
        //     this.tronTableData = data.data.data

        //     this.tronTotalPage = data.data.totalPage
        //     this.tronCurrentPage4 = page

        // },
        //请求折线图数据
        async fetchBusdbigtxcount(start, end, type, sma) {
            this.chartLoading = true

            // 大额交易监控曲线图            
            const { data } = await this.$API.getBigDealsCount(
                this.paramsCount.req,
                this.paramsCount.radius,
                start,
                end,
                type,
                sma
            );
            this.dataCount = data.data
            //空数据处理
            let noData = emptyData(data.data, this.option.series, this.inCharts, this)
            if (noData) {
                this.chartLoading = false
                return
            }
            //添加水印
            this.option = handelWatermark(this.option)

            let numValueList = []
            this.dataCount.forEach(item => {
                numValueList.push(parseInt(item.num * 100) / 100)
            });
            this.option.series[0].data = handelBigDeals(this.dataCount, numValueList)
            // BUSD on TRON大额交易 曲线图     
            // const list = await this.$API.getBigDealsCount(
            //     this.tronParamsCount.req,
            //     this.tronParamsCount.radius,
            //     start,
            //     end
            // );
            // let tronData = list.data.data
            // let tronValueList = []
            // tronData.forEach(item => {
            //     tronValueList.push(parseInt(item.num * 100) / 100)
            // });
            // this.option.series[1].data = handelBigDeals(tronData, tronValueList)
            this.inCharts();
            this.chartLoading = 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) {
            this.params.start = start;
            this.params.end = end;
            let type
            this.fetchBusdbigtxcount(this.params.start, this.params.end, type, this.sma)
        },
        //处理表格里的时间
        formatTime(value) {
            let newTime = value.split(".")[0].replace("T", " ");
            return newTime;
        },

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

        },
        //双击表格单元格复制
        cellDblclick(row, column, cell, event) {
            if (event.type === "dblclick") {
                var save = (e) => {
                    e.clipboardData.setData("text/plain", event.target.innerText);
                    e.preventDefault(); //阻止默认行为
                };
                document.addEventListener("copy", save);
                document.execCommand("copy");
                document.removeEventListener("copy", save);
            }
            this.$message({ message: this.$t(`home.copy`), type: "success" }); //加提示
        },

        //点击的改变页数 Tron
        // handleCurrentChangeTron(value) {
        //     this.tronPage = value;
        //     this.fetchTronbigtx(this.tronParams.req, this.tronParams.radius,this.search, this.params.start, this.params.end, this.tronPage,  this.tronLimit)
        // },
        //改变每页条数 Tron
        // handleSizeChangTron(val) {
        //     this.tronPage = 1;
        //     this.tronLimit = val;
        //     this.fetchTronbigtx(this.tronParams.req, this.tronParams.radius,this.search, this.params.start, this.params.end, this.tronPage,  this.tronLimit)

        // },
        //父级选择Sma
        handelSonSma(smaNUm) {
            this.sma = smaNUm
            let type
            this.fetchBusdbigtxcount(this.params.start, this.params.end, type, 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)
        }
    }
}