<?php
$userinfo = getUserInfo($MYID);
$rqorgid = r('orgid');
?>
<!DOCTYPE html>
<html>
	<head>
		<? require_once "header.html"; ?>
		<script type="text/javascript" src="scripts/colpick.js?_<?=filemtime('scripts/colpick.js')?>"></script>
<!--        <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>-->
		<link type="text/css" href="css/colpick.css?_<?=filemtime('css/colpick.css')?>" rel="stylesheet" />
	</head>
	<body>
    	<? require_once "leftbar.html"; ?>
    	<? require_once "projectheader.html"; ?>

<!--        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->
        <link type="text/css" href="css/bootstrap.min.css?_<?=filemtime('css/bootstrap.min.css')?>" rel="stylesheet" />

        <style>
            .h1_title{
                font-size: 25px;
                margin-left: 10px;
                margin-top: 10px;
            }
            a.star_top{
                color: red;
            }
            .right_ico{
                margin: 0px 3px;
            }
            .board_star_num{
                font-size: 13px;
                /*margin-right: 10px;*/
                /*margin-top: 5px;*/
                display: inline-block;
                width: 77px;
            }
            .main_board_act{
                display: none;
            }
            .star_board_boardmain{
                height: 100px;
            }
            .main_board_progress{
                margin-top: 5px;
            }



        </style>
        <script type="text/tmpl" id="tmpl-board" >
			<div class="boardtmpl canchangesort">
				<%
					var bgcolor = "";
					var scolor = localStorage['boardColor1_'+ data['_id']];
					if(scolor){
						if(scolor.indexOf('base64')!=-1){
							bgcolor = "background-image:url("+scolor+");background-size:100%";
						}else{
							bgcolor = "background-color:"+scolor;
						}
					}
					var star_icon = 'fa-star-o';

				%>
				<div class="boardmain" data-id="<%=data['_id']%>" data-title="<%=data['title']%>" style="position: relative;<%=bgcolor%>">
					<a href="./?app=list&boardid=<%=data['_id']%>"><%=data['title']%></a>
					<%if(MYINFO && MYINFO.extData && MYINFO.extData.admin=='all'){%>
						<span style="font-size:12px;font-weight: normal;"><%=(MYINFO&&MYINFO.extData&&MYINFO.extData.admin?data['orgname']:"")%></span>
					<%}%>
					<!--div style="float:right"><a class="fa <%=star_icon%> js_star_board" href="javascript:;;;" title="星标看板"></a></div-->
					<div class="main_board_act" style="position: absolute; bottom: 0; text-align: right; width: 94%; font-weight: normal;">
						<a class="fa fa-trash-o archivedBoard" href="javascript:;;;" title="归档该看板"></a>
						<a class="fa fa-adjust colorbox" href="javascript:;;;" title="修改背景色"></a>
                        <a class="fa fa-sign-out jsQuitBoard" href="javascript:;;;" title="退出看板"></a>
						
						<!--<img src="img/getcolor.png" class="colorbox" style="width: 15px;" />-->
					</div>
				</div>
			</div>
		</script>

        <!--   星标看板     -->
        <script type="text/tmpl" id="tmpl-board_star" >
			<div class="boardtmpl star_canchangesort board_star">
				<%
					var bgcolor = "";
					var scolor = localStorage['boardColor1_'+ data['_id']];
					if(scolor){
						if(scolor.indexOf('base64')!=-1){
							bgcolor = "background-image:url("+scolor+");background-size:100%";
						}else{
							bgcolor = "background-color:"+scolor;
						}
					}

					var star_icon = 'fa-star';

					var progress_class = 'progress-bar-danger';

					var progress_num = (data['complete_card_num'] / data['all_card_num'] * 100).toFixed(2);
					if(data['remain_card_num'] <= 0 || data['all_card_num'] <= 0){
					    progress_num = 0;
					}
                    if (progress_num >= 80){
                        progress_class = 'progress-bar-success';
                    }else if(progress_num >= 50){
                        progress_class = 'progress-bar-warning';
                    }

                    var showTopbtnClass = '';
                    var flagClass = '';
                    if (data['showTopbtn']){
                        flagClass = 'fa-flag';
                        showTopbtnClass = 'fa-caret-square-o-up';
                    }
                    var boardRightHtml = '';
                    if(data['showTopbtn']){
                        boardRightHtml += '<a class="right_ico fa fa-caret-square-o-up jsTopBoard top_board_hide" href="javascript:;;;" title="置顶"> </a>';
                    }

                    if(data['isTop']){
                        boardRightHtml += '<a class="right_ico fa fa-flag star_top" href="javascript:;;;" title="重要看板"> </a>';
                        bgcolor = "background-color: #0a009fa3";
                    }else{
                        if(data['isStar']){
                            boardRightHtml += '<a class="right_ico fa fa-star js_star_board" href="javascript:;;;" title="星标看板"> </a>';
                        }
                    }


				%>
				<div class="boardmain star_board_boardmain" data-id="<%=data['_id']%>" data-title="<%=data['title']%>" style="position: relative;<%=bgcolor%>">
					<a href="./?app=list&boardid=<%=data['_id']%>"><%=data['title']%></a>
					<div style="float:right">
