
<input name="maskmode" id="maskmode" value="1" type="hidden" />
<input name="imgpath" id="imgpath" value="" type="hidden" />
<input name="saveconf" id="saveconf" value="" type="hidden" />

<div class="mf-tab1">
<div  style="margin-bottom:1px"> 
    <label> 文件类型: </label> <input name="exts"  class="sl300 bt-input-text mr5"  placeholder="*.png;*.jpg;*.jpeg;*.gif" value="{{data.exts or '*.png;*.jpg;*.jpeg'}}" required="required">	
    <label style="width:280px"><span>目前支持PNG;JPG;GIF类型</span></label>     
</div>
<div  style="margin-bottom:1px"> 
    <label> 文件日期: </label> <input name="utime" id="utime" value="{{data.utime}}" class="sl300 bt-input-text mr5"  >	
    <script>laydate.render({elem: '#utime',type: 'datetime'});</script>
    <label style="width:73px"><input type="radio" name="utimemode" value="1" {{"checked" if data.utimemode==1}} /><span>时间之前</span></label>  
    <label style="width:73px"><input type="radio" name="utimemode" value="2" {{"checked" if data.utimemode!=1}} /><span>时间之后</span></label>                     
</div>
<div  style="margin-bottom:1px"> 
    <label> 目录: </label> <input name="folder" value="{{data.folder}}" id="folder" class="sl300 bt-input-text mr5 server_path" placeholder="/www/wwwroot"  required="required"> 
    <span data-id="folder" class="glyphicon cursor mr5 glyphicon-folder-open" onclick="bt.select_path('folder','')"></span>
    <label style="width:80px"><input name="subfold" value="1" type="checkbox" {{"checked" if data.subfold}}/><span>包含子目录</span></label> 
    
    
    <button class="btn btn-success btn-sm" onclick="mfwatermark.get_result()"> 确 定 </button>    
    <button class="btn btn-default btn-sm" onclick="mfwatermark.get_result('saveconf');">保存配置</button>
    <button class="btn btn-default btn-sm" onclick="return mfwatermark.get_clear('clear');">清理配置</button>
</div>
<div  style="margin-bottom:1px"> 
    <label> 条件: </label>
    <label> 图片大小大于(KB): </label> <input type="number" value="{{data.minsize or 20}}" placeholder="不限制" min="1" name="minsize" id="minsize" class="sl200 bt-input-text mr2"  >	
    <label> 图片宽度大于(px): </label> <input type="number" value="{{data.minwidth or ""}}" placeholder="不限制" min="10" name="minwidth" id="minwidth" class="sl200 bt-input-text mr2"  >
    
     
</div>
<div  style="margin-bottom:1px"  > 
    <label> 输出目录: </label> <input name="outpath" value="{{data.outpath or ""}}" placeholder="不填写会覆盖原文件" id="outpath" class="sl300 bt-input-text mr5"  >	
    <span data-id="outpath" class="glyphicon cursor mr5 glyphicon-folder-open" onclick="bt.select_path('outpath','')"></span>
    <input name="isbackup" value="1"  type="checkbox" checked="true" disabled2=true /><span>先备份 </span>
    <span id="backupdir" data-path="" class="glyphicon glyphicon-folder-open" onclick="mfwatermark.openBackPath(this)"></span>
    <a class="bt-ico-ask" style="width:16px;cursor: pointer;" onclick="alert(this.title)" title='输出目录为空将会覆盖原文件，请先确认是否选备份'>?</a>
    
    <label>
        <span style="margin-left:5px"> PNG不透明处理
        </span>
        <input name="isopaque" id="isopaque" value="1" type="checkbox" {{"checked" if data.isopaque}}/>
    </label>
    <label>
        <span style="margin-left:5px"> 跳过错误继续运行
        </span>
        <input name="jumperr" id="jumperr" value="1" type="checkbox" {{"checked" if data.jumperr}}/>
    </label>
    <hr style="height:1px;margin-top: 10px; margin-bottom: 10px;" />               
</div>
</div>










