<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="decorator" content="base"/>
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="${ctxPlugin}/static/css/reset.css" media="all">
    <style>
        .layui-form-select dl{
            max-height:200px;
            width: 80%;
        }

        html{
            background-color: #fff;
        }
        .load-icon{background: url('${ctxPlugin}/static/img/shili_img.png') center center no-repeat; width: 12px; height: 12px; display: inline-block; border-radius: 50%;
            vertical-align: text-bottom;transform: translate(0px, -1px);margin-right: 2px;}
    </style>
</head>
<body>
<div class="layui-form">
    <div class="layui-card">
        <div class="layui-card-body over pt-20 pb-40 h-350">
            <div class="layui-col-xs12 mb-15 pr-30">
                <label class="layui-form-label w-130"><i class="red">*</i>服务商名称：</label>
                <div class="layui-input-block">
                    <input type="text" name="siteName" lay-verify="siteName" autocomplete="off" placeholder="请输入服务商名称" class="layui-input" value="${site.name}">
                </div>
            </div>
            <div class="layui-col-xs12 mb-10 pr-30">
                <div class="layui-inline layui-col-xs6">
                    <label class="layui-form-label w-130"><i class="red">*</i>登录账号：</label>
                    <div class="layui-input-block ">
                        <input type="text"  name="loginName" lay-verify="loginName" autocomplete="off" placeholder="请输入登录账号" class="layui-input" value="${user.loginName}">
                    </div>
                </div>
                <div class="layui-inline layui-col-xs6">
                    <label class="layui-form-label w-130"><i class="red">*</i>登录密码：</label>
                    <div class="layui-input-block w-200" >
                        <input type="password" name="password" lay-verify="password" autocomplete="new-password" placeholder="请输入登录密码" class="layui-input" <c:if test="${user.password eq null}">value=""</c:if>value="default">
                    </div>
                </div>
            </div>
            <div class="layui-col-xs12 mb-10 pr-30">
                <div class="layui-inline layui-col-xs6">
                    <label class="layui-form-label w-130"><i class="red">*</i>联系人：</label>
                    <div class="layui-input-block ">
                        <input type="text" name="userName" lay-verify="userName" autocomplete="off" placeholder="请输入联系人" class="layui-input" value="${site.contacts}">
                    </div>
                </div>
                <div class="layui-inline layui-col-xs6">
                    <label class="layui-form-label w-130"><i class="red">*</i>联系电话：</label>
                    <div class="layui-input-block w-200" >
                        <input type="text" name="telephone" lay-verify="telephone" autocomplete="off" placeholder="请填写手机号" class="layui-input" value="${site.telephone}">
                    </div>
                </div>
            </div>
            <div class="layui-col-xs12 mb-10 pr-30">
                <label class="layui-form-label w-130"><i class="red">*</i>服务商地址：</label>
                <div class="layui-input-block ml-130">
                    <div class="layui-col-xs4 pr-20">
                        <select class="province" id="province" name="province" lay-verify="province" lay-filter="province" lay-search>
                            <option value="">请选择省</option>
                            <c:forEach items="${province}" var="pro">
                                <option value="${pro.columns.ProvinceName}" title="${pro.columns.ProvinceID}" <c:if test="${site.province == pro.columns.ProvinceName}">selected</c:if>>${pro.columns.ProvinceName}</option>
                            </c:forEach>
                        </select>
                    </div>
                    <div class="layui-col-xs4 pr-20">
                        <select class="city" name="city" id="city" lay-verify="city" lay-filter="city" lay-search>
                            <option value="">请选择市</option>
                            <c:forEach items="${city}" var="cityList">
                                <option value="${cityList.columns.CityName}" title="${cityList.columns.CityID}" <c:if test="${site.city==cityList.columns.CityName}">selected</c:if>>${cityList.columns.CityName}</option>
                            </c:forEach>
                        </select>
                    </div>
                    <div class="layui-col-xs4">
                        <select class="area" name="area" id="area" lay-verify="area" lay-filter="area" lay-search>
                            <option value="">请选择县/区</option>
                            <c:forEach items="${area}" var="areaList">
                                <option value="${areaList.columns.DistrictName}" <c:if test="${site.area==areaList.columns.DistrictName}">selected</c:if>>${areaList.columns.DistrictName}</option>
                            </c:forEach>
                        </select>
                    </div>
                    <div class="layui-col-xs12 mt-20">
                        <input type="text" id="detailAddress" name="address" lay-verify="address" class="layui-input layui-col-lg2"
                               value="${site.address}">
                    </div>
                </div>
            </div>

            <div class="layui-col-xs12 layui-form-item">
                <label class="layui-form-label">相关资质：
                    <%--<br/><a href="${commonStaticImgPath}/prohibit_delete/示例图/营业执照示例.png" style="font-size: 12px;color: red;margin-right: 5px;"><i class="load-icon"></i>下载示例图</a>--%>
                </label>
                <div class="layui-input-block">
                    <div id="imgsDiv">
                        <c:forEach items="${imglist}" var="img">
                            <div class="bj-img imgSpan"><span class="layui-icon-close layui-icon" onclick="delImg(this)"></span>
                                <img src="${commonStaticImgPath.concat(img)}" data-img="${commonStaticImgPath.concat(img)}"  height="700" width="1200"/>
                                <input type="hidden" class="imgPicker" value="${img}"/>
                            </div>
                        </c:forEach>
                    </div>
                    <div class="upload-container" id="uploader">
                        <img src="" alt="img placeholder" id="imgsAdd">
                    </div>
                </div>
            </div>
            &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;(最多上传3张图片)
            <input type="hidden" name="id" id="id" value="${site.id}">
            <input type="hidden" name="imgs" id="imgs" value="${site.licenseImg}">
        </div>
    </div>
    <div class="operate-footer">
        <button type="button" lay-submit lay-filter="confirm" id="confirm" class="layui-btn">确认</button>
        <button type="button" class="layui-btn layui-btn-primary " onclick="closeDiv();" >取消</button>
    </div>
