@extends('admin/site/side_layout')
@section('header_extend')
    <style>
        .flow_done {
            color: #0d8ddb;
            margin-left: 10px
        }

        #vertical-timeline {
            padding-left: 96px;
        }

        #vertical-timeline::before {
            display: none;
        }

        .flow_processing {
            color: #FD482C;
            margin-left: 10px
        }

        .vertical-container {
            text-align: center;
            max-width: 1200px;
        }

        .vertical-timeline-block {
            display: block;
            width: auto;
            max-width: 141px !important;
            float: left;
            position: relative;
            margin: 0 77px 84px;
            height: 166px;
            /* border: 1px solid #e5e5e5; */
        }

        .vertical-timeline-block:last-child {
            margin-bottom: 84px;
        }

        .vertical-timeline-block.widths {
            width: 100%;
            max-width: 100% !important;
            margin-left: 0;
            margin-right: 0;
        }

        .vertical-timeline-block.widths:after {
            display: none;
        }

        .vertical-timeline-block.widths .vertical-timeline-content {
            max-width: 141px;
            float: right;
        }

        .vertical-timeline-block:last-child:after {
            display: none !important;
        }

        .vertical-timeline-block:after {
            content: '';
            display: block;
            width: 60px;
            height: 36px;
            background: url(/img/l-rights-02.png) no-repeat center center;
            position: absolute;
            right: -105px;
            top: 55px;
            background-size: auto auto !important;
        }

        .vertical-timeline-block:nth-child(4), .vertical-timeline-block:nth-child(5), .vertical-timeline-block:nth-child(12), .vertical-timeline-block:nth-child(13), .vertical-timeline-block:nth-child(20), .vertical-timeline-block:nth-child(21), .vertical-timeline-block:nth-child(25), .vertical-timeline-block:nth-child(26) {
            margin-right: 0;
        }

        .vertical-timeline-block:nth-child(1) .titles-boxs i {
            background: url(/img/xiangmu-01.png) no-repeat 0px -32px;
        }

        .vertical-timeline-block:nth-child(2) .titles-boxs i {
            background: url(/img/xinxi-01.png) no-repeat 0px -32px;
        }

        .vertical-timeline-block:nth-child(3) .titles-boxs i {
            background: url(/img/baogao-01.png) no-repeat 0px -32px;
        }

        .vertical-timeline-block:nth-child(4) .titles-boxs i {
            background: url(/img/jiagouchiding-01.png) no-repeat 0px -32px;
        }

        .vertical-timeline-block:nth-child(5) .titles-boxs i {
            background: url(/img/gjc-sxjqr-01.png) no-repeat 0px -32px;
        }

        .vertical-timeline-block:nth-child(6) .titles-boxs i {
            background: url(/img/ziliaoshouji-01.png) no-repeat 0px -32px;
        }

        .vertical-timeline-block:nth-child(7) .titles-boxs i {
            background: url(/img/chengxukaifa-01.png) no-repeat 0px -32px;
        }

        .vertical-timeline-block:nth-child(8) .titles-boxs i {
            background: url(/img/yemiantiaozheng-01.png) no-repeat 0px -32px;
        }

        .vertical-timeline-block:nth-child(9) .titles-boxs i {
            background: url(/img/emails-01.png) no-repeat 0px -32px;
        }

        .vertical-timeline-block:nth-child(10) .titles-boxs i {
            background: url(/img/ziliaoshangchuan-01.png) no-repeat 0px -32px;
        }

        .vertical-timeline-block:nth-child(11) .titles-boxs i {
            background: url(/img/yemiantiaozheng-01.png) no-repeat 0px -32px;
        }

        .vertical-timeline-block:nth-child(12) .titles-boxs i {
            background: url(/img/gjc-map-01.png) no-repeat 0px -32px;
        }

        .vertical-timeline-block:nth-child(13) .titles-boxs i {
            background: url(/img/seo-jiancha-01.png) no-repeat 0px -32px;
        }

        .vertical-timeline-block:nth-child(14) .titles-boxs i {
            background: url(/img/w-shangxian-01.png) no-repeat 0px -32px;
        }

        .vertical-timeline-block:nth-child(15) .titles-boxs i {
            background: url(/img/emails-01.png) no-repeat 0px -32px;
        }

        .vertical-timeline-block:nth-child(16) .titles-boxs i {
            background: url(/img/seo-jiancha-01.png) no-repeat 0px -32px;
        }

        .vertical-timeline-block:nth-child(17) .titles-boxs i {
            background: url(/img/dabiao-01.png) no-repeat 0px -32px;
        }

        .vertical-timeline-block.active .titles-boxs i {
            background-position-y: 0;
        }

        .vertical-timeline-block.active .lefts-div-boxs:after {
            background: url(/img/l-rights.png) no-repeat center center;
        }

        .vertical-timeline-block:hover {
            border-color: #2a94e0;
        }

        .vertical-timeline-block.rt {
            float: right;
        }

        .vertical-timeline-block.rt:after {
            right: auto;
            left: -105px;
            background: url(/img/l-lefts.png) no-repeat center center;
        }

        .vertical-timeline-block.selects .titles-boxs {
            border-color: #feb771;
            background: #fe8713;
            color: #fff;
        }

        .vertical-timeline-block.selects .titles-boxs i {
            background-position-y: 0;
        }

        .vertical-timeline-block.ons:after {
            width: 36px !important;
            height: 60px !important;
            right: 50%;
            margin-right: -18px;
            top: auto;
            bottom: -62px;
            left: auto;
            background: url(/img/l-bottoms-01.png) no-repeat center center;
        }

        .vertical-timeline-block.:nth-child(16):after {
            background: url(/img/l-bottoms-02.png) no-repeat center center;
        }

        .vertical-timeline-block.active:after {
            background: url(/img/l-rights.png) no-repeat center center;
        }

        .vertical-timeline-block.rt.active:after {
            background: url(/img/l-lefts-01.png) no-repeat center center;
        }

        .vertical-timeline-block.active.ons:after {
            background: url(/img/l-bottoms.png) no-repeat center center;
        }

        .vertical-timeline-block.active .titles-boxs {
            background: #2a93e0;
            color: #fff;
            border-color: #2a93e0;
        }

        .vertical-timeline-block.active .vertical-timeline-icon {
            color: #2a94e0;
        }

        .vertical-timeline-block.active .vertical-timeline-content p {
            color: #2a94e0;
        }

        .vertical-timeline-icon {
            left: 50%;
            margin-left: -20px;
            top: 1em;
            color: #676a6c;
            z-index: 100;
            background: none !important;
            border: none !important;
            font-size: 24px;
        }

        .vertical-timeline-content {
            margin: 0;
        }

        .vertical-timeline-content p {
            padding: 0;
            font-size: 15px;
            margin: 0;
        }

        .flow_done {
            display: block;
            margin-left: 0;
            font-size: 12px;
            color: #323232 !important;
        }

        .flow_done .span-times {
            display: inline-block;
            vertical-align: top;
            padding-left: 12px;
            margin: 0;
            margin-left: 8px;
            position: relative;
        }

        .flow_done .span-times:before {
            content: '|';
            position: absolute;
            left: 0;
            top: 0;
            display: block;
        }

        .vertical-timeline-content .flow_done {
            margin: 6px 0 0 !important;
        }

        .flow_processing {
            display: block;
            width: 100%;
            margin: 6px 0 0 !important;
            font-size: 12px;
            color: #323232 !important;
        }

        .vertical-timeline-content {
            /* min-height: 160px; */
            padding: 0;
            margin-left: 0;
            z-index: 99;
            text-align: center;
        }

        .vertical-timeline-content span {
            margin: 0.2em 0 0.5em;
        }

        .vertical-timeline-content .btn {
            float: none !important;
            display: inline-block;
            vertical-align: top;
            padding: 0 10px;
            border: 1px solid #e5e6e7;
            line-height: 20px;
            background: #f3f3f4;
            margin-top: 3px !important;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .vertical-timeline-block.selects .vertical-timeline-content .btn:hover {
            background: #fe8713 !important;
            border-color: #fe8713 !important;
        }

        .vertical-timeline-content::before {
            display: none;
        }

        .tabs-right {
            background: #fff;
        }

        .tab-content-boxs {
            position: relative;
        }

        .titles-boxs {
            width: 141px !important;
            height: 141px;
            border-radius: 100%;
            margin: auto;
            background: #d3ebf1;
            text-align: center;
            padding: 35px 22px 0;
            font-size: 14px;
            color: #646464;
            line-height: 20px;
            border: 5px solid #d3ebf1;
        }

        .titles-boxs i {
            display: block;
            width: 38px;
            height: 32px;
            margin: 0 auto 12px;
            background: url(/img/xuqian-01.png) no-repeat 0px -32px;
        }

        .lefts-div-boxs {
            width: 43px;
            height: 140px;
            display: block;
            font-size: 16px;
            color: #fff;
            position: absolute;
            left: -164px;
            top: 0;
            border-radius: 22px;
            background: #2a94e0;
            padding: 36px 10px 0;
        }

        .lefts-div-boxs:after {
            content: '';
            display: block;
            width: 60px;
            height: 36px;
            background: url(/img/l-rights-02.png) no-repeat center center;
            position: absolute;
            right: -102px;
            top: 55px;
            background-size: auto auto !important;
        }

        .lefts-div-boxs i {
            content: '';
            display: block;
            width: 4px;
            min-height: 260px;
            position: absolute;
            left: 50%;
            margin-left: -2px;
            top: 145px;
            background: #d7d7d7;
        }

        .lefts-div-boxs i:after {
            content: '';
            display: block;
            width: 16px;
            height: 50px;
            background: url(/img/ll-bottoms.png) no-repeat center bottom;
            position: absolute;
            left: 50%;
            margin-left: -8px;
            bottom: -50px;
            background-size: auto auto !important;
        }

        .lefts-div-boxs.twos {
            background: #2cc19b;
        }

        .lefts-div-boxs.threes {
            background: #8cc844;
        }

        .lefts-div-boxs.threes i {
            display: none;
        }

        .lefts-div-boxs.ones i {
            min-height: 748px;
        }

        @media screen  and (max-width: 1680px) {
            .vertical-timeline-block {
                margin: 0 52px 84px;
            }

            .vertical-timeline-block:after {
                right: -84px;
            }

            .vertical-timeline-block.rt:after {
                /* right: auto; */
                left: -84px;
            }

            .vertical-timeline-block.ons:after {
                right: 50%;
                left: auto;
            }
        }

        @media screen  and (max-width: 1680px) {
            .vertical-timeline-block {
                margin: 0 42px 84px;
            }

            .vertical-timeline-block:after {
                right: -72px;
            }

            .vertical-timeline-block.rt:after {
                left: -72px;
            }

            .vertical-timeline-block.ons:after {
                left: auto;
            }
        }

        @media screen  and (max-width: 1680px) {
            .titles-boxs {
                width: 128px !important;
                height: 128px;
                padding: 24px 12px 0;
            }

            .vertical-timeline-block {
                max-width: 128px !important;
            }

            .vertical-timeline-content .btn {
                padding: 0 5px;
            }
        }

        @media screen  and (max-width: 1680px) {
            .titles-boxs {
                width: 128px !important;
                height: 128px;
                padding: 24px 12px 0;
            }

            .vertical-timeline-block {
                margin: 0 22px 84px;
            }

            #vertical-timeline {
                padding-left: 60px;
            }

            .lefts-div-boxs {
                left: -120px;
            }

            .lefts-div-boxs:after {
                right: -72px;
            }

            .vertical-timeline-block:after {
                right: -44px;
            }

            .vertical-timeline-block.rt:after {
                left: -44px;
                right: auto;
            }

            .vertical-timeline-block.rt.active:after {
                background: url(/img/l-bottoms.png) no-repeat center center;
            }
        }

        @media screen  and (max-width: 1680px) {
            .vertical-timeline-block.widths .vertical-timeline-content {
                float: left;
            }

            .vertical-timeline-block.widths {
                width: auto;
                margin-left: 22px;
            }

            .vertical-timeline-block {
                float: none !important;
            }

            #vertical-timeline {
                max-width: 260px;
            }

            .vertical-timeline-block:after {
                width: 36px !important;
                height: 60px !important;
                right: 50%;
                margin-right: -18px;
                top: auto;
                bottom: -62px;
                left: auto;
                background: url(/img/l-bottoms-01.png) no-repeat center center;
            }

            .vertical-timeline-block.rt:after {
                background: url(/img/l-bottoms-01.png) no-repeat center center;
                left: auto;
                right: 50%;
            }

            .vertical-timeline-block.active:after {
                background: url(/img/l-bottoms.png) no-repeat center center;

            }

            .lefts-div-boxs.ones i {
                min-height: 2680%;
            }
        }
    </style>
