<%@ 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">
</head>

<body>
<div class="layui-fluid">
    <div class="layui-tab">

    </div>
    <div class="layui-card" style="height: 600px">
        <div class="layui-card-body mb-10">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin-bottom: 10px">
                <ul class="layui-tab-title">
                    <sfTags:pagePermission authFlag="SIT_XTSZ_SHDZ_SHDZ_T" html=' <a><li class="layui-this">收货地址设置</li></a>'/>
                    <%--<sfTags:pagePermission authFlag="SIT_XTSZ_SHDZ_XZ_B" html=' <button class="layui-btn layui-btn-sm addNew f-r mt-10"><i class="layui-icon layui-icon-add-1"></i>新增 </button> '/>--%>
                </ul>
            </div>

                <div class="over mb-10">
                    <div class="layui-card pt-5 over" style="border-bottom:1px solid #ddd;">
                        <div class="layui-col-xs2 f-r">
                            <%--<div class="layui-form-item details layui-form" >
                                <div class="">
                                    <input type="radio" name="dafaultAddress" class="dafaultAddress" data-idVal="${data.columns.id}" value="${data.columns.dafault_address}" title="默认收货地址"
                                           <c:if test="${data.columns.dafault_address eq '0'}">checked</c:if>>
                                </div>
                            </div>--%>
                            <button class="layui-btn resive" data-resive="${data.columns.id}"><i class="layui-icon fs-16">&#xe642;</i>编辑</button>
                            <%--<button class="layui-btn layui-btn-sm delete" data-id="${data.columns.id}"><i class="layui-icon layui-icon-delete"></i>删除</button>--%>
                        </div>
                        <form class="layui-form layui-col-xs10 " action="" id="formData" lay-filter="test2">
                            <div class="layui-form-item layui-col-xs3">
                                <label class="layui-form-label">收货人：</label>
                                <div class="layui-input-block" id="receiver" style="line-height: 39px;">
                                    <input type="text" class="layui-input layui-bg-gray receiver" value="${data.columns.receiver}"
                                           disabled>
                                </div>
                            </div>
                            <div class="layui-form-item layui-col-xs3">
                                <label class="layui-form-label">联系电话：</label>
                                <div class="layui-input-block" id="mobile" style="line-height: 39px;">
                                    <input type="text" class="layui-input layui-bg-gray mobile" value="${data.columns.mobile}" disabled>
                                </div>
                            </div>
                            <div class="layui-form-item layui-col-xs9 provinceCq">
                                <label class="layui-form-label">收货地址：</label>
                                <div class="layui-input-block">
                                    <div class="layui-col-lg2 layui-col-sm3 pr-20 grays">
                                        <select class="provinces" name="provinces" lay-verify="provinces" lay-filter="provinces" disabled>
                                            <option value="${data.columns.province}">${data.columns.province}</option>
                                        </select>
                                    </div>
                                    <div class="layui-col-lg2 layui-col-sm3 pr-20">
                                        <select class="citys" lay-verify="citys" lay-filter="citys" disabled>
                                            <option value="${data.columns.city}">${data.columns.city}</option>
                                        </select>
                                    </div>
                                    <div class="layui-col-lg2 layui-col-sm3 pr-20">
                                        <select class="areas" lay-verify="areas" lay-filter="areas" disabled>
                                            <option value="${data.columns.area}">${data.columns.area}</option>
                                        </select>
                                    </div>
                                    <div class="layui-col-lg6 layui-col-sm3">
                                        <input type="text" id="detailAddre" lay-verify="required" class="layui-input layui-bg-gray layui-col-lg2" disabled
                                               value="${data.columns.address}">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item layui-col-xs9 layui-hide proCityArea">
                                <label class="layui-form-label">企业地址：</label>
                                <div class="layui-input-block">
                                    <div class="layui-col-lg2 layui-col-sm3 pr-20 grays">
                                        <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="${data.columns.province == pro.columns.ProvinceName}">selected</c:if>>${pro.columns.ProvinceName}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                    <div class="layui-col-lg2 layui-col-sm3 pr-20">
                                        <select class="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="${data.columns.city==cityList.columns.CityName}">selected</c:if>>${cityList.columns.CityName}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                    <div class="layui-col-lg2 layui-col-sm3 pr-20">
                                        <select class="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="${data.columns.area==areaList.columns.DistrictName}">selected</c:if>>${areaList.columns.DistrictName}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                    <div class="layui-col-lg6 layui-col-sm3">
                                        <input type="text" id="detailAddress" lay-verify="required" class="layui-input layui-col-lg2"
                                               value="${data.columns.address}">
                                    </div>
                                </div>
                            </div>
                           <%-- <div class="layui-form-item layui-col-xs3">
                                <label class="layui-form-label">邮编：</label>
                                <div class="layui-input-block" id="postCode" style="line-height: 39px;">
                                    <input type="text" class="layui-input layui-bg-gray postCode" value="${data.columns.postal_code}" disabled>
                                </div>
                            </div>--%>
                            <div style="clear:both;">

                            </div>
                        </form>
                        <input type="hidden" class="idVal" name="idVal" data-value="${data.columns.id}">
                    </div>
                </div>
        </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">
    //初始数据
    layui.use(['form', 'jquery'], function () {
        var $ = layui.$
            ,form = layui.form
            ,$= layui.jquery;
        var postcal = /^[0-9]{6}$/;//邮编正则
        var phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;//手机号正则

        //点击新增按钮
        $(".addNew").click(function(){
            var idVal = [];
            $(".idVal").each(function(index){{
                idVal.push($(".idVal").attr("data-value"));
            }})
            var addLength = idVal.length;
            if(addLength >=3){
                layer.msg("收货地址最多可新增三个！",{icon:2});
                return;
            }
           var index= layer.open({
                type : 2,
                title : '新增收货地址',
                content : '${ctx}/recevier/addRecevierAddress',
                maxmin : true,
                area : [ '650px', '430px' ],
                btn : [ '保存', '取消' ],
                yes : function(index, layero) {
                    var iframeWindow = window['layui-layer-iframe' + index], submitID = 'LAY-user-front-submit_invoice', submit = layero.find('iframe').contents().find(
                        '#' + submitID);
                    //监听提交
                    iframeWindow.layui.form.on('submit(' + submitID + ')', function(data) {
                        var field = data.field; //获取提交的字段
                        var receiver = field.receiverName;
                        var mobile = field.recevierMobile;
                        var province = field.receiverProvince;
                        var city = field.recevierCity;
                        var area = field.receiverArea;
                        var detailAddress = field.recevierAddress;
                        var postCode = field.postcode;
                        $.ajax({
                            type : 'post',
                            url : "${ctx}/recevier/addSave",
                            data : {
                                receiver:receiver,
                                mobile:mobile,
                                province:province,
                                city:city,
                                area:area,
                                detailAddress:detailAddress,
                                postCode:postCode
                            },
                            success : function(result) {
                                if (result.code == "200") {
                                    $(".resive").removeClass("layui-hide");
                                    $("#formData").find("input").addClass("layui-bg-gray");
                                    $("#formData").find("input").attr("disabled",true);
                                    $(".provinceCq").removeClass("layui-hide");
                                    $(".proCityArea").addClass("layui-hide");
                                    layer.close(index);
                                    layer.msg("保存成功！",{icon:1,time:1500},function(){
                                        window.location.href="${ctx}/recevier/recevierAddress";
                                    });
                                } else if (result.code == "205") {
                                    layer.msg("保存失败！",{icon:2});
                                    return;
                                }
                            },
                            error : function() {
                                layer.msg("保存失败！",{icon:2});
                                return;
                            }
                        })
                    });
                    submit.trigger('click');
                },
                success : function(layero) {
                    layero.find('.layui-layer-btn').css('text-align', 'center');
                    layero.find('.layui-layer-btn').find(".layui-layer-btn0").css("background-color","#009688");
                }
            });
        })

        //新增后删除按钮
        $(".delete").click(function(){
            var id = $(this).attr("data-id");
            var indexVal = layer.confirm('你确认要删除吗? ',{
                icon:3,
                btn: ['确定','取消'] //按钮
            },function(){
                $.ajax({
                    type:"post",
                    url:"${ctx}/recevier/deleteBtn",
                    data:{
                        id:id
                    },
                    success:function(result){
                        console.log(result);
                        if(result.code=="200"){
                            layer.msg("删除成功！",{icon:1,time:1000},function(){
                                window.location.href="${ctx}/recevier/recevierAddress";
                            });
                        }else if(result.code=="205"){
                            layer.msg("删除失败!",{icon:2});
                            return;
                        }
                    },
                    error:function(){
                        layer.msg("删除失败!",{icon:2});
                        return;
                    }
                })
            },function(){
                layer.close(indexVal);
            })
        })

        /*start 编辑按钮 end*/
        $('.resive').click(function () {
            var id = $(this).attr("data-resive");
           var index = layer.open({
                type: 2
                ,
                title: '编辑收货地址'
                ,
                content: '${ctx}/recevier/updateBtn?id='+id
                ,
                area: ['650px', '440px']
                ,
                btn : [ '保存', '取消' ],
                yes: function (index, layero) {
                    var iframeWindow = window['layui-layer-iframe' + index]
                        , submitID = 'LAY-user-front-submit_invoice'
                        , submit = layero.find('iframe').contents().find('#' + submitID);

                    //监听提交
                    iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                        var field = data.field; //获取提交的字段
                        saveMark(field,id);
                    });
                    submit.trigger('click');
                },
                success : function(layero) {
                    layero.find('.layui-layer-btn').css('text-align', 'center');
                    layero.find('.layui-layer-btn').find(".layui-layer-btn0").css("background-color","#009688");
                }
            });

        })

        var noRepeatAdd = false;
        function saveMark(data,id) {
            if (noRepeatAdd) {
                return;
            }
            noRepeatAdd = true;
            $.ajax({
                url: '${ctx}/recevier/saveBtn',
                type: 'post',
                data: {
                    id:id,
                    receiver: data.receiver,
                    mobile: data.mobile,
                    province: data.province,
                    city: data.city,
                    area: data.area,
                    address: data.address,
                    postcode: data.postcode
                },
                success: function (data) {
                    if (data.code == "200") {
                        layer.msg("编辑成功！", {icon: 1,time:1000},function(){
                            layer.close(layer.index);
                            window.location.href="${ctx}/recevier/recevierAddress";
                        });

                    } else if (data.code == "205") {
                        layer.msg("编辑失败！", {icon: 2});
                        return;
                    }
                },
                complete: function () {
                    noRepeatAdd = false;
                }
            });
        }

        //设置默认收货地址
        $(".details").click(function(){
          var id = $(this).find("input").attr("data-idVal");
          $.ajax({
              type:"post",
              url:"${ctx}/recevier/dafaultAddress",
              data:{id:id},
              success:function(result){
                  if(result.code=="200"){
                      layer.msg("设置默认收货地址成功！",{icon:1,time:1000},function(){
                          window.location.href="${ctx}/recevier/recevierAddress";
                      });
                  }else if(result.code=="205"){
                      layer.msg("设置默认收货地址失败！",{icon:2});
                      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');
                }
            });

        });
    })

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

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