${Styles.htmlOverflowYAuto()}
${Scripts.src(zhiqim_uploadlarge.js)}
  <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
  <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
<!--
var attaList = ${attaList};
Z.onload(function()
{
    for(var i=0; i<attaList.length; i++)
    {
        var obj = attaList[i];
        if ("file" == obj.type && obj.isAdd)
        {
            initUploader(obj.id, obj.savePath);
        }
        
        if ("file" == obj.type)
        {
             Z("#fileType_Text_"+obj.id).click();//默认选中
        } 
    }
    //成品尺寸判断
    var getPrintWidth=${order.getPrintWidth()}
    var width = 0;
    var height = 0;
    if(getPrintWidth>0){
      $('#finished-size').html(${order.getPrintWidth()}+'mm X '+${order.getPrintHeight()}+'mm')
    }else{
       width = ${order.getDesignWidth()}-(${designType.getBleeding()}*2);
    height = ${order.getDesignHeight()}-(${designType.getBleeding()}*2);
      $('#finished-size').html(width+'mm X '+height+'mm')
    }
    operationFlow()

    $(document).on('mouseenter mouseleave','.manuscript-list',function(event){
      if (event.type === "mouseenter") {
         $(this).find('.file-popup').show()
      }else{
         $(this).find('.file-popup').hide()
      }
    })
    
       	var content1 =  '${content}';
		if (!content1) {
  		// content 为空
		}else{

      		document.getElementById('editor-container').innerHTML = content1;
		}
    
});

$(function(){
	if(!window.name){
        window.name = 'test';
        window.location.reload();
     }
})

//操作流程逻辑
function operationFlow(){
    var designStatus = "${order.getStatus()}";
    if(designStatus>=40){
      $('#first-draft-audit').addClass('operation-active')
      $('#first-draft-time').html("${Sqls.toDateTimeString(order.getDesignDraftTime())}")
    }
    if(designStatus>=50){
      $('#first-draft-end').addClass('operation-active')
    }
    if(designStatus>=52){
      $('#finalize-draft-audit').addClass('operation-active')
      $('#finalize-draft-time').html("${Sqls.toDateTimeString(order.getDesignEndTime())}")
    }
    if(designStatus>=55){
      $('#finalize-draft-end').addClass('operation-active')
      $('.onBack').click(function(){
        Z.Location.href('designOrderFinish.htm');
      })
      $('.design-btn').hide()
      $('#goTemplate').hide()
    }
    if(designStatus>55){
      $('#printing-audit').addClass('operation-active')
      $('#check-time').html("${Sqls.toDateTimeString(order.getCheckTime())}")
    }
    if(designStatus==70){
      $('#design-complete').addClass('operation-active')
      $('#modify-time').html("${Sqls.toDateTimeString(order.getModifyTime())}")
    }
}

//前往设计
function toDesign()
{
    var designId = Z("#designId").val();
    var prdType = "${order.getTypeId()}";
    var targetUrl = "/templatePreview.htm?designId="+designId;
    var targetCardUrl = "/templateCardPreview.htm?designId="+designId+"&src=design";
    var ajax = new Z.Ajax();
    ajax.setClassName("DesignOrderPresenter");
    ajax.setMethodName("doDesignerOrderTemplate");
    ajax.addParam("designId", designId);
    if(prdType == "2023207561256")
    {
        ajax.addParam("validateUrl", targetCardUrl);
    }
    else
    {
        ajax.addParam("validateUrl", targetUrl);
    }
    ajax.setFailureAlert();
    ajax.setSuccessLocationResponse();
    ajax.execute();
}
//前往编辑器
function toEditor(editorUrl)
{
     var hurl = window.location.href;
     var position = hurl.indexOf("?");

     var result = hurl.substr(0, position);
     var designId = Z("#designId").val();
     editorUrl = "${editorUrl}"+ "&callbackUrl="+ result + "?" + designId;
     
     window.open(editorUrl);
     //window.location.href=editorUrl;
}
function doDownFile(attaIds)
{//文件下载
    var designId = Z("#designId").val();
    if (Z.V.isEmpty(designId))
    {
        parent.Z.alert("请选择一条订单");  
        return;
    }
    if (Z.V.isEmpty(attaIds))
    {
        parent.Z.alert("请选择需要下载的文件");
        return false;
    }
    if(${checkeds}){
        parent.Z.alert("选中多条订单不支持下载，请重新选择");  
        return;
    }
    var ajax = new Z.Ajax();
    ajax.setClassName("UploadFilePresenter");
    ajax.setMethodName("doDownloadFile");
    ajax.addParam("attaId", attaIds);
    ajax.setFailure(function(){
        Z.alert(this.responseText,null, {width:320});
    });
    ajax.setSuccess(function(){
        var prefix = Z.l.protocol + "//" + Z.l.host ;
        Z.L.href(prefix+"/downFile.htm?attaId=" + attaIds, zCallFrame);
    });
    ajax.setLoading(document);
    ajax.execute();
}

