<!--[menu]-->
<div class="menu-bg" data-find='mask'></div>
<div class="menu-container" data-find='container' style='width:<%=data.option.width;%>px'>
    <div class="menu-header" data-group='header'>
        <div class="menu-header-icon" data-groupi='icon'></div>
    </div>
    <div class="menu-body">
        <%var data=data.data;%>
        <%for(var i in data){%>
        <div class="menu-body-top">
            <div class="menu-body-top-name"><%=data[i].name;%></div>
            <div class="menu-body-top-items">
                <%for(var t in data[i].list){%>
                <div class="menu-body-top-items-item"  data-group='item' num="<%=(i+'-'+t);%>">
                    <div class="menu-body-top-items-item-icon"><i class='<%=data[i].list[t].icon;%>'></i></div>
                    <div class="menu-body-top-items-item-name"><%=data[i].list[t].name;%></div>
                </div>
                <%}%>
            </div>
        </div>
        <%}%>
    </div>
    <div class="menu-copyright">©2016 brightjs.org</div>
</div>
<!--[mainwindow]-->
<div class="winp-header" data-group='btns'>
    <div class="winp-header-left">
        <%for(var i in option.leftBtns){%>
        <div class="win-header-btn" data-groupi='<%=option.leftBtns[i].action;%>'><i class='<%=option.leftBtns[i].icon;%>'></i></div>
        <%}%>
    </div>
    <div class="win-header-title">
        <%=option.title;%>
    </div>
    <div class="winp-header-right" data-find="btns">
        <%for(var i in option.rightBtns){%>
        <div class="win-header-btn" data-groupi='<%=option.rightBtns[i].action;%>'><i class='<%=option.rightBtns[i].icon;%>'></i></div>
        <%}%>
    </div>
</div>
<div class="win-container" data-find="container"></div>
<!--[subwin]-->
<div class="subwin-header" data-group="btns">
    <div class="subwin-header-left">
        <div class="subwin-header-btn" data-groupi='close'><i class='fa fa-arrow-left'></i></div>
        <div class="subwin-header-titlep"><%=option.title;%></div>
    </div>
    <div class="subwin-header-right">
        <%for(var i in option.btns){%>
        <div class="subwin-header-btn" data-groupi='<%=option.btns[i].action;%>'><i class='<%=option.btns[i].icon;%>'></i></div>
        <%}%>
    </div>
</div>
<div class="subwin-container" data-find='container'></div>
<!--[datalistlite]-->
<div class="datalistlite-nodata" data-find="nodata">
    <div class="datalistlite-nodata-bg"></div>
    <div class="datalistlite-nodata-desc">没有用于显示的数据</div>
</div>
<div class="datalistlite-container" data-find="baseContainer">
    <div class="datalistlite-lists" data-find="container">
        <div class="datalistlite-lists-firstloading" data-find='firstloading'><i class="fa fa-loader fa-spin"></i> loading...</div>
    </div>
    <div class="datalistlite-next" data-find="loading">
        <div class="datalistlite-next-icon"><i class="fa fa-loader fa-spin"></i></div>
        <div class="datalistlite-next-desc"> Loading...</div>
    </div>
</div>
<!--[datalist]-->
<div class="datalist-nodata" data-find="nodata">
    <div class="datalist-nodata-bg"></div>
    <div class="datalist-nodata-desc">没有用于显示的数据</div>
</div>
<div class="datalist-container" data-find="baseContainer">
    <div class="datalist-lists" data-find="container">
    </div>
    <div class="datalist-next" data-find="loading">
        <div class="datalist-next-icon"><i class="fa fa-loader fa-spin"></i></div>
        <div class="datalist-next-desc">Loading...</div>
    </div>
</div>
<div class="datalist-dot" data-find="dot"><i class="fa fa-spinner8"></i></div>
<!--[datalist-test]-->
<div class="" style="background:white;height:80px;margin:10px 0 10px 0;">
    <div class="">datalist</div>
