<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增策略条件')" />
    <style type="text/css">
        /*.panel-body{*/
        /*    margin-right: 40%;*/
        /*}*/
    </style>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-strategycondition-add">
            <div class="form-group">    
                <label class="col-sm-3 control-label">策略编号：</label>
                <div class="col-sm-8">
<!--                    <input name="strategyId" class="form-control" type="text">-->
                    <select name="strategyId"  class="form-control">
                        <option th:each="strategy:${strategyList}" th:selected="${strategyId==strategy.id}" th:value="${strategy.id}" th:text="${strategy.name}"></option>
                    </select>
                </div>
            </div>
            <div style="color: red">*注：若同一个策略需要满足两个条件时，需要按照以下来填写。
                <br>例如：" 温度节能 " 策略 " 室内温度 "来作为条件1，" 室外温度 "来作为条件2</div>
            <ul class="nav nav-tabs">
                <li class="active">
                    <a data-toggle="tab" href="#tab-1" aria-expanded="true"> 生效条件1</a>
                </li>
                <li class="">
                    <a data-toggle="tab" href="#tab-2" aria-expanded="false">生效条件2</a>
                </li>
                <li class="">
                    <a data-toggle="tab" href="#tab-3" aria-expanded="false">生效条件3</a>
                </li>
            </ul>
            <div class="tab-content">
                <div id="tab-1" class="tab-pane active">
                    <div class="panel-body">
                        <div class="form-group">
                            <label class="col-sm-3 control-label is-required">区分：</label>
                            <div class="col-sm-8">
                                <label class="radio-box">
                                    <input type="radio" name="qufen" value="1">单条件
                                </label>
                                <label class="radio-box">
                                    <input type="radio" name="qufen" value="2">联合条件
                                </label>
                            </div>
                        </div>

                        <div id="lhtj" style="display:none;background-color: #F8F8F8;width: 76%;margin-left: 105px;box-shadow: 15px 8px 8px #F0F4F7">
                            <div class="form-group" style="padding-top: 15px">
                                <label class="col-sm-3 control-label">字段：</label>
                                <div class="col-sm-8">
                                    <select id="condition_field1" name="condition_field1" class="form-control m-b">
                                        <option value="">请选择</option>
                                        <option value="1">客流人数</option>
                                        <option value="2">时间段</option>
                                        <option value="3">光照度</option>
                                        <option value="4">温度</option>
                                        <option value="5">储能当前电量</option>
                                        <option value="6">当前时间</option>
                                        <option value="7">光伏发电</option>
                                        <option value="8">风力发电</option>
                                        <option value="9">空气质量</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">计算：</label>
                                <div class="col-sm-8">
                                    <label class="radio-box">
                                        <input type="radio" name="condition_field_type1" value="1">加
                                    </label>
                                    <label class="radio-box">
                                        <input type="radio" name="condition_field_type1" value="2">减
                                    </label>
                                    <label class="radio-box">
                                        <input type="radio" name="condition_field_type1" value="3">乘
                                    </label>
                                    <label class="radio-box">
                                        <input type="radio" name="condition_field_type1" value="4">除
                                    </label>
                                    <label class="radio-box">
                                        <input type="radio" name="condition3_field_type2" value="">无
                                    </label>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label">字段：</label>
                                <div class="col-sm-8">
                                    <select id="condition_field2" name="condition_field2" class="form-control m-b">
                                        <option value="">请选择</option>
                                        <option value="1">客流人数</option>
                                        <option value="2">时间段</option>
                                        <option value="3">光照度</option>
                                        <option value="4">温度</option>
                                        <option value="5">储能当前电量</option>
                                        <option value="6">当前时间</option>
                                        <option value="7">光伏发电</option>
                                        <option value="8">风力发电</option>
                                        <option value="9">空气质量</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">计算：</label>
                                <div class="col-sm-8">
                                    <label class="radio-box">
                                        <input type="radio" name="condition_field_type2" value="1">加
                                    </label>
                                    <label class="radio-box">
                                        <input type="radio" name="condition_field_type2" value="2">减
                                    </label>
                                    <label class="radio-box">
                                        <input type="radio" name="condition_field_type2" value="3">乘
                                    </label>
                                    <label class="radio-box">
                                        <input type="radio" name="condition_field_type2" value="4">除
                                    </label>
                                    <label class="radio-box">
                                        <input type="radio" name="condition3_field_type2" value="">无
                                    </label>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label">字段：</label>
                                <div class="col-sm-8">
                                    <select id="condition_field3" name="condition_field3" class="form-control m-b">
                                        <option value="">请选择</option>
                                        <option value="1">客流人数</option>
                                        <option value="2">时间段</option>
                                        <option value="3">光照度</option>
                                        <option value="4">温度</option>
                                        <option value="5">储能当前电量</option>
                                        <option value="6">当前时间</option>
                                        <option value="7">光伏发电</option>
                                        <option value="8">风力发电</option>
                                        <option value="9">空气质量</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div id="dtj" style="display:none;background-color: #F8F8F8;width: 76%;margin-left: 105px;box-shadow: 15px 8px 8px #F0F4F7">
                            <div class="form-group" style="padding-top: 15px">
                                <label class="col-sm-3 control-label">字段：</label>
                                <div class="col-sm-8">
                                    <select id="condition_field4" name="condition_field4" class="form-control m-b">
                                        <option value="">请选择</option>
                                        <option value="1">客流人数</option>
                                        <option value="2">时间段</option>
                                        <option value="3">光照度</option>
                                        <option value="4">温度</option>
                                        <option value="5">储能当前电量</option>
                                        <option value="6">当前时间</option>
                                        <option value="7">光伏发电</option>
                                        <option value="8">风力发电</option>
                                        <option value="9">空气质量</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">方式：</label>
                            <div class="col-sm-8">
                                <select name="conditionType" class="form-control m-b">
                                    <option value="1">大于</option>
                                    <option value="2">小于</option>
                                    <option value="3">等于</option>
                                    <option value="4">时间</option>
                                    <option value="5">区间</option>
                                    <option value="6">大于等于</option>
                                    <option value="7">小于等于</option>
                                </select>
                            </div>
                        </div>
                        <div style="position: fixed;margin: -17px 181px 0px;color: red">
                            *注：类型选择区间时，目标参数以" - "隔开。例如：7:00-11:00
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">目标：</label>
                            <div class="col-sm-8">
                                <input name="targetCondition" class="form-control" type="text">
                            </div>
                        </div>
                    </div>
                </div>
                <div id="tab-2" class="tab-pane">
                    <div class="panel-body">
                        <div class="form-group">
                            <label class="col-sm-3 control-label is-required">区分：</label>
                            <div class="col-sm-8">
                                <label class="radio-box">
                                    <input type="radio" name="qufen2" value="1">单条件
                                </label>
                                <label class="radio-box">
                                    <input type="radio" name="qufen2" value="2">联合条件
                                </label>
                            </div>
                        </div>

                        <div id="lhtj2" style="display:none;background-color: #F8F8F8;width: 76%;margin-left: 105px;box-shadow: 15px 8px 8px #F0F4F7">
                            <div class="form-group" style="padding-top: 15px">
                                <label class="col-sm-3 control-label">字段：</label>
                                <div class="col-sm-8">
                                    <select name="condition2_field1" class="form-control m-b">
                                        <option value="">请选择</option>
                                        <option value="1">客流人数</option>
                                        <option value="2">时间段</option>
                                        <option value="3">光照度</option>
                                        <option value="4">温度</option>
                                        <option value="5">储能当前电量</option>
                                        <option value="6">当前时间</option>
                                        <option value="7">光伏发电</option>
                                        <option value="8">风力发电</option>
                                        <option value="9">空气质量</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">计算：</label>
                                <div class="col-sm-8">
                                    <label class="radio-box">
                                        <input type="radio" name="condition2_field_type1" value="1">加
                                    </label>
                                    <label class="radio-box">
                                        <input type="radio" name="condition2_field_type1" value="2">减
                                    </label>
                                    <label class="radio-box">
                                        <input type="radio" name="condition2_field_type1" value="3">乘
                                    </label>
                                    <label class="radio-box">
                                        <input type="radio" name="condition2_field_type1" value="4">除
                                    </label>
                                    <label class="radio-box">
                                        <input type="radio" name="condition3_field_type2" value="">无
                                    </label>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label">字段：</label>
                                <div class="col-sm-8">
                                    <select name="condition2_field2" class="form-control m-b">
                                        <option value="">请选择</option>
                                        <option value="1">客流人数</option>
                                        <option value="2">时间段</option>
                                        <option value="3">光照度</option>
                                        <option value="4">温度</option>
                                        <option value="5">储能当前电量</option>
                                        <option value="6">当前时间</option>
                                        <option value="7">光伏发电</option>
                                        <option value="8">风力发电</option>
                                        <option value="9">空气质量</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">计算：</label>
                                <div class="col-sm-8">
                                    <label class="radio-box">
                                        <input type="radio" name="condition2_field_type2" value="1">加
                                    </label>
                                    <label class="radio-box">
                                        <input type="radio" name="condition2_field_type2" value="2">减
                                    </label>
                                    <label class="radio-box">
                                        <input type="radio" name="condition2_field_type2" value="3">乘
                                    </label>
                                    <label class="radio-box">
                                        <input type="radio" name="condition2_field_type2" value="4">除
                                    </label>
                                    <label class="radio-box">
                                        <input type="radio" name="condition3_field_type2" value="">无
                                    </label>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label">字段：</label>
                                <div class="col-sm-8">
                                    <select name="condition2_field3" class="form-control m-b">
                                        <option value="">请选择</option>
                                        <option value="1">客流人数</option>
                                        <option value="2">时间段</option>
                                        <option value="3">光照度</option>
                                        <option value="4">温度</option>
                                        <option value="5">储能当前电量</option>
                                        <option value="6">当前时间</option>
                                        <option value="7">光伏发电</option>
                                        <option value="8">风力发电</option>
                                        <option value="9">空气质量</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div id="dtj2" style="display:none;background-color: #F8F8F8;width: 76%;margin-left: 105px;box-shadow: 15px 8px 8px #F0F4F7">
                            <div class="form-group" style="padding-top: 15px">
                                <label class="col-sm-3 control-label">字段：</label>
                                <div class="col-sm-8">
                                    <select name="condition2_field4" class="form-control m-b">
                                        <option value="">请选择</option>
                                        <option value="1">客流人数</option>
                                        <option value="2">时间段</option>
                                        <option value="3">光照度</option>
                                        <option value="4">温度</option>
                                        <option value="5">储能当前电量</option>
                                        <option value="6">当前时间</option>
                                        <option value="7">光伏发电</option>
                                        <option value="8">风力发电</option>
                                        <option value="9">空气质量</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">类型：</label>
                            <div class="col-sm-8">
                                <select name="conditionType2" class="form-control m-b">
                                    <option value="">请选择</option>
                                    <option value="1">大于</option>
                                    <option value="2">小于</option>
                                    <option value="3">等于</option>
                                    <option value="4">时间</option>
                                    <option value="5">区间</option>
                                    <option value="6">大于等于</option>
                                    <option value="7">小于等于</option>
                                </select>
                            </div>
                        </div>
                        <div style="position: fixed;margin: -17px 181px 0px;color: red">
                            *注：类型选择区间时，目标参数以" - "隔开。例如：7:00-11:00
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">目标：</label>
                            <div class="col-sm-8">
                                <input name="targetCondition2" class="form-control" type="text">
                            </div>
                        </div>
                    </div>
                </div>
                <div id="tab-3" class="tab-pane">
                    <div class="panel-body">

                        <div class="form-group">
                            <label class="col-sm-3 control-label is-required">区分：</label>
                            <div class="col-sm-8">
                                <label class="radio-box">
                                    <input type="radio" name="qufen3" value="1">单条件
                                </label>
                                <label class="radio-box">
                                    <input type="radio" name="qufen3" value="2">联合条件
                                </label>
                            </div>
                        </div>

                        <div id="lhtj3" style="display:none;background-color: #F8F8F8;width: 76%;margin-left: 105px;box-shadow: 15px 8px 8px #F0F4F7">
                            <div class="form-group" style="padding-top: 15px">
                                <label class="col-sm-3 control-label">字段：</label>
                                <div class="col-sm-8">
                                    <select name="condition3_field1" class="form-control m-b">
                                        <option value="">请选择</option>
                                        <option value="1">客流人数</option>
                                        <option value="2">时间段</option>
                                        <option value="3">光照度</option>
                                        <option value="4">温度</option>
                                        <option value="5">储能当前电量</option>
                                        <option value="6">当前时间</option>
                                        <option value="7">光伏发电</option>
                                        <option value="8">风力发电</option>
                                        <option value="9">空气质量</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">计算：</label>
                                <div class="col-sm-8">
                                    <label class="radio-box">
                                        <input type="radio" name="condition3_field_type1" value="1">加
                                    </label>
                                    <label class="radio-box">
                                        <input type="radio" name="condition3_field_type1" value="2">减
                                    </label>
                                    <label class="radio-box">
                                        <input type="radio" name="condition3_field_type1" value="3">乘
                                    </label>
                                    <label class="radio-box">
                                        <input type="radio" name="condition3_field_type1" value="4">除
                                    </label>
                                    <label class="radio-box">
                                        <input type="radio" name="condition3_field_type2" value="">无
                                    </label>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label">字段：</label>
                                <div class="col-sm-8">
                                    <select name="condition3_field2" class="form-control m-b">
                                        <option value="">请选择</option>
                                        <option value="1">客流人数</option>
                                        <option value="2">时间段</option>
                                        <option value="3">光照度</option>
                                        <option value="4">温度</option>
                                        <option value="5">储能当前电量</option>
                                        <option value="6">当前时间</option>
                                        <option value="7">光伏发电</option>
                                        <option value="8">风力发电</option>
                                        <option value="9">空气质量</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">计算：</label>
                                <div class="col-sm-8">
                                    <label class="radio-box">
                                        <input type="radio" name="condition3_field_type2" value="1">加
                                    </label>
                                    <label class="radio-box">
                                        <input type="radio" name="condition3_field_type2" value="2">减
                                    </label>
                                    <label class="radio-box">
                                        <input type="radio" name="condition3_field_type2" value="3">乘
                                    </label>
                                    <label class="radio-box">
                                        <input type="radio" name="condition3_field_type2" value="4">除
                                    </label>
                                    <label class="radio-box">
                                        <input type="radio" name="condition3_field_type2" value="">无
                                    </label>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label">字段：</label>
                                <div class="col-sm-8">
                                    <select name="condition3_field3" class="form-control m-b">
                                        <option value="">请选择</option>
                                        <option value="1">客流人数</option>
                                        <option value="2">时间段</option>
                                        <option value="3">光照度</option>
                                        <option value="4">温度</option>
                                        <option value="5">储能当前电量</option>
                                        <option value="6">当前时间</option>
                                        <option value="7">光伏发电</option>
                                        <option value="8">风力发电</option>
                                        <option value="9">空气质量</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div id="dtj3" style="display:none;background-color: #F8F8F8;width: 76%;margin-left: 105px;box-shadow: 15px 8px 8px #F0F4F7">
                            <div class="form-group" style="padding-top: 15px">
                                <label class="col-sm-3 control-label">字段：</label>
                                <div class="col-sm-8">
                                    <select name="condition3_field4" class="form-control m-b">
                                        <option value="">请选择</option>
                                        <option value="1">客流人数</option>
                                        <option value="2">时间段</option>
                                        <option value="3">光照度</option>
                                        <option value="4">温度</option>
                                        <option value="5">储能当前电量</option>
                                        <option value="6">当前时间</option>
                                        <option value="7">光伏发电</option>
                                        <option value="8">风力发电</option>
                                        <option value="9">空气质量</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">类型：</label>
                            <div class="col-sm-8">
                                <select name="conditionType3" class="form-control m-b">
                                    <option value="">请选择</option>
                                    <option value="1">大于</option>
                                    <option value="2">小于</option>
                                    <option value="3">等于</option>
                                    <option value="4">时间</option>
                                    <option value="5">区间</option>
                                    <option value="6">大于等于</option>
                                    <option value="7">小于等于</option>
                                </select>
                            </div>
                        </div>
                        <div style="position: fixed;margin: -17px 181px 0px;color: red">
                            *注：类型选择区间时，目标参数以" - "隔开。例如：7:00-11:00
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">目标：</label>
                            <div class="col-sm-8">
                                <input name="targetCondition3" class="form-control" type="text">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var prefix = ctx + "zhny/strategycondition"
        $("#form-strategycondition-add").validate({
            focusCleanup: true
        });

        $(function (){
            $("input:radio[name='qufen']").on("ifChecked", function(event){
                var radio = document.querySelector('input[name="qufen"]:checked');
                if (radio.value == 2) {
                    $("#dtj").hide()
                    $("#lhtj").show()
                    $("#condition_field1").val("")
                    $("#condition_field2").val("")
                    $("#condition_field3").val("")
                    $("#condition_field4").val("")
                }else if (radio.value == 1) {
                    $("#dtj").show()
                    $("#lhtj").hide()
                    $("#condition_field1").val("")
                    $("#condition_field2").val("")
                    $("#condition_field3").val("")
                    $("#condition_field4").val("")
                }else {
                    $("#dtj").hide()
                    $("#lhtj").hide()
                    $("#condition_field1").val("")
                    $("#condition_field2").val("")
                    $("#condition_field3").val("")
                    $("#condition_field4").val("")
                }
            });
            $("input:radio[name='qufen2']").on("ifChecked", function(event){
                var radio = document.querySelector('input[name="qufen2"]:checked');
                if (radio.value == 2) {
                    $("#dtj2").hide()
                    $("#lhtj2").show()
                    $("#condition1_field1").val("")
                    $("#condition1_field2").val("")
                    $("#condition1_field3").val("")
                    $("#condition1_field4").val("")
                }else if (radio.value == 1) {
                    $("#dtj2").show()
                    $("#lhtj2").hide()
                    $("#condition2_field1").val("")
                    $("#condition2_field2").val("")
                    $("#condition2_field3").val("")
                    $("#condition2_field4").val("")
                }else {
                    $("#dtj2").hide()
                    $("#lhtj2").hide()
                    $("#condition3_field1").val("")
                    $("#condition3_field2").val("")
                    $("#condition3_field3").val("")
                    $("#condition3_field4").val("")
                }
            });
            $("input:radio[name='qufen3']").on("ifChecked", function(event){
                var radio = document.querySelector('input[name="qufen3"]:checked');
                if (radio.value == 2) {
                    $("#dtj3").hide()
                    $("#lhtj3").show()
                    $("#condition3_field1").val("")
                    $("#condition3_field2").val("")
                    $("#condition3_field3").val("")
                    $("#condition3_field4").val("")
                }else if (radio.value == 1) {
                    $("#dtj3").show()
                    $("#lhtj3").hide()
                    $("#condition3_field1").val("")
                    $("#condition3_field2").val("")
                    $("#condition3_field3").val("")
                    $("#condition3_field4").val("")
                }else {
                    $("#dtj3").hide()
                    $("#lhtj3").hide()
                    $("#condition3_field1").val("")
                    $("#condition3_field2").val("")
                    $("#condition3_field3").val("")
                    $("#condition3_field4").val("")
                }
            });
        })

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-strategycondition-add').serialize());
            }
        }
    </script>
</body>
</html>