@endsection
@section('right')

    <div id="vertical-timeline" class="vertical-container light-timeline fix">

        @foreach($processes as $process)

            @php $nowProcessPermission = sprintf('process-%s-view',$process->id); @endphp

            {{--@hasAuth($nowProcessPermission)--}}
            @php
                $siteProcess=$processIdMapSiteProcessList[$process->id]??null;
                $active=$siteProcess['active']??null;
            @endphp
            <div
                class="vertical-timeline-block fix @if(in_array($process->id,[4,8,12,16,17,22,26])) ons @endif  @if(in_array($process->id,[5,6,7,8,13,14,15,16,18])) rt @endif @if($process->id==17) widths @endif">
                <div class="vertical-timeline-icon hide {{$process->color??''}}">
                    {{-- <i class="fa {{$process->icon??''}}"></i> --}}
                </div>

                <div class="vertical-timeline-content">
                    {{-- <h2>会议</h2> --}}
                    <div>
                        <div class="titles-boxs  {{$process->color??''}}">
                            <i></i>
                            {{$process->title??''}}
                            {{-- {{$process->id}}
                            {{json_encode($process->next_ids)}} --}}

                        </div>
                        @if($active==1)
                            {{--<span class="span-times"></span>--}}
                            <span class="flow_done">已完成</span>
                        @elseif($active==2)
                            <span class="flow_processing">待处理</span>
                        @endif

                    </div>

                    {{---需要文件上传功能--}}
                    @if(in_array($process->id,[3,4,5,12])&&$siteProcess)

                        @php $fileTitle=$siteProcess['file_list']?'文件浏览':'文件上传'; @endphp

                        <button onclick="units.triggerFile({{$siteProcess['id'].','.'"'.$fileTitle.'"'}})"
                                class="btn btn-sm btn-primary" style="margin-right: 10px">
                            {{$fileTitle}}
                        </button>
                    @endif

                    {{--网页确认--}}
                    @if($process->id==9)
                        <button class="btn btn-sm btn-info pull-left">域名：{{$site->domain}}</button>
                    @endif

                    @if($process->id==1&& !$siteProcess)
                        <button class="btn btn-sm btn-info"
                                onclick="units.initProcess({{$site->id}})">
                            初始化流程
                        </button>
                    @endif

                    @if($active==2)
                        @php $nowProcessConfirm = sprintf('process-%s-confirm',$process->id); @endphp
                        @hasAuth($nowProcessConfirm)
                        <a href="javascript:;"
                           {{--评分客户反馈--}}
                           @if(in_array($process->id ,[5,9,15,17])&&$siteProcess)
                           onclick="units.scoreFeedback({{$siteProcess['id']}})"
                           @else
                           onclick="units.confirm({{$siteProcess['id']}})"
                           @endif
                           class="btn btn-sm btn-info">确认</a>
                        @endHasAuth
                    @endif

                    @php $nowProcessEdit= sprintf('process-%s-edit',$process->id); @endphp
                    @hasAuth($nowProcessEdit)


                    @if(in_array($process->id ,[5,9,15,17])&&$siteProcess)
                        <a href="javascript:;"
                           onclick="units.reply({{$siteProcess['id']}})"
                           class="btn btn-sm btn-info" style="margin-right: 10px"
                        >回访</a>
                    @endif

                    @if(in_array($process->id ,[11,13,16])&&$siteProcess)
                        <a href="javascript:;"
                           onclick="units.checkItem({{$siteProcess['id']}})"
                           class="btn btn-sm btn-info" style="margin-right: 10px"
                        >
                            @php
                                $checkItemScopes=array_column($process->check_item_scopes,'inx');
                                $diff=array_diff($checkItemScopes,$siteProcess['check_items']??[]);
                            @endphp
                            @if($diff)
                                待检查
                            @else
                                已检查
                            @endif
                        </a>
                    @endif

                    {{--程序开发--}}
                    @if($process->id==7)

                        @if(!empty($siteProcess['deploy']))
                            <a href="http://{{$siteProcess['deploy']['domain']??''}}"
                               class="btn btn-sm btn-default" target="_blank"
                               style="margin-right: 10px;float: left;">部署域名： {{$siteProcess['deploy']['domain']??''}}</a>
                        @endif
                        @if($active==2)
                            <a href="javascript:;"
                               onclick="units.deploy({{$siteProcess['id']}})"
                               class="btn btn-sm btn-warning"
                               style="margin-right: 10px">部署</a>
                        @endif
                    @endif
                    {{--续签--}}
                    @if($process->id==18&&$siteProcess)
                        <a href="javascript:;"
                           onclick="units.renewForm({{$siteProcess['id']}})"
                           class="btn btn-sm btn-info" style="margin-right: 10px"
                        >续签表单</a>

                        <a href="javascript:;"
                           onclick="units.renewHistory({{$siteProcess['site_id']}})"
                           class="btn btn-sm btn-info" style="margin-right: 10px"
                        >续签历史</a>
                    @endif
                    @endHasAuth
                </div>
                @if($process->id==1 || $process->id==19 || $process->id==23)
                    <div
                        class="lefts-div-boxs @if($process->id==1) ones @endif @if($process->id==19) twos @endif @if($process->id==23) threes @endif">
                        <div class="lists">
                            @if($process->id==1)
                                建站期
                                <i></i>
                            @endif
                            @if($process->id==19)
                                优化期
                                <i></i>
                            @endif
                            @if($process->id==23)
                                服务期
                            @endif
                        </div>
                    </div>
                @endif
            </div>

            {{--@endHasAuth--}}
        @endforeach
    </div>
    <div class="process-ul-boxs hide">
        <div class="boxs">
            @foreach($processes as $process)

                @php $nowProcessPermission = sprintf('process-%s-view',$process->id); @endphp

                @hasAuth($nowProcessPermission)
                @php
                    $siteProcess=$processIdMapSiteProcessList[$process->id]??null;
                    $active=$siteProcess['active']??null;
                @endphp
                <div class="li-lists">

                    <div class="li-icon">
                        <i class="fa {{$process->icon??''}}"></i>
                    </div>
                    <div class="times">
                        @if($active==1)
                            已完成
                        @elseif($active==2)
                            待处理
                        @endif
                    </div>
                </div>
                @endHasAuth
            @endforeach
        </div>
    </div>
