{extend name="Public/base" /}

{block name="js"}
<script src="__PUBLIC__/js/jquery-3.2.1.min.js"></script>
<script src="__PUBLIC__/item/layui.js"></script>
{/block}

{block name="css"}
<link rel="stylesheet" href="__PUBLIC__/css/reset.css">
<link rel="stylesheet" href="__PUBLIC__/item/css/layui.css">

{/block}

{block name="style"}

    *{box-sizing:border-box;}
    .pk_bd{
        width:100%;
        height:auto;
        padding:15px;
        display:inline-block;
    }
    .pk_top{
        width:100%;
        height:auto;
        padding:10px 0;
    }
    .pk_search{
        width:250px;
        height:30px;
        border:1px solid #d9d9d9;
        font-size:12px;
        line-height:30px;
        padding-left:5px;
        color:#333;
        border-radius:3px;
    }
    .pk_search_in1{
        width:calc(100% - 30px);
        height:28px;
        font-size:12px;
        line-height:28px;
        color:#333;
        float:left;
        border:none;
    }
    .pk_search_in2{
        width:28px;
        height:28px;
        background:url("/img/sp_search.png") no-repeat center center;
        float:left;
        border:none;
        cursor:pointer;
    }
    .pk_con{
        width:100%;
        height:auto;
        padding:10px 0;
    }
    .pkd{
        width:100%;
        height:auto;
        border-bottom:1px solid #ededed;
        margin-bottom:15px;
        padding-bottom:15px;
    }
    .pk_title{
        width:100%;
        height:auto;
        display:flex;
        justify-content: space-between;
    }
    .pk_title span{
        width:auto;
        height:20px;
        font-size:14px;
        line-height:20px;
        color:#333;
    }
    .pk_title span small{
        color:#999;
    }
    .pk_title strong{
        width:auto;
        height:20px;
        font-size:14px;
        line-height:20px;
        color:#999;
        font-weight:normal;
        cursor: default;
        margin-right: 20px;
    }
    .pk_box_con{
        width:100%;
        height:auto;
        display:flex;
        justify-content:flex-start;
        flex-wrap :wrap;
        margin-top:10px;
    }
    .pk_box{
        width:200px;
        height:auto;
        padding:16px;
        display:block;
        border:1px solid #ededed;
        border-radius:3px;
        margin-right:10px;
        margin-bottom:5px;
        margin-top:5px;
    }
    .pk_box:hover{
        border:1px solid #3e9cfa;
    }
    .pk_box img{
        width:36px;
        height:36px;
    }
    .pk_box span{
        width:110px;
        height:36px;
        line-height:36px;
        color:#666;
        padding-left:10px;
        overflow:hidden;
    }

    .pk_con .starky{
        float: right;
        height: 20px;
        width: 20px;
        margin-top: 7px;
        cursor:pointer;
    }

    .pk_con .starsy{
        float: right;
        height: 20px;
        width: 20px;
        margin-top: 7px;
    }

{/block}

{block name="main"}

