<!DOCTYPE html>
<html lang="zh-CN">
  <head>
      <title>便签 - 随时记 - 记了</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="/static/css/semantic.min.css">
	<link rel="stylesheet" href="/static/css/util.css">
	<script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/semantic.min.js"></script>
  </head>
  <body>
    <div class="ui fluid container" style="    margin: 0 auto;width: 800px;">
               <div class="overlay">
                    <div class="ui secondary menu">
                      <a class="item" href="/"><i class="home icon"></i>日记</a>
                      <a class="item addSticky"><i class="plus icon "></i>新便签</a>
                    </div>
                  </div>
        
                <div class="ui clearing divider"></div>
        
		<div class="ui three  cards ">
                    {{range .list}}
			<div href="#" class="ui card">
				<div class="content clicka">
				  <div class="description" memoid="{{.Id}}" id="row{{.Id}}" style="word-wrap: break-word;max-height: 98px;overflow: hidden;"  >{{html2str .Memo}}</div>
				</div>
				<div class="extra content">
				  <div class="right floated author">
					{{unixtime .Ltime "Y-m-d H:i:s"}}&nbsp;<i class="right floated trash icon cur-poi" memoid="{{.Id}}" ></i>
				  </div>
				</div>
			  </div>
                    {{end}}
		</div>
	</div>

	<div class="ui modal">
	  <!--<i class="close icon"></i>-->
	  <div class="image content">
		<div class="description">
                    <div class="ui form">
                        <div class="field ">
                          <textarea id="msg" style="min-height: 280px" ></textarea>
                        </div>
                    </div>
		</div>
	  </div>
	  <div class="actions">
		<div class="mini ui button approve ">关闭</div>
		<div class="mini ui green button postSticky">保存</div>
	  </div>
          
	</div>
      
        <div class="msg-body"  style="display:none;z-index: 1001;" id="tipBox" >
                <div class="ui small message"  id="tipBoxBg" style="opacity:0.9" >
                  <i class="close icon"></i>

                  <div class="header"><i class="notched circle loading icon" id="tipBoxIcon" ></i><span id="tipBoxTitle"></span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                </div>
        </div>
        
        <script src="/static/js/util.js"></script>
		<script src='/static/js/autosize.min.js'></script>
		<script>
			var id = 0;
			$('.cards .clicka').click(function(){
						var desc = $(this).find('.description');
						var str = $.trim(desc.text());
						id = desc.attr('memoid');
						$('#msg').val(str);
						$('.ui.modal').modal('show');
			});
                
			$('.card .trash').click(function(){
				var obj = this;
				if (confirm('确认删除吗？')) {
					var objDiv = $(obj).parents('.card:first');
					
					$.ajax({
						url : '/memo?id=' + $(obj).attr('memoid'),
						dataType : 'json',
						type : 'delete'						
					})
					.fail(function(data){
						tip(data.status + ":" + data.statusText); 
					})
					.done(function(data) {
						if (data.code != 0 ){
							objDiv.transition('swing down',function(){
								objDiv.remove(); 
							});
						}else{
							tip(data.msg);
						}
						
					});
				}
			 });
                
			$('.addSticky').click(function(){
				id = 0;
				$('#msg').val('');
				$('.ui.modal').modal('show');
			});
			
			$('.postSticky').click(function(){
				var str = $.trim($('#msg').val());
				if (str == '') {
					tip('请输入文字');
					return;
				}
				
				var obj = $(this);
				obj.addClass('loading');
				
				$.ajax({
					url : '/memo',
					timeout : 3000,
					dataType : 'json',
					type : 'post',
					data : {
						id : id,
						memo : str
					}
				})
				.always(function() { obj.removeClass('loading'); })
				.fail(function(data){
					tip(data.status + ":" + data.statusText); 
				})
				.done(function(data) {
					var isadd = id == 0;
					if (data.code == 1) {
						id = data.data;
					}
					tip(data.msg, data.code==1);
					if (isadd) {
						setTimeout(function(){
							location.reload();
						}, 2000);
					}else{
						$('#row' + id).text(str);
					}
					
				});
				
			});
			
			$('.overlay').visibility({
				type   : 'fixed',
				offset : 15
			});
			
			$(function(){
				autosize($('textarea'));
			});
	</script>
  </body>
</html>