{extend name="common/base"/}

{block name="style"}
<style>
    .footer{
        display: none;
    }
    
    #fileBox li{
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    }

    .layui-table th{
        text-align: center !important;
        font-weight: 500;
    }

    .layui-anim dd{
        text-align: left;
    }

    .layui-th-gray{
        background-color: rgb(241, 241, 241);
    }

    .layui-table th{
        border-color: #e2e2e2
    }

    .fujian p{
        margin: 3px 0 5px 0;
		width: 11vw;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
    }
    
    .fujian{
        width: auto;
        overflow: auto;
        justify-content:flex-start;
        align-content: space-between;
        flex-direction: column-reverse;
        flex-wrap: wrap;
        display: flex;
        
    }
    .fujian li{
        padding: 0.5vw 0.8vw 0.5vw 0.8vw;
		white-space: nowrap;  
    	overflow: hidden;       
    	text-overflow: ellipsis;
    	display: inline-block;
		border-right: 1px solid #e2e2e2;
        float: left;
	 }
	 
    .layui-btn-group{
        display: flex;
        justify-content: center;
    }
     
</style>
{/block}

{block name="body"}
<form class="layui-form p-4">


    <h3 class="pb-3">新建报告</h3>
    <table class="layui-table layui-table-form">
        <tr>
            <th class="layui-th-gray-2"  style="background-color: rgb(241, 241, 241);">报告名称 <font style="color: red !important;">*</font></th>
            <th colspan="5">
                <input type="text" name="title" lay-verify="required" lay-reqText="请输入报告名称"
                       placeholder="请输入报告名称" class="layui-input" value="">
            </th>
            <th class="layui-th-gray">报告类型 <font style="color: red !important;">*</font></th>
            <th colspan="2">
                <select id="projectId" name="type" lay-verify="required">
                    <option value="">请选择报告类型</option>
                    <option value="0">初审报告</option>
                    <option value="1">对数报告</option>
                    <option value="2">审定报告</option>
                </select>
            </th>
        </tr>
        <tr>
            <th class="layui-th-gray" style="vertical-align:top;">报告内容 <font style="color: red !important;">*</font></th>
            <th colspan="8">
                <textarea name="content" placeholder="请输入内容" class="layui-textarea" id="container_content"
                          style="border:0;padding:0"></textarea>
            </th>
        </tr>
        <tr>
            <th class="layui-th-gray">一级审核人 <font style="color: red !important;">*</font></th>
            <th colspan="2">
                <select name="first" lay-verify="required" lay-reqText="请选择审批人">
                    <option value="">请选择审核人</option>
                    {volist name='people' id='vo'}
                    <option value="{$vo.id}">{$vo.nickname}</option>
                    {/volist}
                </select>
            </th>

            <th class="layui-th-gray">二级审核人</th>
            <th colspan="2">
                <select name="second">
                    <option value="">请选择审核人，可空</option>
                    {volist name='people' id='vo'}
                    <option value="{$vo.id}">{$vo.nickname}</option>
                    {/volist}
                </select>

            </th>

            <th class="layui-th-gray">三级审核人</th>
            <th colspan="2">
               <select name="third">
                   <option value="">请选择审核人，可空</option>
                   {volist name='people' id='vo'}
                   <option value="{$vo.id}">{$vo.nickname}</option>
                   {/volist}
               </select>
            </th>
        
        </tr>
        <tr>
            <th class="layui-th-gray">四级审核人</th>
            <th colspan="2">
                <select name="fourth" lay-reqText="请选择审批人">
                    <option value="">请选择审核人</option>
                    {volist name='people' id='vo'}
                    <option value="{$vo.id}">{$vo.nickname}</option>
                    {/volist}
                </select>
            </th>

            <th class="layui-th-gray">五级级审核人</th>
            <th colspan="2">
                <select name="fifth">
                    <option value="">请选择审核人，可空</option>
                    {volist name='people' id='vo'}
                    <option value="{$vo.id}">{$vo.nickname}</option>
                    {/volist}
                </select>

            </th>
        </tr>

    </table>
    <div class="pt-3">
        <input type="hidden" name="id" value=""/>
        <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>

<div class="layui-card border-y">
    <div class="layui-card-header" style="height:45px;border: 1px solid #e2e2e2;">
        <div class="layui-row">
            <div class="layui-col-md6">
                <strong>项目附件</strong>
            </div>
            <div class="layui-col-md6" style="text-align:right">
                <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" id="uploadBtn">上传附件</button>
            </div>
        </div>
    </div>
    <div class="layui-row p-2 fujian" id="fileBox">
            <div class="layui-data-none">暂无附件</div>
    </div>
