<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <title>我的书籍 - {{.SITE_NAME}}</title>


{{/*<link href="{{cdncss "/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">*/}}
{{/*<link href="{{cdncss "/static/font-awesome/css/font-awesome.min.css" rel="stylesheet">*/}}
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="/static/css/toast.css" rel="stylesheet" type="text/css">

    <link href="/static/css/main.css?version={{$.Version}}" rel="stylesheet">
{{/*<script src="/static/html5shiv/3.7.3/html5shiv.min.js"></script>*/}}
    <script src="/static/html5shiv/3.7.3/html5shiv.min.js"></script>
{{/*<script src="/static/respond.js/1.4.2/respond.min.js"></script>*/}}
    <script src="/static/respond.js/1.4.2/respond.min.js"></script>
</head>
<body>
<div class="manual-reader">
    {{template "widgets/header.html" .}}
    <div class="container manual-body">
        <div class="row">

            {{template "setting/menu.html" .}}

            <div class="page-right">
                <div class="m-box">
                    <div class="box-head">
                        <strong class="box-title">书籍列表</strong>
                        <button type="button" data-toggle="modal" data-target="#addBookDialogModal" class="btn btn-success btn-sm pull-right">添加书籍</button>
                    </div>
                    <div class="help-block text-left" style="margin-top: 15px;"><span class="text-danger">凡是违反国家法律法规或恶意发布的内容，本站有权在不提前告知的情况下对内容进行删除，请须知！</span></div>
                    <ul class="nav nav-tabs" style="margin-top: 15px;">
                        <li {{if eq .Private 1}}class="active"{{end}}><a href="{{urlfor "BookController.Index"}}?private=1">私有书籍</a></li>
                        <li {{if ne .Private 1}}class="active"{{end}}><a href="{{urlfor "BookController.Index"}}?private=0">公开书籍</a></li>
                    </ul>
                </div>
                <div class="box-body" id="bookList">
                    <div class="book-list">
                        <template v-if="lists.length <= 0">
                            <div class="text-center">暂无数据</div>
                        </template>
                        <template v-else>
                            <form target="notarget" style="display: none;" action="{{urlfor "BookController.UploadProject"}}" enctype="multipart/form-data" method="post" id="uploadZip">
                            <input type="file" name="zipfile" accept="application/zip">
                            <input type="text" name="identify" value="">
                            </form>

                            <form target="notarget" style="display: none;" action="{{urlfor "BookController.UploadProject"}}" enctype="multipart/form-data" method="post" id="uploadEpub">
                                <input type="file" name="zipfile" accept=".epub">
                                <input type="text" name="identify" value="">
                            </form>
                            <div class="list-item clearfix" v-for="item in lists">
                                <div class="col-sm-2 col-xs-4" style="padding-left: 0px">
                                    <a :class="item.order_index>0 ? 'recommend-book' : ''" :href="'{{urlfor "DocumentController.Index" ":key" ""}}' + item.identify" title="查看文档" data-toggle="tooltip">
                                        <img  onerror="this.src='/static/images/book.png'"  class="img-responsive border-cover-img" :src="item.cover" alt="">
                                    </a>
                                </div>
                                <div class="col-sm-10 col-xs-8" style="padding-right: 0px;padding-left: 0px;">
                                    <div class="book-title">
                                        <div class="pull-left">
                                            <a :href="'{{urlfor "DocumentController.Index" ":key" ""}}' + item.identify" title="查看文档" data-toggle="tooltip">
                                                <template v-if="item.privately_owned == 0">
                                                    <i class="fa fa-unlock" aria-hidden="true"></i>
                                                </template>
                                                <template v-else-if="item.privately_owned == 1">
                                                    <i class="fa fa-lock" aria-hidden="true"></i>
                                                </template>
                                                ${item.book_name}
                                            </a>
                                        </div>

                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="info hidden-xs">
                                        <span title="创建者" data-toggle="tooltip" data-placement="bottom"><i class="fa fa-user"></i> ${item.create_name}</span>
                                        <span title="文档数量" data-toggle="tooltip" data-placement="bottom"><i class="fa fa-pie-chart"></i> ${item.doc_count}</span>
                                        <span title="书籍角色" data-toggle="tooltip" data-placement="bottom"><i class="fa fa-user-secret"></i> ${item.role_name}</span>
                                        <span title="创建时间" data-toggle="tooltip" data-placement="bottom"><i class="fa fa-clock-o"></i>
                                            ${(new Date(item.create_time)).format("yyyy-MM-dd hh:mm:ss")}
                                        </span>
                                        <template v-if="item.last_modify_text !== ''">
                                            <span title="最后编辑" data-toggle="tooltip" data-placement="bottom"><i class="fa fa-pencil"></i> 最后编辑: ${item.last_modify_text}</span>
                                        </template>
                                    </div>
                                    <div class="desc-text">
                                        <template v-if="item.description === ''"></template>
                                        <template v-else="">
                                                ${item.description}
                                        </template>
                                    </div>

                                    <div class="btns">
                                        <a :href="'{{urlfor "DocumentController.Index" ":key" ""}}' + item.identify" title="查看文档" class="btn btn-default btn-sm" data-toggle="tooltip" target="_blank"><i class="fa fa-eye"></i> 查看<span class="hidden-xs">文档</span></a>
                                        <a v-if="item.role_id < 2" :href="'/book/' + item.identify + '/setting'" title="书籍设置" class="btn btn-default btn-sm" data-toggle="tooltip" target="_blank"><i class="fa fa-cogs"></i> <span class="hidden-xs">书籍</span>设置</a>
                                        <a v-if="item.role_id < 2" :href="'/book/'+ item.identify +'/generate'" class="btn btn-default btn-sm ajax-get confirm" :data-identify="item.identify">
                                            <i class="fa fa-book"></i> 生成下载文档
                                        </a>

                                        <template v-if="item.role_id != 3">
                                            <a :href="'/api/' + item.identify + '/edit'" title="编辑文档" data-toggle="tooltip" class="btn btn-default btn-sm"><i class="fa fa-edit" aria-hidden="true"></i> 编辑<span class="hidden-xs">文档</span></a>


                                            <!-- Split button -->
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-default"><i class="fa fa-cloud-upload"></i> 导入书籍</button>
                                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <span class="caret"></span>
                                                    <span class="sr-only">Toggle Dropdown</span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a href="javascript:void(0);" class="btn-upload-epub" data-toggle="tooltip" :data-identify="item.identify" title="支持epub格式电子书导入。">
                                                            <i class="fa fa-cloud-upload"></i> EPUB 上传导入
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:void(0);" class="btn-upload-zip" data-toggle="tooltip" :data-identify="item.identify" title="支持任意zip压缩的markdown书籍导入。">
                                                            <i class="fa fa-cloud-upload"></i> ZIP 上传导入
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:void(0);" class="btn-pull-by-zip" data-toggle="tooltip" :data-identify="item.identify" title="从任意源拉取zip压缩的markdown书籍">
                                                            <i class="fa fa-link"></i> ZIP 拉取导入
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:void(0);" class="btn-pull-by-git" data-toggle="tooltip" :data-identify="item.identify" title="从Git仓库导入markdown书籍">
                                                            <i class="fa fa-git"></i> Git Clone 导入
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </template>

                                        <div class="btn-group btn-group-download">
                                            <button type="button" class="btn btn-default"><i class="fa fa-cloud-download"></i> 导出书籍</button>
                                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <span class="caret"></span>
                                                <span class="sr-only">Toggle Dropdown</span>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li><a :href="'{{urlfor "DocumentController.Export" ":key" ""}}' + item.identify+'?output=pdf'">导出 PDF</a></li>
                                                <li><a :href="'{{urlfor "DocumentController.Export" ":key" ""}}' + item.identify+'?output=mobi'">导出 MOBI</a></li>
                                                <li><a :href="'{{urlfor "DocumentController.Export" ":key" ""}}' + item.identify+'?output=epub'">导出 EPUB</a></li>
                                            </ul>
                                        </div>

                                    </div>
                                </div>

                            </div>
                        </template>
                    </div>
                    <template v-if="lists.length >= 0">
                        <nav class="pagination-container">
                            {{.PageHtml}}
                        </nav>
                    </template>
                </div>


            </div>
        </div>
    </div>

