{layout name="layout2" /}
<link rel="stylesheet" href="/static/admin/css/goods.css" media="all">
<div class="">
    <div class="layui-tab-content layui-form">
        <div class="layui-tab-item goods-content layui-show">
            <div class="layui-card-body" pad15>
                <div lay-filter="">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="form-label-asterisk">*</span>用户姓名：</label>
                        <input type="hidden" id="id" name="id">
                        <div class="layui-input-block">
                            <input type="text" name="name" lay-verify="custom_required" lay-verType="tips"
                                   autocomplete="off"
                                   switch-tab="0" verify-msg="请输入用户的姓名" placeholder="请输入用户名称"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">性别：</label>
                        <div class="layui-input-block">
                            <input type="radio" name="sex" value="0" title="未知">
                            <input type="radio" name="sex" value="1" title="男" >
                            <input type="radio" name="sex" value="2" title="女">
                        </div>
                    </div>



                    <div class="layui-form-item">
                        <label class="layui-form-label">用户电话：</label>
                        <div class="layui-input-block">
                            <input type="number" name="phone" maxlength='11'  lay-verType="tips" verify-msg="请输入用户电话号码"  placeholder="请输入用户联系电话" autocomplete="off" switch-tab="0" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="form-label-asterisk">*</span>联系地址：</label>
                        <div class="layui-input-inline">
                            <select name="first_category_id" lay-filter="first_category" lay-verify="custom_required"
                                    lay-verType="tips" switch-tab="0" verify-msg="请选择地区">
                                <option value="">请选择地区</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select name="second_category_id" lay-filter="second_category" lay-verify="custom_required"
                                    lay-verType="tips" switch-tab="0" verify-msg="请选择地区">
                                <option value="">请选择地区</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select name="third_category_id" lay-filter="third_category" lay-verify="custom_required"
                                    lay-verType="tips" switch-tab="0" verify-msg="请选择地区">
                                <option value="">请选择地区</option>
                            </select>
                        </div>
                    </div>

                
                    <div class="layui-form-item">
                        <label class="layui-form-label">所在地址:</label>
                        <div class="layui-input-block">
                            <input type="text" name="address" id="demo1" lay-verType="tips" autocomplete="off" switch-tab="0" class="layui-input">
                        </div>
                    </div>  
                    <div class="layui-form-item" style="display:flex">
                        <label class="layui-form-label">宠物：</label>
                        <div class="layui-col-sm1" style="width: 40%;">
                            <input type="radio" name="pet" value="0" title="无" >
                            <input type="radio" name="pet" value="1" title="有">
                                <input type="radio" name="pet" value="2" title="未知" checked>
                        </div>
                        <label class="layui-form-label">企微：</label>
                        <div class="layui-col-sm1" style="width: 40%;">
                            <input type="radio" name="wx" value="0" title="无" checked>
                            <input type="radio" name="wx" value="1" title="有">
                        </div>
                        <label class="layui-form-label">厚玻璃：</label>
                        <div class="layui-col-sm1" style="width: 40%;">
                            <input type="radio" name="hbl" value="0" title="无" >
                            <input type="radio" name="hbl" value="1" title="有">
                             <input type="radio" name="hbl" value="2" title="未知" checked>
                        </div>
                   </div>
   
                   <div class="layui-form-item">
                   <label class="layui-form-label" style="margin-top: 10px;">渠道来源：</label>
                   <div class="layui-col-sm4" style="width: 80%; margin-top: 10px;">
                    <select name="brand_id" lay-verType="tips" switch-tab="0" verify-msg="请选择渠道来源">
                        <option value="">请选择渠道来源</option>

                    </select>
                    </div>
                    </div>
                    
                       <div class="layui-form-item">
                        <label class="layui-form-label" style="margin-top: 10px;">客户标签：</label>
                        <div class="layui-col-sm4" style="width: 80%; margin-top: 10px;">
                            <select name="label_id" lay-verType="tips" switch-tab="0" verify-msg="请选择客户标签">
                                <option value="">请选择客户标签</option>
                            </select>
                            </div>
                        </div>       
                    

                    <div class="layui-form-item">
                        <label class="layui-form-label">房屋面积：</label>
                        <div class="layui-input-block">
                            <input type="text" name="areas" lay-verType="tips"  autocomplete="off" switch-tab="0" 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="store_longitude" class="layui-input"   placeholder="请输入经度" value="" id="lon"   lay-filter="lon" >
                            <tip>点击地图点选</tip>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label  ">纬度</label>
                        <div class="layui-input-block">
                            <input type="text" name="store_latitude" class="layui-input"   placeholder="请输入经度" value=""  id="lat"   lay-filter="lat" >
                            <!-- <tip>点击地图点选</tip> -->
                        </div>
                    </div>
                    
                    <div  id="tMap" class="layui-hide" style="padding: 10px;margin-left: 3%; width: 100%;">
                        <div  class="layui-form layuimini-form">
                            <div class="layui-form-item">
                                <div class="layui-input-inline">
                                    <input type="text" name="search_key" id="search_key" class="layui-input"  placeholder="请输入地名" >
                                </div>
                                <button  class="layui-btn layui-btn-normal layui-btn-sm searchKey" >查询</button>
                            </div>
                        </div>
                        <div id="maplocation" style="width:1080px;height:400px;"></div>
                    </div>
                    <style>
                       body .layui-ext-yourskin  .layui-layer-btn0{
                            border: 1px solid #dedede;
                            background-color:#fff;
                            color: #333;
                        }
                        body .layui-ext-yourskin  .layui-layer-btn1{
                            background-color:#1E9FFF;
                            border-color:#1E9FFF;
                            color: #fff;
                        }
                    </style>


                </div>
            </div>
        </div>
        <div class="layui-form-item layui-hide">
            <input type="button" lay-submit lay-filter="add-submit" id="add-submit" value="确认">
        </div>
    </div>