</div>


{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
    const moduleInit = ['tool', 'tagpicker', 'tinymce', 'oaTool','employeepicker'];

    function gouguInit() {
        var form = layui.form, tool = layui.tool, oaTool = layui.oaTool,employeepicker = layui.employeepicker;

        var file_id = null;



        //编辑器初始化
        var editor = layui.tinymce;
        var edit = editor.render({
            selector: "#container_content",
            height: 500
        });

        let a = 1;
        //监听提交
        form.on('submit(webform)', function (data) {
            data.field.content = tinyMCE.editors['container_content'].getContent();
            if (data.field.content == '') {

                layer.msg('请先完善文章内容');

                return false;
            }

            if(a){
                let callback = function (e) {
                parent.layui.reportTable.reload();
                layer.msg(e.msg);
                if (e.code == 0) {
                    tool.tabRefresh(71);
                    tool.sideClose(1000);

                } a = 1
            }
            data.field.file = file_id;
            data.field.project_id = '{$project_id}';

            // console.log(data.field)
            tool.post("/admin/project.report/add_company", data.field, callback);
            }
            
            a = 0
            return false;
        });

        function fileCard(item){
            var host = window.location.host;
            var li = '';
            if(item.length>0){
                for(var a=0;a<item.length;a++){
                    let image = ['jpg','jpeg','png','gif'];
                    let doc = ['doc','docx','xls','xlsx','ppt','pptx','txt','pdf','zip','rar','7z'];
                    // let down = '<a href="'+item[a].filepath+'" target="_blank" class="layui-btn layui-btn-xs layui-btn-normal" download="'+item[a].name+'">下载</a>';
                    let down ='<a href="' + item[a]['filepath'] + '" target="_blank" class="layui-btn layui-btn-xs layui-btn-normal" download="' + item[a]['name'] + '">预览</a>';
                    // 判断元素是否在数组中
                    let path='/static/home/images/icon/file.png';
                    if (image.includes(item[a].fileext)) {
                        path=item[a].filepath;
                        down = '<span data-href="'+item[a].filepath+'" class="layui-btn layui-btn-xs layui-btn-normal file-view-img">预览</span>';
                    } else if (doc.includes(item[a].fileext)){
                        path='/static/home/images/icon/'+item[a].fileext+'.png';
                    }

                    if(item[a].fileext == 'pdf'){
                        down = '<span data-href="'+item[a].filepath+'" class="layui-btn layui-btn-xs layui-btn-normal file-view-pdf">预览</span>';
                    }
                    li += '<li id="'+item[a].id+'" data-id="'+item[a].id+'" data-title="'+item[a].name+'" data-ext="'+item[a].fileext+'"><img src="'+path+'" alt="'+item[a].filename+
                        '" style="object-fit: contain;" class="file-item"><p title="'+item[a].name+'">'+item[a].name+
                        '</p><div class="layui-btn-group">'+ down +
                        '<span class="layui-btn layui-btn-xs layui-btn-danger file-del">删除</span></div></li>';
                }

                return li;
            }
        }

        var emptyCard = ' <div class="layui-data-none">暂无附件</div>'
        $('#fileBox').on('click','.file-del',function(){
            layer.confirm('确定要删除该文件吗？', { icon: 3, title: '提示' }, function (index) {
                layer.closeAll();
                file_id = null;
                
                $('#' + file_id).remove();
                $("#fileBox").html(emptyCard);
                let callback = function (e) {
                    layer.closeAll();
                    file_id = null;
                    layer.msg(e.msg);
                    $('#' + file_id).remove();
                    $("#fileBox").html(emptyCard);
                }
                // tool.delete("/admin/project.report/delete_file", {id:file_id}, callback);
            });
        })

        oaTool.addFile({
            type: 1,
            isSave: true,
            ajaxDelete: function (file_id) {
                let callback = function (e) {
                    layer.msg(e.msg);
                    var emptyCard = ' <div class="layui-data-none">暂无附件</div>'
                    file_id = null;
                    if (e.code == 0) {
                        $('#fileItem' + file_id).remove();
                        $("#fileBox").html(emptyCard);
                    }
                }
                tool.delete("/admin/project.report/delete_file", {id: file_id}, callback);
            },
            ajaxSave: function (res) {


                let callback = function (e) {
                    layer.msg('上传成功');
                    $("#fileBox").html(fileCard(e));
                    file_id = res.data.id

                }
                 tool.post("/admin/project.report/add_file_company", {

                    'file': res.data.id,
                }, callback);


            }
        });

        
        

    }

</script>
{/block}