function materialDoDownFile(type)
{//客户素材下载
    var designId = Z("#designId").val();
    var attaIds = Z.FM.getCheckBoxValue("str_" + type, "");

    if (Z.V.isEmpty(designId))
    {
        parent.Z.alert("请选择一条订单");  
        return;
    }
    if (Z.V.isEmpty(attaIds))
    {
        parent.Z.alert("请选择需要下载的文件");
        return false;
    }
    if(${checkeds}){
        parent.Z.alert("选中多条订单不支持下载，请重新选择");  
        return;
    }
    var ajax = new Z.Ajax();
    ajax.setClassName("UploadFilePresenter");
    ajax.setMethodName("doDownloadFile");
    ajax.addParam("attaId", attaIds);
    ajax.setFailure(function(){
        Z.alert(this.responseText,null, {width:320});
    });
    ajax.setSuccess(function(){
        var prefix = Z.l.protocol + "//" + Z.l.host ;
        Z.L.href(prefix+"/downFile.htm?attaId=" + attaIds, zCallFrame);
    });
    ajax.setLoading(document);
    ajax.execute();
}

function doDesignOrderDraft()
{//完成初稿
    var designId = Z("#designId").val();
    var ajax = new Z.Ajax();
    ajax.setClassName("DesignOrderPresenter");
    ajax.setMethodName("doQueryStatus");
    ajax.addParam(designId);
    ajax.addParam("SUMBIT");
    ajax.setFailureAlert();
    ajax.setSuccess(function()
    {
        var dialog = new Z.Dialog();
        dialog.title = "完成初稿截图（截屏后粘贴（CTRL+V）到输入框中）";
        dialog.url = "/designOrderDraft.htm?designId=" + designId;
        dialog.width = 600;
        dialog.height = 400;
        dialog.execute();
    })
    ajax.setLoading("orderToDraft", '正在处理', {disabled:true});
    ajax.execute();
}

function doDraftOrderToComplete()
{//完成定稿
	var designId = Z("#designId").val();
	var draftType = "${order.getDraftType()}";
    if(draftType == 0)
    {//自来稿订单
		var ajax1 = new Z.Ajax();
	    ajax1.setClassName("DesignOrderPresenter");
	    ajax1.setMethodName("doEasyDraftOrderToComplete");
	    ajax1.addParam(designId);
	    ajax1.setFailureAlert();
	    ajax1.setSuccess(function(){Z.success("定稿成功", function(){location.reload();});});
	    ajax1.setLoading("orderToComplete", '正在提交', {disabled:true});
	    ajax1.execute();
    }
    else
    {
	    var ajax = new Z.Ajax();
	    ajax.setClassName("DesignOrderPresenter");
	    ajax.setMethodName("doDraftOrderToComplete");
	    ajax.addParam(designId);
	    ajax.setFailureAlert();
	    ajax.setSuccess(function(){Z.success("提交定稿成功", function(){location.reload();});});
	    ajax.setLoading("orderToComplete", '正在提交', {disabled:true});
	    ajax.execute();
    }
}

//快捷联系人 
function quickContact()
{
    var designId = Z("#designId").val();
    if (Z.V.isEmpty(designId))
    {
       Z.alert("请选择一条订单");
       return;
    }
    var ajax = new Z.Ajax();
    ajax.setClassName("OrderPresenter");
    ajax.setMethodName("quickContact");
    ajax.addParam("designId", designId);
    ajax.setFailureAlert();
    ajax.setSuccess(function(){
        var obj = Z.J.toObject(this.responseText);
        var resultHtml = obj.resultHtml;
        if (!Z("#quickContact_dialog")[0])
        {
            var dialog = new Z.Dialog();
            dialog.title = '<span id="quickContact_title" class="z-bold"></span>';
            dialog.text = '<div id="quickContact_dialog"></div>';
            dialog.width = 750;
            dialog.height = 400;
            dialog.shadow = false;
            dialog.execute();
            dialog.$background.remove();
        }
        Z("#quickContact_dialog").htmlc(resultHtml);
        Z("#quickContact_title").htmlc(Z("#title_content").html());
    });
    ajax.setLoading("quickContactBtn", '正在查询', {disabled:true});
    ajax.execute();
}