<!--					    <a class="fa <%=showTopbtnClass%> jsTopBoard top_board_hide" href="javascript:;;;" title="置顶"></a>-->
<!--					    <a class="fa <%=star_icon%> js_star_board" href="javascript:;;;" title="星标看板"></a>-->
					    <%=boardRightHtml%>

					</div>
					<div style="">
					    <span class='board_star_num'>已完成: <%=data['complete_card_num']%></span>
					    <span class='board_star_num'>剩余单: <%=data['remain_card_num']%></span>
					    <span class='board_star_num'>总单数: <%=data['all_card_num']%></span>
					</div>
					<div class="main_board_progress">
                        <div class="progress">
                          <div class="progress-bar <%=progress_class%> progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="min-width: 3em; width: <%=progress_num%>%;">
                            <%=progress_num%>%
                          </div>
                        </div>
					</div>
					<div class="main_board_act" style="position: absolute; bottom: 0; text-align: right; width: 94%; font-weight: normal;">
						<a class="fa fa-trash-o archivedBoard" href="javascript:;;;" title="归档该看板"></a>
<!--						<a class="fa fa-adjust colorbox" href="javascript:;;;" title="修改背景色"></a>-->
                        <a class="fa fa-sign-out jsQuitBoard" href="javascript:;;;" title="退出看板"></a>

						<!--<img src="img/getcolor.png" class="colorbox" style="width: 15px;" />-->
					</div>
				</div>
			</div>
		</script>

		<script type="text/tmpl" id="tmpl-createproject" >
			<? require_once "createproject.html"; ?>
		</script>
        
		<div id="wrap">

<!--            <div class="" style="max-width: 1200px; padding-top: 5px;; margin:auto">
                <h1 class="h1_title boards-page-board-section-header-name"> 重要看板</h1>
            </div>
            <div id="main_top" style="max-width: 1200px; padding-top: 5px;; margin:auto">

            </div>-->

