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

    .fujianimg img {
        height: 9vh !important;
    }

    .forleft {
        text-align: left !important;
    }

    .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;
	 }


	 .filelist p{
		margin: 3px 0 5px 0;
		width: 7vw;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
	 }

     .footer{
        display: none;
     }

     #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;
     }
     
     .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
    }
    
    .forleft {
        text-align: left !important;
    }
    
    .layui-btn-group span:last-child{
        display: none;
    }
</style>
{/block}

<!-- 主体 -->
{block name="body"}

<div class="p-3">

    <table class="layui-hide" id="appropriation_add" lay-filter="appropriation_add"></table>
    <form class="layui-form p-4">
        <table class="layui-table layui-table-form">
            <tr>
                <th class="layui-th-gray">委托单位</th>
                <th colspan="5" style="text-align:left !important;padding-left:2.5vw;">
                    {$detail.entrust_unit_name}
                    <input type="hidden" name="entrust_unit" value="{$detail.entrust_unit}">
                </th>
                
                <th class="layui-th-gray">是否开票</th>
                <th colspan="2">
                    <input type="radio" name="invoice_status" value="1" title="是" {if $detail.invoice_status==1}checked{/if}>
                    <input type="radio" name="invoice_status" value="0" title="否" {if $detail.invoice_status==0}checked{/if}>
                </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="{$detail.invoicing_num}">
                </th>

                <th class="layui-th-gray">发票类型</th>
                <th colspan="2">
                    <select name="invoice_type" lay-verify="required" >
                        <option value="0"></option>
                        <option value="1" {if $detail.invoice_type==1}selected{/if}>普通发票</option>
                        <option value="2" {if $detail.invoice_type==2}selected{/if}>专用发票</option>
                        <option value="3" {if $detail.invoice_type==3}selected{/if}>电子普票</option>
                        <option value="4" {if $detail.invoice_type==4}selected{/if}>电子专票</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="{$detail.invoicing_amount}">
                </th>
            </tr>

            
            {if $detail.status==0||$detail.status==-2}
            <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="请输入一级审核人" 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="请输入二级审核人,可空" 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="请输入三级审核人,可空" class="layui-input picker-one" value="">
                    <input type="hidden" name="third" value="">
                </th>
            </tr>
            {/if}
            <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="height: 16.2vh;">
                                {:fileCard($file_array)}
    
                            </ul>
                        </div>
                        {empty name="$file_array" }
                        <div class="layui-data-none" >暂无附件</div>
                        {/empty}
                    </div>
                </th>
            </tr>

        </table>
        <div class="pt-3">
            <input type="hidden" name="id" value="{$id}">
            <button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="save">保存</button>
            {if $detail.status==0||$detail.status==-2}
            <button type="button" class="layui-btn layui-btn-danger" lay-submit lay-filter="webform">提交审核</button>
            {/if}
        </div>
    </form>
</div>

<script type="text/html" id="toolbarDemo">
     {if $detail.status==0||$detail.status==-2}
    <div class="layui-btn-container">
        <span class="layui-btn layui-btn-sm" id="project-picker" data-title="添加造价项目">+ 添加造价项目</span>
    </div>
    {/if}
</script>

<script type="text/html" id="barDemo">
    <div class="layui-btn-container">
        {if $detail.status==0}
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        {/if}
    </div>
</script>
{/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 = [];
        var uid = {$id};

        layui.pageTable = table.render({
            elem: '#appropriation_add',
            id: "appropriation_add",
            toolbar: '#toolbarDemo',
            title: '造价项目列表',
            url: '/admin/project.appropriation/c_edit?id=' + '{$id}',
            totalRow: true,
            cellMinWidth: 150,
             cols: [
                [{
                    fixed: 'left',
                    field: 'id',
                    title: '编号',
                    align: 'center',
                    width: 80,
                    totalRowText: "合计"
                }, {
                    field: 'project_name',
                    title: '项目名称',
                    align: 'center',
                }, {
                    field: 'sent_review_cost',
                    title: '送审服务费',
                    align: 'center',
                    totalRow: true,
                }, {
                    field: 'appropriation_amount',
                    title: '请款金额',
                    align: 'center',
                    totalRow: true,
                    // edit: true
                }, {
                    field: 'refund_amount',
                    title: '回款金额',
                    align: 'center',
                    totalRow: true,
                    edit: true
                    // edit: true
                },{
                    fixed: 'right',
                    field: 'right',
                    title: '操作',
                    toolbar: '#barDemo',
                    width: 136,
                    align: 'center'
                }
                ]
            ],
            css: [
                // 对开启了编辑的单元格追加样式
                '.layui-table-view th[data-edit]{color: #16B777;}'
            ].join(''),
        });


        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", {refund_amount:data.refund_amount}, callback)


        });

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

                    layui.pageTable.reload();

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

        let a = 1;
        form.on('submit(save)', function (data) {
            data.field.project_ids = project_ids;
            data.field.file_ids = file_ids;
            let refund_amount = 0,appropriation_amount = 0;
            layui.each(layui.table.cache['appropriation_add'], function (index, row) {
                appropriation_amount += Number(row.appropriation_amount)
                refund_amount += Number(row.refund_amount)
            });

            data.field.appropriation_amount = appropriation_amount;
            data.field.refund_amount = refund_amount;
            delete data.field.file;
            console.log(data);
            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;
        });

        form.on('submit(webform)', function (data) {
            data.field.project_ids = project_ids;
            data.field.file_ids = file_ids;
            let refund_amount = 0,appropriation_amount = 0;
            layui.each(layui.table.cache['appropriation_add'], function (index, row) {
                appropriation_amount += Number(row.appropriation_amount)
                refund_amount += Number(row.refund_amount)
            });

            data.field.appropriation_amount = appropriation_amount;
            data.field.refund_amount = refund_amount;

            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/add", data.field, callback)
            }

            a = 0
            return false;
        });

        $('body').on('click', '#project-picker', function () {
            let callback = function (e) {
                layer.msg(e.msg);
                layui.pageTable.reload();

            }
            let call = function (e) {

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

                            return;
                        },2000)

                    }else{
                        var posthata = {uid:uid,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);
        })

        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 () {
                let callback = function (e){
                    layer.closeAll();
                    if (e.hasOwnProperty("msg")) {
                        layer.msg(e.msg);
                    }
                    if(e.code==0){
                        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>');
                        }

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

                }
                tool.delete("/admin/project.api/delete_file", {id: id}, callback)
            });
        })

        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}
<!-- /脚本 -->