{extend name="public/baseNew" /}
{block name="body"}
<style type="text/css">
    #shareLink{
        width: auto;
        height: 34px;
        white-space: nowrap;
        line-height: 34px;
        border: 1px solid #ccc;
        float: left;
        padding: 0 10px;
        margin: 0 10px;
    }
    #sub_btn{
        width: auto;
        height: 34px;
        background: #337ab7;
        float: left;
        border: none;
        border-radius: 4px;
        color: #fff;
    }
</style>
    <div class="load_wrap" style="z-index: 100;">
        <div class="load_block">
            <div class="load_top">
                <span class="load_tit">照片初始化</span>
                <span class="load_close">&times;</span>
            </div>
            <div class="load_con">
                <div class="load_tip"></div>
                <div class="load_progress">
                    <p id="progressBarTxt"></p>
                    <div id="progressBar">
                        <div id="progressBar_Track"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--图片预览-->
    <div class="pic_wrap">
        <div class="top-tool">
            <div class="mobile-close"></div>
            <ul class="rotate">
                <li id="rotateLeft"></li>
                <li id="rotateRight"></li>
            </ul>
        </div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                {volist name="viewList" id="vo"}
                <div class="swiper-slide">
                    <div class="pinch-zoom">
                        <img data-rotate="0" data-img="{$vo.url}" onload="loadImg()" onerror="loadImg()" >
                    </div>
                </div>
                {/volist}
            </div>
            <!-- Add Scrollbar -->
            <div class="swiper-scrollbar"></div>
        </div>
    </div>

    <div class="container" style="position: relative;z-index: 1;">
        <div class="list-logo">
            <img src="__PUBLIC__images/logo.png" style="max-width: 260px;" alt="">
            {if condition="$share"}
            {else}
                <a href="/logout" style="float: right">
                    <span class="glyphicon glyphicon-off" style="margin-right: 5px"></span>退出
                </a>
            {/if}
        </div>
        <h2 class="text-center">{$userInfo.nickname}的底片</h2>
        <div class="row">
            <div class="col-md-12 col-xs-12">
                <div class="btn-group top-menu" role="group" aria-label="...">
                    <button type="button" class="btn btn-primary">我的文件</button>
                    <!--button type="button" class="btn btn-info" data-toggle="modal" data-target="#myShare">我的分享</button-->
                    
                    {if $shareLink}
                        <div id="shareLink">$shareLink</div>
                {/if}
                    {if count($viewList) > 0}
                    <button id="btn" type="button" class="btn btn-primary" style="margin-left: 10px;">照片预览</button>
                    {/if}
                </div>

                <!--新加面包屑导航-->
                {if condition="isset($nav)"}
                    <ul class="breadcrumb">{$nav}</ul>
                {/if}
                <ul class="list-group">
                    {volist name="fileList" id="file" empty="<li class='list-group-item'>当前目录没有文件</li>"}
                    <!-- 分享目录 -->
                    {if condition="$share"}
                       <li class="list-group-item">
                            {if condition="$file[dir]==1"}
                                {if condition="$file[down] != ''"}
                                <span class="badge glyphicon glyphicon-download-alt" down-url="{:url('index/download',['uid'=>$userInfo.id, 'path'=>$file['down']],'','')}" > </span>
                                {/if}
                                <span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span> <a href="{:url('/',['share'=>$share, 'path'=>$file['path_en']])}">{$file.path}</a>
                            {else}
                                <span class="badge glyphicon glyphicon-download-alt" down-url="{:url('index/download',['uid'=>$userInfo.id, 'path'=>$file['path_en']])}" > </span>
                                <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> {$file.path}
                            {/if}
                        </li>
                    <!-- 非分享目录 -->
                    {else}
                        <li class="list-group-item">
                            <!--span class="badge glyphicon glyphicon-share-alt" data-toggle="modal" data-target="#myModal"> </span-->
                            {if condition="$file[dir]==1"}
                            <span class="badge glyphicon glyphicon-download-alt" down-url="{:url('index/downloadAll',['uid'=>$userInfo.id, 'path'=>$file['path_en']])}" > </span>
                            <span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span> <a href="{:url('index/index',['path'=>$file['path_en']])}">{$file.path}</a>
                            {else}
                            <span class="badge glyphicon glyphicon-download-alt" down-url="{:url('index/download',['path'=>$file['path_en']])}" > </span>
                            <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> {$file.path}
                            {/if}
                        </li>
                    {/if}
                    {/volist}
                </ul>
            </div>
        </div>
    </div>


    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title text-center">分享</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-3 col-xs-5 control-label">请输入密码</label>
                            <div class="col-sm-9 col-xs-6">
                                <input type="password" class="form-control" placeholder="Password">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 col-xs-5 control-label">请再次输入密码</label>
                            <div class="col-sm-9 col-xs-6">
                                <input type="password" class="form-control" placeholder="Password">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <span class="btn btn-primary" id="share">分享</span>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="shareModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title text-center">分享地址</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 col-xs-3 control-label">地址</label>
                            <div class="col-sm-10 col-xs-8">
                                <input type="password" class="form-control" placeholder="Password">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="myShare" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title text-center">我的分享</h4>
                </div>
                <div class="modal-body" style="max-height: 300px;overflow: auto">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <tr>
                                <th>地址</th>
                                <th>时间</th>
                                <th>操作</th>
                            </tr>
                            <tr>
                                <td>http://v3.bootcss.com/javascript/#modals-usage</td>
                                <td>2017-10-23</td>
                                <td>删除</td>
                            </tr>
                            <tr>
                                <td>http://v3.bootcss.com/javascript/#modals-usage</td>
                                <td>2017-10-23</td>
                                <td>删除</td>
                            </tr>
                            <tr>
                                <td>http://v3.bootcss.com/javascript/#modals-usage</td>
                                <td>2017-10-23</td>
                                <td>删除</td>
                            </tr>
                            <tr>
                                <td>http://v3.bootcss.com/javascript/#modals-usage</td>
                                <td>2017-10-23</td>
                                <td>删除</td>
                            </tr>
                            <tr>
                                <td>http://v3.bootcss.com/javascript/#modals-usage</td>
                                <td>2017-10-23</td>
                                <td>删除</td>
                            </tr>
                            <tr>
                                <td>http://v3.bootcss.com/javascript/#modals-usage</td>
                                <td>2017-10-23</td>
                                <td>删除</td>
                            </tr>
                            <tr>
                                <td>http://v3.bootcss.com/javascript/#modals-usage</td>
                                <td>2017-10-23</td>
                                <td>删除</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        var maxValue = {$viewList|count};
        function loadImg(){
            maxValue--;
        }
        $(function(){
            $("#share").click(function(){
                $('#myModal').modal('hide');
                $('#shareModel').modal('show');
            })
            $('.glyphicon-download-alt').each(function(){
                
                $(this).click(function(){
                    {if $isWeixin == 1}
                        alert("在微信端无法直接下载，请点击右上角菜单里在浏览器端打开，然后登录进行下载。");
                    {else}
                        window.open($(this).attr('down-url'));
                    {/if}
                });
            })


            $('div.pinch-zoom').each(function () {
                new RTP.PinchZoom($(this), {});
            });
            var n= 0,ww=$("body").width(),hh=$("body").height(),maxW,maxH,pw,ph,imgDom;
            var rotateFn=function(deg1,deg2,n1,n2){
                imgDom=$(".swiper-slide-active img");
                n=parseInt(imgDom.attr("data-rotate"))+deg1;
                pw=imgDom.width();
                ph=imgDom.height();
                if(n==deg2){
                    n=0;
                }
                imgDom.css({
                    transform:"rotate("+n+"deg)",
                    "-webkit-transform":"rotate("+n+"deg)"

                }).attr("data-rotate",n);

                if(ph>pw){
                    if(n==n1||n==n2) {
                        imgDom.css({
                            "max-height": ww + "px",
                            "max-width": hh + "px"
                        });
                    }else{
                        imgDom.css({
                            "max-height": hh + "px",
                            "max-width": ww + "px"
                        });
                    }
                }
            };
            $("#rotateRight").click(function(){
                rotateFn(90,360,90,270);
            });
            $("#rotateLeft").click(function(){
                rotateFn(-90,-360,-90,-270);
            })


        })
    </script>
{/block}