{% extends "../theme.html" %}
{% block content %}
{%include 'inc/menu.html'%}
<div class="pannel">
	<form action="/device/stat" method="get">
    <input type="hidden" name="type" id="type" value="{{data['input']['type']}}" />
    <input type="hidden" name="id" id="id" value="{{data['input']['id']}}" />
        <select name="device" id="device">
            {% for v in data['device'] %}
            <option value="{{v['id']}}" {% if 'device' in data['search'] and data['search']['device'] == v['id'] %}selected{% end %}>{{v['name']}}</option>
            {% end %}
        </select>   
        <select name="group" id="group" {% if 'start' in data['search'] or 'end' in data['search'] %}style="display:none;"{% end %}>
            {% for v in data['group'] %}
            <option value="{{v['id']}}" {% if 'group' in data['search'] and data['search']['group'] == v['id'] %}selected{% end %}>{{v['name']}}</option>
            {% end %}
        </select>     
        <input type="text" name="start" id="start" readonly class="form_datetime" value="{% if 'start' in data['search'] %}{{data['search']['start']}}{% end %}" style="width:150px;">
        ~     
        <input type="text" name="end" id="end" readonly class="form_datetime" value="{% if 'end' in data['search'] %}{{data['search']['end']}}{% end %}" style="width:150px;">
        <input type="submit" value="查询">  
    </form>
	<div class="box" id="main" style="width: 100%;height:400px;">
    </div>
</div>
{% end %}

{% block script %}
{%include 'chart/page.html'%}
<script type="text/javascript" src="{{static_url('pc/lib/laydate/laydate.js')}}"></script>
<script type="text/javascript">
dateTheme = '#247ed0'
laydate.render({
  elem: '#start'
  ,theme: dateTheme
  ,max: 0
  ,type: 'datetime'
  /*
  ,mark: {
    '0-9-14': '浇水'
    ,'0-9-26': '施肥' //每年的日期
  }
  */
  ,done: function(value, date){
    /*
    if(date.year === 2017 && date.month === 9 && date.date === 14){
        alert('我都干了什么啊');
    }
    */
    var start = value
    var end = $("#end").val()
    if (start || end) {
        $("#group").hide();
    } else {
        $("#group").show();
    }
  }
});
laydate.render({
  elem: '#end'
  ,theme: dateTheme
  //,min: $('#start').val()
  ,max: 0
  ,type: 'datetime'
  ,done: function(value, date){
    var start = $("#start").val()
    var end = value
    if (start || end) {
        $("#group").hide();
    } else {
        $("#group").show();
    }
  }
});
</script>
{% end %}