<script type="text/html" template lay-done="layui.data.sendParams(d);">
    <div class="layui-form coreshop-form layui-form-pane" lay-filter="LAY-app-CoreCmsStore-editForm" id="LAY-app-CoreCmsStore-editForm">
        <input type="hidden" name="id" id="id" value="{{d.params.data.id || '' }}" />

        <div class="layui-form-item">
            <label for="storeName" class="layui-form-label layui-form-required">门店名称</label>
            <div class="layui-input-block">
                <input name="storeName" id="storeName" lay-verType="tips" lay-verify="required|verifystoreName" class="layui-input" placeholder="请输入门店名称" lay-reqText="请输入门店名称" value="{{d.params.data.storeName || '' }}" />
            </div>
        </div>

        <div class="layui-form-item">
            <label for="mobile" class="layui-form-label layui-form-required">门店电话/手机号</label>
            <div class="layui-input-block">
                <input name="mobile" id="mobile" lay-verType="tips" lay-verify="required|verifymobile" class="layui-input" placeholder="请输入门店电话/手机号" lay-reqText="请输入门店电话/手机号" value="{{d.params.data.mobile || '' }}" />
            </div>
        </div>

        <div class="layui-form-item">
            <label for="linkMan" class="layui-form-label layui-form-required">门店联系人</label>
            <div class="layui-input-block">
                <input name="linkMan" id="linkMan" lay-verType="tips" lay-verify="required|verifylinkMan" class="layui-input" placeholder="请输入门店联系人" lay-reqText="请输入门店联系人" value="{{d.params.data.linkMan || '' }}" />
            </div>
        </div>

        <div class="layui-form-item">
            <label for="logoImage" class="layui-form-label layui-form-required">门店logo</label>
            <input name="logoImage" type="hidden" id="logoImage" lay-verType="tips" lay-verify="required" class="layui-input" value="{{d.params.data.logoImage || '' }}" placeholder="请上传门店logo" lay-reqText="请上传门店logo" />
            <div class="layui-input-block">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="upBtnlogoImage">上传图片</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="viewImgBoxlogoImage" src="{{d.params.data.logoImage || layui.setter.noImagePicUrl }}">
                        <p id="viewTextBoxlogoImage"></p>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="areaId" class="layui-form-label layui-form-required">门店地区</label>
            <div class="layui-input-block layui-inline-4 address-class">
                <input type="hidden" name="areaId" value="{{d.params.data.areaId || '' }}">
            </div>
        </div>

        <div class="layui-form-item">
            <label for="coordinate" class="layui-form-label layui-form-required">坐标位置</label>
            <div class="layui-input-block">
                <input name="coordinate" id="coordinateBox" lay-active="showMap" lay-verType="tips" value="{{d.params.data.coordinate || '' }}" lay-verify="required|verifycoordinate" class="layui-input" lay-reqText="请输入坐标位置" placeholder="请输入坐标位置" />
            </div>
        </div>
        <div class="layui-form-item">
            <label for="address" class="layui-form-label layui-form-required">门店详细地址</label>
            <div class="layui-input-block">
                <input name="address" id="addressBox" lay-verType="tips" lay-verify="required|verifyaddress" class="layui-input" value="{{d.params.data.address || '' }}" lay-reqText="请输入门店详细地址" placeholder="请输入门店详细地址" />
            </div>
        </div>

        <div class="layui-form-item" pane>
            <label for="isDefault" class="layui-form-label layui-form-required">是否默认</label>
            <div class="layui-input-block">
                <input type="checkbox" lay-filter="switch" name="isDefault" id="isDefault" {{ d.params.data.isDefault ? 'checked' : '' }} lay-skin="switch" lay-text="开启|关闭">
            </div>
        </div>

        <div class="layui-form-item text-right">
            <input type="button" class="layui-btn" lay-submit lay-filter="LAY-app-CoreCmsStore-editForm-submit" id="LAY-app-CoreCmsStore-editForm-submit" value="确认编辑">
        </div>
    </div>
