{extend name="common/base"/}
{block name="style"}
<style>
    .footer{
        width: 100%;
        height: 25px;
        text-align: center;
        position: fixed;
        bottom: 0;
    }

    .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.7vw 0.5vw 0.7vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        border-right: 1px solid #e2e2e2;
    }


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

    .filelist img{
        width: 95px;
        height: 95px;
    }

    .form-title {
        background-color: rgb(241, 241, 241);
        color: rgb(95, 95, 95);
        border-color: rgb(241, 241, 241);
        font-weight: 600;
    }

    #tabniubi {
        width: 100%;
        margin: 10px 0;
        background-color: #fff;
        color: #5f5f5f;

    }

    #tabniubi th {
        padding: 9px 15px;
        min-height: 20px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        /* font-size: 14px; */
        border-width: 1px;
        border-style: solid;
        border-color: #e2e2e2;
        font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
    }

    #tabniubi tr:first-child {
        padding: 0;
        min-height: 0;
        line-height: 0;
        border-width: 0;
        border-style: none;
        border-color: #fff;
        font-size: 0;
    }

    #tabniubi tr:first-child th {
        padding: 0;
        min-height: 0;
        line-height: 0;
        border-width: 0;
        border-style: none;
        border-color: #fff;
        font-size: 0;
    }

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

    .xm-input{
        padding-left: 0 !important;

    }

    .xm-search{
        display: flex;
        justify-content: flex-end;
    }

</style>
{/block}