function initUploader(fileType, path)
{//文件上传
   var designId = Z("#designId").val();
   if (Z.Validates.isEmpty(designId))
        return;
    var upload = new Z.UploadLarge();
    upload.elem = "upload_" + fileType;
    upload.showResult = false;
    upload.fileMd5Target = 1;
    upload.fileCopy = true;
    upload.maxSizeMiB = 500;
    upload.contextPath = "${context.getContextPath()}";
    upload.setFileDir(path);
    upload.onSelected = function(fileName, fileLength)
    {
        var ajax = new Z.Ajax();
        ajax.setSync();
        ajax.setClassName("UploadFilePresenter");
        ajax.setMethodName("doCheckFileName");
        ajax.addParam(designId);
        ajax.addParam(fileType);
        
        //if ("EndFile" != fileType)
        //    ajax.addParam(designId + "-" + fileName);
        //else
             ajax.addParam(fileName);

        ajax.execute();
        
        if (ajax.responseStatus != 0)
        {
            Z.alert(ajax.responseText);
            return false;
        }
        //if ("EndFile" != fileType)
        //    this.setFileName(designId + "-" + fileName);
        //else
             this.setFileName(fileName);
    };
    upload.onCompleted = function(fileId){
        var ajax = new Z.Ajax();
        ajax.setClassName("UploadFilePresenter");
        ajax.setMethodName("doUplaodFile");
        ajax.addParam(designId);
        ajax.addParam(fileId);
        ajax.addParam(fileType);
        ajax.setFailureAlert();
        ajax.setSuccess(function()
        {
            var dataMap = Z.J.toObject(this.responseText);
            Z("#div_" + fileType).html("");//清除;
            var html = "";
            var items = dataMap.attaList;
            for(var i=0;i<items.length;i++)
            {   
                var obj = items[i];
                html += '<div class="manu-list" id="paper_'+obj.attaId+'">'
                html += '<div class="manuscript-list"><img src="zinc/images/'+obj.fileType+'.png">';
                html += '<div class="file-popup" style="display: none;">';
                html += '<div class="download-btn" onclick="doDownFile('+obj.attaId+');">下载</div>';
                html += '<div class="del-btn" onclick="doDeleteFile('+obj.attaId+');">删除</div>';
                html += '</div>';
                html += '</div>';
                html += '<p title="'+obj.fileName+'">'+obj.fileName+'</p>';
                html += '</div>';
            }
            Z("#div_" + fileType).htmlc(html);
        });
        ajax.setLoading(document);
        ajax.execute(); 
    };
    upload.execute();
}

function doDeleteFile(attaIds)
{//删除文件
    var designId = Z("#designId").val();
    if (Z.V.isEmpty(designId))
    {
        parent.Z.alert("请选择一条订单");  
        return;
    }
    
    if (Z.V.isEmpty(attaIds))
    {
        parent.Z.alert("请选择需要删除的文件");  
        return ;
    }
    
    if(${checkeds}){
        parent.Z.alert("选中多条订单不支持删除，请重新选择");  
        return;
    }
    Z.confirm("确认删除此文件吗?", function()
    {
        var ajax = new Z.Ajax();
        ajax.setClassName("UploadFilePresenter");
        ajax.setMethodName("doDeleteFile");
        ajax.addParam(attaIds);
        ajax.setFailure(function(){Z.alert(this.responseText,null, {width:320});});
        ajax.setSuccess(function(){
             $('#paper_'+attaIds).remove();
        });
        ajax.execute();
    }, {width:320});
}

function showLargeImg(thisImg)
{
    var dialog = new parent.Z.Dialog();
    dialog.shadow = true;
    dialog.title = "图片预览";
    dialog.fixed = true;
    dialog.url = "showLargeImg.htm?imgpath="+thisImg.src;
    dialog.width = parent.Z.D.clientWidth()-600;
    dialog.height = parent.Z.D.clientHeight()-400;
    dialog.execute();
    dialog.$background.remove();
}
//复制名称
function doCopyProductInfo(copyType)
{	
	var orderText = "${order.getOrderText()}";
    if (copyType == 1)
    {//复制文件名
        var designId = "${order.getDesignId()}";
        var buyerNick = "${order.getBuyerNick()}";
        
        //var fileName = designId+ "-" +buyerNick;
        var fileName = orderText;
        if (fileName == "-")
            return;
            
        Z.copy(fileName);
        top.Z.tips("复制成功");
    }
    else
    {//复制信息
        if (Z("#copy_content").length == 0)
            return;
        
        Z.copy(Z("#copy_content").text());
        top.Z.tips("复制成功");
    }
    
}
var dialog = new Z.Dialog();
function aa() {
  dialog.close();
  location.reload();
}
var progress = 0;  
var total = 100;  

