var close = new Vue({
    el: '#TotalCapacity',
    data: {
        info: [],
        chart_inout: '',
        option_inout: {
            backgroundColor: "rgba(0,0,100,0.0)",
            title: {
                text: '',
                x: 'center'
            },
            legend: {
                data: ['Line1', 'Line2', 'Line3', 'Line4'],
                x: 'center',
                top: 15,
                textStyle: {//图例文字的样式
                    color: '#FFFCFF',
                    fontSize: 20
                }
            },
            toolbox: {
                show: true
            },
            xAxis: {
                type: 'category',
                axisPointer: {
                    type: 'shadow'
                },
                data: ['分选', '串焊', '层叠', '层压','装框','包装'],
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#FFFCFF',  //更改坐标轴文字颜色
                        fontSize: 20      //更改坐标轴文字大小
                    }
                },
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#fff',//左边线的颜色
                        width: '2'//坐标线的宽度
                    }
                },
            },
            yAxis: {
                type: 'value',
                name: '产量',
                nameTextStyle: {
                    color: "#FFFCFF",
                    fontSize: 20,
                    padding: 10
                },
                scale: true,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#FFFCFF',  //更改坐标轴文字颜色
                        fontSize: 20      //更改坐标轴文字大小
                    }
                },
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#fff',//左边线的颜色
                        width: '2'//坐标线的宽度
                    }
                },
                splitLine: {    //网格线
                    lineStyle: {
                        type: 'dashed'    //设置网格线类型 dotted:虚线   solid:实线
                    },
                    show: true //隐藏或显示
                }


            },
            series: [
                {
                    name: 'Line1',
                    type: 'bar',
                    symbol: 'roundRect',
                    symbolSize: 10,
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            formatter: '{c}',
                            textStyle: { //数值样式
                                //color: 'black',
                                fontSize: 22
                            }
                        }
                    },
                    barGap: '10%',
                    barCategoryGap: '30%',
                    data: [0, 0, 0, 0, 0, 0]
                },
                {
                    name: 'Line2',
                    type: 'bar',
                    symbol: 'roundRect',
                    symbolSize: 10,
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            formatter: '{c}',
                            textStyle: { //数值样式
                                //color: 'black',
                                fontSize: 22
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#68EFF5'
                        }
                    },
                    barGap: '10%',
                    barCategoryGap: '30%',
                    data: [0, 0, 0, 0, 0, 0]
                },
                {
                    name: 'Line3',
                    type: 'bar',
                    symbol: 'roundRect',
                    symbolSize: 10,
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            formatter: '{c}',
                            textStyle: { //数值样式
                                //color: 'black',
                                fontSize: 22
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#FAEA88'
                        }
                    },
                    barGap: '10%',
                    barCategoryGap: '30%',
                    data: [0, 0, 0, 0, 0, 0]
                },
                {
                    name: 'Line4',
                    type: 'bar',
                    symbol: 'roundRect',
                    symbolSize: 10,
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            formatter: '{c}',
                            textStyle: { //数值样式
                                //color: 'black',
                                fontSize: 22
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#ff9100'
                        }
                    },
                    barGap: '10%',
                    barCategoryGap: '30%',
                    data: [0, 0, 0, 0, 0, 0]
                }
            ]
        }

    },
    mounted() {
        var self = this;
        self.chart_inout = echarts.init(document.getElementById('total'));
        self.chart_inout.clear();
        self.chart_inout.setOption(self.option_inout);
        setTimeout(function () {
            window.onresize = function () {
                self.chart_inout.resize();
            }
        }, 200)
        var h = document.documentElement.clientHeight;
        console.log(h);
        var height = (h - 90);
        console.log(height);
        $('#total').css("height", height + "px");
        self.chart_inout.resize();
        $(window).resize(function () {
            var h = parseInt($(window).height());
            var height = (h - 130);
            console.log(height);
            $('#total').css("height", height + "px");
            self.chart_inout.resize();
        })




        self.fun_update();
        self.fun_time();

        setInterval(self.fun_update, 60000);
        setInterval(self.fun_time, 1000);
    },
    methods: {
        fun_time: function () {
            var self = this;
            $("#time").html(self.getTime());
        },
        getTime: function () {     	//获取时间
            var date = new Date();

            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();

            var hour = date.getHours();
            var minute = date.getMinutes();
            var second = date.getSeconds();

            //这样写显示时间在1~9会挤占空间;所以要在1~9的数字前补零;
            if (hour < 10) {
                hour = '0' + hour;
            }
            if (minute < 10) {
                minute = '0' + minute;
            }
            if (second < 10) {
                second = '0' + second;
            }


            var x = date.getDay();//获取星期


            var time = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
            return time;
        },
        fun_update: function () {
            var self = this;
            execute();
            async function execute() {
                try {
                    let result = await self.FetchApi("AfterCapacity", {});

                    result = await result.json();
                    console.log(result);
                    var chart_option = self.chart_inout.getOption();
                    for (var i = 1; i <= 4; i++) {
                        self.option_inout.series[i - 1].data = [0, 0, 0, 0, 0, 0]
                        $.each(result, function (ind, row) {
                            if (row.line_id == i) {
                                if (row.process_code == '分选') chart_option.series[i - 1].data[0] = row.qty;
                                if (row.process_code == 'M10') chart_option.series[i - 1].data[1] = row.qty;
                                if (row.process_code == 'M15') chart_option.series[i - 1].data[2] = row.qty;
                                if (row.process_code == 'N30') chart_option.series[i - 1].data[3] = row.qty;
                                if (row.process_code == 'M45') chart_option.series[i - 1].data[4] = row.qty;
                                if (row.process_code == 'P100') chart_option.series[i - 1].data[5] = row.qty;
                            }
                        });
                    }
                    self.chart_inout.setOption(chart_option);
                }
                catch (err) {
                    console.log(err);
                }
            }
        },
        //请求数据方法
        requestApi: function (config) {//modulename, funname, para, success, fail) {
            fetch("/api/" + config.modulename + "/" + config.funname + "", {
                method: "post",
                headers: {
                    "Accept": "application/json, text/plain, */*",
                    "Content-Type": "application/json"
                },
                body: JSON.stringify(config.para)
            }).then(
                (res) => { return res.json() }
            ).then(
                (res) => { config.success(res) }
            ).catch(
                (ex) => { config.fail(ex) }
            )
        },
        FetchApi: function (funname, para) {
            return fetch("/api/BeforeCapacity/" + funname + "", {
                method: "post",
                headers: {
                    "Accept": "application/json, text/plain, */*",
                    "Content-Type": "application/json"
                },
                body: JSON.stringify(para)
            })
        }

    }
})