</div>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=EVOBZ-VX7YU-QKJVR-BVESA-AVFT3-7JBWG&libraries=drawing,geometry,place,convertor,visualization"></script>
<script type="text/javascript">
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    var dragstart = 0;
    var swop_element_ed = -1;
    var create_table_by_spec = null;
    var spec_table_data = [];
    var spec_value_temp_id_number = 0;

    layui.config({
        version:"{$front_version}",
        base: '/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'element', 'jquery', 'like', 'likeedit'], function () {
        var $ = layui.$;
        var like = layui.like;
        var form = layui.form;
        var likeedit = layui.likeedit;

        $('.first_ratio').bind('input propertychange', function() {
            var that = $(this);
            var value = that.val();
            format(that,value)

        });
  
        $(document).on('click','#lon',function(){
         if(!$("#demo1").val()){
             layer.msg('请先填写客户所在地址', { icon: 5, anim: 6 });
             return false;
         }
       var  markers = [];
       $("#tMap").removeClass('layui-hide');
       layer.open({
                         type:1,
                         area:["800px","600px"],
                         title:"地图标识",
                         btn: ['取消','确定'],
                         skin: 'layui-ext-yourskin',
                         content:layui.jquery('#tMap'),
                         success:function(){
                            let map = new qq.maps.Map(document.getElementById("maplocation"), {
                                center: new qq.maps.LatLng(40.820004,111.718132),      // 地图的中心地理坐标。
                                zoom:13,                                                 // 地图的中心地理坐标。
                            });
                            
                            var latlngBounds = new qq.maps.LatLngBounds();
                            searchService = new qq.maps.SearchService({
                             
                                complete:function(results){
                                        console.log(results)
                                        var pois = results.detail.pois;
                                        var infoWin = new qq.maps.InfoWindow({
                                            map: map
                                        });
                                    var latlngBounds = new qq.maps.LatLngBounds();
                                    for (var i = 0, l = pois.length; i < l; i++) {
                                        var poi = pois[i];
                                        //扩展边界范围，用来包含搜索到的Poi点
                                        latlngBounds.extend(poi.latLng);
                        
                                        (function(n) {
                                            console.log(111)
                                            var marker = new qq.maps.Marker({
                                                map: map
                                            });
                                            marker.setPosition(pois[n].latLng);
                        
                                            marker.setTitle(i + 1);
                                            markers.push(marker);
                                            qq.maps.event.addListener(marker, 'click', function() {
                                                let latX = pois[n].latLng.getLat().toFixed(6);
                                                let lngY = pois[n].latLng.getLng().toFixed(6);
                                                $('#lon').val(latX);
                                                $('#lat').val(lngY);
                                                infoWin.open();
                                                infoWin.setContent('<div style="width:280px;height:100px;">' + '当前经纬度：' +
                                                    pois[n].latLng + '，名称：' + pois[n].name + '，当前位置：' + pois[n].address +'</div>');
                                                infoWin.setPosition(pois[n].latLng);
                                            });
                                        })(i);
                                    }
                                    //调整地图视野
                                    map.fitBounds(latlngBounds);
                                }
                            });
                            qq.maps.event.addListener(map, 'click', function(event) {
                                var marker=new qq.maps.Marker({
                                    position:event.latLng,
                                    map:map,
                                    draggable: true,
                                });
                                var info = new qq.maps.InfoWindow({
                                    map: map
                                });
                                var point = event.latLng;
                                let latX = point.getLat().toFixed(6);
                                let lngY = point.getLng().toFixed(6);
                                $('#lon').val(latX);
                                $('#lat').val(lngY);
                                
                                qq.maps.event.addListener(map, 'click', function(event) {
                                    
                                    marker.setMap(null);
                                });
                              
                                qq.maps.event.addListener(marker, 'dragging', function(event) {
                                   
                                    var latLng = event.latLng;
                                    let lat = latLng.getLat().toFixed(6);
                                    let lng = latLng.getLng().toFixed(6);
                                    $('#lon').val(lng);
                                    $('#lat').val(lat);
                                });
                            });
                      
                         } ,
                         yes: function(index, layero){
                             
                                //do something
                                layer.close(index); //如果设定了yes回调，需进行手工关闭
                            },
                         cancel: function(index, layero){ 
                            //if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
                            document.getElementById("tMap").style.display="none";//通过设置display属性可以使div隐藏后释放占用的页面空间 
                                layer.close(index)
                            // }
                            return false; 
                            }    //这里content是一个普通的String
        });

        $(document).on('click','.searchKey',function(){
            var search_key=$("#search_key").val();
            var city=$(".el-input__inner").val();
            searchService.setLocation(search_key);
            searchService.search(search_key);
 
        })
 });
 
        //渲染品牌
        var brands = {$brand_lists | raw};
        setBrand();
        function setBrand(default_id) {
            var brand_select_html = '<option value="">请选择渠道来源</option>';
            for (var i in brands) {
                brand_select_html += '<option value="' + brands[i]['id'] + '">' + brands[i]['name'] + '</option>';
            }
            $('select[name="brand_id"]').html(brand_select_html);
            $('select[name="brand_id"]').val(default_id);
            form.render('select');
        }
        //渲染品牌
        var brandsd = {$label_id | raw};
        setBrands();
        function setBrands(default_id) {
            var label_id_html = '<option value="">请选择客户的标签</option>';
            for (var i in brandsd) {
                label_id_html += '<option value="' + brandsd[i]['id'] + '">' + brandsd[i]['name'] + '</option>';
            }
            $('select[name="label_id"]').html(label_id_html);
            $('select[name="label_id"]').val(default_id);
            form.render('select');
        }

        //分类联动
        var categorys = {$category_lists | raw};

        setSelectFirst();
        function setSelectFirst(default_id) {
            var category_select_html = '<option value="">请选择分类</option>';
            for (var i in categorys) {
                if (categorys[i]['level'] == 1) {
                    category_select_html += '<option value="' + categorys[i]['id'] + '">' + categorys[i]['name'] + '</option>';
                }
            }
            $('select[name="first_category_id"]').html(category_select_html);
            $('select[name="first_category_id"]').val(default_id);
            form.render('select');
        }
        function setSelectSecond(default_id, parent_id) {
            parent_id = parent_id === undefined ? $('select[name="first_category_id"]').val() : parent_id;
            $('select[name="second_category_id"]').html('<option value="">请选择分类</option>');
            $('select[name="third_category_id"]').html('<option value="">请选择分类</option>');
            var category_select_html = '<option value="">请选择分类</option>';

            for (var i in categorys) {
                if (categorys[i]['parent_id'] == parent_id) {
                    category_select_html += '<option value="' + categorys[i]['id'] + '">' + categorys[i]['name'] + '</option>';
                }
            }
            $('select[name="second_category_id"]').html(category_select_html);
            $('select[name="second_category_id"]').val(default_id);
            form.render('select');
        }
        function setSelectThird(default_id, parent_id) {
            parent_id = parent_id === undefined ? $('select[name="second_category_id"]').val() : parent_id;
            $('select[name="third_category_id"]').html('<option value="">请选择分类</option>');
            var first_category_id = $('select[name="first_category_id"]').val();
            var category_select_html = '<option value="">请选择分类</option>';
            for (var i in categorys) {
                if (categorys[i]['parent_id'] == parent_id) {
                    category_select_html += '<option value="' + categorys[i]['id'] + '">' + categorys[i]['name'] + '</option>';
                }
            }
            $('select[name="third_category_id"]').html(category_select_html);
            $('select[name="third_category_id"]').val(default_id);
            form.render('select');
        }

        form.on('select(first_category)', function (data) {
            setSelectSecond('', data.value);
        });
        form.on('select(second_category)', function (data) {
            setSelectThird('', data.value);
        });


        //------------------------价格库存----------------------------------

   

        //显示或隐藏规格项删除按钮
        $(document).on('mouseenter', '.goods-spec-value', function () {
            $(this).find('.goods-spec-value-del-x').show();
        });
        $(document).on('mouseleave', '.goods-spec-value', function () {
            $(this).find('.goods-spec-value-del-x').hide();
        });


        // 单规格图片
        like.imageUpload('.goods-one-spec-img-add', function (uris, element) {
            if(uris.length>1){
                layer.msg('最多最能选中1张图片');
                return;
            }
            element.hide();
            var key = element.parent().parent().parent().attr('spec-value-temp-ids');
            spec_table_data["spec_image[]"+key] = uris[0];//保存图片地址
            $(element).parent().html('<input name="one_spec_image" type="hidden" value="' + like.getUrlFileName(uris[0], '{$storageUrl}') + '"><a class="goods-one-spec-img-del-x">x</a><img class="goods-spec-img" src="' + uris[0] + '">');
        });
        $(document).on('mouseenter', '.goods-spec-img-div', function () {
            $(this).find('.goods-one-spec-img-del-x').show();
        });
        $(document).on('mouseleave', '.goods-spec-img-div', function () {
            $(this).find('.goods-one-spec-img-del-x').hide();
        });
        $(document).on('click', '.goods-one-spec-img-del-x', function () {
            $(this).parent().html('<input type="hidden" name="one_spec_image"><img src="/static/common/image/plug/goods-lists-add-image.png" class="goods-one-spec-img-add">');
        });

        //多规格图片
        like.imageUpload('.goods-spec-img-add', function (uris, element) {

            if(uris.length>1){
                layer.msg('最多最能选中1张图片');
                return;
            }
            element.hide();
            var key = element.parent().parent().parent().attr('spec-value-temp-ids');
            spec_table_data["spec_image[]"+key] = uris[0];//保存图片地址
            $(element).parent().html('<input name="spec_image[]" type="hidden" value="' + like.getUrlFileName(uris[0], '{$storageUrl}') + '"><a class="goods-spec-img-del-x">x</a><img class="goods-spec-img" src="' + uris[0] + '">');
        });
        $(document).on('mouseenter', '.goods-spec-img-div', function () {
            $(this).find('.goods-spec-img-del-x').show();
        });
        $(document).on('mouseleave', '.goods-spec-img-div', function () {
            $(this).find('.goods-spec-img-del-x').hide();
        });
        $(document).on('click', '.goods-spec-img-del-x', function () {
            var key = 'spec_image[]' + $(this).parent().parent().parent().attr('spec-value-temp-ids');
            $(this).parent().html('<input type="hidden" name="spec_image[]"><img src="/static/common/image/plug/goods-lists-add-image.png" class="goods-spec-img-add">');
            spec_table_data[key] = '';

        });
        $(document).on('click', '.goods-spec-img', function () {
            like.showImg($(this).attr('src'),600);
        });

        //规格生成表格
        createTableBySepc = function () {
            if ($('.goods-spec').size() <= 0) {
                $('#more-spec-lists').hide();
                return;
            }

            $('#more-spec-lists').show();
            var table_title = [];
            var table_data = [];
            var spec_value_temp_arr = [];
            var i = 0;
            var th_html = $('#template-spec-table-th').html();
            var tr_html = $('#template-spec-table-tr').html();

            //遍历规格项目
            $('.goods-spec').each(function () {
                var spec_name = $(this).find('.spec_name').first().val();
                if (isEmptyString(spec_name)) {
                    return true;
                }
                table_title[i] = spec_name;
                table_data[i] = [];
                spec_value_temp_arr[i] = [];
                var j = 0;
                $(this).find('.goods-spec-value .goods-spec-value-input').each(function () {
                    var spec_value = $(this).val();
                    var spec_value_temp_id = $(this).attr('spec-value-temp-id');
                    if (isEmptyString(spec_value)) {
                        return true;
                    }
                    table_data[i][j] = spec_value;
                    spec_value_temp_arr[i][j] = spec_value_temp_id;
                    j++;
                });
                i++;
            });

            table_html = '';

            //表格头部组装
            spec_th_html = '';
            for (var i in table_title) {
                spec_th_html += '<th>' + table_title[i] + '</th>';
            }
            table_html = th_html.replace('{spec_th}', spec_th_html);

            spec_value_temp_arr = cartesianProduct(spec_value_temp_arr);
            table_data = cartesianProduct(table_data);
            for (var i in table_data) {
                var spec_tr_html = '';
                var tr_name_arr = [];
                var specs = '';
                if (Array.isArray(table_data[i])) {
                    //根据规格创建tr的id
                    var spec_value_temp_ids = '';
                    for(var j in spec_value_temp_arr[i]){
                        spec_value_temp_ids += spec_value_temp_arr[i][j]+',';
                    }
                    spec_value_temp_ids = spec_value_temp_ids.substring(0, spec_value_temp_ids.lastIndexOf(','));
                    spec_tr_html += '<tr spec-value-temp-ids="'+spec_value_temp_ids+'">';
                    for (var j in table_data[i]) {
                        spec_tr_html += '<td>' + table_data[i][j] + '</td>';
                        tr_name_arr[j] = table_data[i][j];
                        specs += table_data[i][j].replace(',', '') + ',';
                    }
                } else {
                    var spec_value_temp_ids = spec_value_temp_arr[i];
                    spec_tr_html = '<tr spec-value-temp-ids="'+spec_value_temp_ids+'">';
                    spec_tr_html += '<td>' + table_data[i] + '</td>';
                    specs += table_data[i].replace(',', '') + ',';
                }
                specs = specs.substring(0, specs.lastIndexOf(','));
                spec_table_data["spec_value_str[]"+spec_value_temp_ids] = specs;
                spec_tr_html += '<td style="display: none"><input type="hidden" name="spec_value_str[]" value="' + specs + '"><input type="hidden" name="item_id[]" value=""></td>';
                table_html += tr_html.replace('{spec_td}', spec_tr_html);

            }
            $('#more-spec-lists-table').html(table_html);
            setTableValue();
        }
        {notempty name='info'}
        var goods_info= {$info|raw|default=''};
         console.log(goods_info);
        $('input[name="id"]').val(goods_info['id']);
        $('input[name="address"]').val(goods_info['address']);
        $('input[name="name"]').val(goods_info['contact']);
        $('input[name="phone"]').val(goods_info['telephone']);
        $('input[name="lng"]').val(goods_info['lng']);
        $('input[name="lat"]').val(goods_info['lat']);
        setSelectFirst(goods_info['province_id']);
        setSelectSecond(goods_info['city_id']);
        setSelectThird(goods_info['district_id']);
        $('input[name="areas"]').val(goods_info['areas']);
        setBrand(goods_info['brand_id']);    //渲染品牌
        $("input[name=sex][value="+goods_info['sex']+"]").prop("checked",true);
        $("input[name=pet][value="+goods_info['pet']+"]").prop("checked",true);
        $("input[name=hbl][value="+goods_info['hbl']+"]").prop("checked",true);
        form.render();
        {/notempty}
            //------------------------编辑页面----------------------------------
        });
</script>