{extend name="common/base"/}
{block name="style"}
<style>
    .fujian {
        display: flex;
    }

    .fujianimg {
        height: 4vh;
    }

    .fujianimg img {

    }

    .form-title {
        background-color: rgb(241, 241, 241);
        color: rgb(95, 95, 95);
        border-color: rgb(241, 241, 241);
        text-align: center;
        border-color: #e2e2e2;
    }

    .filelist{
        width: 100%;
        overflow: auto;
        justify-content:flex-start;
        align-content: space-between;
        flex-direction: column-reverse;
        flex-wrap: wrap;
        display: flex;
        
    }
    .filelist 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;
        font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
	 }


	.filelist p{
		margin: 3px 0 5px 0;
		width: 11vw;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
        font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
	}
	
	#fileBox li{
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    }

    #filesBox2 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;
        font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
    }

    .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
    }
    
    .footer{
        display: none;
     }

     .forleft {
        text-align: left !important;
    }
</style>
{/block}

<!-- 主体 -->
{block name="body"}
<form class="layui-form p-4">
    <div class="p-3">

        <table class="layui-hide" id="appropriation_add" lay-filter="appropriation_add"></table>

        <table class="layui-table layui-table-form">
            <tr>
                <th class="layui-th-gray" style="background-color: rgb(241, 241, 241);">委托单位</th>
                <th colspan="5">
                    <input type="text" name="entrust_unit_name" lay-verify="required" lay-reqText="请完善项目名称"
                           value=""
                           autocomplete="off" placeholder="选择项目后自动填入" class="layui-input" readonly>
                    <input type="hidden" name="entrust_unit" value="">
                </th>
                
                <th class="layui-th-gray">是否开票</th>
                <th colspan="2">
                    <input type="radio" name="invoice_status" value="1" title="是" >
                    <input type="radio" name="invoice_status" value="0" title="否" >

                </th>
            </tr>

            <tr>

                <th class="layui-th-gray">发票编号</th>
                <th colspan="2">
                    <input type="text" name="invoicing_num"   autocomplete="off" placeholder="请输入发票编号" class="layui-input" value="">
                </th>

                <th class="layui-th-gray">发票类型</th>
                <th colspan="2">
                    <select name="invoice_type" lay-verify="required">
                        <option value="0"></option>
                        <option value="1" >普通发票</option>
                        <option value="2" >专用发票</option>
                        <option value="3" >电子普票</option>
                        <option value="4" >电子专票</option>
                    </select>
                </th>

                <th class="layui-th-gray">发票金额</th>
                <th colspan="2">
                    <input type="text" name="invoicing_amount"  autocomplete="off" placeholder="请输入发票金额" class="layui-input" value="">
                </th>
            </tr>

            <tr>
                <th class="layui-th-gray">一级审核人 <font style="color: red !important;">*</font></th>
                <th colspan="2">
                    <input type="text" name="first_name" lay-verify="required" lay-reqText="请输入一级审核人" readonly
                           placeholder="请输入一级审核人" class="layui-input picker-one" value="">
                    <input type="hidden" name="first" value="">
                </th>

                <th class="layui-th-gray">二级审核人</th>
                <th colspan="2">
                    <input type="text" name="second_name" placeholder="请输入二级审核人,可空" readonly class="layui-input picker-one" value="">
                    <input type="hidden" name="second" value="">
                </th>

                <th class="layui-th-gray">三级审核人</th>
                <th colspan="2">
                    <input type="text" name="third_name" placeholder="请输入三级审核人,可空" readonly class="layui-input picker-one" value="">
                    <input type="hidden" name="third" value="">
                </th>
            </tr>

            <tr>
                <th colspan="9" class="forleft" style="text-align: left !important;">相关附件
                    <button class="layui-btn layui-btn-xs layui-btn-danger" style="float: right;" type="button"
                            id="uploadBtn">上传附件
                    </button>
                </th>

            </tr>
            <tr>
                <th colspan="9" class="fujianimg" style="padding: 9px 0;">
                    <div id="filesBox2">
                        <div class="filelist" id="filesBigBox">
                            <ul id="filesBox" style="width: 100%;">
                                <div id="nofile" class="layui-data-none" style="width: 100%;">暂无附件</div>
                            </ul>
                        </div>
                        
                    </div>
                </th>
            </tr>

        </table>

    </div>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <span class="layui-btn layui-btn-sm" id="project-picker" data-title="添加造价项目">+ 添加造价项目</span>
        </div>
    </script>

    <script type="text/html" id="barDemo">
        <div class="layui-btn-container">
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </div>
    </script>

    <div class="pt-3">

        <input type="hidden" name="entrust_unit" value="">
        <input type="hidden" name="entrust_unit_name" value="">
        <button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="save">保存</button>
        <button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="webform">提交审核</button>
    </div>
</form>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}