@endsection

@section('footer_extend')
    <script>
        $(".li-lists").click(function () {
            var i = $(this).index();
            $(this).addClass("active").siblings().removeClass("active");
            $(".vertical-timeline-block").eq(i).addClass("ons").siblings().removeClass("ons");
        });
        $(".vertical-timeline-block").each(function () {
            if (!!$(this).find("span").hasClass("flow_done")) {
                $(this).addClass("active");
            }
        });
        $(".vertical-timeline-block").each(function () {
            if (!!$(this).find("span").hasClass("flow_processing")) {
                $(this).addClass("selects");
            }
        });
        var units = {


            initProcess: function (siteId) {

                layer.confirm('是否初始化流程?', {icon: 3, title: '初始化流程'}, function () {
                    var config = {url: '/admin/process/site/' + siteId + '/init'};
                    config.success = function (result) {
                        layer.msg(result.message, {icon: 6, time: 1500}, function () {
                            window.location.reload();
                        });
                    };
                    tips.ajax(config);
                });
            },

            triggerFile: function (site_process_id, title) {

                layer.open({
                    type: 2,
                    content: ['/admin/process/file-upload/' + site_process_id],
                    area: ['60%', '80%'],
                    title: title
                });
            },
            scoreFeedback: function (site_process_id) {
                layer.open({
                    type: 2,
                    content: ['/admin/process/score/' + site_process_id],
                    area: ['60%', '60%'],
                    title: '评分'
                });
            },
            reply: function (site_process_id) {
                layer.open({
                    type: 2,
                    content: ['/admin/process/reply/' + site_process_id],
                    area: ['60%', '60%'],
                    title: '回访记录'
                });
            },

            checkItem: function (site_process_id) {
                layer.open({
                    type: 2,
                    content: ['/admin/process/check-item/' + site_process_id],
                    area: ['60%', '100%'],
                    title: '检查项'
                });
            },
            renewForm: function (site_process_id) {
                layer.open({
                    type: 2,
                    content: ['/admin/process/renew-form/' + site_process_id],
                    area: ['60%', '80%'],
                    title: '续签表单'
                });
            },

            renewHistory: function (site_id) {
                layer.open({
                    type: 2,
                    content: ['/admin/process/renew-history/' + site_id],
                    area: ['60%', '100%'],
                    title: '续签历史'
                });
            },
            confirm: function (id) {

                layer.confirm('是否确认?', {icon: 3, title: '是否确认'}, function () {
                    var config = {type: 'PUT', url: '/admin/process/confirm/' + id};
                    config.success = function (result) {
                        layer.msg(result.message, {icon: 6, time: 1500}, function () {
                            window.location.reload();
                        });
                    };
                    tips.ajax(config);
                });

            },
            //作废，移到新版流程里面去了。
/*            deploy: function (site_process_id) { //部署

                layer.confirm('是否确认部署?', {icon: 3, title: '是否确认部署'}, function () {
                    var config = {
                        type: 'GET',
                        url: '/admin/process/deploy/' + site_process_id
                    };
                    config.success = function (result) {
                        layer.msg(result.message, {icon: 6, time: 1500}, function () {
                            window.location.reload();
                        });
                    };
                    tips.ajax(config);
                });
            }*/
            // customerInfo: function (siteId) {
            //     layer.open({
            //         title: '客户信息表',
            //         type: 2,
            //         content: '/admin/sites/' + siteId + '/customer?noSide=1',
            //         area: ['90%', '90%']
            //     });
            // }
        };
        // $("").each(function(){

        // });
    </script>

@endsection