<div class="if_wrap">
<div class="pk_bd">
	<div class="pk_top">
		<!--<div class="pk_search">-->
			<!--<input class="pk_search_in1" type="text" placeholder="请输入要发起的审批单" />-->
			<!--<button class="pk_search_in2" type="submit">&nbsp;</button>-->
		<!--</div>-->
	</div>
	<div class="pk_con">

        <!--收藏-->
        <div class="pkd" id="enshrine" {if condition="count($enshrine) eq 0"} style="display: none;" {/if}>
            <div class="pk_title">
                <span>我的收藏(<small id="enshrine_num">{$enshrine|count}</small>)</span>
                <strong class="close">收起</strong>
            </div>
            <div class="pk_box_con">
                {volist name="enshrine" id='vo'}
                <div class="pk_box cancel_{$vo.form_id}" data-id="{$vo.form_id}">
                    <a href="/oa/Form/choose_one_write?form_id={$vo.form_id}" style="width: 150px;"><img src="{$vo.logo}"><span>{$vo.name}</span></a>
                    <img src="__PUBLIC__/img/starsy.png" class="starsy" id="cancel_{$vo.form_id}">
                </div>
                {/volist}
            </div>
        </div>


        <!--审批分类-->
        {volist name="type" id="vo"}
		<div class="pkd">
			<div class="pk_title">
                <span>{$vo.type_name}<small>({$vo.form|count})</small></span>
                <strong class="close">收起</strong>
            </div>
			<div class="pk_box_con">
                {volist name="$vo.form" id='form'}
                <div class="pk_box" data-id="{$form.id}">
                    <a href="/oa/Form/choose_one_write?form_id={$form.id}" style="width: 150px;"><img src="{$form.logo}"><span>{$form.name}</span></a>
                    {if condition="in_array($form.id,$enshrine_ids)"}
                    <img src="__PUBLIC__/img/starsy.png" class="starsy" id="img_{$form.id}">
                    {else}
                    <img src="__PUBLIC__/img/starky.png" class="starky" id="img_{$form.id}">
                    {/if}
                </div>
                {/volist}
			</div>
		</div>
        {/volist}


        <!--其他-->
        {if condition="count($list) gt 0"}
        <div class="pkd">
            <div class="pk_title">
                <span>其他<small>({$list|count})</small></span>
                <strong class="close">收起</strong>
            </div>
            <div class="pk_box_con">
                {volist name="$list" id='li'}
                <div class="pk_box" data-id="{$li.id}">
                    <a href="/oa/Form/choose_one_write?form_id={$li.id}"><img src="{$li.logo}"><span>{$li.name}</span></a>
                    {if condition="in_array($li.id,$enshrine_ids)"}
                    <img src="__PUBLIC__/img/starsy.png" class="starsy" id="img_{$li.id}">
                    {else}
                    <img src="__PUBLIC__/img/starky.png" class="starky" id="img_{$li.id}">
                    {/if}
                </div>
                {/volist}
            </div>
        </div>
        {/if}

	</div>
</div>
</div>
<script type="text/javascript">


    //提示点击收藏
    $('body').delegate('.starky','mouseover',function(){
        var id = $(this).attr('id');
        layer.tips('点击收藏', '#'+id, {
            tips: [3, 'noto'],time:1000//还可配置颜色
        });
    });

    //提示点击取消收藏
    $('body').delegate('.starsy','mouseover',function(){
        var id = $(this).attr('id');
        layer.tips('点击取消收藏', '#'+id, {
            tips: [3, 'noto'],time:1000//还可配置颜色
        });
    });

    //收藏
    $('body').delegate('.starky','click',function(){
        var id = $(this).parents('.pk_box').attr('data-id');
        $.ajax({
            type:'post',
            url:'{:url("enshrineForm")}',
            data:{id:id},
            success:function(res){
                if(res.code == 200){
                    $('#enshrine').css('display','inline-block');
                    $('#enshrine_num').html(res.data.length);
                    var str = '';
                    $.each(res.data,function(key,val){
                        str +='<div class="pk_box cancel_'+val.form_id+'" data-id="'+val.form_id+'">' +
                        '<a href="/oa/Form/choose_one_write?form_id='+val.form_id+'" style="width: 150px;"><img src="'+val.logo+'"><span>'+val.name+'</span></a> ' +
                        '<img src="__PUBLIC__/img/starsy.png" class="starsy" id="cancel_'+val.form_id+'">' +
                        '</div>';
                    });
                    //刷新收藏栏
                    $('#enshrine').find('.pk_box_con').html(str);
                    //改变下方分类中星星状态
                    $('#img_'+id).attr('src','__PUBLIC__/img/starsy.png');
                    $('#img_'+id).removeClass('starky').addClass('starsy');
                }
            }
        })
    });

    //取消收藏
    $('body').delegate('.starsy','click',function(){
        var id = $(this).parents('.pk_box').attr('data-id');
        console.log(id);
        $.ajax({
            type:'post',
            url:'{:url("cancelEnshrine")}',
            data:{id:id},
            success:function(res){
                if(res.code == 200){
                    //移除收藏栏内的模板
                    $('.cancel_'+id).remove();
                    //改变下方分类中星星状态
                    $('#img_'+id).attr('src','__PUBLIC__/img/starky.png');
                    $('#img_'+id).removeClass('starsy').addClass('starky');

                    //改变收藏模板数
                    $('#enshrine_num').html(parseInt($('#enshrine_num').html())-1);
                }
            }
        })
    });

    //收起
    $('body').delegate('.close','click',function(){

        if($(this).html()=='收起'){
            $(this).html('展开');
            $(this).parents('.pkd').find('.pk_box_con').css("display",'none');
        }else{
            $(this).html('收起');
            $(this).parents('.pkd').find('.pk_box_con').css("display","");
        }

    })




</script>
{/block}