<apex:page action="{!init}" id="Page"  controller="QLMAttachmentPreviewController" showheader="false" sidebar="false">

    <!-- 文件列表 点击行项目 预览图片 非图片格式点击下载  -->
    <apex:stylesheet value="{!URLFOR($Resource.blockUIcss)}">
    </apex:stylesheet>
    <apex:includescript value="{!URLFOR($Resource.jquery183minjs)}">
    </apex:includescript>
    <apex:includescript value="{!URLFOR($Resource.PleaseWaitDialog)}">
    </apex:includescript>
    <apex:includescript value="/soap/ajax/29.0/connection.js">
    </apex:includescript>
    <apex:includescript value="/soap/ajax/29.0/apex.js">
    </apex:includescript>
    <title>
        附件一览表
    </title>
    <!-- 表格整体样式 -->
    <style type="text/css">
        body {
            margin: 0;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
         
        td,th {
            padding: 0;
        }
         
        .pure-table {
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
            border: 1px solid #cbcbcb;
        }
         
        .pure-table caption {
            color: #000;
            font: italic 85%/1 arial,sans-serif;
           /* padding: 1em 0;*/
            text-align: center;
        }
         
        .pure-table td,.pure-table th {
            border-left: 1px solid #cbcbcb;
            border-width: 0 0 0 1px;
            font-size: inherit;
            margin: 0;
            overflow: visible;
            padding: .5em 1em;
        }
         
        .pure-table thead {
            background-color: #c3bfbf;
            color: #000;
            text-align: left;
            vertical-align: bottom;
        }
         
        .pure-table td {
            background-color: transparent;
        }
        .pure-table-horizontal td,.pure-table-horizontal th {
            border-width: 0 0 1px 0;
            border-bottom: 1px solid #cbcbcb;
        }
         
        .pure-table-horizontal tbody>tr:last-child>td {
            border-bottom-width: 0;
        }
    </style>

    <script language="javascript" type="text/javascript">
        //判断附件名称后缀名
        function openUrl(id,name){
            var htmlArr=['html'];
            var picArr=['jpg','png','jpeg','PNG','JPG','JPEG','bmp','BMP'];
            var wordArr=['doc','pdf','PDF','xlsx','xls','csv','txt','docx','mov','DOC','XLSX','XLS','CSV','TXT','DOCX','MOV'];
            //定义后缀名 suffix
            var suffix=name.substring(name.lastIndexOf('.')+1);
            // alert(suffix);
            // alert(wordArr.indexOf(suffix)>-1);
            if(picArr.indexOf(suffix)>-1){
                if((!!window.ActiveXObject || "ActiveXObject" in window)&&(suffix=='bmp'||suffix=='BMP')) {
                    alert("IE浏览器不能打开后缀是bmp的文件，请使用其他浏览器！");
                }else{
                    // window.location.href=' https://ocsm--stagefull--c.visualforce.com/apex/TenderAttachment?id='+id;
                    window.location.href=' https://ocsm--c.ap0.visual.force.com/apex/TenderAttachment?id='+id;
                } 
            }else if(htmlArr.indexOf(suffix)>-1){
                // window.location.href=' https://ocsm--stagefull--c.visualforce.com/apex/QLMAttachmentPreview1?id='+id;
                window.location.href=' https://ocsm--c.ap0.visual.force.com/apex/QLMAttachmentPreview1?id='+id;
            }else if(picArr.indexOf(suffix)<=-1){
                // window.location.href='https://ocsm--stagefull--c.documentforce.com/servlet/servlet.FileDownload?file='+id;
                window.location.href='https://ocsm--c.ap0.content.force.com/servlet/servlet.FileDownload?file='+id;
            }
        }
        // function openUrl1(id){
        //     var htmlArr=['html'];
        //     var picArr=['jpg','png','jpeg','PNG','JPG','JPEG','bmp','BMP'];
        //     var wordArr=['doc','pdf','PDF','xlsx','xls','csv','txt','docx','mov','DOC','XLSX','XLS','CSV','TXT','DOCX','MOV'];
        //     //定义后缀名 suffix
        //     var suffix=name.substring(name.lastIndexOf('.')+1);
        //     if(picArr.indexOf(suffix)<=-1){
        //         window.location.href=''+id;
        //         // window.location.href='https://ocsm--c.ap0.content.force.com/servlet/servlet.FileDownload?file='+id;
        //     }
        // }
        
    // 返回按钮根据传id返回上一级操作
        function test(){
        var queryVal=GetQueryValue('parentId');
        // var url='https://ocsm--stagefull.my.salesforce.com/'+queryVal;
        var url='https://ocsm.my.salesforce.com/'+queryVal;
        window.location.href=url;
        }

        //js取参
        function GetQueryValue(queryName) {
            var query = decodeURI(window.location.search.substring(1));
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == queryName) { return pair[1]; }
            }
            return null;
        }

        function ClearJson(str) {
            if (str != null && str != "") {
                return str.replace(/(\t|\r|\n|\s|\b|\f|\"|\u)/ig, "").replace(/(\\)/ig, "");
            }
 
            return "";
        }
        // function stripscript(s){
        //     var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]")
        //     var rs = "";
        //     for (var i = 0; i < s.length; i++) {
        //     rs = rs+s.substr(i, 1).replace(pattern, '');
        //     }
        //     return rs;
        // }
    </script>
    <body>
        <div style="height: 40px;background-color:#0f218b;width: 100%; ">
            <h1 style="color: white;margin-left: 45%;font-size: 24px;">
               附件一览表
            </h1>
        </div>
        <table class="pure-table pure-table-horizontal" id="theTable_header" styleclass="list" style="width: 100%">
            <thead>
                <tr style="text-align: center;">
                    <th scope="col" style="width:60%; font-size: 13px;text-align: center;">
                        附件名称
                    </th>
                    <!-- <apex:variable rendered="{!IF(attachmentInfo.isShow,true,false)}" value="Society" var="Society"> -->
                        <!-- <th scope="col" style="width: 40%;font-size: 13px;text-align: center;">
                            附件类型
                        </th>
                    </apex:variable> -->
                    <!--  <td scope="col" style="width: 40%;height: 30px;">
                        附件类型
                    </td> -->
                </tr>
            </thead>
        </table>

        <div id="tablediv" style="overflow:auto; width: 100%; height:100%;">
            <apex:datatable border="0" id="theTable_content" style="width:100%;border-bottom-width: 0px;  font-size:11px; border-spacing:0;" styleclass="list" value="{!attachmentInfo.attachMentList}" var="attach">
                <apex:column style="width: 60%;   height: 25px;text-align: center;font-size: 13px;
      border-left: 1px solid #cbcbcb;">
                    <!--  //javascript:void(0) 为了实现a标签跳转 -->
                    <a href="javascript:void(0);" onclick="openUrl('{!attach.Id}','{!attach.Name}')">
                        <apex:outputfield id="attachMentName" value="{!attach.Name}">
                        </apex:outputfield>
                    </a>
                    <!-- onclick="ClearJson('{!attach.Name}')" -->
                </apex:column>
                <!-- <apex:column style="width:40%;   height: 25px;text-align: center; font-size: 13px; border-right: 1px solid #cbcbcb;">
                    <apex:variable rendered="{!IF(attachmentInfo.isShow,true,false)}" value="Society1" var="Society1">
                        <apex:outputtext value="{!attach.ContentType}">
                        </apex:outputtext>
                    </apex:variable>
                </apex:column> -->
            </apex:datatable>
            <apex:outputPanel layout="none" rendered="{!(Over12MInfoList.size>0)}">
            <table class="pure-table pure-table-horizontal" id="theTable_header" styleclass="list" style="width: 100%">
                <thead>
                    <tr style="text-align: center;">
                        <th scope="col" style="width:60%; font-size: 13px;text-align: center;">  
                            超过12M附件名称
                        </th>
                    </tr>
                </thead>
            </table>
        </apex:outputPanel>
            <!-- alert("{!Over12MInfoList}"); -->
            <apex:datatable border="0" id="theTable_content1" style="width:100%;border-bottom-width: 0px;  font-size:11px; border-spacing:0;" styleclass="list" value="{!Over12MInfoList}" var="Over12Mattach">
            <!-- alert("{!Over12MInfoList}"); -->
                <apex:column style="width: 60%;   height: 25px;text-align: center;font-size: 13px;
      border-left: 1px solid #cbcbcb;">
                    <!--  //javascript:void(0) 为了实现a标签跳转 -->
                    <a href="{!Over12Mattach.url}" target="blank">
                        {!Over12Mattach.Name}
                    </a>
                </apex:column>
            </apex:datatable>
        </div>
        <input id="left" onclick="test()" style="margin-left: 80%; margin-top: 100px;border-radius: 3px; /* 边框半径 */width: 50px; height: 30px;background: #1E90FF; /* 背景颜色 */ cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
        outline: none; /* 不显示轮廓线 */font-family: Microsoft YaHei; /* 设置字体 */color: white; /* 字体颜色 */font-size: 14px; /* 字体大小 */border: 1px solid #1E90FF " type="button" value="返回"/>
    </body>
</apex:page>