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

    .fujian {
        display: flex;
    }

    .fujianimg img {
        height: 9vh !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;
        
        
    }
    .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: 11vw;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
	 }

    #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;
     }
    
    .footer{
        display: none;
     }
     
     .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;
    }
    
    .height{
        height: 36px;
    }
    
    .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}
                </th>
                
                <th class="layui-th-gray">是否开票</th>
                <th colspan="2">
                    <input type="radio" name="invoice_status" value="1" title="是" {if $detail.invoicing_whether!=0}checked{/if}>
                    <input type="radio" name="invoice_status" value="0" title="否" {if $detail.invoicing_whether==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>

            
            {volist name="audit" id="vo"}
            <tr>
                <th class="layui-th-gray height">审核状态</th>
                <th colspan="2">
                    {switch $vo.audit_status}
                    {case 1}待审核{/case}
                    {case 2}已通过{/case}
                    {case 3}已拒绝{/case}
                    {case 4}已作废{/case}
                    {default /}未知
                    {/switch}

                </th>
                <th class="layui-th-gray">审批人</th>
                <th colspan="2">
                    {$vo.approver_name}
                </th>
                <th class="layui-th-gray">审批回执</th>
                <th colspan="2">
                    {$vo.audit_remark}
                </th>
                
            </tr>
            
            <tr>
                <th class="layui-th-gray height">审批时间</th>
                <th colspan="8" style="text-align:left !important;padding-left:2.5vw;">
                    {if $vo.audit_time!=0}{$vo.audit_time|date="Y-m-d H:i"}{/if}
                </th>
            </tr>
            {/volist}
            <tr>
                <th colspan="9" class="forleft" style="text-align: left !important;">相关附件</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>

    </form>
</div>


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

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

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

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


        layui.pageTable = table.render({
            elem: '#appropriation_add',
            id: "appropriation_add",
            title: '造价项目列表',
            url: '/admin/project.appropriation/c_read?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_amount',
                    title: '送审服务费',
                    align: 'center',
                    totalRow: true,
                }, {
                    field: 'appropriation_amount',
                    title: '请款金额',
                    align: 'center',
                    totalRow: true,
                }, {
                    field: 'refund_amount',
                    title: '回款金额',
                    align: 'center',
                    totalRow: true,
                    // edit: true
                }
                ]
            ]
        });


        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;
                let refund_amount = 0;
                layui.each(layui.table.cache['appropriation_add'], function (index, row) {

                    sent_review_amount += row.sent_review_amount;
                    appropriation_amount += row.appropriation_amount;
                    refund_amount += row.refund_amount
                });



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


        });


        form.on('submit(webform)', function (data) {
            let refund_amount = 0;
            layui.each(layui.table.cache['appropriation_add'], function (index, row) {
                refund_amount += Number(row.refund_amount)
            });
            data.field.refund_amount = refund_amount;
            delete data.field.file;
            console.log(data);
            let callback = function (e) {
                layer.msg(e.msg)
                parent.location.reload();
                if (e.code == 0) {
                    tool.sideClose(1000);
                }
            }
            tool.post("/admin/project.appropriation/cc_edit", data.field, callback)

            return false;
        });

        form.on('submit(save)', function (data) {
            let callback = function (e) {
                layer.msg(e.msg)
                parent.location.reload();
                if (e.code == 0) {
                    tool.sideClose(1000);
                }
            }
            tool.post("/admin/project.appropriation/disagree", data.field, callback)

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