<!-- 主体 -->
{block name="body"}
<form class="layui-form p-4">
    <h3 class="pb-3">新建造价项目</h3>
    <table id="tabniubi" cellpadding="1" cellspacing="1">
        <tr>
            <th style="width: 10%;height: 0;"></th>
            <th style="width: 10%;height: 0;"></th>
            <th style="width: 10%;height: 0;"></th>
            <th style="width: 10%;height: 0;"></th>
            <th style="width: 10%;height: 0;"></th>
            <th style="width: 10%;height: 0;"></th>
            <th style="width: 10%;height: 0;"></th>
            <th style="width: 10%;height: 0;"></th>
            <th style="width: 10%;height: 0;"></th>
        </tr>

        <tr border="1">
            <th class="form-title">项目名称 <font style="color: red !important;">*</font></th>
            <th colspan="2">
                <input type="text" name="project_name"  lay-verify="required" lay-reqText="请完善项目名称" value="" autocomplete="off" placeholder="请输入项目名称" class="layui-input">
            </th>

            <th class="form-title">项目编号 <font style="color: red !important;">*</font></th>
            <th colspan="2">
                <input type="text" name="project_num"  lay-verify="required" lay-reqText="请完善项目编号" value="" autocomplete="off" placeholder="请输入项目编号" class="layui-input">
            </th>

            <th class="form-title">项目周期 <font style="color: red !important;">*</font></th>
            <th id="date" colspan="2">
                <div class="layui-input-inline" style="width: 47%;display: inline-flex;">
                    <input type="text" id="start_time" name="project_start_time" readonly lay-verify="required" lay-reqText="请选择开始时间" placeholder="请选择" class="layui-input" value="">
                </div>
                -
                <div class="layui-input-inline" style="width: 47%;display: inline-flex;">
                    <input type="text" id="end_time" name="project_end_time" readonly lay-verify="required" lay-reqText="请选择结束时间" placeholder="请选择" class="layui-input" value="">
                </div>
            </th>
        </tr>

        <tr>
            <th class="form-title">工程类型 <font style="color: red !important;">*</font></th>
            <th colspan="2">
                <div>
                    <select name="engineering_type1" lay-verify="required" lay-filter="aihao">
                        <option value="0"></option>
                        <option value="1">预算</option>
                        <option value="2">结算</option>
                        <option value="3">概算</option>
                        <option value="4">决算</option>
                        <option value="5">工程总承包（EPC）</option>
                    </select>
                </div>
            </th>
            <th class="form-title" style="text-align: center;">——</th>
            <th colspan="2">
                <div>
                    <select name="engineering_type2" lay-verify="required" lay-filter="aihao">
                        <option value=""></option>
                        <option value="1">审核</option>
                        <option value="2">编制</option>
                    </select>
                </div>
            </th>

            <th class="form-title">送审金额 <font style="color: red !important;">*</font></th>
            <th colspan="2">
                <input type="text" id="sent_review_amount" name="sent_review_amount"  autocomplete="off" placeholder="请输入送审金额" class="layui-input">
            </th>
        </tr>

        <tr>
            <th class="form-title">评审单位 <font style="color: red !important;">*</font></th>
            <th colspan="2">
                <input type="text" name="review_unit_name" autocomplete="off" readonly value="" lay-verify="required" lay-reqText="请输入评审单位" placeholder="请输入评审单位" class="layui-input customer-picker">
                <input type="hidden" name="review_unit" value="">
            </th>

            <th class="form-title">审批人 <font style="color: red !important;">*</font></th>
            <th colspan="2">
                <select name="entrust_approver" lay-verify="required" lay-reqText="请选择审批人">
                    <option value="">请选择审批人</option>
                    {volist name="person" id="v"}
                    <option value="{$v.id}">{$v.nickname}</option>
                    {/volist}
                </select>
            </th>
        </tr>

        <tr>
            <th colspan="9" class="forleft">相关附件
                <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" >
                <div id="filesBox2">
                    <div class="filelist" id="filesBigBox">
                        <ul id="filesBox">
                            <div id="nofile" class="layui-data-none">暂无附件</div>
                        </ul>
                    </div>

                </div>
            </th>
        </tr>



    </table>



    <div class="pt-3">
        <input type="hidden" name="id" value="0"/>
        <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform">保存</button>
        <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="save">提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>
{/block}
<!-- /主体 -->

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

    var moduleInit = ['tool','oaTool'];

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


        var file_ids= [];
        //日期选择
        layui.laydate.render({
            elem: '#date',
            range: ['#start_time', '#end_time'],
            rangeLinked:true
        });

        let reviewtest;
        $('.customer-picker').on('click', function () {
            let that = $(this);
            let callback = function(data){
                console.log(data);
                $('[name="review_unit"]').val(data.id);
                $('[name="review_unit_name"]').val(data.title);
                $('[name="review_head_phone"]').val(data.mobile);
                $.ajax({
                    url: '/admin/project.cost/getemployeelist',
                    type: 'post',
                    data: {"id": data.id},
                    dataType: "json",
                    async: false,
                    success: function (msg) {
                        reviewtest = msg
                        let str ='<option value="0">无指定人选</option>';
                        if(data.leader_id!==0){
                            str = `<option value=${data.leader_id}>${data.nickname}</option>`;
                        }

                        for (let i of msg) {
                            if(data.nickname === i.nickname){
                                continue
                            }
                            //组装数据
                            str += `<option value='${i.id}'>${i.nickname}</option>`;
                        }
                        console.log(msg)
                        //jquery赋值方式
                        $("#review_head").html(str);
                        //重新渲染生效
                        form.render();
                    }
                });
            }
            oaTool.customerPicker(callback);
        });


        form.on('select(reviewselect)', function (data) {
            for (let i = 0; i < reviewtest.length; i++){
                if (reviewtest[i].id.toString() === data.value){
                    $('[name="review_head_phone"]').val(reviewtest[i].mobile);
                }
            }
            return false;
        });

        let f = 1;

        //监听提交
        form.on('submit(webform)', function (data) {

            if(f){
                let callback = function (e) {
                    layer.msg(e.msg);
                    if (e.code == 0) {
                        tool.sideClose(1000);
                        f = 1
                    }
                }
                //概算、决算、工程总承包（EPC）
                var engineering_type1 ='';
                if(data.field.engineering_type1==1){
                    engineering_type1 ='预算';
                }else if(data.field.engineering_type1==2){
                    engineering_type1 ='结算';
                }else if(data.field.engineering_type1==3){
                    engineering_type1 ='概算';
                }else if(data.field.engineering_type1==4){
                    engineering_type1 ='决算';
                }else if(data.field.engineering_type1==5){
                    engineering_type1 ='工程总承包（EPC）';
                }
                var engineering_type2 = '';
                if(data.field.engineering_type2==1){
                    engineering_type2 ='审核';
                }else if(data.field.engineering_type2==2) {
                    engineering_type2 = '编制';
                }
                if(engineering_type1!==""&&engineering_type2!==""){
                    data.field.engineering_type = engineering_type1 + "-" + engineering_type2;
                }
                data.field.file_ids = file_ids;
                // console.log("???");

                tool.post("/admin/project.cost/add", data.field, callback);
            }

            f = 0
            return false;
        });

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


            if(f){
                let callback = function (e) {
                    layer.msg(e.msg);
                    if (e.code == 0) {
                        tool.sideClose(1000);
                        f = 1
                    }
                }
                var engineering_type1 ='';
                if(data.field.engineering_type1==1){
                    engineering_type1 ='预算';
                }else if(data.field.engineering_type1==2){
                    engineering_type1 ='结算';
                }else if(data.field.engineering_type1==3){
                    engineering_type1 ='概算';
                }else if(data.field.engineering_type1==4){
                    engineering_type1 ='决算';
                }else if(data.field.engineering_type1==5){
                    engineering_type1 ='工程总承包（EPC）';
                }
                var engineering_type2 = '';
                if(data.field.engineering_type2==1){
                    engineering_type2 ='审核';
                }else if(data.field.engineering_type2==2) {
                    engineering_type2 = '编制';
                }
                if(engineering_type1!==""&&engineering_type2!==""){
                    data.field.engineering_type = engineering_type1 + "-" + engineering_type2;
                }
                data.field.file_ids = file_ids;

                // console.log("!!!");

                tool.post("/admin/project.cost/save", data.field, callback);
            }

            f = 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) {

                let callback = function (e) {
                    if (e.hasOwnProperty("msg")) {
                        layer.msg(e.msg);
                    }else{
                        layer.msg('上传成功！')
                    }

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

                }

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

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

            }
        });


    }
</script>



{/block}
<!-- /脚本 -->