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

export default {
    data() {
        return {
            bobpEthLoading: false,
            option: {
                color: ['#5470c6', '#91cc75', '#73c0de', '#fac858', '#e87e82', `#9a60b4`, `#a80000`, `#191a46`, `#2d993b`],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    right: 100,
                },
                graphic: [],//水印    
                dataZoom: [
                    {
                        type: "inside",
                        start: 0,
                        end: 100,
                    },
                    {
                        start: 0,
                        end: 100,
                    },
                ],
                xAxis: [
                    {
                        type: 'category',
                        // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        data: []
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    //   {
                    //     name: "1",
                    //     type: 'bar',
                    //     stack: 'Ad',
                    //     emphasis: {
                    //       focus: 'series'
                    //     },
                    //     // data: [120, 132, 101, 134, 90, 230, 210]
                    //     data:[]
                    //   },
                    //   {
                    //     name: '2',
                    //     type: 'bar',
                    //     stack: 'Ad',
                    //     emphasis: {
                    //       focus: 'series'
                    //     },
                    //     // data: [220, 182, 191, 234, 290, 330, 310]
                    //     data:[]
                    //   },
                    //   {
                    //     name: '3',
                    //     type: 'bar',
                    //     stack: 'Ad',
                    //     emphasis: {
                    //       focus: 'series'
                    //     },
                    //     // data: [150, 232, 201, 154, 190, 330, 410]
                    //     data:[]
                    //   },
                    //   {
                    //     name: '4',
                    //     type: 'bar',
                    //     stack: 'Ad',
                    //     emphasis: {
                    //       focus: 'series'
                    //     },
                    //     // data: [150, 232, 201, 154, 190, 330, 410]
                    //     data:[]
                    //   },
                    //   {
                    //     name: '5',
                    //     type: 'bar',
                    //     stack: 'Ad',
                    //     emphasis: {
                    //       focus: 'series'
                    //     },

                    //     data:[]
                    //   },
                    //   {
                    //     name: '6',
                    //     type: 'bar',
                    //     stack: 'Ad',
                    //     emphasis: {
                    //       focus: 'series'
                    //     },              
                    //     data:[]
                    //   },

                ]
            },
            switch3: "",
            oldY: null,
            btcFlag: null,
            ethFlag: null,
            fatherSmaData: [],
            start: "",
            end: "",
            params: {
                coin: "ETH"
            },
            zoomStart: 0,
            zoomEnd: 0,


        }
    },
    mounted() {


        this.fetchBobpEth(this.params)
        //禁用时间框
        this.$addStorageEvent(1, "timeDisable", true);
        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: {
        //初始化图表
        inCharts() {
            if (this.myChart == null) {
                this.myChart = echarts.init(document.getElementById("bobpEthBox"));
            }
            this.option = handelZoom(this.myChart, this.option, this, this.zoomStart, this.zoomEnd)

            this.myChart.setOption(this.option);
            chartsWidth("bobpEthBox", this);
            window.addEventListener("resize", () => {
                if (this.myChart) this.myChart.resize();
            });
        },
        async fetchBobpEth(params) {

            this.bobpEthLoading = true
            const { data } = await getBobp(params)
            let bobpEthData = data.data.list
         
            // if (!bobpEthData[0]) {
            //     this.$message({
            //         type: 'warning',
            //         message: this.$t(`home.NoData`)
            //     });
            //     this.inCharts()
            //     this.bobpEthLoading = false
            //     return
            // }
            //空数据处理
            let noData = emptyData(bobpEthData, this.option.series, this.inCharts, this)
            if (noData) {
                this.bobpEthLoading = false
                return
            }


            let seriesNum = bobpEthData[0].value.length

            //动态添加series个数
            if (this.option.series.length == 0) {
                for (let i = 0; i < seriesNum; i++) {
                    this.option.series.push({
                        name: "",
                        type: 'bar',
                        stack: 'Ad',
                        emphasis: {
                            focus: 'series'
                        },
                        data: []
                    },)

                }
            }
            // 清空 xAxis.data 和 series 中各个元素的 data 属性
            this.option.xAxis[0].data = [];
            for (let i = 0; i < this.option.series.length; i++) {
                this.option.series[i].data = [];
            }

            bobpEthData.forEach((item, index) => {
                item.date = `${item.date.split(`T`)[0]} ${item.date.split(`T`)[1].split(`.`)[0]}`
                this.option.xAxis[0].data.push(item.date)
                for (let i = 0; i < this.option.series.length; i++) {
                    if (!item.value[i]) {
                        this.option.series[i].data.push(Number(0));
                    } else {
                        this.option.series[i].data.push(
                            Number(Number(item.value[i].num).toFixed(2))
                        );
                        this.option.series[i].name = item.value[i].price;
                    }
                }
            });



            //添加水印
            this.option = handelWatermark(this.option)



            this.inCharts()

            this.bobpEthLoading = false
        },

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

        },
        //父级点击BTC价格按钮
        handelSonBtcPrice(radius, flag) {
            this.btcFlag = flag
            fetchBtcPrice("BTC", this.option.series[1], 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[2], this.start, this.end, this.inCharts, this, this.ethFlag)
        },
        //父级选择Sma
        handelSonSma(smaDataList) {
            this.params.sma = smaDataList
            this.fetchBobpEth(this.params)
            this.$addStorageEvent(1, "sma", smaDataList);
            // this.fatherSmaData = smaDataList
            // handelSmaData(smaDataList, this.option.series[1], this.inCharts,this.start, this.end,)

        },
        handelZone() {
            this.fetchBobpEth(this.params)
        },
    }
}