{{include file="public/header" /}}

<!-- header top nav -->
{{include file="public/header_top_nav" /}}

<!-- search -->
{{include file="public/nav_search" /}}

<!-- header nav -->
{{include file="public/header_nav" /}}

<!-- goods category -->
{{include file="public/goods_category" /}}

{{if !empty($data)}}
    <div class="pets-detail am-container">
        {{if isset($data['user_id']) and $data['user_id'] gt 0}}
            <div class="top">
                <div class="am-u-md-4 photo">
                    <div data-am-widget="slider" class="am-slider am-slider-a1" data-am-slider='{"directionNav":false, "slideshow":false}'>
                        <ul class="am-slides">
                            {{if !empty($data['photo'])}}
                                {{foreach $data.photo as $photo}}
                                    <li>
                                        <img src="{{$photo.images}}" alt="{{$data.title}}" />
                                    </li>
                                {{/foreach}}
                            {{else /}}
                                {{if !empty($plugins_base_data['pets_default_images'])}}
                                    <li>
                                        <img src="{{$plugins_base_data.pets_default_images}}" alt="{{$data.title}}" />
                                    </li>
                                {{else /}}
                                    <li>
                                        <img src="{{$attachment_host}}/static/plugins/images/petscms/pets-default-images.jpg" alt="{{$data.title}}" />
                                    </li>
                                {{/if}}
                            {{/if}}
                        </ul>
                    </div>
                </div>
                <div class="am-u-md-8 base">
                    <h1>{{$data.title}}</h1>
                    <ul class="basic">
                        <li>
                            <span>编号</span>
                            <span>{{$data.pest_no}}</span>
                        </li>
                        <li>
                            <span>名字</span>
                            <span>{{$data.name}}</span>
                        </li>
                        <li>
                            <span>类型</span>
                            <span>{{$data.type_name}}</span>
                        </li>
                        <li>
                            <span>性别</span>
                            <span>{{$data.gender_name}}</span>
                        </li>
                        <li>
                            <span>生日</span>
                            <span>{{$data.birthday_name}}</span>
                        </li>
                        <li>
                            <span>年龄</span>
                            <span>{{$data.age}}</span>
                        </li>
                        <li>
                            <span>品种</span>
                            <span>{{$data.varieties}}</span>
                        </li>
                        <li>
                            <span>绝育</span>
                            <span>{{$data.sterilization_name}}</span>
                        </li>
                        <li>
                            <span>疫苗</span>
                            <span>{{$data.vaccine_name}}</span>
                        </li>
                        <li>
                            <span>状态</span>
                            <span>{{$data.status_name}}</span>
                        </li>
                    </ul>

                    {{if isset($data['status']) and $data['status'] eq 1}}
                        <button type="button" class="am-btn am-btn-primary am-radius am-icon-pencil provide-submit" data-am-modal="{target: '#lose-provide-popup'}"> {{if empty($plugins_base_data['lose_provide'])}}我要提供信息{{else /}}{{$plugins_base_data.lose_provide}}{{/if}}</button>

                        <!-- 提供信息窗口 -->
                        <div class="am-popup" id="lose-provide-popup">
                            <div class="am-popup-inner">
                                <div class="am-popup-hd">
                                    <h4 class="am-popup-title">提供信息</h4>
                                    <span data-am-modal-close class="am-close">&times;</span>
                                </div>
                                <div class="am-popup-bd">
                                    <form class="am-form form-validation view-save" action="{{:PluginsHomeUrl('petscms', 'pets', 'helpsave')}}" method="POST" request-type="ajax-reload">
                                        <div class="am-form-group">
                                            <label>联系人<span class="am-form-group-label-tips-must">必填</span></label>
                                            <input type="text" name="contacts_name" placeholder="联系人" maxlength="30" data-validation-message="联系人姓名格式 1~30 个字符之间" class="am-radius" required />
                                        </div>
                                        <div class="am-form-group">
                                            <label>联系电话<span class="am-form-group-label-tips-must">电话/微信选填一个</span></label>
                                            <input type="text" name="contacts_tel" placeholder="联系电话" maxlength="30" data-validation-message="联系人电话格式 1~30 个字符之间" class="am-radius js-choice-one" data-choice-one-to="input[name=contacts_weixin]" {{if !empty($user['mobile'])}}value="{{$user.mobile}}"{{/if}} required />
                                        </div>
                                        <div class="am-form-group">
                                            <label>联系微信<span class="am-form-group-label-tips-must">电话/微信选填一个</span></label>
                                            <input type="text" name="contacts_weixin" placeholder="联系微信" maxlength="30" data-validation-message="联系人微信格式 1~30 个字符之间" class="am-radius js-choice-one" data-choice-one-to="input[name=contacts_tel]" required />
                                        </div>

                                        <div class="am-form-group region-linkage" data-url="{{:MyUrl('index/region/index')}}">
                                            <label class="block">省市区<span class="am-form-group-label-tips-must">必选</span></label>
                                            <select name="province" data-next="city" class="am-radius chosen-select" data-placeholder="省份" data-validation-message="请选择省份" data-value="0" required />
                                                <option value="">省份</option>
                                            </select>
                                            <select name="city" data-next="county" class="am-radius chosen-select" data-placeholder="城市" data-validation-message="请选择城市" data-value="0" required />
                                                <option value="">城市</option>
                                            </select>
                                            <select name="county" class="am-radius chosen-select" data-placeholder="区/县" data-validation-message="请选择区/县" data-value="0" required />
                                                <option value="">区/县</option>
                                            </select>
                                        </div>
                                        <div class="am-form-group map-address">
                                            <label>详细地址<span class="am-form-group-label-tips-must">必填</span></label>
                                            <div class="am-input-group am-input-group-sm">
                                                <input type="hidden" name="lng" id="form-lng" value="" />
                                                <input type="hidden" name="lat" id="form-lat" value="" />
                                                <input type="text" name="address" id="form-address" placeholder="详细地址" maxlength="80" data-validation-message="详细地址格式 1~80 个字符之间" class="am-radius" required />
                                                <span class="am-input-group-btn">
                                                    <button class="am-btn am-btn-default am-radius" type="button" id="map-location-submit"><span class="am-icon-map-marker"></span> 定位</button>
                                                </span>
                                            </div>
                                        </div>
                                        <div id="map" data-level="17" class="am-form-group"></div>

                                        <div class="am-form-group am-form-group-refreshing">
                                            <input type="hidden" name="pets_id" value="{{if !empty($data['id'])}}{{$data.id}}{{/if}}" />
                                            <button type="submit" class="am-btn am-btn-primary am-radius btn-loading-example am-btn-sm am-btn-block" data-am-loading="{loadingText:'处理中...'}">提交</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    {{/if}}

                    <!-- 分享 -->
                    <div class="base-share {{if !isset($data['status']) or $data['status'] neq 1}}base-share-mobile{{/if}}">
                        <div class="plugins-share-view"></div>
                    </div>
                </div>
            </div>

            {{if isset($data['status']) and $data['status'] eq 1}}
                <div class="lose">
                    <div class="am-alert am-alert-warning" data-am-alert>
                        {{if !empty($data['lose_features'])}}
                            <p class="lose-desc">{{$data.lose_features|raw}}</p>
                        {{/if}}
                        <ul class="person">
                            {{if !empty($data['person_name'])}}
                                <li>
                                    <span>主人姓名</span>
                                    <span>{{$data.person_name}}</span>
                                </li>
                            {{/if}}
                            {{if !empty($data['person_tel'])}}
                                <li class="tel">
                                    <span>主人电话</span>
                                    <a href="tel:{{$data.person_tel}}">{{$data.person_tel}}</a>
                                </li>
                            {{/if}}
                            {{if !empty($data['person_weixin'])}}
                                <li>
                                    <span>主人微信</span>
                                    <span>{{$data.person_weixin}}</span>
                                </li>
                            {{/if}}

                            {{if !empty($data['lose_time_name'])}}
                                <li>
                                    <span>丢失时间</span>
                                    <span>{{$data.lose_time_name}}</span>
                                </li>
                            {{/if}}
                            {{if !empty($data['lose_reward_amount']) and $data['lose_reward_amount'] gt 0}}
                                <li class="price">
                                    <span>悬赏金额</span>
                                    <strong>￥{{$data.lose_reward_amount}}</strong>
                                </li>
                            {{/if}}
                            {{if !empty($data['lose_address'])}}
                                <li>
                                    <span>丢失地址</span>
                                    <span>{{$data.province_name}}{{$data.city_name}}{{$data.county_name}}{{$data.lose_address}}</span>
                                </li>
                            {{/if}}
                        </ul>
                    </div>
                    {{if !empty($data['lose_lng']) and !empty($data['lose_lat'])}}
                        <div id="map-view" data-level="17" class="am-form-group"></div>
                    {{/if}}
                </div>
            {{/if}}

            {{if !empty($data['content'])}}
                <div class="content">
                    <div class="spacing-nav-title">
                        <span class="line"></span>
                        <span class="text-wrapper">宠物详情</span>
                    </div>
                    <div class="rich-content">{{$data.content|raw}}</div>
                </div>
            {{/if}}
        {{else /}}
            <div class="pets-not-bind">
                <p><i class="am-icon-github-alt"></i></p>
                {{if !empty($plugins_base_data['not_bind_desc'])}}
                    <div class="am-alert am-alert-secondary am-animation-shake" data-am-alert>
                        {{$plugins_base_data.not_bind_desc|raw}}
                    </div>
                {{/if}}
                <a href="{{:PluginsHomeUrl('petscms', 'pets', 'saveinfo', ['pest_no'=>$data['pest_no']])}}" class="am-btn am-btn-primary am-radius am-icon-get-pocket"> {{if empty($plugins_base_data['pets_take'])}}我要领取{{else /}}{{$plugins_base_data.pets_take}}{{/if}}</a>
            </div>
        {{/if}}

        {{if !empty($plugins_base_data['alipay_qrcode_images']) or !empty($plugins_base_data['weixin_qrcode_images'])}}
            <div class="pets-qrcode-related">
                <ul>
                    {{if !empty($plugins_base_data['alipay_qrcode_images'])}}
                        <li>
                            <img src="{{$plugins_base_data.alipay_qrcode_images}}" alt="二维码" />
                            {{if !empty($plugins_base_data['alipay_qrcode_name'])}}
                                <p>{{$plugins_base_data.alipay_qrcode_name}}</p>
                            {{/if}}
                        </li>
                    {{/if}}
                    {{if !empty($plugins_base_data['weixin_qrcode_images'])}}
                        <li>
                            <img src="{{$plugins_base_data.weixin_qrcode_images}}" alt="二维码" />
                            {{if !empty($plugins_base_data['weixin_qrcode_name'])}}
                                <p>{{$plugins_base_data.weixin_qrcode_name}}</p>
                            {{/if}}
                        </li>
                    {{/if}}
                </ul>
            </div>
        {{/if}}
    </div>
{{else /}}
    <div class="table-no"><i class="am-icon-warning"></i> 没有相关数据</div>
{{/if}}

