<html>
    <head>
    <th:block th:include="include :: header('保安员证书打印')"/>
    <meta name="renderer" content="webkit">
    <meta content="always" name="referrer">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">
    <title></title>
    <link rel="shortcut icon" type="images/x-icon" th:href="@{/good/images/logo/logo32x32.ico}" media="screen" />
    <link type="text/css" th:href="@{/good/css/normalize/normalize.css}" rel="stylesheet"/>
    <link type="text/css" th:href="@{/good/css/preview/preview.css}" rel="stylesheet"/>
    <link type="text/css" th:href="@{/good/fonts/font-awesome.min.css}" rel="stylesheet"/>
    <link type="text/css" th:href="@{/good/css/viewer/viewer.min.css}"  rel="stylesheet"/>
    <style>
		.preview-activity-list {
			padding-left: 1px;
		}
		.preview-activity-item {
			padding: 6px 0;
			text-align: center;
		}
		.preview-activity-list li:hover {
			 color:#060;
			 border-left: 3px solid #f60;
			 background-color: #cff;
			 cursor:pointer;
		}
		.active {
			 color:#060;
			 border-left: 3px solid #f60;
			 background-color: #cff;
			 cursor:pointer;
		}
	</style>
    </head>
    <body>
        <div class="preview-modal">
            <div class="preview-container">
                <div class="preview-header">
                    <span class="preview-header-name">
                        <div class="icon-file" style="width: 100px;height: 54px;">合并打印</div>
                    </span>
                    <span class="preview-header-model"><a id="progress" ></a></span>
                    <span class="preview-header-action">
						<span class="preview-action-cell activity-cover" style="display:none;">
							模板：<select id="template"><option value="">请选择套红模板</option></select>
                            <button id="coverButton" type="button" style="border: 1px solid #999;
                            cursor: pointer;
                            color: #000;
                            padding: 2px 9px;
                            background: #fff;
                            border-radius: 3px;">套红</button>
                        </span>
                        <span class="preview-action-cell activity-print" style="display:none;">
                            <button type="button" class="ant-btn ant-btn-ghost components-btn-nobg">
                                <i class="fa fa-print components-icons-print"></i>
                            </button>
                        </span>
                        <span class="preview-action-cell activity-edit" style="display:none;">
                            <button type="button" class="ant-btn ant-btn-ghost components-btn-nobg">
                                <i class="fa fa-pencil components-icons-edit"></i>
                            </button>
                        </span>
                        <span class="preview-action-cell  activity-download">
                            <button type="button" href="../../../uploads/message/2016/11e6-943f-718ee720-8e52-a55b2b26ef01.jpg" download="123.jpg" class="ant-btn ant-btn-ghost components-btn-nobg">
                                <i class="fa fa-download components-icons-download"></i>
                            </button>
                        </span>
                        <span class="preview-action-cell">
                            <button type="button" class="ant-btn ant-btn-ghost components-btn-nobg">
                                <i class="fa fa-times components-icons-close "></i>
                            </button>
                        </span>
                    </span>
                </div>
                <div class="preview-body-container">
                    <div class="preview-content">
                        <iframe class="preview-content-iframe" scrolling="no" style="border: 0; width: 100%; height: 100%;" src=""></iframe>
                        <div class="preview-content-picture" style="display:none">
                            <img src="" />
                        </div>
                        <div class="preview-content-unknown" style="display:none">
                            <div class="preview-content-icon"><i class="fa fa-plane"></i></div>
                            <div class="preview-content-name">该文件无法查看</div>
                        </div>
                    </div>
                    <div class="preview-activity">
                        <div class="preview-activity-header">文档列表</div>
                        <div class="preview-activity-body ">
                            <ul class="preview-activity-list">
                            </ul>
                        </div>
                        <div class="preview-activity-footer "></div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script th:src="@{/good/js/word/jquery.min.js}"></script>
    <script th:src="@{/good/js/word/viewer.min.js}"></script>
    <script th:inline="javascript">
        $(function(){
			//显示关闭按钮
			$(".components-icons-close").parent().hide();
			$(".components-icons-download").parent().hide();
            var detail =[
                [# th:each="printData : ${printDatas}"]
            [[${printData}]],
                [/]
                ];
			pdfview(detail);
		})
		//点击重命名
		$(".rechristenload").click(function(){
			var $this = $(this);
			$this.next().show();
			$this.hide();
			$this.siblings(".wordTitle").hide();
			var inputHtml = "<input type='text' class='rechristenInput' style='width:150px'></input>";
			$this.parent().parent().find(".wordTitle").after(inputHtml);
			$this.parent().parent().find("input").val($this.siblings(".wordTitle").text());
		});
		//确认
		$(".confirmload").click(function(){
			var $this = $(this);
			var inputText = $this.parent().parent().find("input");
			if(inputText.val() == ""){
				alert("名称不能为空");
				return false;
			}
			inputText.remove();
			$this.parent().parent().find(".wordTitle").html(inputText.val());
			$this.parent().parent().find(".wordTitle").attr("title",inputText.val());
			$this.parent().parent().find(".wordTitle").show();
			$this.parent().hide();
			$this.parent().prev().show();
			$(parent.document.getElementById(fieldId)).attr("name",inputText.val());
		});
		//取消
		$(".cancelload").click(function(){
			var $this = $(this);
			var inputText = $this.parent().parent().find("input");
			$this.parent().parent().find(".wordTitle").show();
			inputText.remove();
			$this.parent().hide();
			$this.parent().prev().show();
		});
        function pdfview(arr){
			var list = '';
			for(var i=0;i<arr.length;i++){
				list +='<li class="preview-activity-item" pdfurl="'+arr[i]+'">'+(i+1)+'.文档文件</li>';
			}
			$(".preview-activity-list").html(list);
			    
			$(".preview-activity-item").click(function(){
				$(".preview-activity-list").children().removeClass('active');
				var $this = $(this);
				$this.addClass('active');
				var pdfurl = $this.attr("pdfurl");
				
				var $container = $(".preview-body-container");
				var $picture = $container.find(".preview-content-iframe");
				$picture.attr("src",pdfurl);
			})
			$(".preview-activity-item:first-child").click();
		}
    </script>
    </html>
    
    