</script>
<script>
    var debug = layui.setter.debug;
    layui.data.sendParams = function (d) {
        //开启调试情况下获取接口赋值数据
        if (debug) { console.log(d.params.data); }
        layui.use(['admin', 'form', 'laydate', 'upload', 'coreHelper', 'cropperImg','util'],
            function () {
                var $ = layui.$
                    , form = layui.form
                    , admin = layui.admin
                    , laydate = layui.laydate
                    , upload = layui.upload
                    , cropperImg = layui.cropperImg
                    , util = layui.util
                    , coreHelper = layui.coreHelper;

                coreHelper.Post("Api/Tools/GetAreaCheckedList", { id: d.params.data.areaId }, function (data) {
                    if (debug) { console.log(data); } //开启调试返回数据
                    var str = "";
                    $.each(data, function (i, n) {
                        str += "<select lay-ignore name='areaId_" + (i + 1) + "' dep='" + (i + 1) + "'  class='select-address'>";
                        str += "<option value='' >请选择</option>";
                        $.each(n.list, function (h, z) {
                            if (n.hasOwnProperty('info') && n.info.id == z.id) {
                                str += "<option value='" + z.id + "' selected='selected'>" + z.name + "</option>";
                            } else {
                                str += "<option value='" + z.id + "' >" + z.name + "</option>";
                            }
                        });
                        str += "</select>";
                    });
                    $("input[name='areaId']").after(str);
                    //以上数据输出完，以下绑定事件
                    $.each(data, function (i, n) {
                        if (i < (data.length)) {
                            $("select[name='areaId_" + (i + 1) + "']").change(function () {
                                changeareaIdArea(i + 1, data.length);
                            });
                        }
                    });
                });

                function changeareaIdArea(i, max_i) {
                    //清除后面节点
                    for (var x = i + 1; x <= 6; x++) {  //最多6层，足够了
                        $("select[name='areaId_" + x + "']").remove();
                    }
                    var val = $("select[name='areaId_" + i + "']").val();
                    if (val != "") {
                        //取子节点数据，然后显示下一级
                        coreHelper.Post("Api/Tools/GetAreaChildren", { id: val }, function (e) {
                            if (debug) { console.log(e); } //开启调试返回数据

                            if (e.length > 0) {
                                var str = "";
                                str += "<select lay-ignore name='areaId_" + (i + 1) + "' dep='" + (i + 1) + "'  class='select-address'>";
                                str += "<option value='' >请选择</option>";
                                $.each(e, function (h, z) {
                                    str += "<option value='" + z.id + "' >" + z.name + "</option>";
                                });
                                str += "</select>";
                                $("select[name='areaId_" + i + "']").after(str);
                                //以上数据输出完，以下绑定事件
                                $("select[name='areaId_" + (i + 1) + "']").change(function () {
                                    changeareaIdArea(i + 1, i + 2);
                                });

                                //如果有返回值，就说明省市区没有选择到最终节点
                                if (1 == 1) {
                                    $("input[name='areaId']").val("");
                                } else {
                                    $("input[name='areaId']").val($("select[name='areaId_" + i + "']").val());
                                }
                            } else {
                                $("input[name='areaId']").val($("select[name='areaId_" + i + "']").val());
                            }
                        });
                    } else {
                        if (1 == 1) {
                            $("input[name='areaId']").val("");
                        } else {
                            //第一级的元素就直接赋值为空就是了
                            if (i == 1) {
                                $("input[name='areaId']").val("");
                            } else {
                                i--;
                                $("input[name='areaId']").val($("select[name='areaId_" + i + "']").val());
                            }

                        }
                    }
                }

                //封面图图片上传
                $('#upBtnlogoImage').click(function () {
                    cropperImg.cropImg({
                        aspectRatio: 16 / 9,
                        imgSrc: $('#viewImgBoxlogoImage').attr('src'),
                        onCrop: function (data) {
                            var loadIndex = layer.load(2);
                            coreHelper.Post("api/Tools/UploadFilesFByBase64", { base64: data }, function (res) {
                                if (0 === res.code) {
                                    $('#viewImgBoxlogoImage').attr('src', res.data.fileUrl);
                                    $("#logoImage").val(res.data.fileUrl);
                                    layer.msg(res.msg);
                                    layer.close(loadIndex);
                                } else {
                                    layer.close(loadIndex);
                                    layer.msg(res.msg, { icon: 2, anim: 6 });
                                }
                            });
                        }
                    });
                });

                laydate.render({
                    elem: '#editTime-CoreCmsStore-createTime',
                    type: 'datetime'
                });
                laydate.render({
                    elem: '#editTime-CoreCmsStore-updateTime',
                    type: 'datetime'
                });
                form.verify({

                    verifystoreName: [/^[\S]{0,125}$/, '门店名称最大只允许输入125位字符，且不能出现空格'],
                    verifymobile: [/^[\S]{0,13}$/, '门店电话/手机号最大只允许输入13位字符，且不能出现空格'],
                    verifylinkMan: [/^[\S]{0,32}$/, '门店联系人最大只允许输入32位字符，且不能出现空格'],
                    verifylogoImage: [/^[\S]{0,255}$/, '门店logo最大只允许输入255位字符，且不能出现空格'],
                    verifyaddress: [/^[\S]{0,200}$/, '门店详细地址最大只允许输入200位字符，且不能出现空格'],
                    verifycoordinate: [/^[\S]{0,50}$/, '坐标位置最大只允许输入50位字符，且不能出现空格'],
                    verifylatitude: [/^[\S]{0,40}$/, '纬度最大只允许输入40位字符，且不能出现空格'],
                    verifylongitude: [/^[\S]{0,40}$/, '经度最大只允许输入40位字符，且不能出现空格'],
                });

                //处理属性 为 lay-active 的所有元素事件
                util.event('lay-active', {
                    showMap: function () {
                        var oldData = $('#coordinateBox').val();
                        let data = {
                            oldData: oldData,
                            coordinateBoxIdName: 'coordinateBox',
                            addressBoxIdName: 'addressBox'
                        }

                        admin.popup({ shadeClose: false,
                            title: '查看详情',
                            area: ['1000px', '570px'],
                            id: 'LAY-popup-common-getQQMap',
                            success: function (layero, index) {
                                layui.view(this.id).render('common/getQQMap', { data }).done(function () {
                                    form.render();
                                });
                                // 禁止弹窗出现滚动条
                                $(layero).children('.layui-layer-content').css('overflow', 'visible');
                            }
                        });
                    }
                });

                //重载form
                form.render(null, 'LAY-app-CoreCmsStore-editForm');
            })
    };
</script>