<?php
/**
 * Created by PhpStorm.
 * User: xiaofeng
 * Date: 2018/3/31
 * Time: 下午3:44
 */
use backend\assets\AppAsset;
AppAsset::addScript($this,Yii::$app->request->baseUrl."/js/housepeitao.js");
AppAsset::addScript($this,Yii::$app->request->baseUrl."/static/js/lp_map.js");
AppAsset::addScript($this,Yii::$app->request->baseUrl."/static/js/tuodong.js");
AppAsset::addScript($this,Yii::$app->request->baseUrl."/static/js/search_map.js");
?>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=lIXbW84tKu6oNCj0bbgTnau7"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/CityList/1.4/src/CityList_min.js"></script>
<style>
    .layui-table-cell{ height:40px;line-height:40px;}
    .layui_w_search {margin-left:85px;}




    /*地图标注*/
    #drag{color:#fff;background:#009688;position:absolute;top:0px;left:20%;width:710px;height:500px;border:1px solid #444;border-radius:5px;box-shadow:0 1px 3px 2px #666;display: none;z-index: 1000;}
    #drag .content{overflow:auto;margin:0 5px;}
    #drag .title{position:relative;height:32px;margin:5px;top:0;left:0;line-height:32px;font-size:16px;font-weight:600;padding-left:10px;overflow:hidden}
    #drag .title h2{font-size:14px;height:27px;line-height:24px;border-bottom:1px solid #A1B4B0;}
    #drag .title div{position:absolute;height:19px;top:6px;right:3px;}
    #drag .title a{float:left;width:21px;height:19px;display:block;margin-left:5px;background:url(../static/images/tool3.png) no-repeat;border-radius:4px;}
    #drag .title a.max{background-position:-60px 0px;display:none}
    #drag .title a.revert{background-position:0px 0;display:none}
    #drag .title a.revert:hover{background-position:0px -29px;}
    #drag .title a.close{background-position:-89px -29px;opacity: 1;}
    #r-result{width:300px;float: left;}
    #r-result input{border: none;  width:165px;height: 20px;padding: 0 5px;text-align:center;}
    #content .btn{width: 98px;  height: 23px;font-size: 13px;margin-right: 16px; cursor: pointer;background: #fff;border: none;}
    #content .btn:hover{color: red;}
    .left{float:left;}
    .right{float:right;}
    .clearfix{clear: both;}
    .hide{display: none;}
    #map{height:412px;width:64%;border: 1px solid #dadada;margin-left:2px;}
    #result{height: 349px; font-size: 13px; line-height: 20px;overflow: auto;color: #666;}
    #result ul {list-style: outside none none;}
    #result ul li{border-bottom: 1px solid #dadada;padding: 10px;}
    #result ul li:hover{background-color: #f0f0f0;cursor: pointer;}
    #result .res-data{background: url(img/ico_marker.png) no-repeat -1px 15px;}
    #result .res-marker{width: 30px;height: 58px; line-height: 58px;text-align: center;color: #333; font-weight: bold;  }
    #result .res-address{width:180px;}
    #result .title{font-size: 14px;color: #000000;padding-left:0;}
    .area-right{width:250px;background:#fff;}
    .area-right .search{border-bottom: 1px solid #dadada;padding:0;box-shadow:2px -3px 13px #888888;}
    .area-right .search .s-address{position: relative;border-bottom: 1px solid #DADADA;padding: 0 10px;height: 32px;line-height: 32px;color:#333;}
    .area-right .search .s-address .btn{position: absolute;right: 10px;top: 5px;cursor: pointer;}
    .area-right .search .s-address .btn img{width: 22px;margin-top:-12px;}
    .area-right .search .address{height: 28px;line-height: 28px;border: none;outline: medium;/*去掉鼠标点击后的边框*/width:125px; }
    .area-right .search .cur_point{color: #1E90FF;padding: 0 10px;font-size: 13px;}
    .area-right .search .point{border:none;}
    #content .search_btn {height: 23px;border: none;cursor: pointer;width:auto;margin-right:0;}

    /*全选样式*/
    .checkAll {padding:0 18px;border-bottom:1px solid #ccc;color:#333;height:30px;line-height:30px;}
    .checkAll input {vertical-align:middle;margin-right:10px;}
</style>

<form class="layui-form" id="peitao_form">
    <!--    <blockquote class="layui-elem-quote quoteBox">-->
    <!--        <div class="layui-inline" style="font-size:18px;">配套设施</div>-->
    <!--    </blockquote>-->
    <!--    <div class="layui-form-item">-->
    <!--        <div class="layui-inline">-->
    <!--            <label class="layui-form-label">配套名称：</label>-->
    <!--            <div class="layui-input-block">-->
    <!--                <input type="text" name="name" placeholder="配套名称" autocomplete="off" class="layui-input" style="width:160%;">-->
    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->
    <div class="layui-form-item" style="margin-top:20px;">
        <div class="layui-inline">
            <label class="layui-form-label">配套类目：</label>
            <div class="layui-input-block" style="width:90%">
                <input type="hidden" name="longitude" value="<?php echo $post['ll'] ?>">
                <select name="city" lay-filter="aihao" >
                    <option value="" selected="">请选择配套类目</option>
                    <?php foreach ($faci as $val){?>
                        <option value="<?php echo $val['id']?>" ><?php echo $val['name']?></option>
                    <?php }?>
                </select>
            </div>
        </div>
        <div class="layui-inline layui_w_search"><a class="layui-btn" href="javascript:;" >检索</a></div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">配套设施：</label>
        <div class="layui-input-block">
            <table class="layui-table" style="width:80%;text-align:center">
                <colgroup>
                    <col width="50">
                    <col width="300">
                    <col width="250">
                    <col >
                </colgroup>
                <thead>
                <tr>
                    <th>删除</th>
                    <th>配套名称</th>
                    <th>距离</th>
                    <th>经纬度</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>

        </div>
    </div>
    <input type="hidden" name="hid" value="<?php echo $post['id']?>">
    <div class="layui-inline">
        <a class="layui-btn search_btn" style="margin-left: 300px;margin-top:15px;" lay-submit="" lay-filter="add_load_mating">提交</a>
    </div>
</form>


<!--地图-->
<div class="layui_map" id="drag">
    <div class="title">
        <span>获取周边配套</span>
        <div>
            <a class="max" href="javascript:;" title="最大化"></a>
            <a class="revert" href="javascript:;" title="还原"></a>
            <a class="close layui_close" href="javascript:;" title="关闭"></a>
        </div>
    </div>
    <div id="content">
        <div class="map_box">
            <div class="left" id="map"></div>
            <div class="left area-right">
                <div class="search">
                    <div class="s-address">
                        配套类目：<input type="text" class="address" id="address" placeholder="配套类目"/>
                        <!--                        <div onclick="doSearch();" class="btn search_btn"><img src="../static/images/ico_btn_search.png"/></div>-->
                    </div>
                    <!--                    <div class="cur_point">-->
                    <!--                        当前坐标：<span id="s-point"></span><br/>-->
                    <!--                        当前检索城市：<span id="s-city"></span>-->
                    <!--                    </div>-->

                </div>
                <div class="checkAll"><input id="forminput" class="select" type="checkbox"><label for="forminput">全选</label></div>
                <div id="result"></div>
            </div>
            <div class="clearfix"></div>
        </div>
        <div style="margin-top:10px;text-align: right">
            <div id="r-result">
                当前楼盘经度纬 : <input type="text" id="jwd"/>
            </div>
            <input type="hidden" id="lat"><input type="hidden" id="lng">
            <input type="button" class="btn layui_w_btn" value="保存">
            <input type="button" onclick="dhide()" class="layui_close btn" value="取消">
        </div>

    </div>
</div>