import * as echarts from "echarts";
import { handelZoom, chartsWidth, emptyData, handelWatermark, handelLineType, handelSwitchs } from "../../util/processingData"
import { getVDD } from "../../api/apiPost"
export default {
    data() {
        return {
            option: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
               
                legend: {
                    right: "100",
                },
                xAxis: [
                    {
                        type: 'category',
                        // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                        axisPointer: {
                            type: 'shadow'
                        },
                        data:[]
                    }
                ],
                dataZoom: [
                    {
                        type: "inside",
                        start: 0,
                        end: 100,
                        maxSpan: 100,
                        minSpan: 2,
                        animation: false,
                    },
                    {
                        // type: "inside",
                        start: 0,
                        end: 20,
                        showDetail: false,
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        // name: 'Precipitation',
                        // min: 0,
                        // max: 250,
                        // interval: 50,
                        // axisLabel: {
                        //     formatter: '{value} ml'
                        // }
                    },
                    {
                        type: 'value',
                        position: "right",
                        show:true,
                 
                    }
                ],
                series: [
                    {
                        name: 'VDD Multiple',
                        type: 'bar',
                        // tooltip: {
                        //     valueFormatter: function (value) {
                        //         return value + ' ml';
                        //     }
                        // },
                        data: [ ]                           
                       
                    },
                   
                    {
                        name: "Price[BTC]",
                        type: "line",
                        smooth: false,
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        // areaStyle: {},
                        itemStyle: {
                            color: "#000",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#000",
                            width: "1",
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        yAxisIndex: 1,
                        data: [],
                     
                    },
                ]
            },
            params: {
                start:"",
                end:"",
                sma:"",
            },
            VDDLoading:false,
            sma:"",
            start:"",
            end:"",
        }
    },
    mounted() {
        console.log("45646");
        this.fetchVdd()
    },
    methods: {
          //初始化折线图图表
          inChartsLine() {
            if (this.myChart == null) {
                this.myChart = echarts.init(document.getElementById("VDDBox"));
            }
            this.option= handelZoom(this.myChart,this.option,this,this.zoomStart, this.zoomEnd)
           
            this.myChart.setOption(this.option);
            chartsWidth("VDDBox", this); 
            window.addEventListener("resize", () => {
                if (this.myChart) this.myChart.resize();;
            });

        },
        async fetchVdd(params){
            this.VDDLoading = true
            const {data} = await getVDD(params)           
             let VDDdata = data.data
             //空数据处理
             let noData = emptyData(data.data, this.option.series, this.inChartsLine, this)
             if (noData) {
                 emptyData(data.data, this.option.series, this.inChartsLine, this)
                
                 this.VDDLoading = false
                 return
             }

             this.start =VDDdata[0].date.split("T")[0]
             this.end = VDDdata[VDDdata.length - 1].date.split("T")[0]
             const price = await this.$API.getBtcPrice2("BTC", this.start,  this.end);
        
             let priceData =[]
             price.data.data.forEach(item=>{
                 priceData.push(Number(item.value.toFixed(2)))
             })

             this.option= handelWatermark(this.option)
             let barValue = []
             let xAxisData = []
             VDDdata.forEach(item=>{

                barValue.push(item.value)
                xAxisData.push(item.date.split("T")[0])
             })
             this.option.xAxis[0].data = xAxisData
             this.option.series[0].data = barValue
             this.option.series[1].data = priceData
             this.inChartsLine()
            console.log(data,6666);

            this.VDDLoading = false
        },
         //父级时间
         handelSonTime(start, end) {
            this.params.start = start;
            this.params.end = end;
            this.fetchVdd(this.params)
        },
          //父级选择Sma
          handelSonSma(smaDataList) {
            
            this.sma = smaDataList
            this.params.sma = smaDataList
            this.fetchVdd(this.params)
            this.$addStorageEvent(1, "sma", this.sma);
        },

    }
}