{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="8">
                <input type="text" name="title" lay-verify="required" lay-reqText="请输入联系函名称"
                       placeholder="请输入联系函名称" class="layui-input" value="">
            </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>
        

        

    </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-color: #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'];

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

        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('<span style="color: white">请先完善文章内容</span>');

                return false;
            }
            if(a){
                let callback = function (e) {
                parent.layui.contactTable.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}';
            tool.post("/admin/project.contact/add", 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).remove();
                $("#fileBox").html(emptyCard);
                file_id = null;
            });
        })

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

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

                }

                tool.post("/admin/project.contact/add_file", {
                    'file': res.data.id,
                }, callback);


            }
        });


    }

</script>
{/block}