<!--            <div class="" style="max-width: 1200px; padding-top: 5px;; margin:auto;clear: both"></div>-->


            <!--div class="" style="max-width: 1200px; padding-top: 5px;; margin:auto">
                <h1 class="h1_title boards-page-board-section-header-name"> 星标看板</h1>
            </div>
            <div id="main_star_1" style="max-width: 1200px; padding-top: 5px;; margin:auto">
                <div id="main_star_top" style="max-width: 1200px; padding-top: 5px;; margin:auto">

                </div>
                <div id="main_star" style="max-width: 1200px; margin:auto">

                </div>

            </div-->

            <div class="" style="max-width: 1200px; padding-top: 5px;; margin:auto;clear: both"></div>

            <div class="" style="max-width: 1200px; padding-top: 5px;; margin:auto">
                <h1 class="h1_title boards-page-board-section-header-name" style=";width:120px;display:inline-block"> 项目看板</h1>
				
				<?php
				if($userinfo && $userinfo['extData'] && $userinfo['extData']['admin']==='all'){
					$orgs = getorgs();
				?>
				<span>
					<select style="padding:5px;" id="selectorg">
						<option value="">切换组织</option>
						<? foreach($orgs as $orgid=>$orgname){?>
						<option value="<?=$orgid?>"><?=$orgname?></option>
						<? } ?>
					</select>
				</span>
				<?php
				}
				?>
            </div>
            <div id="main" style="max-width: 1200px; padding-top: 5px;; margin:auto"></div>



		</div>
	</body>
    
    <script>
	var rqorgid="<?=$rqorgid?>";
	var sortData = {};
	if(localStorage.boardSortData){
		try{
			sortData = JSON.parse(localStorage.boardSortData);
		}catch(e){}
	}

	function initBoard(){
		getboards(function(json){
			DATA.boards = json;
			fmtBoards();

		},rqorgid);
	}
	
	function bindBoardSort(){
		try{
			$('#main').sortable('destory');
		}catch(e){}
		
		var lastSortCard;
		$('#main').sortable({
			connectWith: [".canchangesort"],
			
			distance: 15,
			tolerance:'pointer',
			opacity:0.8,
			revert:100,
			helper:'clone',
			appendTo:'body',
			start : function(event, ui){
				
			},
			stop: function(event, ui){
				sortData = {};
				$('.canchangesort').each(function(index){
					var boardid = $(this).find('.boardmain').data('id');
					sortData[boardid] = index;
				});
				localStorage.boardSortData = JSON.stringify(sortData);
			},
			
		}).disableSelection();
	}

	function fmtBoards(){
		boards = [];
		for(var bid in DATA.boards){
			DATA.boards[bid].sort = sortData[bid] || 0;
			boards.push( DATA.boards[bid] );
		}
		boards.sort(function(a,b){
			return a.sort - b.sort;
		});

        console.log('fmtBoards',boards);

		fill('#tmpl-board', boards ,'#main');
		$('#main').prepend('<div class="boardtmpl">\
			<div class="boardmain" style="background-color:#999;text-align: center;line-height: 50px;">\
				<a href="javascript:;" class="addprojecthref">新建看板</a>\
			</div>\
		</div><div class="boardtmpl">\
			<div class="boardmain" style="text-align: center;line-height: 50px;">\
				<a href="./?app=mylists" class="tomylists">与我相关</a>\
			</div>\
		</div>');
		
		bindBoardSort();
		//选色器
		$('.colorbox').colpick({
			onChange:function(hsb,hex,rgb,el,bySetColor) {
				//$(el).css('border-color','#'+hex);
				var b = $(el).parents('.boardmain');
				var id = b.data('id');
				
				b.css('background-color','#'+hex);
				localStorage['boardColor_'+ id] = '#'+hex;
				//console.log(hex);
			},
			onSubmit:function(hsb,hex,rgb,el) {
				$(el).colpickHide();
			}
		});
		
		//粘贴背景图片
		$('.boardmain').pasteImageReader(function(results){
			var id = $(this).data('id');
			console.log(id);
			localStorage['boardColor_'+ id] = results.dataURL;
			fmtBoards();
		});
	}
	
	//创建看板
	$('body').on('click','.addprojecthref',function(e){
		
		$('#createproject').remove();
		var html = T( $('#tmpl-createproject').html() , {} );
		$('body').append( html );
		$('#createproject').css({
			'left':e.clientX+5,
			'top':e.clientY+10
		});

		return false;
	});
	//创建submit
	$('body').on('click','.addboard_btnsubmit',function(e){
		var val = $('.addboard_text').val();
		if(val.length == 0)return;
		doSubmitAddboard(val,function(json){
			$('.close_createproject').click();
		});
	});
	
	$('#selectorg').on('change',function(e){
		var orgid = $(this).val();
		console.log(orgid);
		location.href="./?app=board&orgid="+orgid;
	});
	$('#selectorg').val("<?=$rqorgid?>");

	
	//创建界面X
	$('body').on('click','.close_createproject',function(e){
		$('#createproject').remove();
	});
	$('#main').click(function(){
		$('#createproject').remove();
	});
	
	//归档看板
	$('body').on('click','.archivedBoard',function(e){
		var title = $(this).parents('.boardmain').data('title');
		var id = $(this).parents('.boardmain').data('id');
		var code = prompt('输入口令归档看板['+ title +']');
		if(code==null)return;
		
		if(code == 'legucc'){
			doArchivedboard(id);
		}else{
			alert('口令错误');
		}
	});

	// 退出看板
    $('body').on('click','.jsQuitBoard',function(e){
        var title = $(this).parents('.boardmain').data('title');
        var boardid = $(this).parents('.boardmain').data('id');
        if(confirm('你确定退出该项目吗？')){
			$.get('./?app=api&apiact=quit_board&boardid='+ boardid , function(text){
				initBoard();
			});
        }
    });

    // 置顶看板
    $('body').on('click','.jsTopBoard',function(e){
        var title = $(this).parents('.boardmain').data('title');
        var id = $(this).parents('.boardmain').data('id');
        var isTop = confirm('你确定置顶该项目吗？');

        if(isTop){
            // doArchivedboard(id);
            var bid = $(this).parents('.boardmain').data('id');
            var url = pyapi_host + '/v2/main_board/toggle_top_board?uid=' + MYID + '&bid=' + bid;
            console.log('quit_board uid',MYID, ' bid ', bid );
            $.get(url,function (data) {
                initBoard();
            });

        }
    });

	// 星标看板
    $('body').on('click','.js_star_board',function(e){
        // var title = $(this).parents('.boardmain').data('title');
        var bid = $(this).parents('.boardmain').data('id');
        var url = pyapi_host + '/v2/main_board/toggle_star?uid=' + MYID + '&bid=' + bid;
        $.get(url,function (data) {
            initBoard();
        });
    });
    $('body').on('mouseenter','.boardmain',function (e) {
        $(this).find('.main_board_act').show();
    });
    $('body').on('mouseleave','.boardmain',function (e) {
        $(this).find('.main_board_act').hide();
    });

	EVENT.on('addboard',function(data){
		initBoard();
	});
	EVENT.on('archivedboard',function(data){
		initBoard();
	});
		
	initBoard();
	</script>
</html>