<div  class='mf-tab01'>
<div  style="margin-bottom:1px"  > 
    <label class1="ctl" style="width:200px">
        <select class="presetWH" onchange="presetWHchange(this)">
          <option value="|" selected="selected">保持原始尺寸</option>
          <option value="1024|">适合电脑尺寸</option>
          <option value="480|">适合手机尺寸</option>
          <option value="200|">适合微信表情尺寸（大）</option>
          <option value="140|">适合微信表情尺寸（小）</option>
          <option value="295|413">证件 1 寸照</option>
          <option value="413|626">证件 2 寸照</option>
          <option value="1024|">证书扫描件</option>
          <option value="set">自定义</option>
        </select>
        
        <a class="bt-ico-ask" style="width:16px;cursor: pointer;" onclick="alert(this.title)" title='通常图片用在电脑上设置宽：1024像素，手机：480像素，微信表情：140像素。'>?</a>
      </label> - 
      
      <label style="width:100px">   
       宽(像素)<input placeholder="原比例" type="number" style="width:80px" id="yswidth" name="yswidth" required="required" min="0" value="{{data.yswidth or ""}}">
      </label>  - 
      <label style="width:100px">   
       高(像素)<a class="bt-ico-ask" style="width:16px;cursor: pointer;" onclick="alert(this.title)" title='高度不填，压缩时会自动按比例算出高度'>?</a>
       <input placeholder="原比例" type="number" style="width:80px" id="ysheight" name="ysheight" required="required" min="0" value="{{data.ysheight or ""}}">
       
      </label>
      -
      <label>
        <span style="margin-left:1px">排除压缩图片
        </span>
        <input name="isaprotect" id="isaprotect" value="1" type="checkbox" {{"checked" if data.isaprotect}}/>
      </label>
    
      <span class="glyphicon cursor mr5">  </span>                    
</div>
<div style="margin-top:1px">
    <label style="width:70px">压缩等级<a class="bt-ico-ask" style="width:16px;cursor: pointer;" onclick="alert(this.title)" title='压缩等级越小，压缩后越小。压缩等级越大，图片越清晰。'>?</a></label> 
    <label>
    
    <select class="param q w100" name="quality" required="required">
    {% for i in range(100,30, -2) %}
    {% if i==100 %}
        <option value="{{i}}" {{'selected="selected"' if i==data.quality}}>不压缩</option>
    {% elif i==70 %}
        <option value="{{i}}" {{'selected="selected"' if i==data.quality}}>70 （推荐等级）</option>
    {% else %}
        <option value="{{i}}" {{'selected="selected"' if i==data.quality}}>{{i}}</option>
    {% endif %}
    {% endfor %}              
    </select>
    
    </label> - 
    <span>图形8位优化</span>
    <label style="width:73px"><input type="radio" name="optimize" value="1" {{"checked" if data.optimize}} /><span>是</span></label>  
    <label style="width:73px"><input type="radio" name="optimize" value="0" /><span>否</span></label> - 
    
    
    <label style="width:500px">   
       控制大小(KB)<a class="bt-ico-ask" style="width:16px;cursor: pointer;" onclick="alert(this.title)" title='若填写此项，压缩等级失效。单位换算：1MB＝1024KB'>?</a>
       <input placeholder="原大小" type="number" style="width:80px" name="ctrsize" required="required" min="0" value="{{data.ctrsize or ""}}">
    </label> 
    <hr style="height:1px;margin:1px" />
</div>


<div style="margin-top:1px">
    
    <label style1="width:80px">
    
    <input name="isgifsicle" id="isgifsicle" value="1" type="checkbox" {{"checked" if data.isgifsicle}} /><span> gifsicle压缩GIF</span>
    </label> 
    
    <label style="width:70px">优化等级</label> 
    <label>
    
    <select class="param q w100" name="gif_qty" required="required">
        <option value="O1" {{'selected="selected"' if 'O1'==data.gif_qty}}>低强度快速</option>
        <option value="O2" {{'selected="selected"' if 'O2'==data.gif_qty}}>中等优化</option>
        <option value="O3" {{'selected="selected"' if 'O3'==data.gif_qty or not data.gif_qty}}>高强度慢速(默认)</option>            
    </select>
    
    </label> - 
    
    
    <select class="param q w100" name="gif_loss" required="required">
    {% for i in range(0,60, 10) %}
    {% if i==0 %}
        <option value="{{i}}" {{'selected="selected"' if not data.gif_loss}}>无损压缩(默认)</option>
    {% else %}
        <option value="{{i}}" {{'selected="selected"' if i==data.gif_loss}}>损{{i}}</option>
    {% endif %}
    {% endfor %}              
    </select>
    
    -
    
    <label style="width:70px">颜色范围</label> 
    <label>
    
    <select class="param q w100" name="gif_color" required="required">
        {% for i in range(8,0,-1) %}
        {% if i==8 %}
            <option value="{{i}}" {{'selected="selected"' if not data.gif_color}}>{{2**i}}(默认)</option>
        {% elif i==1 %}
            <option value="{{i}}" {{'selected="selected"' if 1==data.gif_color}}>2(黑白)</option>
        {% else %}
            <option value="{{i}}" {{'selected="selected"' if i==data.gif_color}}>{{2**i}}</option>
        {% endif %}
        {% endfor %}           
    </select>
    
    </label> 
    
    
    <hr style="height:1px;margin:1px" />
</div>

