{layout name="manager/layout" /}
<div class="layuimini-container location-operate-page">
    <div class="layuimini-main">
        <div class="layui-form layuimini-form">
            <div class="layui-form-item">
                <label class="layui-form-label required">工地名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" placeholder="请输入名称" class="layui-input" value="{$item.name ?? ''}" maxlength="250">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label required">地址</label>
                <div class="layui-input-block">
                    <input type="text" name="address" lay-verify="required" value="{$item.address ?? ''}" lay-reqtext="详细地址不能为空" placeholder="请输入详细地址" class="layui-input">
                </div>
            </div>

            <!-- 经纬度 -->
            <div class="layui-form-item">
                <label class="layui-form-label required">经纬度</label>
                <div class="layui-input-block">
                    <div class="layui-input-inline">
                        <input type="number" name="lng" value="{$item.lng ?? ''}" id="lng" placeholder="请填写经度" lay-reqtext="经度不能为空" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-input-inline">
                        <input type="number" name="lat" value="{$item.lat ?? ''}" id="lat" placeholder="请填写纬度" lay-reqtext="纬度不能为空" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>

                    <div class="layui-form-mid layui-word-aux">
                        地图坐标查询可能有频率限制，当出现不准确或者无法使用等情况，请通过 <a href="https://lbs.qq.com/getPoint/" style="color: red" target="_blank">腾讯地图坐标拾取</a> 自助查询坐标。 如获取到的坐标：30.656691,104.136461 逗号前的为维度，之后为经度
                    </div>

                    <div class="layui-form-item map-item" style="display: none"  id="tengxun_map">
                        <iframe src="/manager/map/index?template=tengxun&lng={$item.lng??''}&lat={$item.lat??''}"  style="width: 70%;height: 600px"></iframe>
                    </div>

                    <div class="layui-form-item map-item" style="display: none" id="gaode_map">
                        <iframe src="/manager/map/index?template=gaode&lng={$item.lng??''}&lat={$item.lat??''}"  style="width: 70%;height: 600px"></iframe>
                    </div>

                    <div class="layui-form-item map-item" style="display: none" id="baidu_map">
                        <iframe src="/manager/map/index?template=baidu&lng={$item.lng??''}&lat={$item.lat??''}"  style="width: 70%;height: 600px"></iframe>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label required">绑定负责人</label>
                <div class="layui-input-block">
                    <div id="bind-account" data-list="{$jsonStr ?? ''}"></div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label required">上午工作时间</label>
                <div class="layui-input-block">
                    <input type="text" id="am-time" name="am" class="layui-input" value="">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label required">下午工作时间</label>
                <div class="layui-input-block">
                    <input type="text" id="pm-time" name="pm" class="layui-input" value="">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" data-url="/manager/worksite/add" lay-submit lay-filter="saveBtn">确认保存</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="__MANAGER__/js/worksite/worksite.js?v={:mt_rand()}"></script>
<script src="__STATIC__/js/iPicker/iPicker.min.js"></script>
<script src="__STATIC__/common/jquery-3.4.1.min.js"></script>
<script src="__MANAGER__/js/common/address.js?v={:mt_rand()}"></script>
<script>
    layui.use(['layer','form','jquery','laydate'],function(){
        let laydate = layui.laydate;
        laydate.render({
            elem: '#am-time' //指定元素
            ,type: 'time'
            ,range: true
        });
        laydate.render({
            elem: '#pm-time' //指定元素
            ,type: 'time'
            ,range: true
        });
    });
</script>

<script>
    function setLngLat(lng,lat){
        $("#lng").val(lng)
        $("#lat").val(lat)
    }
    layui.use(["form"], function(){
        let form = layui.form;
        $("#tengxun_map").show();
        form.on("select(map_type)",function (data) {
            console.log(data.value)
            $(".map-item").hide()
            $("#"+data.value+"_map").show()
        })
        $("#map_type").val("tengxun")
    })

</script>