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

export default {
    data() {
        return {
            GDPLoading: false,
            option: {
                tooltip: {
                    trigger: "axis",
                    //解决tooltip显示不全问题1 
                    confine: true,

                    // formatter: function (params) {
                    //     var res = params[0].axisValueLabel;

                    //     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} </span>`


                    //     }


                    //     return res;
                    // },

                },
                // legend: {
                //     right: "100",
                //     top: "10",


                // },
                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"
                    },
                    {
                        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: "GDP",
                        type: "line",
                        smooth: false,
                        symbol: "circle",
                        showSymbol: false,
                        symbolSize: 5,
                        // areaStyle: {},
                        itemStyle: {
                            color: "#f7864c",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        yAxisIndex: 0,
                        lineStyle: {
                            //线条样式
                            color: "#f7864c",
                            width: "2",
                        },
                        data: [],
                    },


                ],
            },
            tableData: [{
                date: "",
                symbol: "",
                value: "",
            }],
            params: {
                start: "",
                end: "",
                symbol: "pce",
            },
            chartLoading: false,
            timer: null,
            zoomStart: 0,
            zoomEnd: 0,
            activeName: "",
            activeName:"Personal consumption expenditures",

            nameList: [{
                label: "Personal consumption expenditures",
                value: `1`,
            },
            {
                label: "Goos",
                value: `1`,
            }, {
                label: "Durable goods",
                value: `1`,
            }
                ,
            {
                label: "Nondurable goods",
                value: `1`,
            },
            {
                label: "Services",
                value: `1`,
            }
            ],
            headData: [{ head: '2021', body: [{ prop: 'd2021q1', name: 'Q1' }, { prop: 'd2021q2', name: 'Q2' }] }, { head: '2022', body: [{ prop: 'd2022q1', name: 'Q1' }, { prop: 'd2022q2', name: 'Q2' }] }],
            tableData: [
            //     {
            //     d2021q1: '2016-05-03',
            //     d2021q2: 'GRoss',
            //     d2022q2: '普陀区',
            //     d2022q1: 200333,
            //     id: 1
            //   }, {
            //     d2021q1: '2016-05-02',
            //     d2021q2: 'personal',
            //     d2022q2: '普陀区',
            //     d2022q1: 200333,
            //     id:2
            //   }, {
            //     d2021q1: '2016-05-04',
            //     d2021q2: 'Goods',
            //     d2022q2: '普陀区',
            //     address: '上海市普陀区金沙江路 1518 弄',
            //     d2022q1: 200333,
            //     id:3,
            //     children:[{
            //       d2021q1: '2016-05-01',
            //       d2021q2: 'Durable',
            //       d2022q2: '普陀区',
            //       address: '上海市普陀区金沙江路 1518 弄',
            //       d2022q1: 200333,
            //       id:31
            //     }, {
            //       d2021q1: '2016-05-08',
            //       d2021q2: 'Nondurable',
            //       d2022q2: '普陀区',
            //       address: '上海市普陀区金沙江路 1518 弄',
            //       d2022q1: 200333,
            //       id:32
            //     },]
            //   },  {
            //     d2021q1: '2016-05-06',
            //     d2021q2: 'Serv',
            //     d2022q2: '普陀区',
            //     address: '上海市普陀区金沙江路 1518 弄',
            //     d2022q1: 200333
            //   }, {
            //     d2021q1: '2016-05-07',
            //     d2021q2: 'Gross pr',
            //     d2022q2: '普陀区',
            //     address: '上海市普陀区金沙江路 1518 弄',
            //     d2022q1: 200333
            //   }
            ],
            directionData:[{
                value:"pce",
                label:"Personal consumption expenditures",
            },
            {
                value:"pceg",
                label:"Goods",
            },
            {
                value:"pcedg",
                label:"Durable goods",
            },
            {
                value:"pcend",
                label:"Nondurable goods",
            },
            {
                value:"pces",
                label:"Services",
            },
            {
                value:"gpdi",
                label:"Gross private domestic investment",
            },
            {
                value:"fpi",
                label:"Fixed investment",
            },
            {
                value:"cbi",
                label:"Change in private inventories",
            },
            {
                value:"netexp",
                label:"Net exports of goods and services",
            },
            {
                value:"impgs",
                label:"Imports",
            },
            {
                value:"expgs",
                label:"Exports",
            },
           


        ],




        }
    },
    mounted() {
        this.fetchGDP()

        //禁用时间框
        this.$addStorageEvent(1, "timeDisable", true);
        // this.switch3 = handelSwitchs(this.option, this.switch3)
        this.$addStorageEvent(1, "zoomStart", this.zoomStart);
        this.$addStorageEvent(1, "zoomEnd", this.zoomEnd);
        //监听localstorage变化
        window.addEventListener("setItem", () => {
            this.zoomStart = localStorage.getItem("zoomStart")
            this.zoomEnd = localStorage.getItem("zoomEnd")
        }); 
        this.oldY = this.option.yAxis
        if (this.timer) {
            clearInterval(this.timer)
        }
        //5分钟请求一次页面
        // this.timer = setInterval(() => {
        //     this.fetchGDP()
        // }, 300000)



    },
    methods: {
        //初始化图表
        inCharts() {
            if (this.myChart == null) {
                this.myChart = echarts.init(document.getElementById("GDPBox"));
            }
            this.option = handelZoom(this.myChart, this.option, this, this.zoomStart, this.zoomEnd)

            this.myChart.setOption(this.option);
            chartsWidth("GDPBox", this);
            window.addEventListener("resize", () => {
                if (this.myChart) this.myChart.resize();
            });
        },
        async fetchGDP(params) {
            this.GDPLoading = true

            const { data } = await getGDP(params)
            this.headData = data.data.head         
            this.tableData = data.data.list
          
            this.fetchChart(this.params)
            this.GDPLoading = false

        },
        async fetchChart(params) {
            this.chartLoading = true
            const { data } = await getGDPChart(params)
          
            let chartData = data.data
            //空数据处理
            let noData = emptyData(data.data, this.option.series, this.inCharts, this)
            if (noData) {
                this.chartLoading = false
                return
            }


            let ValueList = []
            let timeList = []
            chartData.forEach(item => {
              
                ValueList.push(Number(item.value))
                timeList.push(item.date)
            })

            
            this.option.series[0].data = ValueList
            this.option.xAxis.data = timeList
            this.option.series[0].name = this.activeName
            this.inCharts()
            this.chartLoading = false   
          


        },
        //点击某个单元格
        handleCellClick(row) {
          
            this.activeName = row.name
         let obj  = this.directionData.find(item => item.label == row.name)
            this.params.symbol = obj.value 
            this.fetchChart(this.params)
        },  
        //加粗个别行字体
        rowStyle({ row }){
           
            if (row.name==`Personal consumption expenditures` ||  row.name==`Gross private domestic investment`) {

             
                return { fontWeight: 'bold',cursor: `pointer`};  
            }else{  
                return {cursor: `pointer`}   
            }   
        },

        //接收Home传的时间handelParmesTime
        handelSonTime(start, end) {
            this.params.start = start.split("-")[0];
            this.params.end = end.split("-")[0];
            this.fetchGDP({start: this.params.start, end: this.params.end})
            this.fetchChart(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[2], this.start, this.end, this.inCharts, this, this.btcFlag)

        },
        //父级点击ETH价格按钮
        handelSonEthPrice(radius, flag) {
            this.ethFlag = flag
            fetchEthPrice("ETH", this.option.series[2], this.start, this.end, this.inCharts, this, this.ethFlag)
        },
        //父级选择Sma
        handelSonSma(smaDataList) {

            // this.params.sma = smaDataList
            // this.fetchGDP(this.params)
            // this.$addStorageEvent(1, "sma", smaDataList);

        },
        handelRefresh() {
            this.fetchChart(this.params)
        }

    },
    beforeDestroy() {
        clearInterval(this.timer)
    }

}