{extend name="public/base"/}
{block name="style"}

<link rel="stylesheet" href="__PUBLIC__/plugs/tagsinput/bootstrap-tagsinput.css">
<script src="__PUBLIC__/plugs/tagsinput/bootstrap-tagsinput.js"></script>

<link rel="stylesheet" type="text/css" href="__PUBLIC__/plugs/webuploader/webuploader.css">
<!-- 配置文件 -->
<script type="text/javascript" src="__PUBLIC__/plugs/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="__PUBLIC__/plugs/ueditor/ueditor.all.min.js"></script>
<!-- datepicker statr -->
<link href="__PUBLIC__/plugs/datepicker/css/foundation-datepicker.min.css" rel="stylesheet" type="text/css">
<script src="__PUBLIC__/plugs/datepicker/js/foundation-datepicker.js"></script>
<script src="__PUBLIC__/plugs/datepicker/js/foundation-datepicker.zh-CN.js"></script>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/plugs/board/board.min.css">
<!-- datepicker end -->
<style>
.chapter-content p{margin: 0 0 15px;font-size:16px;}
.el-tag {
    background-color: #8391a5;
    display: inline-block;
    padding: 0 5px;
    height: 24px;
    line-height: 22px;
    font-size: 12px;
    color: #fff;
    border-radius: 4px;
    box-sizing: border-box;
    border: 1px solid transparent;
    white-space: nowrap;
}
.el-tag--success {
    background-color: rgba(18,206,102,.1);
    border-color: rgba(18,206,102,.2);
    color: #13ce66;
}
</style>
{/block}
{block name="body"}
<div class="main-box clearfix">
	<header class="main-box-header clearfix">
		<div class="pull-left">
			<h2>{$meta_title}</h2>
		</div>
		<div class="pull-right">
		{if condition="in_array($group,$access)"}
			<a class="btn btn-primary" href="{:url('admin/chapter/add?model_id=2',array('articleid'=>$articleid))}">新 增</a>
			<a class="btn btn-primary" href="{:url('admin/chapter/drop?model_id=2',array('id'=>$articleid))}">排 序</a>

			<a class="btn btn-primary"><input class="check-all" type="checkbox">全选</a>
			
			<button class="btn btn-danger ajax-post confirm" url="{:url('admin/chapter/del?model_id=2',array('articleid'=>$articleid))}" target-form="ids">删 除</button>
		{/if}
		</div>
	</header>
	<div class="main-box-body clearfix">
		
		<div class="col-sm-3">
            <img src="{$info.cover}" style="max-width:100%" />
            <h4>{$info.title}</h4>
            <div style="line-height: 1.7em;margin-top:10px;" class="text-muted">
                字数: {$info.size}
            </div>
            <div class="text-muted" style="margin-top:10px;line-height: 1.7em;">
                {$info.intro}
			</div>
        </div>
        <div class="col-sm-9">
            <ul class="list-group" style="margin-left:0">
				{volist name="chapterlist" id="item" key="k"}
                <li class="list-group-item chapter-item">
						<input class="ids row-selected" type="checkbox" name="id[]" value="{$item['id']}">
						<span style="display:inline-block;min-width:26px;">{$item.chapterorder}</span>

						{if condition="in_array($group,$access)"}
							<a href="{:url('admin/chapter/edit?model_id=2',array('id'=>$item['id'],"articleid"=>$articleid))}" >{$item.chaptername}</a>
						{else}
							<span data-toggle="view-chapter" data-id="{$item['id']}" data-chaptername="{$item['chaptername']}">{$item.chaptername}</span>
						{/if}
						
                        
                        <span style="font-size:12px;margin-left:5px">
							<span style="color:forestgreen">{$item['isvip']==1?"VIP":"免费"} &nbsp;&nbsp;  {if $item['isvip']==1 && $info['booktypes']==2}{$item['saleprice']}{/if}</span>
							{if $page ==1 && $k ==$suggestid}
							<span class="el-tag el-tag--success">建议本章生成推广文案</span>
							{/if}
							{if $page ==1 && $k == $focuschapter}
							<span class="el-tag el-tag--success">默认强关章节</span>
							{/if}
                        </span>

						<span class="pull-right">
							{if $item['chaptertype']==0 && $page ==1 && $k <=5}
							<div class="btn-group">
								<a type="button" class="dropdown-toggle" data-toggle="dropdown">
									<i class="fa fa-link"></i>生成推广文案<span class="caret"></span>
								</a>
								<ul class="dropdown-menu dropdown-menu-right">
									<li><a href="{:url('articles/editor',array('model_id'=>1,'cartoonid'=>$articleid,'volumeid'=>$item['id'],'mode'=>'text','model'=>1))}" target="_blank"><i class="fa fa-text-width"></i> 文字模式</a></li>
									<li><a href="{:url('articles/editor',array('model_id'=>1,'cartoonid'=>$articleid,'volumeid'=>$item['id'],'mode'=>'img','model'=>1))}" target="_blank"><i class="fa fa-picture"></i>图片模式</a></li>
								</ul>
							</div>

							<a title="原文链接为当前章节" href="{:url('spread/add',array('model_id'=>7,'volumeid'=>$item['id'],'modelid'=>1))}">
                               <i class="fa fa-link"></i> 获取推广链接
                            </a>
                            {/if}
							{if $item['chaptertype']==0 && $page ==1 && $k <=20}
                            <a href="#"
                                           data-toggle="set-force-follow-chapter"
                                           data-article-id="{$articleid}"
										   data-volumeorder="{$item['chapterorder']}"
                                           data-is-paid-article="{if condition="$item['isvip'] eq 1"}true{else}false{/if}">
                                            设为关注章节<i class="fa fa-question-circle" title="" data-toggle="tooltip" data-original-title="将会批量重新设置此本书对应的推广链接中关注章节"></i>
                            </a>						
							{/if}
							<a href="{:url('admin/chapter/edit?model_id=2',array('id'=>$item['id'],'articleid'=>$articleid))}">编辑</a>			
							<a href="{:url('admin/chapter/del?model_id=2',array('id'=>$item['id'],'articleid'=>$articleid))}" class="ajax-get confirm">删除</a>
						</span>
				</li>
			{/volist}														</ul>
			{$chapterlist->render()}
		</div>
	</div>
