{extend name="base"/}
{block name="resources"}
<style>
	#container{height: 500px; }
	#container > div {z-index: 500!important}
	.address-content {display: inline-block;vertical-align: top;}
	.layui-layout-admin.admin-style-2 .layui-body .layui-tab + .body-content {padding-top: 63px !important;}
	.empty-address-text{font-size: 14px;color: #f43530;height: 34px;line-height: 34px;}
</style>
{/block}
{block name="main"}

<div class="layui-form form-wrap" lay-filter="storeform">
	<div class="layui-form-item">
		<label class="layui-form-label"><span class="required">*</span>联系人姓名：</label>
		<div class="layui-input-block">
			<input type="text" name="name" lay-verify="required" autocomplete="off" class="layui-input len-long" value="{$info.name}">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label"><span class="required">*</span>联系人手机号：</label>
		<div class="layui-input-block">
			<input type="number" name="mobile" lay-verify="required" autocomplete="off" class="layui-input len-long" value="{$info.mobile}">
		</div>
		<div class="word-aux">请输入联系人手机号</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">联系人电话：</label>
		<div class="layui-input-block">
			<input type="number" name="telephone" autocomplete="off" class="layui-input len-long" value="{$info.telephone}">
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label"><span class="required">*</span>联系地址：</label>
		<div class="layui-input-inline len-mid area-select">
			<select name="province_id" lay-filter="province_id" lay-verify="province_id">
				<option value="">请选择省份</option>
				{foreach $province_list as $k => $v}
				<option value="{$v.id}">{$v.name}</option>
				{/foreach}
			</select>
		</div>
		
		<div class="layui-input-inline len-mid area-select">
			<select name="city_id" lay-filter="city_id" lay-verify="city_id">
				<option value="">请选择城市</option>
			</select>
		</div>
		
		<div class="layui-input-inline len-mid area-select">
			<select name="district_id" lay-filter="district_id" lay-verify="district_id">
				<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" placeholder="请输入详细地址，以方便买家联系（请勿重复填写省市区）" lay-verify="address" autocomplete="off" class="layui-input len-long address-content" value="{$info.address}">
			<input type="hidden" name="longitude" lay-verify="required" class="layui-input" value="{$info.longitude}"/>
			<input type="hidden" name="latitude" lay-verify="required" class="layui-input" value="{$info.latitude}"/>
			<button class="layui-btn-primary layui-btn" onclick="refreshFrom();">查找地址</button>
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">地图定位：</label>
		{if $tencent_map_key}
		{if $check_map_key.status == 0}
		<div class="layui-input-block special-length">
			<div id="container" class="selffetch-map"></div>
		</div>
		{else/}
		<div class="empty-local-map">
			<div class="word-aux empty-address-text">{$check_map_key.message}。<a href="{:addon_url('/shop/config/map')}" class="text-color">点击配置</a></div>
		</div>
		{/if}
		{else/}
		<div class="empty-local-map">
			<div class="word-aux empty-address-text">腾讯地图尚未配置，无法定位地址。<a href="{:addon_url('/shop/config/map')}" class="text-color">点击配置</a></div>
		</div>
		{/if}
		<div class="word-aux empty-address layui-hide">请选择地理位置！</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">qq：</label>
		<div class="layui-input-block">
			<input type="text" name="qq" value="{$info.qq}" autocomplete="off" class="layui-input len-long">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">阿里旺旺：</label>
		<div class="layui-input-block">
			<input type="text" name="ww" value="{$info.ww}" autocomplete="off" class="layui-input len-long">
		</div>
	</div>

    <div class="layui-form-item">
        <label class="layui-form-label">邮箱：</label>
        <div class="layui-input-block">
            <input type="text" name="email" value="{$info.email}" autocomplete="off" class="layui-input len-long">
        </div>
        <div class="word-aux">用于接收消息</div>
    </div>
	
	<div class="form-row">
		<button class="layui-btn" lay-submit lay-filter="save">保存</button>
	</div>

</div>
{/block}

{block name="script"}
<script type="text/javascript" src="SHOP_JS/address.js"></script>
<script src="https://map.qq.com/api/gljs?v=1.exp&libraries=service&key={$tencent_map_key}"></script>
<script src="https://map.qq.com/api/js?v=2.exp&key={$tencent_map_key}"></script>
<script type="text/javascript" src="STATIC_JS/qq_map.js"></script>
<script type="text/javascript">
	var form, carousel, laydate, repeat_flag, map_class,latlng;
	
	layui.use(['laydate','form','carousel'], function() {
		form = layui.form;
		laydate = layui.laydate;
		carousel = layui.carousel;
		repeat_flag = false;//防重复标识

		form.render();
		carousel.render({
		    elem: '#carousel',
			width: '100%',
			arrow: 'always',
			interval: 3500
		});
		
		if('{$info.latitude}' == "" || '{$info.longitude}' == ""){
		    latlng = {lat:'',lng:''};
		}else{
		    latlng = {lat:'{$info.latitude}',lng:'{$info.longitude}'};
		}

		//初始化联系地址
		var initdata = {province_id : '{$info.province}', city_id : '{$info.city}', district_id : '{$info.district}'};
		initAddress(initdata, "storeform");

		//初始化工作日
		var workWeek = "{$info.work_week}",
			workArr = workWeek.split(",");

		for (var i = 0; i < workArr.length; i++){
			$("input[name=work_week"+ workArr[i] +"]").prop("checked",true);
		}
		form.render();
		
		//地图展示
		map_class = new mapClass("container", latlng);
		form.render();

		form.on('submit(save)', function(data) {

			if( data.field.longitude == "" || data.field.latitude == ""){
			    layer.msg('请确认地理位置!');
			    $(".empty-address").removeClass("layui-hide");
			    return;
			}else{
			    $(".empty-address").addClass("layui-hide");
			}
			
			var province_name = $("select[name=province_id] option:selected").text();
			var city_name = $("select[name=city_id] option:selected").text();
			var district_name = $("select[name=district_id] option:selected").text();
			
			//地址id
			data.field.province = data.field.province_id;
			data.field.city = data.field.city_id;
			data.field.district = data.field.district_id;
			data.field.community = data.field.community_id;
			
			//地址name
			data.field.province_name = province_name;
			data.field.city_name = city_name;
			data.field.district_name = district_name;
			
			data.field.full_address = province_name + city_name + district_name;
			
			if (repeat_flag) return;
			repeat_flag = true;
			
			$.ajax({
				url: ns.url("shop/shop/contact"),
				data: data.field,
				type: "POST",
				dataType: "JSON",
				success: function(res) {
					repeat_flag = false;
					layer.msg(res.message);
					if (res.code == 0) {
						location.reload();
					}
				}
			});
		});

		//表单验证
		form.verify({
			province_id : function(value, item){
			    if(value == ''){
			        return '请选择省份';
			    }
			},
			city_id : function(value, item){
			    if(value == ''){
			        return '请选择城市';
			    }
			},
			district_id : function(value, item){
			    if(value == ''){
			        return '请选择区/县';
			    }
			},
			community_id : function(value, item){
			    if(value == ''){
			        return '请选择街道';
			    }
			},
			address: function(value) {
				if (value == '') {
					return '请输入详细地址';
				}
			},
		});
	});
	
	/**
	 * 重新渲染表单
	 */
	function refreshFrom(){
	    form.render();
	    orderAddressChange();//改变地址
	    map_class.mapChange();
	}
	
	//动态改变订单地址赋值
	function orderAddressChange(){
	    map_class.address.province = $("select[name=province_id]").val();
	    map_class.address.province_name = $("select[name=province_id] option:selected").text();
	    map_class.address.city = $("select[name=city_id]").val();
	    map_class.address.city_name = $("select[name=city_id] option:selected").text();
	    map_class.address.district = $("select[name=district_id]").val();
	    map_class.address.district_name = $("select[name=district_id] option:selected").text();
	    map_class.address.township = $("select[name=community_id]").val();
	    map_class.address.township_name = $("select[name=community_id] option:selected").text();
	    map_class.address.detail_address = $("input[name=address]").val()
	}
	
	/**
	 * 地址下拉框（主要用于坐标记录）
	 */
	function selectCallBack(){
	    $("input[name=longitude]").val(map_class.address.longitude);//坐标
	    $("input[name=latitude]").val(map_class.address.latitude);//坐标
	}

	//地图点击回调事件
	function mapChangeCallBack(){
	    $("input[name=address]").val(map_class.address.address);//详细地址
	    $("input[name=longitude]").val(map_class.address.longitude);//坐标
	    $("input[name=latitude]").val(map_class.address.latitude);//坐标

	    $.ajax({
	        type : "POST",
	        dataType: 'JSON',
	        url : ns.url("shop/address/getGeographicId"),
	        async : true,
	        data : {
	            "address" : map_class.address.area
	        },
	        success : function(data) {
				map_class.address.province = data.province_id;
	            map_class.address.city = data.city_id;
	            map_class.address.district = data.district_id;
	            map_class.address.township = data.subdistrict_id;
	            map_class.map_change = false;
	            form.val("storeform", {
	                "province_id": data.province_id
	            });
	            $("select[name=province_id]").change();
	            form.val("storeform", {
	                "city_id": data.city_id
	            });
	            $("select[name=city_id]").change();
	            form.val("storeform", {
	                "district_id": data.district_id
	            });
	            $("select[name=district_id]").change();
	            form.val("storeform", {
	                "community_id": data.subdistrict_id
	            });
	            refreshFrom();//重新渲染form
	            map_class.map_change = true;
	        }
	    });
	}
	
	function showDemo(){
	    layer.open({
	        title: '查看示例',
	        type: 1,
	        area: ['500px', '660px'],
	        content: '<img style="margin: 10px 80px;" src="SHOP_IMG/address.png">'
	    })
	}
</script>
{/block}