{{include file="public/footer" /}}

{{if !empty($data['lose_lng']) and !empty($data['lose_lat']) and $data['lose_lng'] gt 0 and $data['lose_lat'] gt 0 and isset($data['status']) and $data['status'] eq 1}}
    <!-- map -->
    <script type="text/javascript" src="{{$Think.__MY_HTTP__}}://api.map.baidu.com/api?v=2.0&ak={{:MyC('common_baidu_map_ak')}}"></script>

    <script type="text/javascript">
    $(function()
    {
        // 丢失地址-地图展示
        {{if $data['lose_lng'] gt 0 and $data['lose_lat'] gt 0}}
            var map = new BMap.Map("map-view", {enableMapClick:false});
            var level = $('#map-view').data('level') || 16;
            var point = new BMap.Point({{$data['lose_lng']}},{{$data['lose_lat']}});
            map.centerAndZoom(point, level);

            // 添加控件
            var navigationControl = new BMap.NavigationControl({
                // 靠左上角位置
                anchor: BMAP_ANCHOR_TOP_LEFT,
                // LARGE类型
                type: BMAP_NAVIGATION_CONTROL_LARGE,
            });
            map.addControl(navigationControl);

            // 创建标注
            var marker = new BMap.Marker(point);  // 创建标注
            map.addOverlay(marker);              // 将标注添加到地图中
            marker.setAnimation(BMAP_ANIMATION_BOUNCE);  //跳动的动画
        {{/if}}

        // 丢失提供信息-地图
        {{if isset($data['status']) and $data['status'] eq 1}}
            var map = new BMap.Map("map", {enableMapClick:false});
            var level = $('#map').data('level') || 16;
            var point = new BMap.Point(116.400244,39.92556);
            map.centerAndZoom(point, level);

            // 添加控件
            var navigationControl = new BMap.NavigationControl({
                // 靠左上角位置
                anchor: BMAP_ANCHOR_TOP_LEFT,
                // LARGE类型
                type: BMAP_NAVIGATION_CONTROL_LARGE,
            });
            map.addControl(navigationControl);

            // 创建标注
            var marker = new BMap.Marker(point);  // 创建标注
            map.addOverlay(marker);              // 将标注添加到地图中
            marker.enableDragging();           // 可拖拽
            marker.addEventListener("dragend", function(e) {
                map.panTo(e.point);
                $('#form-lng').val(e.point.lng);
                $('#form-lat').val(e.point.lat);
            });

            // 设置版权控件位置
            var cr = new BMap.CopyrightControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT});
            map.addControl(cr); //添加版权控件
            var bs = map.getBounds();   //返回地图可视区域
            cr.addCopyright({id: 1, content: "<div class='map-copy'><span>拖动红色图标直接定位</span></div>", bounds:bs});
        {{/if}}
    });
    </script>
{{/if}}