{extend name="Public/base" /}
{block name="js"}
<script>
    $(function(){
        $(".nul_bli").eq(5).find(".navb").addClass("active");
    });
</script>

{/block}

{block name="css"}
<link rel="stylesheet" href="__PUBLIC__/item2/css/layui.css?v={$Think.const.APP_VERSION}">
<link rel="stylesheet" href="__PUBLIC__/item2/css/layui-modify.css?v={$Think.const.APP_VERSION}">
<link rel="stylesheet" href="__PUBLIC__/css/customer.css?v={$Think.const.APP_VERSION}">
<link rel="stylesheet" href="__PUBLIC__/css/set.css?v={$Think.const.APP_VERSION}">
<link rel="stylesheet" href="__PUBLIC__/css2/theme.css?v={$Think.const.APP_VERSION}">
<link rel="stylesheet" href="__PUBLIC__/css2/archiveupload.css?v={$Think.const.APP_VERSION}">
<style>

    .layui-form-label{
        width: 150px;
    }


</style>
{/block}
{block name="main"}
<div class="if_wrap">
<div class="cus-con" id="files">

    <div id="fanhui" style="float: left;"><a>返回员工详情</a></div>
    <div class="form-1K3Es" id="up-files" style="width: 1115px;margin:auto;margin-top:35px;display: block!important;">
        <h3 style="margin-top: 5px;">{$staff_name} {$type_name}</h3>
        <div class="attach_type-uzPJM all-file-play">
            <div class="upload_warp-RtNzK">
                <div class="ivu-upload upload-1PXPi">
                    <div class="ivu-upload ivu-upload-drag">
                        <input multiple="multiple" class="ivu-upload-input" type="file"/>

                        <div class="upload_box-35idc" style="height: 174px;">
                            <div id="all-file-up">
                                <i class="layui-icon" style="color: rgb(0, 150, 136);"></i>
                                <p>点击上传，或将文件拖拽到此处</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {volist name='data' id='vo'}
            <div class="item-3EzB2 layer-photos-demo">
                <span class="attach_mask-1wnsW">
                    <i class="fa fa-eye yl" ></i>
                    <div>预览</div>
                    <!--<img src="{$vo.file_path}" layer-src="{$vo.file_path}" alt="{$vo.file_name}" style="width:218px;height:128px;"/>-->
                </span>
                <span>
                   <div class="img-2hHJh">
                       <span class="uploadImgView">
                           <img src="{$vo.file_path}" layer-src="{$vo.file_path}" alt="{$vo.file_name}" />
                           <!--<img src="{$vo.file_path}"/>-->
                       </span>
                   </div>
                   <div class="attach_name--IHoW">
                       <span class="file_name" title="{$vo.file_name}">{$vo.file_name}</span>

                       <div class="ivu-tooltip tooltip-3iJxJ">
                           <div class="ivu-tooltip-rel">
                               <div class="icon-BwxYy del_file" data-id="{$vo.id}" style="margin-top: 10px;">
                                   <i class="fa fa-trash-o"></i>
                               </div>
                           </div>
                       </div>
                       <div class="ivu-tooltip tooltip-3iJxJ">
                           <div class="ivu-tooltip-rel">
                               <div class="icon-BwxYy edit_file" data-id="{$vo.id}">
                                   <i class="fa fa-edit"  style="margin-top: 11px;"></i>
                               </div>
                           </div>
                       </div>
                   </div>
                </span>
            </div>
            {/volist}

        </div>
    </div>

</div>
</div>

