import * as echarts from "echarts";
// import {
//     getDateTime,handelLineType,handelSwitchs ,handelWatermark
// } from "../../util/processingData";
import { chartsWidth, emptyData, handelLineType, handelZoom, handelWatermark, handelSwitchs, fetchBtcPrice, fetchEthPrice, handelSmaData, getDateArray } from "../../util/processingData"

import { getTakerLongShortRatio } from "../../api/pages"

export default {
    data() {
        return {
            takerlongshortRatioLoading: false,
            option: {
                tooltip: {
                    trigger: "axis",
                    //解决tooltip显示不全问题1 
                    confine: true,
                },
                legend: {
                    right: "100",
                    //处理legengd过长
                    // formatter: function (name) {

                    //     return echarts.format.truncateText(name, 100, '14px Microsoft Yahei', '…');
                    // },
                    tooltip: {
                        show: true
                    }
                },
                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 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,
                        min: "dataMin",
                        max: "dataMax",
                        position: "right",
                        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 if (e < -1000000) {//百万
                                    value = `${e / 1000000}M`;
                                } else if (e < -10000) {//万
                                    value = `${e / 10000}W`;
                                }
                                else {
                                    value = e;
                                }
                                return value;
                            },
                        },
                    },
                    {
                        type: "value",
                        // boundaryGap: [0, "100%"],
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                    {
                        type: "value",
                        // boundaryGap: [0, "100%"],
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                    {
                        type: "value",
                        // boundaryGap: [0, "100%"],
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                ],
                dataZoom: [
                    {
                        type: "inside",
                        start: 0,
                        end: 100,
                    },
                    {
                        start: 0,
                        end: 100,
                    },
                ],
                series: [
                    {
                        name: "buy & sell ratio",
                        type: "line",
                        smooth: false,
                        symbol: "circle",
                        showSymbol: false,
                        symbolSize: 5,
                        // areaStyle: {},
                        itemStyle: {
                            color: "#f7931a",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        yAxisIndex: 0,
                        lineStyle: {
                            //线条样式
                            color: "#f7931a",
                            width: "1",
                        },
                        data: [],
                    },
                  

                    // {
                    //     name: "Price[BTC]",
                    //     type: "line",
                    //     smooth: false,
                    //     symbol: "circle",
                    //     symbolSize: 5,
                    //     showSymbol: false,
                    //     // areaStyle: {},
                    //     itemStyle: {
                    //         color: "#888888",
                    //         borderColor: "rgba(221,220,107,0.1)",
                    //         borderWidth: 12,
                    //     },
                    //     lineStyle: {
                    //         //线条样式
                    //         color: "#888888",
                    //         width: "1",
                    //     },
                    //     yAxisIndex: 1,
                    //     data: [],


                    // },
                    // {
                    //     name: "Price [ETH]",
                    //     type: "line",
                    //     smooth: false, //线条是否圆滑
                    //     symbol: "circle",
                    //     symbolSize: 5,
                    //     showSymbol: false,
                    //     itemStyle: {
                    //         color: "#627eea",
                    //         borderColor: "rgba(221,220,107,0.1)",
                    //         borderWidth: 12,
                    //     },
                    //     lineStyle: {
                    //         //线条样式
                    //         color: "#627eea",
                    //         width: "1",
                    //     },
                    //     yAxisIndex: 4,
                    //     data: [],
                    // },

                ],
            },
            params: {
                symbol: "BTCUSDT",
                interval: "5m",
                start: "",
                end: "",
                sma: "",
            },
            value: "5m",
            timeIntervalList: [
                {
                    value: "5m",
                    label: "home.minutes5",
                },
                {
                    value: "15m",
                    label: "home.minutes15",
                },
                {
                    value: "30m",
                    label: "home.minutes30",
                },
                {
                    value: "1h",
                    label: "home.hour1",
                },
                {
                    value: "2h",
                    label: "home.hour2",
                },
                {
                    value: "4h",
                    label: "home.hour4",
                },
                {
                    value: "6h",
                    label: "home.hour6",
                },
                {
                    value: "12h",
                    label: "home.hour12",
                },
                {
                    value: "1d",
                    label: "home.day1",
                },
            ],
            chooseTime: "",
            pickerMinDate: '', // 第一次选中的时间
            pickerOptions0: {
                onPick: obj => {
                    // console.log('obj', obj,656415645945641) // {maxDate: xxx, minDate: xxx(中国标准时间)}
                    this.pickerMinDate = new Date(obj.minDate).getTime() //开始时间
                    //判断时间间隔 计算结束时间
                    switch (this.value) {
                        case "5m":
                            //天数
                            this.endTime = Math.round((5 * 500 / 60) / 24)

                            break;
                        case "15m":
                            this.endTime = Math.round((15 * 500 / 60) / 24)
                            break;
                        case "30m":
                            this.endTime = Math.round((30 * 500 / 60) / 24)
                            break;
                        case "1h":
                            this.endTime = Math.round((60 * 500 / 60) / 24)
                            break;
                        case "2h":
                            this.endTime = Math.round((120 * 500 / 60) / 24)
                            break;
                        case "4h":
                            this.endTime = Math.round((240 * 500 / 60) / 24)
                            break;
                        case "6h":
                            this.endTime = Math.round((360 * 500 / 60) / 24)
                            break;
                        case "12h":
                            this.endTime = Math.round((720 * 500 / 60) / 24)
                            break;
                        case "1d":
                            this.endTime = Math.round((1440 * 500 / 60) / 24)
                            break;

                        default:
                            break;
                    }
                },
                disabledDate: time => {
                    if (this.pickerMinDate) {
                        const day1 = this.endTime * 24 * 3600 * 1000 // 可选的时间范围不超过天数
                        let maxTime = this.pickerMinDate + day1
                        let minTime = this.pickerMinDate
                        //console.log('return', time.getTime() > maxTime || time.getTime() < minTime) // 输出查看布尔值
                        // || time.getTime() < minTime
                        return time.getTime() > maxTime || time.getTime() < minTime
                    }

                    // return time.getTime() > Date.now();
                },


                //限制只能选当前日期之前的日期
                // disabledDate(time) {

                //     return time.getTime() > Date.now();
                // },
                // onPick(a,b){
                //     console.log(a,56231);
                // }
            },
            endTime: "",
            timeDefaultShow: "",//时间框显示范围
            switch3: "",
            oldY: null,
            btcFlag: null,
            ethFlag: null,
            fatherSmaData: [],
            start: "",
            end: "",
            zoomStart: 0,
            zoomEnd: 0,
            symbolList: [{
                value: "BTCUSDT",
                label: "BTCUSDT"
            },
            {
                value: "ETHUSDT",
                label: "ETHUSDT"
            }],
        }
    },
    mounted() {
        this.handelStart()
        //控制时间选择器 显示本月和上月
        this.timeDefaultShow = new Date();
        this.timeDefaultShow.setMonth(new Date().getMonth() - 1);
        this.fetchTakerlongshortRatio(this.params)
        this.switch3 = handelSwitchs(this.option, this.switch3)
        this.oldY = this.option.yAxis
        this.ethFlag = JSON.parse(localStorage.getItem("ethFlag"));
        this.btcFlag = JSON.parse(localStorage.getItem("btcFlag"));
        this.$addStorageEvent(1, "zoomStart", this.zoomStart);
        this.$addStorageEvent(1, "zoomEnd", this.zoomEnd);

        window.addEventListener("setItem", () => {
            this.ethFlag = JSON.parse(localStorage.getItem("ethFlag"));
            this.btcFlag = JSON.parse(localStorage.getItem("btcFlag"));
            this.zoomStart = localStorage.getItem("zoomStart")
            this.zoomEnd = localStorage.getItem("zoomEnd")

        })

    },
    methods: {
        inChart() {
            if (this.myChart == null) {
                this.myChart = echarts.init(document.getElementById("takerlongshortRatioBox"));

            }
            this.option = handelZoom(this.myChart, this.option, this, this.zoomStart, this.zoomEnd)
            this.myChart.setOption(this.option);
            chartsWidth("takerlongshortRatioBox", this);
            window.addEventListener("resize", () => {
                if (this.myChart) this.myChart.resize();
            });
        },
        async fetchTakerlongshortRatio(params) {

            this.takerlongshortRatioLoading = true
            const { data } = await getTakerLongShortRatio(params)
            let TakerData = data.data
            //空数据处理
            let noData = emptyData(data.data, this.option.series, this.inChart, this)
            if (noData) {
                this.takerlongshortRatioLoading = false
                return
            }
            // this.start = TakerData[0].date.split("T")[0]
            // this.end = TakerData[TakerData.length - 1].date.split("T")[0]
            //  //添加水印
            this.option = handelWatermark(this.option)

            let buySellRatioValueList = []
            let buyVolValueList = []
            let sellVolValueList = []
            this.option.xAxis.data = []
            TakerData.forEach(item => {
                this.option.xAxis.data.push(`${item.date.split(`T`)[0]} ${item.date.split(`T`)[1].split(`.`)[0]}`)
                buySellRatioValueList.push(Number(item.buySellRatio.toFixed(2)))
                // buyVolValueList.push(Number(item.buyVol.toFixed(2)))
                // sellVolValueList.push(Number(item.sellVol.toFixed(2)))

            })
            this.option.series[0].data = buySellRatioValueList
            // this.option.series[1].data = buyVolValueList
            // this.option.series[2].data = sellVolValueList




            this.inChart()
            this.takerlongshortRatioLoading = false
        },
        //时间接收
        handelSonTime(start, end) {


            this.params.start = start
            this.params.end = end  
            if (!this.params.start) {
                this.handelStart()
            }
            this.fetchTakerlongshortRatio(this.params)
        },
        //选择时间间隔
        handelTimeInterval(interval) {
            // this.fetchTakerlongshortRatio(this.params)
            this.params.interval = interval
            this.fetchTakerlongshortRatio(this.params)

        },
        //时间选择
        handelTime() {

            let dateStart
            let dateEnd
            if (this.chooseTime) {
                dateStart = new Date(this.chooseTime[0]);
                dateEnd = new Date(this.chooseTime[1]);
                this.params.start = dateStart.getTime()
                this.params.end = dateEnd.getTime()
            } else {
                this.params.start = ""
                this.params.end = ""
            }


            this.fetchTakerlongshortRatio(this.params)
            // this.chooseTime = ""
            this.pickerMinDate = ""
        },
        //点击确定按钮
        handelTakerBtn() {
            this.fetchTakerlongshortRatio(this.params)
        },

        //点击对数/线性按钮切换
        handelLineSwitch() {
            this.option = handelLineType(this.option)
            this.switch3 = handelSwitchs(this.option, this.switch3)
            this.myChart.setOption(this.option);

        },
        //父级点击BTC价格按钮
        handelSonBtcPrice(radius, flag) {
            this.btcFlag = flag
            fetchBtcPrice("BTC", this.option.series[3], this.start, this.end, this.inCharts, this, this.btcFlag)

        },
        //父级点击ETH价格按钮
        handelSonEthPrice(radius, flag) {
            this.ethFlag = flag
            this.$addStorageEvent(1, "ethFlag", JSON.stringify(this.ethFlag));
            fetchEthPrice("ETH", this.option.series[4], this.start, this.end, this.inCharts, this, this.ethFlag)
        },
        //父级选择Sma
        handelSonSma(smaDataList) {
            this.params.sma = smaDataList
            this.fetchTakerlongshortRatio(this.params)
            this.$addStorageEvent(1, "sma", smaDataList);


        },
        //选择Symbol
        handelSymbol() {
            // this.fetchTakerlongshortRatio(this.params)
        },
        activeInterval(interval) {
            if (interval) {
                return this.timeIntervalList.find(item => item.value == interval).label
            }
        },
        handelStart() {
            let start = new Date();

            start.setMonth(start.getMonth() - 1);//当前时间减去一个月

            // 提取年、月和日
            const year = start.getFullYear();
            const month = String(start.getMonth() + 1).padStart(2, '0');
            const day = String(start.getDate()).padStart(2, '0');
            const formattedDate = `${year}-${month}-${day}`;

            this.params.start = formattedDate
        }

    }
}



