{{ define "index/setup.html" }}
{{template "public/header" .}}
<style>
    .layui-input-block{
        margin-left: 150px;
    }
    .layui-form-label{
        width: 120px;
        color: #8697ac!important;
    }
    .layui-input, .layui-textarea, .layui-select{
        color: #1a43a9!important;
    }
</style>
<div class="set_top">
    系统设定(<font  style="color: red;">*</font>需要重启服务后才能生效)
</div>

<form class="layui-form set_bd" action="" style="width: 500px;">
    <div class="layui-form-item">
        <label class="layui-form-label">WEB监听地址<font style="color: red;">*</font></label>
        <div class="layui-input-block">
            <input type="text" style="width: 100px;"  name="web_host" value="{{.web_host}}" required  lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">WEB监听端口<font style="color: red;">*</font></label>
        <div class="layui-input-block">
            <input type="text" style="width: 100px;"  name="web_port" value="{{.web_port}}" required  lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">运行模式<font style="color: red;">*</font></label>
        <div class="layui-input-block">
            <input type="radio" name="web_mode" value="release"  title="正式" {{if eq .web_mode "release"}} checked {{end}}   autocomplete="off" class="layui-input">
            <input type="radio" name="web_mode" value="test"  title="测试" {{if eq .web_mode "test"}} checked {{end}} autocomplete="off" class="layui-input">
            <input type="radio" name="web_mode" value="debug"  title="调试" {{if eq .web_mode "debug"}} checked {{end}} autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">搜索网段</label>
        <div class="layui-input-block">
            <input type="text" style="width: 150px;"  name="net_addr" value="{{.net_addr}}" required  lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">照片存储目录</label>
        <div class="layui-input-block">
            <input type="text" style="width: 400px;"  name="photo_root_path" value="{{.photo_root_path}}"  lay-verify="required" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">照片保存天数</label>
        <div class="layui-input-block">
            <input type="text" style="width: 100px;"  name="photo_save_day" value="{{.photo_save_day}}"   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">共享名称</label>
        <div class="layui-input-block">
            <input type="text" style="width: 400px;"  name="photo_smb_name" value="{{.photo_smb_name}}"    autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">ERPAPI地址</label>
        <div class="layui-input-block">
            <input type="text" name="erp_addr" value="{{.erp_addr}}" required  lay-verify="required" placeholder="请输入ERP接口地址" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选片路径原片</label>
        <div class="layui-input-block">
            <input type="text" name="erp_sp_oripath" value="{{.erp_sp_oripath}}"    placeholder="请输入素玄系统选片原片路径" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选片路径中档</label>
        <div class="layui-input-block">
            <input type="text" name="erp_sp_midpath" value="{{.erp_sp_midpath}}"    placeholder="请输入素玄系统选片中档路径" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">套版服务地址</label>
        <div class="layui-input-block">
            <input type="text" name="erp_design_addr" value="{{.erp_design_addr}}"    placeholder="请输入套版服务地址" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">百度修片路径</label>
        <div class="layui-input-block">
            <input type="text" name="baidu_ps_path" value="{{.baidu_ps_path}}"    placeholder="请输入百度修片路径" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">绑定相机</label>
        <div class="layui-input-block" id="bind_status">
            {{ if .bind_cameras}}
            <input type="checkbox" name="bind_status" checked lay-skin="switch" title="手动|自动" value="1" lay-filter="bind_status"/>
            {{else}}
            <input type="checkbox" name="bind_status" lay-skin="switch" title="手动|自动" value="1" lay-filter="bind_status"/>
            {{ end }}
        </div>
        <div class="layui-input-block" id="all_cameras" {{if not .bind_cameras}}style="display:none;"{{end}}>
            {{ range .camera_list }}
            {{ if .Binded }}
            <input type="checkbox" name="bind_cameras" value="{{.Serialnumber}}" title="{{.Desc}}[{{.Serialnumber}}]-{{.Ip}}" checked>
            {{else}}
            <input type="checkbox" name="bind_cameras" value="{{.Serialnumber}}" title="{{.Desc}}[{{.Serialnumber}}]-{{.Ip}}">
            {{ end }}
            {{ end }}
            <div class=" layui-btn" style="position: absolute;top: -24px;right: 0px;" id="scan">
                扫描新设备
            </div>  
        </div>
        <!-- <div style="color: white;margin-left: 130px;">如果需要自动绑定所有设备，请清空所有设备，扫描后会自动绑定所有设备</div> -->
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <!-- <button type="reset" class="layui-btn layui-btn-primary">重置</button> -->
        </div>
    </div>
</form>

<script type="text/javascript">
layui.use('form', function(){
     var form = layui.form;
  
    //监听提交
    form.on('submit(formDemo)', function(data){
        // console.log(data.field);
        var binded = []
        $("input[name='bind_cameras']:checkbox").each(function(){
            // console.log("----",$(this).attr("checked"),$(this).prop("checked"));
            if($(this).prop('checked') == true){
                binded.push($(this).val())
            }
        })
        var bindStatus = data.field.bind_status
        console.log("bindStatus",data.field);
        console.log("bind_cameras",binded)
        if(bindStatus && binded.length ==0){
            layer.alert("请至少选择一个相机进行绑定",{title:"错误"});
            return false;
        }
        if(bindStatus){
            data.field.bind_cameras = binded.join(",");
        }else{
            data.field.bind_cameras = '';
        }
        
        // console.log(data.field);
        common.showLoading();
        $.ajax({
            type: "POST",
            url: "/setup",
            data: data.field,
            dataType:'json',
            success: function(ret){
                common.hideLoading();
                console.log("login res:",ret)
                if(ret.code == 200){
                    layer.alert("保存成功");
                }else{
                    layer.alert("保存失败："+ret.msg);
                }
            },
            error:function(XMLHttpRequest, textStatus, errorThrown){
                common.hideLoading();
                layer.alert("请求失败，请检查服务是否已启动。"+textStatus);
            }
        })

        return false;
    });

    form.on('switch(bind_status)', function(data){
        // console.log(data.elem); //得到checkbox原始DOM对象
        // console.log(data.elem.checked); //开关是否开启，true或者false
        // console.log(data.value); //开关value值，也可以通过data.elem.value得到
        // console.log(data.othis); //得到美化后的DOM对象
        if(data.elem.checked){
            $("#all_cameras").show();
        }else{
            $("#all_cameras").hide();
        }
    });


  function loadCamera(){
    common.showLoading();
    common.ajax({
        url:"/scanCamera",
        data:{}
    }).then((res)=>{
        common.hideLoading();
        if(res.code == 200){
            html = "";
            res.data.forEach((v)=>{
                if(v.Binded){
                    html += '<input type="checkbox" name="bind_cameras[]" value="'+v.Serialnumber+'" title="'+v.Desc+'['+v.Serialnumber+']-'+v.Ip+'" checked>'
                }else{
                    html += '<input type="checkbox" name="bind_cameras[]" value="'+v.Serialnumber+'" title="'+v.Desc+'['+v.Serialnumber+']-'+v.Ip+'">'
                }
            })
            $("#all_cameras").html(html);
            form.render();
            console.log(res)
        }else{
            layer.alert("获取失败："+res.msg);
        }
    }).catch((err)=>{
        common.hideLoading();
        console.error(err)
        layer.alert(err.message);
    })
  }
  $("#scan").click(function(){
    loadCamera();
  })

});
</script>
{{template "public/footer" .}}
{{ end }}