const tpl = {
    PENDING_LIST: `    
                {{each list as item i}}
                <li>
                    <div class="d-f-left">
                        <div class="d-task-pic" style="background-image: url({{item.src}});"></div>
                        <div class="d-pic-info">
                            <div class="d-pic-name">{{item.fullName}}</div>
                            <div class="d-pic-other">
                                <span>文件大小：{{item.sizeKb}} kb</span><span>图片尺寸：{{item.width}}x{{item.height}}px</span>
                            </div>
                        </div>
                    </div>
                    <div class="d-f-right d-ope-area">
                        <a class="d-action-remove d-trans-opa J_action-remove" title="删除此图片" href="javascript:;"><i></i></a><a class="d-action-edit d-trans-opa J_action-edit" title="编辑此图片" data-src="{{item.src}}" data-name="{{item.name}}" href="javascript:;"><i></i>编辑</a>
                    </div>
                    <div class="d-f-right d-process-area J_process-area d-hidden">
                        <span class="d-process-state J_process-state">等待中</span><span class="d-process-bar"><i class="J_process-bar" style="width: 0px;"></i></span>
                    </div>
                    <div style="clear: both;"></div>
                    <div class="d-comp-list J_comp-list {{if !item.list}}d-hidden{{/if}}">
                        {{each item.list as subItem j}}
                        <a class="J_edited-pic" href="javascript:;" data-source="{{subItem.src}}" data-name="{{subItem.name}}-{{j+1}}.{{subItem.type}}" data-b="{{subItem.size}}" data-kb="{{subItem.sizeKb}}" data-width="{{subItem.width}}" data-height="{{subItem.height}}">
                            <span>{{subItem.name}}-{{j+1}}.{{subItem.type}}</span><span>文件大小：{{subItem.sizeKb}}kb</span><span>图片尺寸：{{subItem.width}}x{{subItem.height}}px</span>
                        </a>
                        {{/each}}
                    </div>
                </li>
                {{/each}}
            `,
    EDITED_LIST: `<a class="J_edited-pic" href="javascript:;" data-source="{{src}}" data-name="{{name}}-{{index || 1}}.{{type}}" data-b="{{size}}" data-kb="{{sizeKb}}" data-width="{{width}}" data-height="{{height}}">
                <span>{{name}}-{{index || 1}}.{{type}}</span><span>文件大小：{{sizeKb}}kb</span><span>图片尺寸：{{width}}x{{height}}px</span>
            </a>`,
    AUTO_CUT_EDIT_LIST: `
                {{each list as item i}}
                <a href="javascript:;" title="{{item.name}}-{{i+1}}.{{item.type}}" point-w="{{item.width}}" point-h="{{item.height}}" point-y="{{item.y}}" point-src="{{item.src}}">
                    <span class="d-sliced-pic" style="background-image: url({{item.src}});"></span>
                    <span class="d-sliced-name">{{item.name}}-{{i+1}}.{{item.type}}</span>
                </a>
                {{/each}}
            `,
    AUTO_CUT_VIEW_LIST: `
            {{each list as item i}}
                <a  href="javascript:;" point-kb="{{item.sizeKb}}" point-w="{{item.width}}" point-h="{{item.height}}" point-y="{{item.y}}">
                    <span class="d-sliced-pic" style="background-image: url({{item.src}});"></span>
                    <span class="d-sliced-name">{{item.name}}</span>
                </a>
            {{/each}}`,
    CONTAINER: `
                <div class="d-pic-dia">
                    <!--待处理图片列表-->  
                    <section class="d-list-page J_list-page {{listPageClassName}}">
                        <div class="d-dia-head">
                            <h2>待编辑图片列表</h2>
                            <div class="d-top-bar d-clear">
                                <div class="d-f-left d-ope-desc">以下<span class="d-red J_pending-num"></span>图片不符合使用规则，编辑后才能完成上传</div>
                                <div class="d-btn-auto d-f-right d-trans-opa d-running J_btn-auto-cut">初始化中…</div>
                            </div>
                        </div>
                        <div class="d-dia-list">
                            <ul class="J_pending-list">
                            </ul>
                        </div>
                    </section>
                    <!--图片编辑器-->
                    <section class="d-editor-page J_editor-page {{editorPageClassName}}">
                        <!--顶部功能按钮区-->
                        <div class="d-dia-head">
                            <h2 class="J_page-name">图片编辑</h2>
                            
                            <div class="d-top-bar d-clear">
                                <div class="d-pic-btn d-gray d-btn-cancel d-trans-opa d-hidden J_btn-view-return">返回</div>
                                <div class="d-pic-btn d-gray d-btn-cancel d-trans-opa J_btn-return">返回</div>
                                <div class="d-pic-btn d-red d-btn-ok d-trans-opa J_editor-btn-ok">保存</div>
                                <div class="d-pic-btn d-gray d-btn-cancel d-hidden d-trans-opa J_btn-cancel">取消</div>
                                <div class="d-pic-btn d-blue d-btn-ok d-hidden d-trans-opa J_btn-apply">应用</div>
                                <!--图片编辑主界面-->
                                <div class="d-edit-menu J_edit-menu">
                                    <a class="d-ope-cut d-trans-opa" href="javascript:;" type="cut" data-tooltips data-direction="top" data-content="裁剪图片尺寸，使得图片可以满足尺寸要求，同时也可以减少图片体积大小"><i></i><span>裁剪</span></a>
                                    <a class="d-ope-modify d-trans-opa" href="javascript:;" type="modify" data-tooltips data-direction="top" data-content="修改尺寸宽高，如果原图尺寸和要求尺寸误差很小，可以通过修改尺寸来符合要求"><i></i><span>修改尺寸</span></a>
                                    <a class="d-ope-zip d-trans-opa" href="javascript:;" type="zip" data-tooltips data-direction="top" data-content="对图片进行压缩，在略微降低图片画质的同时，减少图片体积大小。目前支持JPG以及不透明的PNG图片"><i></i><span>文件压缩</span></a>
                                    <a class="d-ope-auto d-trans-opa" href="javascript:;" type="auto" data-tooltips data-direction="top" data-content="对图片进行水平切割，按照满足单张图片大小要求的原则，自动拆分成多张小图。适用于定宽不定高的图片使用场景，例如图片热区组件。注意：图片宽度不符合尺寸要求，不能使用此功能"><i></i><span>自动切图</span></a>
                                </div>
                                <!--剪裁界面-->
                                <div class="d-edit-menu J_sub-edit-menu d-edit-menu-cut J_edit-menu-cut d-hidden">
                                    <a class="d-ope-user d-clear J_ope-user" href="javascript:;" fixType="px" fixVal="" fixNeed="false">
                                        <span class="d-f-left d-menu-text">自定义内容区</span>
                                        <span class="d-f-left"><input class="d-mt-15 d-mb-4 J_user-width" placeholder="宽度 px" ><input class="J_user-height" placeholder="高度 px"></span>
                                        <span class="d-f-left J_cut-user-lock d-user-lock d-locked" title="点击解除宽高约束比例"></span>
                                    </a>
                                    <a class="d-ope-origin d-trans-opa J_ope-origin" fixType="scale" fixVal="" href="javascript:;"><i></i><span>原始比例</span></a>
                                    <a class="d-ope-square d-trans-opa" fixType="scale" fixVal="1:1" href="javascript:;"><i></i><span>正方形 1:1</span></a>
                                    <a class="d-ope-scale34 d-trans-opa" fixType="scale" fixVal="3:4" href="javascript:;"><i></i><span>3:4</span></a>
                                    <a class="d-ope-rule d-trans-opa J_ope-rule d-hidden" fixType="" fixVal="" fixNeed="true" href="javascript:;"><i><b>规则</b></i><span class="cd-rule-desc J_ruleDesc"></span></a>
                                </div>
                                <!--修改尺寸界面-->
                                <div class="d-edit-menu-modify J_sub-edit-menu J_edit-menu-modify d-hidden">
                                    <span>图片尺寸设置</span>
                                    <input class="J_modify-user-width" type="text" placeholder="宽度 px" onkeyup="this.value=this.value.replace(/\\D/g,'')" onafterpaste="this.value=this.value.replace(/\\D/g,'')">
                                    <span class="d-user-lock J_modify-user-lock d-locked" title="点击解除宽高约束比例"></span>
                                    <input class="J_modify-user-height" type="text" placeholder="高度 px" onkeyup="this.value=this.value.replace(/\\D/g,'')" onafterpaste="this.value=this.value.replace(/\\D/g,'')">
                                </div>
                                <!--文件压缩界面-->
                                <div class="d-edit-menu-zip J_sub-edit-menu J_edit-menu-zip d-hidden">
                                    <a class="d-current J_origin" href="javascript:;" type="origin">原始图片</a>
                                    <a href="javascript:;" type="90" >高清</a>
                                    <a href="javascript:;" type="80" autoFitLimit="true">普清</a>
                                </div>
                                <!--自动切图界面-->
                                <div class="d-edit-menu-auto J_sub-edit-menu J_edit-menu-auto d-hidden">
                                    <div class="d-list-left J_list-left d-trans-opa"></div>
                                    <div class="d-sliced-list">
                                        <div class="J_sliced-list"></div>
                                    </div>
                                    <div class="d-list-right J_list-right d-trans-opa"></div>
                                </div>
                                <!--自动切图的查看界面-->
                                <div class="d-edit-menu-auto J_sub-edit-menu J_edit-menu-auto-view d-hidden">
                                    <div class="d-list-left J_list-left d-trans-opa"></div>
                                    <div class="d-sliced-list">
                                        <div class="J_sliced-list"></div>
                                    </div>
                                    <div class="d-list-right J_list-right d-trans-opa"></div>
                                </div>
                            </div>
                        </div>
                        <!--图片编辑内容区-->
                        <div class="d-dia-body">
                            <!--放大镜工具-->
                            <div class="d-zoom-tool J_zoom-tool">
                                <div class="d-control-bar">
                                    <span class="J_zoom-control-wrap"><i class="J_zoom-control-bg"></i><b title="左右拖动可以缩小放大图片" class="d-trans-opa J_zoom-control"></b></span>
                                    <div class="d-zoom-info J_zoom-info d-trans-left"></div>
                                </div>
                            </div>
                            <!--图片操作区域-->
                            <div class="d-pic-area J_pic-area">
                                <!--图片编辑主界面-->
                                <div class="d-pic-wrap d-v-hidden J_pic-wrap J_pic-wrap-main">
                                    <div class="d-zoom-wrap J_zoom-wrap">
                                        <img>
                                    </div>
                                </div>
                
                                <!--剪裁界面-->
                                <div class="d-pic-wrap d-pic-wrap-cut J_pic-wrap J_pic-wrap-cut d-hidden">
                                    <div class="d-zoom-wrap J_zoom-wrap">
                                        <img>
                                        <!--图片操作遮罩层-->
                                        <div class="d-pic-mask"></div>
                                    </div>
                                    <!--拖拽框容器-->
                                    <div class="d-drag-control J_drag-control">
                                    </div>
                                </div>
                
                                <!--修改尺寸界面-->
                                <div class="d-pic-wrap d-pic-wrap-modify J_pic-wrap J_pic-wrap-modify d-hidden">
                                    <div class="d-zoom-wrap J_zoom-wrap">
                                        <img>
                                    </div>
                                </div>
                
                                <!--文件压缩界面-->
                                <div class="d-pic-wrap J_pic-wrap J_pic-wrap-zip d-hidden">
                                    <div class="d-zoom-wrap J_zoom-wrap">
                                        <img>
                                    </div>
                                </div>
                
                                <!--自动切图界面-->
                                <div class="d-pic-wrap d-pic-wrap-auto J_pic-wrap J_pic-wrap-auto d-hidden">
                                    <div class="d-zoom-wrap J_zoom-wrap">
                                        <img>
                                        <!--图片操作遮罩层-->
                                        <div class="d-pic-mask"></div>
                                        <div class="d-pic-mask-current J_pic-mask-current"></div>
                                    </div>
                                </div>
                
                                <!--自动切图查看界面-->
                                <div class="d-pic-wrap d-pic-wrap-auto J_pic-wrap J_pic-wrap-auto-view d-hidden">
                                    <div class="d-zoom-wrap J_zoom-wrap">
                                        <img>
                                        <!--图片操作遮罩层-->
                                        <div class="d-pic-mask"></div>
                                        <div class="d-pic-mask-current J_pic-mask-current"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--底部文件属性显示区-->
                        <div class="d-dia-foot d-clear J_dia-foot">
                            <span class="d-f-left d-ope-undo d-trans-opa J_ope-undo" title="回退到上一次应用操作之前"></span>
                            <span class="d-f-left d-ope-redo d-trans-opa J_ope-redo" title="重新执行上一次应用操作"></span>
                            <span class="d-f-left d-editing-name J_editing-name"></span>
                            <span class="d-f-right"><span class="J_file-ope-desc">图片尺寸</span>： <span class="J_editing-size"></span> px</span>
                            <span class="d-f-right d-mr-20">文件大小：<span class="J_editing-kb"></span> kb</span>
                        </div>
                    </section>
                </div>`
};
export default tpl;