</div>

<!-- Modal -->
<div class="modal fade" id="addBookDialogModal" tabindex="-1" role="dialog" aria-labelledby="addBookDialogModalLabel">
    <div class="modal-dialog" role="document" style="width: 655px">
        <form method="post" autocomplete="off" action="{{urlfor "BookController.Create"}}" id="addBookDialogForm">
        <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" id="myModalLabel">添加书籍</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="标题(不超过100字)" name="book_name" id="bookName">
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button">来源名称</button>
                        </span>
                        <input type="text" placeholder="选填" name="author" id="author" class="form-control">
                        <span class="input-group-btn">
                            <button class="btn btn-default" style="border-left: 0px;border-right: 0px;border-radius: 0px;" type="button">来源链接</button>
                        </span>
                        <input type="text" placeholder="选填" name="author_url" id="author_url" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <div class="pull-left" style="padding: 7px 5px 6px 0">
                        {{.BaseUrl}}{{urlfor "DocumentController.Index" ":key" ""}}
                    </div>
                    <input type="text" class="form-control pull-left" style="width: 220px;vertical-align: middle" placeholder="书籍唯一标识(不能超过50字)" name="identify" id="identify">
                    <div class="clearfix"></div>
                    <p class="text" style="font-size: 12px;color: #999;margin-top: 6px;">书籍标识只能包含字母、数字，以及“-”、"."和“_”符号，且不能是纯数字</p>
                </div>
                <div class="form-group">
                    <textarea name="description" id="description" class="form-control" placeholder="描述信息不超过500个字符" style="height: 90px;"></textarea>
                </div>
                <div class="form-group">
                    <div class="col-lg-6">
                        <label>
                            <input type="radio" name="privately_owned" value="1" checked> 私有<span class="text">(只有参与者或使用令牌才能访问)</span>
                        </label>
                    </div>
                    <div class="col-lg-6">
                        <label>
                            <input type="radio" name="privately_owned" value="0" > 公开<span class="text">(任何人都可以访问)</span>
                        </label>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="modal-footer">
                <span id="form-error-message"></span>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="submit" class="btn btn-success" id="btnSaveDocument" data-loading-text="保存中...">保存</button>
            </div>
        </div>
        </form>
    </div>