</div>
<!--[pdatalist]-->
<div class="pdatalist-con" data-group="plist">
    <div class="pdatalist-con-tools" data-groupi="plist-tool">
        <div class="pdatalist-con-tools-toolwrap" data-groupi="toolwrap">
            <div class="pdatalist-con-tools-tool" data-groupi="btn:delete">删除</div>
            <div class="pdatalist-con-tools-tool" data-groupi="btn:delete2">删除</div>
            <div class="pdatalist-con-tools-tool" data-groupi="btn:delete3">删除</div>
        </div>
    </div>
    <div class="pdatalist-con-content" data-groupi="content">
        <div class="">datalist</div>
    </div>
</div>
<!--[statebar]-->
<div class="statebarcontent" data-find="colorbar">
    <div class="statebarcontent-container">
        <div class="statebarcontent-title"><i class="fa fa-flag"></i> 选择颜色进行数据筛选</div>
        <div class="statebarcontent-colorpanel" data-group="colorpanel">
            <div class="statebarcontent-colorpanel-colr a" data-groupi="cc" num='0'><i class="fa fa-check"></i></div>
            <div class="statebarcontent-colorpanel-colr b" data-groupi="cc" num='1'><i class="fa fa-check"></i></div>
            <div class="statebarcontent-colorpanel-colr c" data-groupi="cc" num='2'><i class="fa fa-check"></i></div>
            <div class="statebarcontent-colorpanel-colr d" data-groupi="cc" num='3'><i class="fa fa-check"></i></div>
            <div class="statebarcontent-colorpanel-colr e" data-groupi="cc" num='4'><i class="fa fa-check"></i></div>
            <div class="statebarcontent-colorpanel-colr f" data-groupi="cc" num='5'><i class="fa fa-check"></i></div>
            <div class="statebarcontent-colorpanel-colr g" data-groupi="cc" num='6'><i class="fa fa-check"></i></div>
        </div>
    </div>
    <div class="statebarcontent-mask" data-find="mask"></div>
</div>
<div class="tagbarcontent" data-find="tagbar">
    <div class="tagbarcontent-container">
        <div class="tagbarcontent-title"><i class="fa fa-tag"></i> 选择标签进行数据筛选</div>
        <div class="tagbarcontent-con fix" data-group='tagbar'></div>
    </div>
    <div class="tagbarcontent-mask" data-find="mask"></div>
</div>
<div class="searchcontent" data-group='search'>
    <div class="searchcontent-con">
        <div class="searchcontent-con-input"><input data-groupi='input' type='text' placeholder='搜索'/></div>
        <div class="searchcontent-con-btn" data-groupi='btn'><i class='fa fa-check'></i></div>
    </div>
    <div class="searchcontent-mask" data-find="mask"></div>
</div>
<div class="datetime" data-group='time'>
    <div class="datetime-container">
        <div class="datetime-title"><i class="fa fa-watch"></i> 选择时间进行数据筛选</div>
        <div class="datetime-top">
            <div class="datetime-top-item">
                <div class="datetime-top-item-inner" data-groupi='one'>当天</div>
            </div>
            <div class="datetime-top-item">
                <div class="datetime-top-item-inner" data-groupi='two'>最近3天</div>
            </div>
            <div class="datetime-top-item">
                <div class="datetime-top-item-inner" data-groupi='three'>最近一周</div>
            </div>
            <div class="datetime-top-item">
                <div class="datetime-top-item-inner" data-groupi='four'>最近一个月</div>
            </div>
        </div>
        <div class="datetime-middle">
            <div class="datetime-middle-left"><@module type='{{option.timeType}}'/></div>
            <div class='datetime-middle-arrow'><i class='fa fa-play'></i></div>
            <div class="datetime-middle-left"><@module type='{{option.timeType}}'/></div>
        </div>
        <div class="datetime-bottom">
            <div class='datetime-bottom-btn' data-groupi='timeclean'>取消</div>
            <div class='datetime-bottom-btn' data-groupi='timeok'>确定</div>
        </div>
    </div>
    <div class="datetime-mask" data-find="mask"></div>
