<template>
    <div class="wifiSign">
        <div class="other-people">
            <div class="image-border image-border1"></div>
            <div class="image-border image-border2"></div>
            <div class="image-border image-border3"></div>
            <div class="image-border image-border4"></div>
            <div class="other-people-title">
                WiFi信号
            </div>
            <ve-line :data="chartData" width="966px" height="250px" :loading="loading" :legend-visible="false" :settings="chartSettings"
                          :extend="chartExtend"></ve-line>
        </div>
    </div>
</template>

<script>
    import {wifiSingle} from '../api/getApiRes.js'
    let qs = require('qs');
    export default {
        data() {
            return {
                days: 13,
                loading: true,
                chartData: {
                    columns: ['日期', '访问量','下单用户','下单率'],
                    rows: [
                        { '日期': '信道1', '访问量':0, '下单用户':null, '下单率':null,},
                        { '日期': '信道2', '访问量': 3530, '下单用户':null, '下单率':null,},
                        { '日期': '信道3', '访问量':0, '下单用户':0, '下单率':null,},
                        { '日期': '信道4', '访问量':null, '下单用户': 1423, '下单率':0,},
                        { '日期': '信道5', '访问量':null, '下单用户':0, '下单率': 1093 },
                        { '日期': '信道6', '访问量':null, '下单用户':null, '下单率':0,},
                        { '日期': '信道7', '访问量':null, '下单用户':null, '下单率':null,},
                        { '日期': '信道8', '访问量':null, '下单用户':null, '下单率':null,},
                        { '日期': '信道9', '访问量':null, '下单用户':null, '下单率':null,},
                        { '日期': '信道10', '访问量':null, '下单用户':null, '下单率':null,},
                        { '日期': '信道11', '访问量':null, '下单用户':null, '下单率':null,},
                        { '日期': '信道12', '访问量':null, '下单用户':null, '下单率':null,},
                        { '日期': '信道13', '访问量': null, '下单用户': null, '下单率': null },
                    ]
                },
                chartSettings : {
                    area: true
                },
                chartExtend: {
                    area: true,
                    color: ['#4ad2ff','#cccccc','#FF6DBB'],
                    series: {
                        barMaxWidth: 10
                    },
                    axisLine: {
                        color: "#4ad2ff",
                    },
                    yAxis: {
                        // name : '单位: dB',
                        splitLine: {
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: ['#08255B']
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#4ad2ff',
                                width: 1,//这里是为了突出显示加上的
                            }
                        }
                    },
                    xAxis: {
                        splitLine: {
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: ['#4ad2ff']
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#4ad2ff',
                                width: 1,//这里是为了突出显示加上的
                            }
                        }
                    }
                }
            }
        },
        mounted() {
            // let that = this;
            // this.timer = setInterval(() => {
            //     that.getDate();
            // }, 1600);
        },
        methods: {
            getDate() {
                let that = this;
                let param = {
                    token: localStorage.token
                };
                let postdata = qs.stringify(param);
                // wifiSingle(postdata).then(res => {
                //       let json = res;
                //       if (json.Code == 0) {

                // test start

                let item = [];
                let t =0;
                for (var i = 0; i < 9; i++) {
                    let nums = Math.floor((Math.random()*365)+1);
                    t = i+1;
                    item.push({
                        '日期': '信道1', '访问量':0, '下单用户':null, '下单率':null,
                        '页面': "信道" + t,
                        '访问量': nums,
                    })
                }

                let json = {
                    Rs: item,
                    Code: 0,
                    Memo: '登陆成功'
                };

                // test end
                this.chartData.rows = json.Rs;
                //       } else {
                //           that.$message.error(json.Memo);
                //       }
                //   })
            },
            getRandomInt(min, max) {
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }
        },
    }
</script>

<style scoped>
    .wifiSign {
        /*width: 986px;*/
        /*height: 212px;*/
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }
    /deep/ .other-people {
        width: 966px;
        height: 212px;
        margin-left:0;
        padding: 0;
        padding-right: 5px;
    }
</style>