</div>
<div id="view-chapter-modal" class="modal fade" tabindex="-1" role="dialog">
        <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" data-bind="text: title"></h4>
                </div>
                <div class="modal-body" >
                    <div class="chapter-content" style="overflow: auto;" ></div>
                </div>
                <div class="modal-footer">

                    <button type="button" class="btn btn-default prevArticle" onclick="prevArticle($(this).data('id'),$(this).data('name'))">上一章</button>
                    <button type="button" class="btn btn-primary nextArticle" onclick="nextArticle($(this).data('id'),$(this).data('name'))">下一章</button>
                </div>
            </div>
        </div>
    </div>
{/block}
{block name="script"}
<script type="text/javascript" src="__PUBLIC__/plugs/webuploader/webuploader.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/plugs/webuploader/webuploader.custom.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/droppable.js"></script>
<script type="text/javascript" src="__PUBLIC__/plugs/board/board.min.js"></script>
<script>
    $(function () {
        var novelId = 29 ;
        var verifiedStatus = 1;

        $('[data-toggle="tooltip"], [data-toggle="create-referral-link"]').tooltip();

        $('#view-chapter-modal .chapter-content').css('height', Math.floor($(window).height() * 0.75) + 'px');

        $(document).on('click', '[data-toggle="view-chapter"]', function () {
            var id = $(this).data('id'),
				chaptername = $(this).data('chaptername');
            viewChapter(id,chaptername);
            return false;
        });

        $(document).on('click', '[data-toggle="set-force-follow-chapter"]', function () {
            var id = $(this).data('article-id');
			var volumeorder = $(this).data('volumeorder');
            var isPaidArticle = $(this).data('is-paid-article');

            var promise = null;
			
            if (isPaidArticle) {
				updateAlert('<span style="color:red">设置收费章节为关注章节可能导致低关注率</span>');
				setTimeout(function() {
					promise = $.Deferred().resolve();
					 promise.then(function () {
						var url = "{:url('admin/novel/setfocuschapter')}"
						$.ajax({
							url: url+'?model_id=1&bookid='+id+'&volumeorder='+volumeorder,
							type: 'POST',
							contentType: 'application/json'
						})
						
						.then(function () {
							updateAlert('设置成功', 'success');
							reloadPage(500);
						})
						.fail(function () {
							updateAlert('设置失败', 'error');
						});
						
					});
					return false;
				}, 1500);
            } else {
                promise = $.Deferred().resolve();
            }
			
			

            promise.then(function () {
				var url = "{:url('admin/novel/setfocuschapter')}"
                $.ajax({
                    url: url+'?model_id=1&bookid='+id+'&volumeorder='+volumeorder,
                    type: 'POST',
                    contentType: 'application/json'
                })
				
				.then(function () {
					updateAlert('设置成功', 'success');
					reloadPage(500);
				})
				.fail(function () {
					updateAlert('设置失败', 'error');
				});
				
            });

            return false;
        });

        $(document).on('click', '[data-toggle="delete-article"]', function () {
            var $item = $(this).closest('.chapter-item');
            var id = $(this).data('id');
            var title = $item.find('.chapter-title').text().trim();
            if (!confirm('确定要删除章节《' + title + '》吗?')) {
                return false;
            }

            $.ajax({
                url: '/backend/articles/api_delete/' + id,
                type: 'POST',
                contentType: 'application/json'
            })
                .then(function () {
                    toastr.success('删除成功');
                    reloadPage(500);
                })
                .fail(handleAjaxError);

            return false;
        });

        $(document).on('click', '[data-toggle="set-all-verified"]', function () {
            Modal.confirm({
                title: '全部标记已审核',
                message: '确定要将本书所有章节标记为已审核吗?'
            })
                .then(function () {
                    $.ajax({
                        url: '/backend/articles/api_set_all_verified/' + novelId,
                        type: 'POST',
                        contentType: 'application/json'
                    })
                        .then(function () {
                            toastr.success('操作成功');
                            reloadPage(500);
                        })
                        .fail(handleAjaxError);
                });

            return false;
        });

        /**
         * 批量删除选中的未审核章节
         */
        $(document).on('click', '[data-toggle="delete-multi-unverified"]', function () {

            var $articles = $('[name="article-checkbox"]:checked');
            var count = $articles.length;
            if (verifiedStatus || count === 0) {
                Modal.alert({
                    title: '请选择章节',
                    message: '请先勾选要删除的未审核章节'
                });
                return false;
            }

            Modal.confirm({
                title: '批量删除未审核章节',
                message: '确定要将选中的未审核章节都删除吗? 已选中 '+count+' 章节'
            })
                .then(function () {

                    var articleIds = [];
                    $articles.each(function () {
                        articleIds.push($(this).data('article-id'));
                    });

                    $.ajax({
                        url: '/backend/articles/api_batch_delete_unverified',
                        type: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify({
                            'ids' :articleIds
                        })
                    })
                        .then(function () {
                            toastr.success('操作成功');
                            reloadPage(500);
                        })
                        .fail(handleAjaxError);
                });

            return false;
        });
		
    })
	
	function viewChapter(id,chaptername) {
		var $current = $('.list-group-item [data-toggle="view-chapter"][data-id="' + id + '"]');
		
		var prevId = $current.closest('li').prev().find('[data-toggle="view-chapter"]').data('id');
		var prevName = $current.closest('li').prev().find('[data-toggle="view-chapter"]').data('chaptername');

		var nextId = $current.closest('li').next().find('[data-toggle="view-chapter"]').data('id');

		var nextName = $current.closest('li').next().find('[data-toggle="view-chapter"]').data('chaptername');

		$.get('{:url('chapter/api_get_chapter')}', { id: id,chaptername:chaptername,model_id:2}, function (data) {
			
			$('#view-chapter-modal .modal-title').html(data.title);
			$('#view-chapter-modal .chapter-content').html(data.content.replace(/[ ]/g,""));

			var $prevButton = $('#view-chapter-modal .prevArticle');
			var $nextButton = $('#view-chapter-modal .nextArticle');

			if (prevId) {
				$prevButton.data('name', prevName);
				$prevButton.data('id', prevId).show();
			} else {
				$prevButton.hide();
			}
			console.log(nextId);
			if (nextId) {
				$nextButton.data('name', nextName)
				$nextButton.data('id', nextId).show();
			} else {
				$nextButton.hide();
			}
			var $modal = $('#view-chapter-modal');
			//$modal.off('shown.bs.modal').on('shown.bs.modal', createBLazy);
			if ($modal.data('bs.modal') && $modal.data('bs.modal').isShown) {
				$modal.find('.chapter-content').scrollTop(0);
			} else {
				$modal.modal('show');
			}
		},'json');
	}

	function nextArticle(nextArticleId,chaptername) {
        viewChapter(nextArticleId,chaptername);
    }

	function prevArticle(prevArticleId,chaptername) {
        viewChapter(prevArticleId,chaptername);
    }
</script>

{/block}