</div>
<div id="lookImg" class="hide pos-r">
    <div style="position:relative;width:90%;height:450px;">
        <div class="w-500 h-450 lookImg">
            <img src="" width="80%" id="image">
        </div>
    </div>
</div>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/data.js"></script>
<script type="text/javascript">
    //初始数据
    var $form;
    var form;
    var upload;
    var $;
    var imgsCount=${imgsCount};
    var imgs='';
    var myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
    layui.use(['form', 'table', 'upload', 'jquery'], function () {
        $ = layui.jquery;
        form = layui.form;
        upload = layui.upload;
        $form = $('form');

        if (imgsCount>=3) {
            $("#uploader").hide();
        }

        form.verify({
            siteName:function(value,item){
                if(!$.trim(value)){
                    return "服务商名称不能为空,请输入服务商名称！";
                }
            },
            loginName:function(value,item){
                if(!$.trim(value)){
                    return "登录账号不能为空,请输入登录账号！";
                }
                if($.trim(value).length<4){
                    return "登录账号不得小于4位,请重新输入！";
                }
                if($.trim(value).length>12){
                    return "登录账号不得大于12位,请重新输入！";
                }
            },
            password:function(value,item){
                if(!$.trim(value)){
                    return "登录密码不能为空,请输入密码后保存！";
                }
            },
            userName:function(value,item){
                if(!$.trim(value)){
                    return "联系人不能为空,请输入联系人！";
                }
            },
            telephone:function(value,item){
                if(!$.trim(value)){
                    return "手机号码不能为空,请输入手机号码后保存！";
                }
                if(!myreg.test($.trim(value))){
                    return "请输入正确的手机号码后保存！";
                }
            },
            province:function(value,item){
                if(!$.trim(value)){
                    return "省份不能为空,请选择省份！";
                }
            },
            city:function(value,item){
                if(!$.trim(value)){
                    return "城市不能为空,请选择城市！";
                }
            },
            area:function(value,item){
                if(!$.trim(value)){
                    return "区县不能为空,请选择区县！";
                }
            },
            address:function(value,item){
                if(!$.trim(value)){
                    return "详细地址不能为空,请输入地址后保存！";
                }
            }
        });


        form.on('select(province)', function (data) {
            var province = $(data.elem).find("option:selected").attr("title");
            $("#city").empty();
            $("#detailAddress").val("");
            if (isBlank(province)) {
                $("#city").append("<option value=''>请选择市</option>");
                return "";
            }
            $.ajax({
                type: "POST",
                url: "${ctx}/main/redirect/getCitysByProId",
                data: {
                    province: province
                },
                success: function (result) {
                    if (result == "205") {
                        layer.msg("暂无数据!")
                        return
                    }
                    var html = "";
                    for (var i = 0; i < result.length; i++) {
                        var city = result[i];
                        html = html + '<option value="' + city.columns.CityName + '" title="' + city.columns.CityID + '">' + city.columns.CityName + '</option>';
                    }
                    $("#city").append(html);
                    form.render('select');
                },
                complete: function () {
                    var city = $("#city").find("option:selected").attr("title");
                    $("#area").empty()
                    if (isBlank(city)) {
                        $("#area").append("<option value=''>请选择县/区</option>");
                        return "";
                    }
                    $.ajax({
                        type: "POST",
                        url: "${ctx}/main/redirect/getAreaByCityId",
                        data: {
                            city: city
                        },
                        success: function (result) {
                            if (result == "205") {
                                layer.msg("暂无数据!")
                                return
                            }
                            var html = "";
                            for (var i = 0; i < result.length; i++) {
                                var area = result[i];
                                html = html + '<option value="' + area.columns.DistrictName + '" >' + area.columns.DistrictName + '</option>';
                            }
                            $("#area").append(html);
                            form.render('select');
                        }
                    });
                }

            });

        });

        form.on('select(city)', function (data) {
            var city = $(data.elem).find("option:selected").attr("title");
            $("#area").empty();
            $("#detailAddress").val("");
            if (isBlank(city)) {
                $("#area").append("<option value=''>请选择县/区</option>");
                return "";
            }
            $.ajax({
                type: "POST",
                url: "${ctx}/main/redirect/getAreaByCityId",
                data: {
                    city: city
                },
                success: function (result) {
                    if (result == "205") {
                        layer.msg("暂无数据!")
                        return
                    }
                    var html = "";
                    for (var i = 0; i < result.length; i++) {
                        var area = result[i];
                        html = html + '<option value="' + area.columns.DistrictName + '" >' + area.columns.DistrictName + '</option>';
                    }
                    $("#area").append(html);
                    form.render('select');
                }
            });
        });

        form.on('submit(confirm)', function(data){
            $.ajax({
                url:'${ctx}/siteInformation/siteSave',
                method:'post',
                data:data.field,
                dataType:'JSON',
                success:function(res){
                    if(res.code=="200"){
                        layer.msg("保存成功",{time:1000});
                        closeDiv();
                        parent.table.reload('test');
                    }else if(res.code=="201") {
                        layer.msg("该登录账号已存在，请重新输入",{time:1500});
                    }else if(res.code=="202") {
                        layer.msg("该服务商名称已存在，请重新输入",{time:1500});
                    }  else{
                        layer.msg("保存失败",{time:1000});
                    }
                },
                error:function (data) {
                }
            }) ;
        });

        var uploadInst = upload.render({
            elem: '#uploader' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {

                });
            }
            , done: function (res) {
               /* imgs+=res.path+',';
                $("#imgs").val(imgs);*/
                //上传完毕回调
                addImg(res.path);
            }
            , error: function () {
                //请求异常回调
            }
        });

        $(".imgSpan img").click(function(){
            var img = $(this).attr("data-img");
            console.log(img);
            $("#lookImg img").attr('src',img);
            layer.open({
                type:1,
                title:'查看图片',
                area:['500px','450px'],
                content:$("#lookImg")
            })
        })
    })

    function  closeDiv() {
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index);
    }

    function isBlank(val) {
        if (val == null || val == '' || val == undefined) {
            return true;
        }
        return false;
    }

    function addImg(data){
        imgs = '';
        imgsCount++;
        if (imgsCount >= 3) {
            $("#uploader").hide();
        }else{
            $("#uploader").show();
        }
        var html = '<div class="bj-img imgSpan"><span class="layui-icon-close layui-icon" onclick="delImg(this)"></span>';
        html += '<img src="${commonStaticImgPath}'+data+'" height="700" width="1200"/>';
        html += '<input type="hidden" class="imgPicker" value="'+data+'"/> </div>';
        $("#imgsDiv").append(html);
        var imgSelector = $(".imgPicker");
        imgSelector.each(function (index) {
            var img = $(this).val();
            if (!isBlank(img)) {
                imgs += img + ",";
            }
        });
        console.log(imgs);
        $("#imgs").val(imgs);
    }

    function delImg(that){
        imgsCount--;
        if (imgsCount < 3) {
            $("#uploader").show();
        }
        $(that).parent().remove();
        var imgSelector = $(".imgPicker");
        imgSelector.each(function (index) {
            var img = $(this).val();
            if (!isBlank(img)) {
                imgs += img + ",";
            }
        });
        $("#imgs").val(imgs);
    }

</script>
</body>
</html>