</div>
<div class="statebarcon" data-group="bar">
    <div class="statebarcon-icon yets stateone" data-groupi="btn:current">
        <i class="fa fa-clock"></i>
        <div class="">进行中</div>
    </div>
    <div class="statebarcon-icon yets statetwo" data-groupi="btn:history">
        <i class="fa fa-circle-check"></i>
        <div class="">已完成</div>
    </div>
    <div class="statebarcon-icon statethree" data-groupi="btn:color">
        <i class="fa fa-flag"></i>
        <div class="">颜色</div>
    </div>
    <div class="statebarcon-icon statethree" data-groupi="btn:tag">
        <i class="fa fa-tag"></i>
        <div class="">标签</div>
    </div>
    <div class="statebarcon-icon statethree" data-groupi="btn:time">
        <i class="fa fa-watch"></i>
        <div class="">时间</div>
    </div>
    <div class="statebarcon-icon statethree" data-groupi="btn:search">
        <i class="fa fa-search"></i>
        <div class="">搜索</div>
    </div>
</div>
<!--[mainpage]-->
<div class="mainpage-list">
    <@module type="{{option.listType}}"/>
</div>
<!--[mainlist]-->
<div class="mainlist" data-group="item" @cache(data)>
    <div class="mainlist-content">
        <div class="mainlist-content-title">
            <%if(data._timeline){%>
            <%if(data._state!=="1"){%>
            <div class="mainlist-content-title-stateis" style='color:<%=data._timeline.color;%>'>
                <div class="mainlist-content-title-timeis" style='background-color:<%=data._timeline.color;%>'>
                    <div class="mainlist-content-title-timeis-icon">
                        <i class="fa fa-clock"></i>
                    </div>
                    <div class="mainlist-content-title-timeis-value"><%=data._timeline.date;%></div>
                </div>
            </div>
            <%}else{%>
            <div class="mainlist-content-title-state" style='color:<%=data._timeline.color;%>'>
                <i class="fa fa-circle-check"></i>
            </div>
            <%}%>
            <%}else{%>
            <div class="mainlist-content-title-state">
                <i class="fa fa-circle-check"></i>
            </div>
            <%}%>
            <div class="mainlist-content-title-desc"><%=data.name;%></div>
            <%if(data.updated=="1"){%>
            <div class="mainlist-content-title-new">
                <div></div>
            </div>
            <%}%>
        </div>
        <div class="mainlist-content-new"><%=data.comment||'没有历史信息';%></div>
        <div class="mainlist-content-icons">
            <%if(data._color){%>
            <div class="mainlist-content-icon">
                <div class="mainlist-content-icon-c<%=' a'+data._color;%>"></div>
            </div>
            <%}%>
            <%for(var i in data.pop){%>
            <div class="mainlist-content-icon">
                <div class="mainlist-content-icon-a"><i class="<%=data.pop[i].icon;%>"></i></div>
                <div class="mainlist-content-icon-b"><%=data.pop[i].value;%></div>
            </div>
            <%}%>
        </div>
    </div>
</div>
<!--[plusbtn]-->
<i class="fa fa-plus"></i>
<!--[pictab]-->
<div class="pictab-container" data-find="container" style="width:<%=100*data.length;%>%">
    <%for(var i in data){%>
    <div class="pictab-content" style="background-size: cover;background-position: center;background-repeat: no-repeat;background-image:url(<%=data[i].pic;%>);width:<%=100/data.length;%>%">
        <div class='pictab-content-inner'><%=(data[i].html||'');%></div>
    </div>
    <%}%>
</div>
<div class="pictab-titles">
    <%for(var i in data){%>
    <div class="pictab-title" data-find="title"></div>
    <%}%>
</div>
<!--[messagebox]-->
<div class="messagebox-bg"></div>
<div class="messagebox-box" style='width:<%=data.width;%>'>
    <div class="messagebox-box-title"><%=data.title;%></div>
    <div class="messagebox-box-content"><%=data.content;%></div>
    <div class="messagebox-box-btns" data-group='btns'>
        <%for(var i in data.btns){%>
        <div class="messagebox-box-btns-btn" data-groupi='btn:<%=data.btns[i].action;%>'><%=data.btns[i].name;%></div>
        <%}%>
    </div>
</div>