function toSyncFile()
{//同步文件 
    var designId = Z("#designId").val();
    var templateId = "${designOrder.getTemplateId()}";
    var ajax = new Z.Ajax();
    ajax.setClassName("DesignOrderPresenter");
    ajax.setMethodName("toSyncFile");
    ajax.addParam("designId", designId);
    ajax.addParam("templateId", templateId);
    ajax.setFailureAlert();
    ajax.setSuccess(function(){
	    dialog.title = "同步文件中";
	    dialog.text = "<table class='z-table z-w100p z-h100p'><tr><td class='z-text-center'><div class='progress-bar'>  "+
	    "<div class='progress-bar-fill'></div>  "+
		  "</div></td></tr>" +
		  "<tr><td> <button class='add-sync-draft' style='margin-left:200px;color:white;' onclick=''>继续等待</button> <button class='add-sync-draft' style='margin-left:10px;color:white;' onclick='aa()'>后台渲染</button> </td></tr>" +
		  
		  "</table>";
	  //<i style='float: left;margin-left: 20px;margin-top: -45px;' class='z-ico z-success'></i>
	    dialog.width = 700;
	    dialog.height = 200;
	    dialog.fixed = true;
	    dialog.execute();
	    progress = 0;  
	      
	    // 每隔1秒增加进度条的进度隐居宫主客栈老板医师  
	    setInterval(function() {  
	      if (progress < total) {  
	        progress++;  
	        var progressBarFill = document.querySelector('.progress-bar-fill');  
	        progressBarFill.style.width = progress + '%';  
	      } else {  
	        clearInterval(); // 完成进度条后停止定时器 
	        aa(); 
	      }  
	    }, 500);
	    });
    ajax.setLoading(document);
    ajax.execute();
}
//代编
function daiEditor()
{
    var daiEditorUrl = "${daiEditorUrl}";
    
    var designId = Z("#designId").val();
    var ajax = new Z.Ajax();
    ajax.setClassName("DesignOrderPresenter");
    ajax.setMethodName("delEditorFile");
    ajax.addParam("designId", designId);
    ajax.setFailureAlert();
    ajax.setSuccess(function(){
     location.reload();
    });
    ajax.setLoading(document);
    ajax.execute();
     window.open(daiEditorUrl);
    //window.location.href=daiEditorUrl;
}