</div>


   
<div  style="margin-bottom:1px;display:none"  class='mf-tab23'> 
<label style="width:120px">
<span>排除水印图片<a class="bt-ico-ask"  style="width:16px;cursor: pointer;" onclick="alert(this.title);return false" title='本插件产生的水印图片不会再次水印'>?</a>  
</span>
<input name="isprotect" value="1" checked type="checkbox" />  
</label> 
 - 
 <label style="width:80px" class="pre-ys">
<span> 水印前先压缩
</span>
<input class="pre-ys" name="iscompress" id="iscompress" value="1" type="checkbox" />
</label> 
<hr style="height:1px;margin-top: 10px; margin-bottom: 10px;" />          
</div>

<div  style="margin-bottom:1px;display:none" class='mf-tab2'> 
<div>
    <label> 水印文字: </label> <input name="masktext"  class="sl300 bt-input-text mr5"  placeholder="请输入字体文字" value="{{data.masktext}}" required="required">	
    <label style="width:280px"><span></span></label> 

    <label> 文字颜色: </label> <input name="rgba"  class="sl200 bt-input-text mr5"  placeholder="请输入字体颜色" value="{{data.rgba or "#00000080"}}" required="required">	
    <label style="width:280px"><span><a class="bt-ico-ask" style="width:16px;cursor: pointer;" onclick="alert(this.title)" title='字体颜色为RGBA格式,8位数字后面两位为透明度,您也可以直接填写为red,green等英文'>?</a>
      </label></span></label>                      
</div>

<div>
    <label> 文字文件: </label> <input name="fontttf"  class="sl300 bt-input-text mr5"  placeholder="请输入字体文件路径" value="{{data.fontttf or "./fonts/simfang.ttf"}}" required="required">	
    <label style="width:280px"><span><a class="bt-ico-ask" style="width:16px;cursor: pointer;" onclick="alert(this.title)" title='有些字体文件是不支持中文的,您可以把新ttf文件ftp到mfwatermark/fonts目录'>?</a>
      </label></span></label>  

    <label> 字体大小: </label> <input name="fontsize"  type="number" min="1" class="sl100 bt-input-text mr5"  placeholder="请输入文字大小" value="{{data.fontsize or 36}}" required="required">	
    <label style="width:280px"><span></span></label>     
</div>
</div>


		

<div  style="margin-bottom:1px;display:none" class='mf-tab3'> 
<div>
    <label> 水印图片: </label> 
    <span>
    <input name="maskimg" id="maskimg" accept="image/*" type="file" class="bt-input-file"   required="required">	
    </span>

</div>	
<div>
    <label style="width:200px">水印位置:
        <select class="markpos" name="markpos">
          
          <option value="lefttop" selected="selected">左上角</option>
          <option value="leftbottom">左下角</option>
          <option value="center">水平居中</option>
          <option value="righttop">右上角</option>
          <option value="rightbottom">右下角</option> 
        </select>
        
      </label>
      <label> - - 水印位置偏移：</label>
      <label style="width:80px">   
       X轴(像素)<input placeholder="可正负" type="number" style="width:80px" id="marginx" name="marginx" required="required" value="{{data.marginx or 10}}">
      </label>  
      <label style="width:100px">   
       Y轴(像素)
       <input placeholder="可正负" type="number" style="width:80px" id="marginy" name="marginy" required="required" value="{{data.marginy or 10}}">
       
</div>
<div> 
    <label> 缩放比列: </label> <input name="maskscale"  type="number" min="1" style="width:60px" class="bt-input-text"  placeholder="0" max="100" title="水印图片缩放比列如：10" value="{{data.maskscale or ""}}" >	
    <label> 透明度: <a class="bt-ico-ask"  style="width:16px;cursor: pointer;" onclick="alert(this.title);return false" title='默认不透明为100;数字越少越透明'>?</a></label> 
    <input name="maskopacity"  type="number" min="1" style="width:60px" class="bt-input-text"  placeholder="默认" max="100" title="水印图片缩放比列如：10" value="{{data.maskopacity or ""}}" >	
    

<div>                         
</div>

<script>
$(".pre-ys").click(function () {
        if(iscompress.checked){$('.mf-tab01').show()}
        else {$('.mf-tab01').hide()}
    })
    
    
$("#maskimg").change(function(){
        var formData = new FormData();
        formData.append("maskfile", document.getElementById("maskimg").files[0]);
        $.ajax({
          url: '/plugin?action=a&s=upload_image&name=mfwatermark',
          type: "POST",
          data: formData,
          dataType: "json",
          contentType: false,
          processData: false,
          success: function (data) {
            $('#imgpath').val(data.fname || "")
          },
          error: function () {
            alert("上传失败！");
          }
        });
    });  


{% if data.shell[0] %}
    var showResult = "<span style='color:red'>插件进程正在运行中</span> <button onclick='mfwatermark.stop_pro()'> 停止 </button>    "
    $('#show-Result').html(showResult); 
{% else %}    
    $('#show-Result').html(""); 
{% endif %}

        
</script>    
                