{extend name="common/base"/}
{block name="style"}
<style>
    html {
        background-color: #fff;
    }

    .log-timeline {
        position: relative;
        min-height: 600px;
        padding-left: 48px;
        background-color: #fff;
    }

    .log-timeline:after {
        content: "";
        position: absolute;
        top: 0;
        left: 24px;
        width: 1px;
        height: 100%;
        background: #e3e9ed;
    }

    .log-timeline dl {
        padding-bottom: 8px;
        position: relative;
    }

    .log-timeline dt {
        font-size: 16px;
        line-height: 2.4;
        color: #323232;
        font-weight: 600
    }

    .log-timeline dd {
        font-size: 14px;
        line-height: 1.6;
        padding: 5px 0
    }

    .log-timeline .date-second-point {
        width: 10px;
        height: 10px;
        display: block;
        border-radius: 50%;
        border: 3px solid #FBBC05;
        background: #fff;
        position: absolute;
        z-index: 99;
        left: -32px;
        top: 9px
    }

    .log-timeline .log-thumb {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        margin-right: 4px;
    }

    .log-timeline .open-a {
        margin: 0 4px;
    }

    .log-item i {
        font-weight: 800;
        color: #323232
    }

    .log-content strong {
        margin: 0 4px;
        color: #323232
    }
    
    /*表格*/
    #tabniubi {
        width: 100%;
        margin: 10px 0;
        background-color: #fff;
        color: #5f5f5f;
    }

    #tabniubi th {
        padding: 7px 15px;
        min-height: 20px;
        height: 38px;
        line-height:38px;
        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;
        height: 0 !important;
    }

    .form-title {
        background-color: rgb(241, 241, 241);
        color: rgb(95, 95, 95);
        border-color: rgb(241, 241, 241);
        font-weight: 600;
        text-align: right !important;
    }
    
    #projectCard td{
        color: #5f5f5f;
        border: none;
        padding: 0;
        margin: 0;
        width: auto;
        background-color: #fff;
    }
    
    .project-del{
        
        height: 22px;
        line-height: 22px;
        padding: 0 4px;
        font-size: 12px;
        background-color: #ff5722;
        display: inline-block;
        vertical-align: middle;
        color: #fff;
        white-space: nowrap;
        text-align: center;
        border-radius: 2px;
        cursor: pointer;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    
    .annex li{
        padding: 0 1vw 0 1vw;
        border-right: 1px solid #e2e2e2;
    }
    
    .annex p{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 9vw;
    }
    
</style>
{/block}
<!-- 主体 -->
{block name="body"}
<form class="layui-form px-4 pt-2" lay-filter="contract">
    <div class="layui-tab" style="margin:0;" lay-filter="contract" id="contractTab">
        <ul class="layui-tab-title">
            <li class="layui-this" data-load="true">合同详情</li>
            <li>操作记录</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <table class="layui-table layui-table-form" id="tabniubi" cellpadding="1" cellspacing="1" style="margin:0">
                    <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">
                    
                    {gt name="$detail.pid" value="0"}
                    <tr>
                        <th class="form-title">母合同名称</th>
                        <th colspan="8">{$detail.pname}</th>
                    </tr>
                    {/gt}
                    <tr>
                        <th class="form-title">合同名称</th>
                        <th colspan="4">{$detail.name}</th>
                        <th class="form-title">合同编号</th>
                        <th colspan="3">{$detail.code}</th>
                    </tr>
                    <tr>
                        <th class="form-title">签约主体(乙方)</th>
                        <th colspan="2">
                            {$detail.subject_name}

                        </th>
                        <th class="form-title">合同性质</th>
                        <th colspan="2">
                            {eq name="$detail.type" value="1" }普通合同{/eq}
                            {eq name="$detail.type" value="2" }框架合同{/eq}
                            {eq name="$detail.type" value="3" }补充协议{/eq}
                            {eq name="$detail.type" value="4" }其他合同{/eq}
                        </th>
                        <th class="form-title">合同类别</th>
                        <th colspan="2">
                            {volist name=":contract_cate()" id="v"}
                            {eq name="$v.id" value="$detail.cate_id" }{$v.title}{/eq}
                            {/volist}
                        </th>
                    </tr>
                    <tr>
                        <th class="form-title">客户名称(甲方)</th>
                        <th colspan="2">{$detail.customer}</th>
                        <th class="form-title">签约客户代表</th>
                        <th colspan="2">{$detail.customer_name}</th>
                        <th class="form-title">客户联系电话</th>
                        <th colspan="2">{$detail.customer_mobile}</th>
                    </tr>
                    <tr>
                        <th class="form-title">客户联系地址</th>
                        <th colspan="2">{$detail.customer_address}</th>
                        <th class="form-title">合同开始日期</th>
                        <th colspan="2">{$detail.start_time}</th>
                        <th class="form-title">合同结束日期</th>
                        <th colspan="2">{$detail.end_time}</th>
                    </tr>
                    {neq name="$detail.type" value="2"}
                    <tr>
                        <th class="form-title">合同金额</th>
                        <th colspan="2">{$detail.cost}</th>
                        {eq name="$detail.is_tax" value="1" }
                        <th class="form-title">是否含税</th>
                        <th colspan="2">是</th>
                        <th class="form-title">税点(百分比)</th>
                        <th colspan="2">{$detail.tax}%</th>
                        {/eq}
                        {eq name="$detail.is_tax" value="0" }
                        <th class="form-title">是否含税</th>
                        <th colspan="5">否</th>
                        {/eq}
                    </tr>
                    {/neq}
                    {notempty name="$detail.remark"}
                    <tr>
                        <th class="form-title">备注信息</th>
                        <th colspan="8">{$detail.remark}</th>
                    </tr>
                    {/notempty}
                    
                    <tr>
                        <th colspan="9" style="text-align:left;"><strong>关联项目</strong></th>
                    </tr>
                    
                    <tr>
                        <th class="form-title" style="text-align:center !important;">
                            <button type="button" class="layui-btn layui-btn-sm" id="addProject"><i class="layui-icon"></i>关联项目</button>
                        </th>
                        <th id="projectCard" style="padding:5px;"></th>
                    </tr>
                    
                    
                    <tr>
                        <th colspan="9" style="text-align:left;"><strong>补充附件</strong></th>
                    </tr>
                    <tr>
                        <th class="form-title" style="text-align:center !important;">
                            <button type="button" class="layui-btn layui-btn-sm" id="uploadBtn"><i
                                    class="layui-icon"></i>附件上传
                            </button>
                        </th>
                        <th colspan="8" style="line-height:inherit">
                            <div class="annex" style="display:flex;">
                                {:fileCard($detail.file_array_other)}
                            </div>
                        </th>
                    </tr>
                    <tr>
                        <th colspan="9" style="text-align:left;"><strong>签订信息</strong></th>
                    </tr>
                    <tr>
                        <th class="form-title">合同制定人</th>
                        <th colspan="2">{$detail.prepared_name}</th>
                        <th class="form-title">合同签订人</th>
                        <th colspan="2">{$detail.sign_name}</th>
                        <th class="form-title">合同签订时间</th>
                        <th colspan="2">{$detail.sign_time}</th>
                    </tr>
                    <tr>
                        <th class="form-title">合同保管人</th>
                        <th colspan="2">{$detail.keeper_name}<span id="keeper" data-ids="{$detail.keeper_uid}" data-names="{$detail.keeper_name}" class="layui-btn layui-btn-xs layui-btn-normal ml-1">更改</span>
                        </th>
                        <th class="form-title">合同共享人员</th>
                        <th colspan="5">{$detail.share_names}<span id="shares" data-ids="{$detail.share_ids}" data-names="{$detail.share_names}" class="layui-btn layui-btn-xs layui-btn-normal ml-1">更改</span>
                        </th>
                    </tr>
                    <tr>
                        <th colspan="9" style="text-align:left;"><strong>审核信息</strong></th>
                    </tr>
                    <tr>
                        <th class="form-title">合同状态</th>
                        <th colspan="2"><span class="layui-color-{$detail.check_status}">{$detail.status_name}</span></th>
                        <th class="form-title">录入人</th>
                        <th colspan="2">{$detail.admin_name}</th>
                        <th class="form-title">录入时间</th>
                        <th colspan="2">{$detail.create_time}</th>
                    </tr>
                    {notempty name="$check_record"}
                    <tr>
                        <th class="form-title">历史审批记录</th>
                        <th colspan="7">
                            <ul class="layui-timeline flow-record pt-2">
                                {volist name="$check_record" id="vo"}
                                <li class="layui-timeline-item delete-{$vo.delete_time}">
                                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                    <p style="padding-left:24px">{$vo.check_time_str}<span
                                            class="black ml-2">{$vo.name}</span><span
                                            class="mx-2 layui-color-{$vo.status}">{$vo.status_str}</span>了此申请。操作意见：<span
                                            class="green">{$vo.content}</span></p>
                                </li>
                                {/volist}
                            </ul>
                        </th>
                    </tr>
                    {/notempty}

                </table>

                {if ($detail.check_status == 1&& $view_auth==0) }
                {include file="/contract/index/view_step" /}
                {elseif ($detail.check_status == 0) OR ($detail.check_status == 4) OR ($detail.check_status == 7)}
                {if $view_auth==0}
                {include file="/contract/index/view_set" /}
                {/if}
                {else /}
                <table class="layui-table layui-table-form" id="tabniubi" cellpadding="1" cellspacing="1" style="margin:0">
                    <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">
                    
                    {eq name="$detail.check_status" value="2" }
                    <tr>
                        <th class="form-title">归档状态</th>
                        {eq name="$detail.archive_status" value="0" }
                        <th colspan="2"><span
                                class="layui-color-{$detail.archive_status}">{$detail.archive_status_name}</span></th>
                        {else/}
                        <th colspan="2"><span class="layui-color-{$detail.archive_status}">{$detail.archive_status_name}</span></th>
                        <th class="form-title">归档人</th>
                        <th colspan="2">{$detail.archive_name}</th>
                        <th class="form-title">归档时间</th>
                        <th colspan="2">{$detail.archive_time|date="y-m-d"}</th>
                        {/eq}
                    </tr>
                    {/eq}

                    {eq name="$detail.check_status" value="5" }
                    <tr>
                        <th class="form-title">中止人</th>
                        <th colspan="2">{$detail.stop_name}</th>
                        <th class="form-title">中止时间</th>
                        <th colspan="5">{$detail.stop_time|date="y-m-d"}</th>
                    </tr>
                    <tr>
                        <th class="form-title">中止备注</th>
                        <th colspan="8" style="display:flex;">{$detail.stop_remark}</th>
                    </tr>
                    {/eq}

                    {eq name="$detail.check_status" value="6" }
                    <tr>
                        <th class="form-title">作废人</th>
                        <th colspan="2">{$detail.void_name}</th>
                        <th class="form-title">作废时间</th>
                        <th colspan="5">{$detail.void_time|date="y-m-d"}</th>
                    </tr>
                    <tr>
                        <th class="form-title">作废备注</th>
                        <th colspan="8">{$detail.void_remark}</th>
                    </tr>
                    {/eq}
                </table>
                {if ($detail.archive_status==0 && $view_auth==0)}
                <div class="pt-2">
                    {gt name="auth" value="0"}
                    {if $detail.check_status<4 AND $detail.check_status>1 AND $detail.archive_status==0}
                    <textarea name="remark" placeholder="请输入备注信息" class="layui-textarea"></textarea>
                    {/if}
                    {eq name="$detail.check_status" value="2" }
                    <span class="layui-btn layui-btn-normal" data-event="archive" data-status="1">合同归档</span>

                    {/eq}
                    {lt name="$detail.check_status" value="4" }
                    <span class="layui-btn layui-btn-warm" data-event="check" data-status="5">中止合同</span>
                    <span class="layui-btn layui-btn-danger" data-event="check" data-status="6">作废合同</span>
                    {/lt}
                    {/gt}
                    {if ( $detail.check_status eq 3) AND ( $is_create_admin eq 1) }
                    <span class="layui-btn layui-btn-normal check_back">修改</span>
                    {/if}
                </div>
                {/if}
                {/if}

            </div>
            <div class="layui-tab-item">
                {include file="/contract/index/view_log" /}
            </div>
        </div>
    </div>
</form>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
    const contract_id = '{$detail.id}';
    const contract_status = '{$detail.check_status}';
    const moduleInit = ['tool', 'employeepicker', 'oaTool'];
    const check_step_sort = '{$detail.check_step_sort}';
    function gouguInit() {
        var form = layui.form, tool = layui.tool, element = layui.element, employeepicker = layui.employeepicker,
            oaTool = layui.oaTool,table = layui.table;
        element.on('tab(contract)', function (data) {
            let index = data.index;
            if (index == 1) {
                log(layui);
            }
        });
        if (typeof init === 'function') {
            init(form, tool);
        }

        if (typeof (flowStep) == "function") {
            flowStep();
        }

        //选择合同保管人弹窗
        $('body').on('click', '#keeper', function () {
            var ids = $(this).data('ids') + '', names = $(this).data('names') + '';
            employeepicker.init({
                ids: ids,
                names: names,
                type: 0,
                department_url: "/admin/project.api/get_department_tree",
                employee_url: "/admin/project.api/get_employee",
                callback: function (ids, names, dids, departments) {
                    let callback = function (e) {
                        layer.msg(e.msg);
                        if (e.code == 0) {
                            location.reload();
                        }
                    }
                    tool.post("/admin/contract.index/edit", {
                        'id': contract_id,
                        'keeper_uid': ids,
                        'scene': 'change'
                    }, callback);
                }
            });
        });

        //选择共享成员弹窗
        $('body').on('click', '#shares', function () {
            var ids = $(this).data('ids') + '', names = $(this).data('names') + '', share_ids_array = [],
                share_names_array = [];
            if (ids.length > 0) {
                share_ids_array = ids.split(',');
                share_names_array = names.split(',');
            }
            employeepicker.init({
                ids: share_ids_array,
                names: share_names_array,
                type: 1,
                department_url: "/admin/project.api/get_department_tree",
                employee_url: "/admin/project.api/get_employee",
                callback: function (ids, names, dids, departments) {
                    let callback = function (e) {
                        layer.msg(e.msg);
                        if (e.code == 0) {
                            location.reload();
                        }
                    }
                    tool.post("/admin/contract.index/edit", {
                        'id': contract_id,
                        'share_ids': ids.join(','),
                        'scene': 'change'
                    }, callback);
                }
            });
        });


        $('body').on('click', '[data-event="check"]', function () {

            let status = $(this).data('status');
            let mark = $('[name="remark"]').val();
            let title = ''

            if (status == 5) {
                title = '确定要中止该合同?';

            }
            if (status == 6) {
                title = '确定要作废该合同?';

            }
            layer.confirm(title, {
                icon: 3,
                title: '提示'
            }, function (index) {
                let callback = function (e) {
                    layer.msg(e.msg);
                    parent.layui.pageTable.reload();
                    setTimeout(function () {
                        location.reload();
                    }, 2000)
                }
                if (status == 5) {
                    tool.post("/admin/contract.api/discontinue", {
                        id: contract_id,
                        check_status: status,
                        mark: mark
                    }, callback);
                } else if (status == 6) {
                    tool.post("/admin/contract.api/obsolete", {
                        id: contract_id,
                        check_status: status,
                        mark: mark
                    }, callback);
                } else {
                    tool.post("/admin/contract.api/check", {
                        id: contract_id,
                        check_status: status,
                        mark: mark
                    }, callback);
                }
                layer.close(index);
            });
        });

        $('body').on('click', '[data-event="archive"]', function () {
            let status = $(this).data('status');
            let mark = $('[name="remark"]').val();
            layer.confirm('合同归档后将不能进行任何数据操作，确定要提交归档?', {
                icon: 3,
                title: '提示'
            }, function (index) {
                let callback = function (e) {
                    layer.msg(e.msg);
                    parent.layui.pageTable.reload();
                    setTimeout(function () {
                        location.reload();
                    }, 2000)
                }
                tool.post("/admin/contract.api/archive", {
                    id: contract_id,
                    archive_status: status,
                    mark: mark
                }, callback);
                layer.close(index);
            });
        })


        $('body').on('click', '.check_back', function () {

            layer.confirm('是否确认进行修改?', {
                icon: 3,
                title: '提示'
            }, function (value, index, elem) {
                $.ajax({
                    url: "/admin/contract.api/check_edit",
                    type: 'post',
                    data: {
                        id: contract_id,
                        check_status: contract_status,
                    },
                    success: function (e) {
                        layer.msg(e.msg);
                        if (e.code == 0) {
                            parent.layui.pageTable.reload();
                            location.reload();
                        }
                    }
                })
                layer.close(index);
            });
        })

        $("#addProject").click(function (){
            var projectTable;
            var pop = layer.open({
                title: '选择造价项目',
                area: ['600px', '580px'],
                type: 1,
                content: '<div class="picker-table">\
					<form class="layui-form pb-2">\
						<div class="layui-input-inline" style="width:480px;">\
						<input type="text" name="keywords"  placeholder="造价项目" class="layui-input" autocomplete="off" />\
						</div>\
						<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="search_customer">提交搜索</button>\
				  	</form>\
					<div id="customerTable"></div></div>',
                success: function () {
                    projectTable = table.render({
                        elem: '#customerTable'
                        , url: '/admin/project.api/get_self_project'
                        , page: true //开启分页
                        , limit: 10
                        , cols: [[
                            {type: 'radio', title: '选择'},
                            {field: 'id', width: 80, title: '编号', align: 'center'},
                            {field: 'project_name', title: '项目名称', align: 'center'},
                            {field: 'entrust_unit_name', title: '委托单位', align: 'center'},
                            {field: 'review_unit_name', title: '评审单位', align: 'center'},
                        ]]
                    });
                    //客户搜索提交
                    form.on('submit(search_customer)', function (data) {
                        projectTable.reload({where: {keywords: data.field.keywords}, page: {curr: 1}});
                        return false;
                    });
                },
                btn: ['确定'],
                btnAlign: 'c',
                yes: function () {

                    var checkStatus = table.checkStatus(projectTable.config.id);
                    var data = checkStatus.data;

                    if (data.length > 0) {
                        let callback = function (e){
                            console.log(e)
                            layer.msg(e.msg);
                            layer.close(pop);
                            projectCard()
                        }
                        tool.post("/admin/contract.api/relevancy",{uid:contract_id,uuid:data[0]["id"]},callback)

                    } else {
                        layer.msg('请先选择项目');
                        return false;
                    }
                }
            })
        })
        projectCard();
        function projectCard(e){
            $.ajax({
                url: "/admin/contract.api/relevancy_p",
                type: 'post',
                data: {
                    id: contract_id,
                },
                success: function (e) {
                    var h="";
                    for (var i=0;i<e.length;i++){
                        var point = e[i];
                        h+=`<td class="layui-td-gray" >${point.project_name}<span class="project-del" data-id="${point.id}">删除</span></td>`
                    }
                    $("#projectCard").html(h)
                }
            })

        }
        $('body').on('click', '.project-del', function () {
            let id = $(this).attr('data-id');
            layer.confirm('是否确认删除?', {
                icon: 3,
                title: '提示'
            }, function () {

                let callback = function (e) {
                    layer.msg(e.msg);
                    if(e.code==0){
                        $('span.project-del[data-id="'+id+'"]').parent().remove();
                    }
                }
                tool.post("/admin/contract.api/relevancy_del", {
                    id: id,
                }, callback);
            })
        })
        oaTool.addFile({
            type: 1,
            isSave: true,
            ajaxDelete: function (file_id) {
                let callback = function (e) {
                    layer.msg(e.msg);
                    if (e.code == 0) {
                        $("#" + file_id + "").remove();
                    }
                }
                tool.delete("/admin/contract.api/delete_file", {id: file_id}, callback);
            },
            ajaxSave: function (res) {
                let callback = function (e) {
                    location.reload();
                }
                tool.post("/admin/contract.api/add_file", {
                    'contract_id': contract_id,
                    'file_id': res.data.id,
                    'file_name': res.data.name
                }, callback);
            }
        });


        //操作记录的审批流程
        $.ajax({
            url: "/admin/contract.api/check_node",
            type:'post',
            data:{id:contract_id,type:4},
            success: function (e) {
                if (e.code == 0) {
                    let flowHtml='',list = e.data,record_list='',sort = check_step_sort;
                    for(var f=0;f<list.length;f++){
                        //审批流程
                        let checkUser = '',
                            iconRight ='<span class="layui-icon layui-icon-right"></span>',
                            iconStatus ='<i class="layui-icon layui-icon-time"></i>',
                            strStatus ='<div class="check-item-status">待审核</div>',
                            sortClass ='';
                        if(f == list.length-1){
                            iconRight ='';
                        }

                        checkUser=list[f].check_admin;
                        if(list[f].check_status == 1){
                            iconStatus ='<i class="layui-icon layui-icon-ok-circle" data-ok=""></i>';
                            strStatus ='<div class="check-item-status">通过</div>';
                        }else {
                            iconStatus ='<i class="layui-icon layui-icon-close" data-no=""></i>';
                            strStatus ='<div class="check-item-status">拒绝</div>';
                        }



                        if(sort == list[f].id){
                            sortClass ='flow-this';
                            iconStatus ='<i class="layui-icon layui-icon-time"></i>';
                            strStatus ='<div class="check-item-status">当前审核</div>';
                        }
                        if(f<list.length&&list[f].check_status == 2){
                            flowHtml+=
                                '<div class="flow-flexbox check-item flow-flex-row '+sortClass+'" id="flow'+f+'">'+iconStatus+'\
											<div class="check-item-name">'+checkUser+'</div>'+strStatus+iconRight+'\
										</div>'+
                                '<div class="flow-flexbox check-item flow-flex-row"><div class="check-item-name">{$detail.create_user}</div><div class="check-item-status">提交申请</div><span class="layui-icon layui-icon-right"></span></div>';
                        }else {
                            flowHtml+= '<div class="flow-flexbox check-item flow-flex-row '+sortClass+'" id="flow'+f+'">'+iconStatus+'\
								<div class="check-item-name">'+checkUser+'</div>'+strStatus+iconRight+'\
							</div>';
                        }

                    }

                    $('#flowListLog').append(flowHtml);
                }
            }
        })
    }

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