<script>
    var moduleInit = ['tool', 'oaTool', 'employeepicker'];

    function gouguInit() {
        var form = layui.form, tool = layui.tool, oaTool = layui.oaTool, table = layui.table, layer = layui.layer,
            employeepicker = layui.employeepicker;
        var file_ids = [];
        var project_ids = [];


        layui.pageTable = table.render({
            elem: '#appropriation_add',
            id: "appropriation_add",
            title: '造价项目列表',
            toolbar: '#toolbarDemo',
            url: '/admin/project.appropriation/project_list_c',
            totalRow: true,
            cellMinWidth: 150,
            cols: [
                [{
                    fixed: 'left',
                    field: 'id',
                    title: '编号',
                    align: 'center',
                    width: 80,
                    totalRowText: "合计"
                }, {
                    field: 'project_name',
                    title: '项目名称',
                    align: 'center',
                }, {
                    field: 'sent_review_amount',
                    title: '送审服务费',
                    align: 'center',
                    totalRow: true,
                    // edit: true
                }, {
                    field: 'appropriation_amount',
                    title: '请款金额',
                    align: 'center',
                    totalRow: true,
                    // edit: true,

                }, {
                    fixed: 'right',
                    field: 'right',
                    title: '操作',
                    toolbar: '#barDemo',
                    width: 136,
                    align: 'center'
                }
                ]
            ],
            css: [
                // 对开启了编辑的单元格追加样式
                '.layui-table-view th[data-edit]{color: #16B777;}'
            ].join(''),
        });


        $('body').on('click', '#project-picker', function () {
            console.log(1)
            let callback = function (e) {
                project_ids.push(e.data)
                layer.msg(e.msg);
                layui.pageTable.reload({where: {id: project_ids}});

            }
            let call = function (e) {
                var aa = $('[name="entrust_unit"]').val();
                if (aa !== "") {
                    if (aa !== e.entrust_unit) {
                        layer.msg("不可添加不同委托单位")
                        return false;
                    }

                }
                var posthata = {project_id: e.id, project_name: e.project_name,sent_review_amount:e.sent_review_cost,appropriation_amount:e.sent_review_cost};
                tool.post("/admin/project.appropriation/add_project", posthata, callback);
                $('[name="entrust_unit_name"]').val(e.entrust_unit_name);
                $('[name="entrust_unit"]').val(e.entrust_unit);
            }

            oaTool.ProjectPicker(call);
        })


        table.on('tool(appropriation_add)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                let callback = function (e) {
                    layer.msg(e.msg)
                    var index = project_ids.indexOf(data.id);

                    if (index > -1) {
                        project_ids.splice(index, 1);
                    }
                    
                    if(project_ids.length==0){
                        $('[name="entrust_unit_name"]').val('');
                        $('[name="entrust_unit"]').val('');
                    }
                    layui.pageTable.reload({where: {id: project_ids}});

                }
                tool.post("/admin/project.appropriation/del_project", {id: data.id}, callback)
            }
        })

        table.on('edit(appropriation_add)', function (obj) {
            var field = obj.field; // 得到修改的字段
            var value = obj.value // 得到修改后的值
            var data = obj.data // 得到所在行所有键值
            var id = data.id;

            // 值的校验
            if (value.replace(/\s/g, '') === '') {
                layer.tips('值不能为空', this, {tips: 1});
                return obj.reedit(); // 重新编辑 -- v2.8.0 新增
            }
            let callback = function (e) {
                let sent_review_amount = 0;
                let appropriation_amount = 0;
                // layui.each(layui.table.cache['appropriation_add'], function (index, row) {
                //
                //     sent_review_amount += row.sent_review_amount;
                //     appropriation_amount += row.appropriation_amount;
                // });
                // $(".layui-table-total th[data-field=sent_review_amount]").append(sent_review_amount);
                // $(".layui-table-total th[data-field=appropriation_amount]").append(appropriation_amount);


                layui.pageTable.reload();
                layer.msg(e.msg)
            }
            tool.post("edit_c", data, callback)


        });


        let a = 1;
        form.on('submit(webform)', function (data) {

            data.field.project_ids = project_ids;
            data.field.file_ids = file_ids;
            console.log(data.field);
            if(a){
                let callback = function (e) {
                layer.msg(e.msg)
                parent.location.reload();
                if (e.code == 0) {
                    tool.sideClose(1000);
                    a = 1
                }
            }
            console.log(data.field)
            tool.post("/admin/project.appropriation/add", data.field, callback)
            }
            
            a = 0
            return false;
        });

        form.on('submit(save)', function (data) {

            data.field.project_ids = project_ids;
            data.field.file_ids = file_ids;
            console.log(data.field);
            if(a){
                let callback = function (e) {
                layer.msg(e.msg)
                parent.location.reload();
                if (e.code == 0) {
                    tool.sideClose(1000);
                    a = 1
                }
            }
            tool.post("/admin/project.appropriation/save", 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;
            }
        }


        $('#filesBox').on('click', '.file-del', function () {
            let id = $(this).parent().parent().data('id');
            layer.confirm('确定要删除该文件吗？', {icon: 3, title: '提示'}, function () {
                layer.closeAll();
                var index = file_ids.indexOf(id);

                if (index > -1) {
                    file_ids.splice(index, 1);
                }
                if (file_ids.length == 0) {
                    $("#filesBox").append('<div id="nofile" class="layui-data-none" >暂无附件</div>');
                }
                console.log(file_ids);

                $("#" + id).remove();
            });
        })

        oaTool.addFile({
            type: 1,
            isSave: true,

            ajaxSave: function (res) {


                if (file_ids.length < 1) {
                    console.log(file_ids.length)
                    let callback = function (e) {
                        if (e.hasOwnProperty("msg")) {
                            layer.msg(e.msg);
                        } else {
                            layer.msg('上传成功！')
                        }


                        if (e[0].id) {
                            file_ids.push(e[0].id)
                            $('#nofile').remove();
                            $("#filesBox").append(fileCard(e));

                        }


                    }

                    tool.post("/admin/project.api/add_file", {

                        'file_id': res.data.id,
                    }, callback);
                } else {
                    layer.msg('仅可上传一份文件！')
                }


            }
        });


    }


</script>

<script>
    // 获取具有指定 ID 的 <ul> 元素
    var ulElement = document.getElementById("filesBox");

    // 检查 <ul> 元素的子元素数量
    if (ulElement.children.length === 0) {
        // 如果子元素数量为 0，隐藏 <ul> 元素
        ulElement.style.display = "none";
    }
</script>
{/block}
<!-- /脚本 -->