<template>
    <div class="content">
        <div class="tabs">
            <ul>
                <li v-for="(tab,i) in tabs" @click="goTab(tab.url)" :class="{'active':tabIndex == i}">
                    {{tab.name}}
                </li>
            </ul>
        </div>
        <div class="panel">
            <div class="panel-body">
                <div class=" panel_control">
                    <div class="pline">
                        <em>统计时间</em>
                        <el-date-picker
                                v-model="panel.time1"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                    <div class="pline">
                        <em>安全等级:</em>
                        <el-select v-model="panel.level">
                            <el-option
                                    v-for="item in panel.levelOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="pline">
                        <el-button size="medium" type="primary" @click="query">查询</el-button>
                    </div>
                </div>
            </div>
        </div>

        <div class="histogram">
            <ve-Line :data="chartData" width="100%" height="700px" :loading="loading" :legend-visible="false"
                     :extend="chartExtend"></ve-Line>
            <div class="null_state" v-if="chartData.rows == ''">
                暂无
            </div>
        </div>
    </div>
</template>

<script>
    import Global from '../Global.js'
    import {
        ChartDayCount,
    } from '../api/getApiRes.js'

    let qs = require('qs');
    export default {
        data() {
            return {
                tabIndex: 0,
                tabs: [
                    {name: '监测记录统计', url: 'statistics'},
                    {name: '无线信号统计', url: 'wirelessStatistics'},
                ],
                // panel 配置项目
                panel: {
                    usercode: '',
                    username: '',
                    compname: '',
                    keyword: '',
                    USERCODE: '',
                    taskstatus: 99,
                    level: 1,
                    regionid: 0,
                    regionid2: '',
                    regionidOptions: [],
                    regionidOptions2: [],
                    levelOptions: [{
                        value: 1,
                        label: '可信设备'
                    }, {
                        value: 2,
                        label: '安全'
                    }, {
                        value: 3,
                        label: '可疑'
                    }, {
                        value: 4,
                        label: '危险'
                    },],
                    time1: globalBt3(7),
                },
                days: 13,
                loading: false,
                chartData: {
                    columns: ['X', 'Y'],
                    rows: []
                },
                chartExtend: {
                    color: ['#72FF99'],
                    series: {
                        barMaxWidth: 10,
                        // 区域填充样式
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(0,255,212,0.15)', // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(0,255,212,0.15)' // 100% 处的颜色
                                    },
                                ],
                                global: false // 缺省为 false
                            }
                        },
                    },
                    axisLine: {
                        color: "#04E3FD",
                        // onZero:  false
                    },
                    yAxis: {
                        // name : '单位: dB',
                        splitLine: {
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: ['#08255B']
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#04E3FD',
                                width: 1,//这里是为了突出显示加上的
                            }
                        },
                        axisLabel: {
                            show: true,
                            interval: 'auto',
                            formatter: function (val) {
                                return val
                            }
                        },
                    },
                    xAxis: {
                        // offset:-120,
                        splitLine: {
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: ['#04E3FD']
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#04E3FD',
                                width: 1,//这里是为了突出显示加上的
                            }
                        }
                    },
                    tooltip: {
                        formatter: function (val) {
                            return val[0].data
                        }
                    }
                }
            };
        },
        mounted() {
            this.getTableQuery();
        },
        methods: {
            // 查询按钮
            query() {
                this.getTableQuery();
                this.$message.success('查询完毕');
            },
            // 页面数据查询
            getTableQuery() {
                let that = this;
                that.loading = true;
                let bt = parseInt(new Date(that.panel.time1[0]).getTime() / 1000);
                let et = parseInt(new Date(that.panel.time1[1]).getTime() / 1000);
                let param = {
                    token: localStorage.token,
                    type: 1,//1: wifi 2:无线
                    level: that.panel.level,//危险等级
                    bt: bt,//标签名
                    et: et,//
                };
                let postdata = qs.stringify(param);
                ChartDayCount(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.loading = false;
                        let charts = [];
                        if (json.Rs) {
                            for (var i = 0; i < json.Rs.length; i++) {
                                charts[i] = {
                                    X: filterTimeToString(json.Rs[i].DateTs,11),
                                    Y: json.Rs[i].Count,
                                }
                            }
                        }

                        // color
                        console.log(parseInt(that.panel.level));
                        switch (parseInt(that.panel.level)) {
                            case 1:
                                that.chartExtend.color = ['#72FF99'];
                                break;
                            case 2:
                                that.chartExtend.color = ['#04E3FD'];
                                break;
                            case 3:
                                that.chartExtend.color = ['#ffd600'];
                                break;
                            case 4:
                                that.chartExtend.color = ['#d50000'];
                                break;

                        }


                        this.chartData.rows = charts;
                    } else {
                        that.$message.error(json.Memo + '，错误代码：' + json.Code);
                    }
                })
            },
            // 跳转tab页面
            goTab(url) {
                this.$router.push({path: url});
            },
        }
    }
</script>

<style scoped>
    @import "../assets/css/panel.css";

    .tabs ul {
        width: 368px;
        float: left;
    }

    .tabs li {
        width: 168px;
        float: left;
    }

    table span {
        cursor: pointer;
    }

</style>