<div id="file-info" style="display: none;padding:50px 30px;">

    <div style="min-width: 300px;">
        <div class="layui-inline" style="width: 60%;">
            <input type="hidden" id="staffid">
            <label class="layui-form-label"  style="width: 100px;">文件名称：</label>
            <div class="layui-input-block " style="width: 220px!important;">
                <input type="text" class="layui-input" id="file_name">
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="__PUBLIC__/js/jquery.min.js"></script>
<script>
    var staff_id = "{$staffid}";
    var the_file_type = "{$type}";
    var funs = "{$funs}";

    layui.use(['form','laydate','element','upload'], function(){
        var form = layui.form;
        var layer = layui.layer;
        var upload = layui.upload;


        //预览图片
        $("#files").on("click",".attach_mask-1wnsW",function(){
            var id = $(this).parents('.layer-photos-demo').find('.edit_file').attr('data-id');
            console.log(id);
            $.getJSON('/oa/Dept/previewFiles?staffid='+staff_id+'&type='+the_file_type+'&id='+id, function(json){
                layer.photos({photos:json, shift: 1,anim: 5,closeBtn:1})
            });
        });

        //返回详情
        $('#fanhui').click(function(){
            location.href = '/oa/Dept/'+funs+'?staffid='+staff_id+'&tab=files';
        });

        //档案附件拖拽上传
        upload.render({
            elem: '#all-file-up'
            ,url: '/oa/Dept/uploadImg'
            ,data:{staffid:staff_id,type:the_file_type}
            ,before: function(obj){
                obj.preview(function(index, file, result){

                });
            }
            , done: function(res){
                var photo_str2 = '<div class="item-3EzB2 layer-photos-demo"><span class="attach_mask-1wnsW"><i class="fa fa-eye yl" ></i> <div>预览</div></span><span><div class="img-2hHJh"><span class="uploadImgView"><img src="'+res.data.file_path+'"/></span></div><div class="attach_name--IHoW"><span class="file_name" title="'+res.data.file_name+'">'+res.data.file_name+'</span><div class="ivu-tooltip tooltip-3iJxJ"><div class="ivu-tooltip-rel"><div class="icon-BwxYy del_file" data-id="'+res.data.id+'" style="margin-top: 10px;"><i class="fa fa-trash-o"></i></div></div></div><div class="ivu-tooltip tooltip-3iJxJ"><div class="ivu-tooltip-rel"><div class="icon-BwxYy edit_file" data-id="'+res.data.id+'"><i class="fa fa-edit"  style="margin-top: 11px;"></i></div></div></div></div></span></div>';

                $('.all-file-play').append(photo_str2)
            }
        });


        //编辑附件名称
        $('#files').on('click','.edit_file',function(){
            var the_is = $(this);
            var file_id = $(this).attr('data-id');
            var file_name = $(this).parents('.layer-photos-demo').find('.file_name').html();
            var se = file_name.lastIndexOf('.');
            var name = file_name.substr(0,se);
            var suffix = file_name.substr(se);
            $('#file_name').val(name);

            layer.open({
                title: '修改文件名',
                type: 1,
                skin: 'layui-layer-rim',
                area: ['420px', '250px'],
                content: $('#file-info'),
                btn:['确定','取消'],
                yes:function(){
                    if(!$('#file_name').val()){
                        layer.alert('请输入文件名');
                        return false;
                    }
                    var new_name = $('#file_name').val()+suffix;
                    $.ajax({
                        type:'post',
                        url:'/oa/Dept/editStaffFile',
                        data:'id='+file_id+'&file_name='+new_name+'&type=edit',
                        success:function(result){
                            if(result.code==200){
                                layer.closeAll();
                                the_is.parents('.layer-photos-demo').find('.file_name').html(new_name);
                            }
                        }
                    });
                }
            });
        });

        //删除附件
        $('#files').on('click','.del_file',function(){
            var del_this= $(this);
            var file_id = $(this).attr('data-id');
            layer.confirm('你确定删除当前附件吗？', {
                btn: ['确定','取消'] //按钮
            }, function(index){
                $.ajax({
                    type:'post',
                    url:'/oa/Dept/editStaffFile',
                    data:'id='+file_id+'&type=del',
                    success:function(result){
                        if(result.code==200){
                            del_this.parents(".layer-photos-demo").remove();
                        }
                        layer.closeAll();
                    }
                });
            });
        });

    });

</script>
{/block}