<%@ 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:150px;
            width: 80%;
        }
    </style>
</head>
<body>
<div class="">
    <div class="layui-card">
        <form class="layui-form layui-card-body over pt-20 pb-40 "  style="height: 280px " action="" id="detailSet">
            <div class="layui-col-xs12 mb-20">
                <label class="layui-form-label"><i class="mark">*</i>收件人：</label>
                <div class="layui-input-block">
                    <input type="text" name="receiver" lay-verify="receiverName" value="${rd.columns.receiver}" placeholder="请输入收件人姓名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-col-xs12 mb-20">
                <label class="layui-form-label"><i class="mark">*</i>联系电话：</label>
                <div class="layui-input-block">
                    <input type="text" name="mobile" lay-verify="recevierMobile" value="${rd.columns.mobile}" placeholder="请输入联系电话" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-col-xs12 mb-20">
                <label class="layui-form-label"><i class="mark">*</i>收货地址：</label>
                <div class="layui-input-block">
                    <div class="layui-col-xs4 pr-20">
                        <select class="province" id="province" name="province" lay-verify="receiverProvince" 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="${rd.columns.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="recevierCity" 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="${rd.columns.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="receiverArea" lay-filter="area" lay-search>
                            <option value="">请选择县/区</option>
                            <c:forEach items="${area}" var="areaList">
                                <option value="${areaList.columns.DistrictName}" <c:if test="${rd.columns.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" value="${rd.columns.address}" lay-verify="recevierAddress" class="layui-input layui-col-lg2">
                    </div>
                </div>
            </div>
            <%--<div class="layui-col-xs12 mb-20">
                <label class="layui-form-label"><i class="mark">*</i>邮政编码：</label>
                <div class="layui-input-block">
                    <input type="text" name="postcode" lay-verify="postcode" value="${rd.columns.postal_code}" placeholder="请输入邮政编码" class="layui-input">
                </div>
            </div>--%>

            <div class="layui-form-item layui-hide  mb-20">
                <input type="button" lay-submit lay-filter="LAY-user-front-submit_invoice" id="LAY-user-front-submit_invoice" value="确认">
                <input type="hidden" id="id" name="id" value=""/>
            </div>
        </form>
    </div>

</div>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script type="text/javascript">
    //初始数据
    var $form;
    var form;
    var upload;
    var $;
    layui.use(['form', 'table', 'upload', 'jquery'], function () {
        $ = layui.jquery;
        form = layui.form;
        upload = layui.upload;
        $form = $('form');

        form.verify({
            recevierMobile : [ /^((0\d{2,3}-\d{7,8})|([1][3,4,5,7,8,9][0-9]{9}))$/, '请输入正确格式的联系电话！' ],
            postcode : [ /^[0-9]{6}$/, '邮政编码为6位有效数字！' ],
            receiverName:function(value,item){
                if(!$.trim(value)){
                    return "收件人姓名不能为空!";
                }
            },
            receiverProvince:function(value,item){
                if(!$.trim(value)){
                    return "收件人省不能为空!";
                }
            },
            recevierCity:function(value,item){
                if(!$.trim(value)){
                    return "收件人市不能为空!";
                }
            },
            receiverArea:function(value,item){
                if(!$.trim(value)){
                    return "收件人区不能为空!";
                }
            },
            recevierAddress:function(value,item){
                if(!$.trim(value)){
                    return "收件人详细地址不能为空!";
                }
            }

        });

        form.on('select(province)', function(data){
            var province = $(data.elem).find("option:selected").attr("title");
            $("#city").empty();
            $("#area").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 =" <option value=''>请选择</option>";
                    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');
                }
            });

        });
        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 ="<option value=''>请选择</option>";
                    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>