//绑定客户模板文件id
function updateTemplateId(){
    var designId = Z("#designId").val();
    var templateId = "${designOrder.getTemplateId()}";
	var dialog = new Z.Dialog();
    dialog.title = "修改模板文件id";
    dialog.url = "/manager/updateTemplateId.htm?designId=" + designId + "&templateId=" + templateId;
    dialog.width = 530;
    dialog.height = 220;
    dialog.fixed = true;
    dialog.execute();
}
</script>
<input name="designId" id="designId" value="${order.getDesignId()}" type="hidden">
<input name="designStatus" id="designStatus" value="${order.getStatus()}" type="hidden">
<div class="orderDetail">
    <div class="detail-title clear">
      <div class="onBack" onclick="Z.Location.href('designOrder.htm');"><img src="zinc/images/back.png" ><span>返回</span></div>
      <span class="title-text">订单详情</span>
    </div>
    <div class="order-box clear">
      <div class="order-box-left">
        <div class="operation">
          <div class="operation-box clear">
            <div class="operation-list operation-active">
              <div class="order-icon"><img src="zinc/images/order-icon01.png" ></div>
              <div class="order-step">第1步</div>
              <div class="order-text"><h3>任务接单</h3><p><span>${Sqls.toDateTimeString(order.getDesignBeginTime())}</span></p></div>
            </div>
            <div class="operation-list" id="first-draft-audit">
              <div class="order-icon"></div>
              <div class="order-step">第2步</div>
              <div class="order-text"><h3>完成初稿</h3><p><span id="first-draft-time"></span></p></div>
            </div>
            <#-- <div class="operation-btn" id="first-draft-end">完成初稿</div> -->
            <div class="operation-list" id="finalize-draft-audit">
              <div class="order-icon"></div>
              <div class="order-step">第3步</div>
              <div class="order-text"><h3>定稿审核</h3><p><span id="finalize-draft-time"></span></p></div>
            </div>
            <div class="operation-btn" id="finalize-draft-end">完成定稿</div>
            <div class="operation-list" id="printing-audit">
              <div class="order-icon"></div>
              <div class="order-step">第4步</div>
              <div class="order-text"><h3>印前审核</h3><p><span id="check-time"></span></p></div>
            </div>
            <div class="operation-list" id="design-complete">
              <div class="order-icon"></div>
              <div class="order-step">第5步</div>
              <div class="order-text"><h3>订单完成</h3><p><span id="modify-time"></span></p></div>
            </div>
          </div>
        </div>
        <div class="operation">
          <div class="operation-title">产品信息<div class="describe"><span class="text-blue" onclick="doCopyProductInfo(1);">复制文件名</span><!--<span onclick="doCopyProductInfo();" class="text-yellow">复制信息</span>--></div></div>
          <div class="product-box clear">
            <div class="product-info"><span id="copy_content">${order.getOrderText()}</span><br>
             <#if !order.isOnlyDesign()>
              <span style="color:#077df9;">收货信息：${order.getReceiverName()} ${order.getUserMobile()} ${order.getReceiverState()} ${order.getReceiverCity()} ${order.getReceiverDistrict()} ${order.getReceiverAddress()}</span>
             </#if>
            </div>
          </div>
        </div>
        <div class="operation">
          <div class="operation-title">设计师文件<div class="describe" id="goTemplate">
            <#if checkToken != "">
	            <#if designOrder.getTemplateId() != 0>
	             <span class="text-blue" onclick="toEditor()">重新设计</span>
	             <#else>
	             <!--<span class="text-blue" onclick="toEditor()">开始设计</span>  --> 
	            </#if>
	            <span class="text-blue" onclick="updateTemplateId()">绑定客户模板文件</span>
	        <#else>
	            <span class="text-red">渲染服务器出问题了，拿不到数据，请联系管理员处理</span>
            </#if>
            
          	<!--<span class="text-blue" onclick="toDesign();">前往模板设计</span>-->
          </div></div>
          <div class="design-btn clear">
            <#if order.getDraftType() != 0>
            <button class="add-first-draft" id="orderToDraft" onclick="doDesignOrderDraft()">提交初稿</button>
            </#if>
            <button class="add-last-draft" id="orderToComplete" onclick="doDraftOrderToComplete()">提交定稿</button>
            <#if designOrder.getTemplateId() != 0 && checkToken != "">
            	<button class="add-sync-draft" style="margin-left:10px;" onclick="toSyncFile()">同步文件</button>
            	<button class="add-editor-draft" style="margin-left:10px;" onclick="daiEditor()">修改设计</button>
            </#if>
          </div>
          <div class="product-table">
            <table style="margin:20px 0 0 0;">
              <#for item : attaList>
	              <#if order.isOnlyDesign()>
	               <tr style="<#if item.getId() != "DesginFile" && item.getId() != "TbzFile"  >display:none</#if>">
	                <td width="200" align="center" style="color:#8e8e8e;">
	                  <div class="manuscript-title">${item.getName()}</div>
	                  <div class="manuscript-p">
	                  <#if item.getId()=="TbzFile" && checkToken != "">
	                     	 编辑器文件</br>(注：不要随意删除，文件删除后必须点击代编修改保存后才可重新同步)
	                  <#else>
	                   		请上传设计稿件</br>(支持稿件类型：${designType.getDesignFileType()})
	                  </#if>
	                  </div>
	              
	                </td>
	                <td style="padding:12px 0 12px 10px;">
	                  <button class="add-manuscript ${zmr_color_class}" id="upload_${item.getId()}" <#if !item.isAdd()>disabled=true</#if>><img src="zinc/images/add-manuscript.png" ></button>
	                  <div class="manuscript-box" id="div_${item.getId()}">
	                  <#if designOrder.getTemplateId() != 0 && item.getId()=="DesginFile" && checkToken != "" && order.getStatus() lt 55 >
				            	<button class="add-editor-draft" style="margin-left: 10px;margin-top: 20px;color: white;" onclick="daiEditor()">修改设计</button>
	                    </#if>
	                    <#for atta : fileList>
	                    <#if checkToken != "" &&  Validates.isEqual(atta.getAttaModul(), item.getId())>
	                     <div class="manu-list" id="paper_${atta.getAttaId()}">
	                      <div class="manuscript-list" >
	                        <img src="zinc/images/${atta.getFileType()}.png" onerror="javascript:this.src='zinc/images/error.png'" >
	                        <div class="file-popup">
	                          <div class="download-btn" onclick="doDownFile('${atta.getAttaId()}');">下载</div>
	                          <button class="del-btn" onclick="doDeleteFile('${atta.getAttaId()}');" <#if !item.isDel()>disabled=true</#if>>删除</button>
	                        </div>
	                      </div>
	                      <p title="${atta.getFileName()}">${atta.getFileName()}</p>
	                     </div>
	                    </#if>
	                    </#for>
	                  </div>
	                </td>
	              </tr>
	              <#elseif item.getType() == "file" && item.getId() != "CustomFile">
	              
	              <tr style="<#if item.getId() == "AftersaleFile">display:none</#if>">
	                <td width="200" align="center" style="color:#8e8e8e;">
	                  <div class="manuscript-title">${item.getName()}</div>
	                  <div class="manuscript-p">
	                   <#if item.getId()=="DesginFile">请上传设计稿件</br>(支持稿件类型：${designType.getDesignFileType()})
	                   <#elseif item.getId()=="EndFile">请根据产品格式要求上传定稿转曲印刷文件</br>(支持稿件类型：${designType.getPrintingFileType()})
	                    <#elseif item.getId()=="WorkFile">请将带后加工产品详细工艺标示出来,并在图片上备注清楚
	                   <#elseif item.getId()=="TbzFile" && checkToken != "">编辑器文件</br>(注：不要随意删除，文件删除后必须点击代编修改保存后才可重新同步)
	                   </#if>
	                  </div>
	                </td>
	                <td style="padding:12px 0 12px 10px;">
	                  <button class="add-manuscript ${zmr_color_class}" id="upload_${item.getId()}" <#if !item.isAdd()>disabled=true</#if>><img src="zinc/images/add-manuscript.png" ></button>
	                  <div class="manuscript-box" id="div_${item.getId()}">
	                    <#for atta : fileList>
		                    <#if checkToken != "" && Validates.isEqual(atta.getAttaModul(), item.getId())>
		                     <div class="manu-list" id="paper_${atta.getAttaId()}">
		                      <div class="manuscript-list" >
		                          <img src="zinc/images/${atta.getFileType()}.png" >
		                        <div class="file-popup">
		                          <div class="download-btn" onclick="doDownFile('${atta.getAttaId()}');">下载</div>
		                          <button class="del-btn" onclick="doDeleteFile('${atta.getAttaId()}');" <#if !item.isDel()>disabled=true</#if>>删除</button>
		                        </div>
		                      </div>
		                      <p title="${atta.getFileName()}">${atta.getFileName()}</p>
		                     </div>
		                    </#if>
	                    </#for>
	                    <#if  checkToken != "" && designOrder.getTemplateId() != 0 && item.getId()=="DesginFile" && order.getStatus() lt 55>
				            	<button class="add-editor-draft" style="margin-left: 10px;margin-top: 20px;color: white;" onclick="daiEditor()">修改设计</button>
	                    </#if>
	                  </div>
	                </td>
	              </tr>
	              </#if>
              </#for>
              <tr>
                <td width="200" align="center" style="color:#8e8e8e;">
                  <div class="manuscript-title">初稿缩略图</div>
                </td>
                <td style="padding:12px 0 12px 10px;">
                  <div class="manuscript-box">
                    <#if order != null>
                       <div class="thumbnail"><img src="${order.getDesignId()}-FristThumFile.png" onerror="javascript:this.src='zinc/images/frist-error.png'" onclick='showLargeImg(this)' ></div>
                    </#if>
                  </div>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <div class="order-box-right">
        <div class="operation">
          <div class="operation-title">联系客户</div>
          <div class="contact-annotation">注意：如果客户问你是哪个店铺的设计师,请告诉客户你是【领淘设计】的设计师</div>
          <div class="material clear">
            <div class="material-list" style="background:#e3f0ff;">
              <div class="material-list-t">联系方式</div>
              <div class="material-list-c">
                <button id="quickContactBtn" onclick="quickContact();">快捷联系方式</button>
              </div>
            </div>
            <div class="material-list">
              <div class="material-list-t">客户资料</div>
              <div class="material-list-c">${order.getUserText()}</div>
            </div>
            <div class="material-list">
              <div class="material-list-t">客户素材</div>
              <div class="matter-list-c clear" style="text-align: right;">
               <div class="check-all">
                <div style="float:left; padding:2px 0 0 0;">
                <input type="checkbox" id="box_CustomFile" onclick="Z.FM.doSelectCheckBox('str_CustomFile', this.checked);" class="z-checkbox z-mg-l2" data-role="z-checkbox" data-class="${zmr_color_class}" >
                <span style="font-size:14px; line-height:28px;" id="fileType_Text_CustomFile" class="z-pointer" onclick=" Z(this).parent().find('zcover>i.z-checkbox').click();">全选</span>
                </div>
                <button id="download_CustomFile" style="margin:0 10px 0 0;" class="z-button z-orange z-pd3" onclick="materialDoDownFile('CustomFile');">下载</button>
               </div>
                <#for atta : fileList>
                <!--CustomFile-->
                    <#if atta.getAttaModul() == "CustomFile">
                      <div class="matter-list" style="text-align:left;" title="${atta.getFileName()}">
                        <input name="str_CustomFile" type="checkbox" data-attaId="${atta.getAttaId()}" data-attaUrl="${atta.getOssUrl()}" data-fileName="${atta.getFileName()}" class="z-checkbox" data-role="z-checkbox" data-class="${zmr_color_class}" value ="${atta.getAttaId()}">
                        <span class="z-pd6" onclick="Z(this).parent().find('zcover>i.z-checkbox').click();">${atta.getFileName()}</span>
                      </div>
                    </#if>
                </#for>
              </div>
            </div>
            <#if Validates.isNotEmptyBlank(order.getPrintSpecial())>
            <div class="material-list">
              <div class="material-list-t">特殊工艺</div>
              <div class="material-list-c">${order.getPrintSpecial()}</div>
            </div>
            </#if>
            <#if Validates.isNotEmptyBlank(order.getServicesMessage())>
            <div class="material-list">
              <div class="material-list-t">客服备注</div>
              <div class="material-list-c">${order.getServicesMessage()}</div>
            </div>
            </#if>
          </div>
        </div>
        <div class="operation product-table" style="padding:0 20px 20px 20px;">
          <div class="operation-title" style="padding:20px 0 20px 0;">交稿规范</div>
          
          
             <div id="editor-container">
				</div>
       		 </div>
        
        </div>
      </div>
    </div>
  </div>
  <style>
  
    html {overflow-x: hidden; overflow-y: hidden;}
    body{ background:#e6e9f2; height:100%;}
    .matter-list{ width:100%; float:left; padding:0 10px 0 0;}
    .matter-list input{ float:left; margin:3px 6px 0 0;}
    .matter-list span{ float:left; line-height:24px; font-size:12px; padding:0; width:80%; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
    .matter-list button{ float:right; background-color:#fff!important; border:none!important; color:#077df9!important;}
    .matter-list-c{ padding:8px 0 8px 10px; min-height:100px; width:calc(100% - 100px); color:#333; font-size:14px;}
    .clear:after{content:'';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
    .clear{zoom:1;}
      #editor-container {
    width: 100%;      /* 容器宽度为100% */
    height: 400px;    /* 容器高度，根据需要设置 */
    overflow-y: auto; /* 内容超出时允许垂直滚动 */
    border: 1px solid #ccc; /* 为了视觉效果，给容器添加边框 */
    position: relative; /* 如果需要定位内部元素，可以设置为relative */
  }
  .ql-tooltip {
  display: none;
}
    .detail-title{ background:#fff; height:48px; color:#85858d; font-size:16px; line-height:48px; border-bottom:1px solid #e1e1e1;}
    .onBack img{ width:14px; display: inline-block; vertical-align: middle; margin:0 12px;}
    .onBack span{ display: inline-block; vertical-align: middle;}
    .onBack{ float:left; font-size:14px; padding:0 20px 0 0; position: relative; height:48px; line-height:46px; cursor: pointer;}
    .onBack::after{ content:''; display: block; border-right:1px solid #e1e1e1; position: absolute; top:10px; right:0; height:28px;}
    .title-text{ float: left; padding:0 0 0 20px;}
    .order-box-left{ float: left; width:70%;}
    .order-box-right{ width:30%; float: right; padding:0 0 0 20px; box-sizing: border-box;}
    .operation-active .order-icon{ background:#077df9;}
    .operation-active .order-step{ background:#1182fc; border:1px solid #1182fc; color:#fff;}
    .operation-active .order-text h3{ color:#1182fc;}
    .operation{ background:#fff; padding:0 0 20px 0; margin:0 0 14px 0;}
    .order-icon{ width:54px; height:54px; border-radius: 54px; background:#dfe1ed; margin:16px 0 14px 30px;}
    .order-icon img{ width:24px; height:24px; margin:15px 0 0 15px;}
    .operation-box{ padding:0 0 0 4%;}
    .operation-list{ float: left; width:186px; padding:0 35px 0 35px; position: relative;}
    .operation-btn{ float: left; font-size:13px; border:1px solid #dddddd; margin:86px 0 0 0; color:#333; padding:0 12px; line-height:30px; border-radius:4px;}
    .operation-list::before{ content:''; display: block; border-top:1px solid #dddddd; width:34px; position: absolute; left:0; top:100px;}
    .operation-list::after{ content:''; display: block; border-top:1px solid #dddddd; width:33px; position: absolute; right:0; top:100px;}
    .operation-list:first-child::before{ content:none;}
    .operation-list:last-child::after{ content:none;}
    .order-step{ width:100%; font-size:12px; background:#fff; color:#49494b; border:1px solid #dddddd; text-align: center; line-height:30px; border-radius:4px;}
    .order-text{ text-align: center; padding:0 0 18px 0;}
    .order-text span{ width:100%; display: inline-block;}
    .order-text h3{ color:#666; line-height:24px; font-size:14px; padding:10px 0 0 0; margin:0;}
    .order-text p{ color:#9d9ca1; font-size:12px; line-height:20px;}
    .operation-title{ color:#333; font-size:18px; font-weight: bold; padding:20px 0 20px 20px; position: relative;}
    .product-box{ padding:0 20px;}
    .product-info{ background:#edeff3; line-height:30px; color:#333; font-size:14px; border-left:1px solid #3081dc; padding:16px 0 16px 20px;}
    .table-title{ font-size:14px; color:#646975; line-height:42px; font-weight: bold; padding:10px 0 0 0;}
    .product-table{ padding:0 20px; color:#333;}
    .product-table table{border-top:1px solid #efefef; border-left:1px solid #efefef; width:100%;}
    .product-table table td{ border-right:1px solid #efefef; border-bottom:1px solid #efefef; height:40px; padding:0 20px; color:#333;}
    .describe{ position: absolute; top:0; right:0; padding:24px 20px 0 0; cursor: pointer;}
    .describe span{ font-size:16px; font-weight:400; margin:0 0 0 20px;}
    .text-blue{ color:#077df9;}
    .text-yellow{ color:#e0b66e;}
    .a-text-blue{ float: right; color:#077df9;}
    .design-btn{ padding:0 0 0 20px; color:#fff;}
    .add-first-draft{ background:#eaa03d; padding:10px 28px; border-radius:4px; float: left; margin:0 10px 0 0; border:none;}
    .add-last-draft{ background:#1081ff; padding:10px 28px; border-radius:4px; float: left; border:none;}
    .add-sync-draft{ background:#50a14f; padding:10px 28px; border-radius:4px; float: left; border:none;}
    .add-editor-draft{ background:#a626a4; padding:10px 28px; border-radius:4px; float: left; border:none;}
    .manu-list{ width:108px; float:left; margin:0 12px 0 0;}
    .manu-list p{ line-height:30px; height:30px; width:100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    .manuscript-list{ position: relative; width:108px; height:64px; background:#dce2ee; padding:12px 0 0 0; box-sizing: border-box; float:left;}
    .manuscript-list img{ width:38px; height:38px; margin:0 auto; display: block;}
    .file-popup{ display:none; position: absolute; top:0; left:0; background: rgba(0,0,0,.3); width:100%; height:100%; padding:8px 0 0 0; }
    .del-btn{ background:#ff5a56; border:none; cursor: pointer; color:#fff; width:52px; height:22px; text-align: center; font-size:12px; margin:4px 0 0 30px; line-height:20px;}
    .download-btn{ background:#077df9; cursor: pointer; color:#fff; width:52px; height:22px; text-align: center; font-size:12px; margin:0 0 0 30px; line-height:22px;}
    .manuscript-list p{ width:90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin:6px 0 0 5%; font-size:12px; color:#787c88;}
    .manuscript-box{ float: left;}
    .add-manuscript{ width:86px; height:86px; border:1px dashed #e2e2e2; float:left; margin:0 12px 0 0;}
    .add-manuscript img{ width:32px; height:32px;}
    .thumbnail{ width:86px; height:86px;}
    .thumbnail img{ width:100%; height:100%; cursor: pointer;}
    .manuscript-title{ font-size:16px; font-weight: bold; color:#333; line-height:30px;}
    .manuscript-p{ font-size:12px; color:#b2b3b8; line-height:20px;}
    .material{ margin:0 20px; }
    .material-list{ float:left; overflow:auto; display: flex; border-radius:4px; margin:0 0 4px 0; width:100%; border:1px solid #e1e1e1;}
    .material-list-t{ background:#b7d9fe; color:#077df9; width:100px; justify-content: center; align-items:center; display: flex;}
    .material-list-c{ padding:8px 0 8px 10px; min-height:100px; width:calc(100% - 100px); color:#333; font-size:14px; align-items:center; display: flex;}
    .material-list-c img{ width:130px; height:130px;}
    .material-list-c button{ color:#077df9; text-decoration: underline; cursor: pointer; background:none; border:none;}
    .contact-annotation{ background:#eaf4ff; line-height:24px; border:1px solid #cfdbe7; margin:0 20px 10px 20px; color:#077df9; font-size:14px; padding:10px; box-sizing: border-box;}
    .logs-list{ width: 100%; float: left; border-left:1px solid #c9d0d6; padding:0 0 24px 0; margin:0 0 0 6px; position: relative;}
    .logs-list::after{ content:''; display: block; width:12px; height:12px; border-radius:12px; background:#077df9; position: absolute; top:0; left:-6px;}
    .order-state{ float: left; color:#077df9; margin:0 20px 0 20px;}
    .logs-box{ float: left; color:#4c4a55;}
    .logs-box p{ color:#8f9092;}
    .mainbody {height: calc(100% - 66px); min-height: 500px; overflow-y: scroll;}
    .orderDetail{ height:100%; padding:20px;}
    .operation-active.operation-btn{ background:#077df9; color:#fff;}
    .operation-active::before{ border-top:1px solid #1182fc;}
    .operation-active::after{ border-top:1px solid #1182fc;}
    #first-draft-audit .order-icon{ background:#dfe1ed url(zinc/images/order-icon02.png) no-repeat 15px 15px; background-size:24px 24px;}
    #finalize-draft-audit .order-icon{ background:#dfe1ed url(zinc/images/order-icon03.png) no-repeat 15px 15px; background-size:24px 24px;}
    #printing-audit .order-icon{ background:#dfe1ed url(zinc/images/order-icon04.png) no-repeat 15px 15px; background-size:24px 24px;}
    #design-complete .order-icon{ background:#dfe1ed url(zinc/images/order-icon05.png) no-repeat 15px 15px; background-size:24px 24px;}
    
    #first-draft-audit.operation-active .order-icon{ background:#077df9 url(zinc/images/order-icon02-active.png) no-repeat 15px 15px; background-size:24px 24px;}
    #finalize-draft-audit.operation-active .order-icon{ background:#077df9 url(zinc/images/order-icon03-active.png) no-repeat 15px 15px; background-size:24px 24px;}
    #printing-audit.operation-active .order-icon{ background:#077df9 url(zinc/images/order-icon04-active.png) no-repeat 15px 15px; background-size:24px 24px;}
    #design-complete.operation-active .order-icon{ background:#077df9 url(zinc/images/order-icon05-active.png) no-repeat 15px 15px; background-size:24px 24px;}
    .order-text p{ position: absolute; bottom:0;}
    .check-all{ width:100%; float:left; padding:0 0 6px 0;}
    
    
    
    .progress-bar {  
      width: 500px;  
      background-color: #f3f3f3;  
      height: 20px;  
      border-radius: 5px;  
      overflow: hidden; 
      margin-left:100px; 
      margin-top:40px;
    }  
      
    .progress-bar-fill {  
      height: 100%;  
      background-color: #3498db;  
      width: 0;  
      transition: width 0.5s ease;  
    }  
  </style>