</div><!--END Modal-->

{{template "widgets/pull.html" .}}

<!--避免表单跳转其它页面-->
<iframe src="" style="display: none;" name="notarget" id="notarget" frameborder="0"></iframe>
{{/*<script src="/static/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>*/}}
<script src="/static/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
{{/*<script src="/static/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>*/}}
<script src="/static/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

<script src="{{$.StaticDomain}}/static/vuejs/vue.min.js" type="text/javascript"></script>
<script src="{{$.StaticDomain}}/static/js/jquery.form.js" type="text/javascript"></script>
<script src="{{$.StaticDomain}}/static/js/toast.script.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {

        $("#addBookDialogForm").ajaxForm({
            beforeSubmit : function () {
                var bookName = $.trim($("#bookName").val());
                if(bookName === ""){
                    return showError("书籍标题不能为空")
                }
                if(bookName.length > 100){
                    return showError("书籍标题必须小于100字符");
                }

                var identify = $.trim($("#identify").val());
                if(identify === ""){
                    return showError("书籍标识不能为空");
                }
                if(identify.length > 50){
                    return showError("书籍标识必须小于50字符");
                }
                var description = $.trim($("#description").val());

                if(description.length > 500){
                    return showError("描述信息不超过500个字符");
                }
                $("#btnSaveDocument").button("loading");
                return showSuccess("");
            },
            success : function (res) {
                $("#btnSaveDocument").button("reset");
                if(res.errcode === 0){
                    window.app.lists.splice(0,0,res.data);
                    $("#addBookDialogModal").modal("hide");
                }else{
                    showError(res.message);
                }

            }
        });

        window.app = new Vue({
            el : "#bookList",
            data : {
                lists : {{.Result}}
    },
        delimiters : ['${','}'],
            methods : {
        }
    });
        Vue.nextTick(function () {
            $("[data-toggle='tooltip']").tooltip();
        });


        //批量上传文档图片[要放在vue执行代码的后面，否则获取不到identify的值]
        $(".btn-upload-zip").click(function () {
            var _this=$(this),identify=_this.attr("data-identify"),form=$("form#uploadZip");
            form.find("[name=identify]").val(identify);
            form.find("input[type=file]").trigger("click");
        });

        //批量上传文档图片[要放在vue执行代码的后面，否则获取不到identify的值]
        $(".btn-upload-epub").click(function () {
            var _this=$(this),identify=_this.attr("data-identify"),form=$("form#uploadEpub");
            form.find("[name=identify]").val(identify);
            form.find("input[type=file]").trigger("click");
        });

        //change事件处理
        $("#uploadZip input[type=file],#uploadEpub input[type=file]").change(function () {
            var _this = $(this),action = _this.parents("form").attr("action");
            if(_this.val() && confirm("您确定要上传 "+_this.val()+" 吗？")){
                var formData = new FormData();
                var identify = _this.parents("form").find("[name=identify]").val()
                formData.append('zipfile', _this.get(0).files[0])
                formData.append('identify', identify)
                upload(action, formData, function(res){
                    if(res.errcode==0){ // 成功
                        alertTips('success', res.message, 3000, "");
                        setTimeout(() => {
                            location.reload()
                        }, 3000);
                    }else{ // 失败
                        alertTips('error', res.message, 3000, "")
                    }
                    _this.val('')
                })
            }
        });

        $(".btn-group-download a").click(function (e) {
            e.preventDefault();
            var href=$(this).attr("href");
            $.get(href,function (res) {
                if(res.errcode==1){
                    alertTips("error",res.message,3000);
                }else{
                    location.href=res.data.url;
                }
            });
        });

    });
</script>
<script src="/static/js/main.js?version={{$.Version}}" type="text/javascript"></script>
</body>
</html>