{extend name="crm@Public/base"/}
{block name="css"}
<link rel="stylesheet" href="__PUBLIC__/advert/css/bootstrap.css">
<link rel="stylesheet" href="__PUBLIC__/advert/css/animate.css"  />
<link rel="stylesheet" href="__PUBLIC__/advert/css/font-awesome.min.css" />
<link rel="stylesheet" href="__PUBLIC__/advert/css/icon.css" />
<link rel="stylesheet" href="__PUBLIC__/advert/css/font.css" />
<link rel="stylesheet" href="__PUBLIC__/advert/css/app.css" />
<link rel="stylesheet" href="__PUBLIC__/advert/css/app-override.css" />
{/block}
{block name="js"}
<script>
    $(function(){
        // $(".nul_bli").eq(8).find(".navb").addClass("active");
    })
</script>
{/block}
{block name="style"}
<style>
    .table-responsive th,.table-responsive td{
        font-size: 14px;
        text-align: center;
        line-height: 90px;
    }
    input, select {
        border: 1px solid #ccc;
        height: 21px;
        border-radius: 3px;
        padding: 0 5px;
        width: 100px;
        margin-top: 5px;
    }
    .m-r-xs {
        margin-right: 25px;
    }
</style>
{/block}
{block name="main"}
<div class="if_wrap">
    <div class="cus-con">
        <section class="hbox stretch">
            <section class="YT_h_f">

                <section class="hbox stretch" id="info_form_lists">

                    <section class="vbox">
                        <header class="header bg-white b-b clearfix">
                            <div class="row m-t-sm">
                                <div class="col-sm-12 m-b-xs">
                                    <form class="form-inline" role="form" method="post" action="/mc/formSet/create.html">
                                        <div class="form-group" style="width:100%">
                                            <div class="input-group">
                                                <input type="hidden" name="name" value="1566522701" class="input-sm form-control" placeholder="请在此添加表单名后点击右侧的新增表单">
						                  <span class="input-group-btn">
						                    <a href="/advert/Advert/createForm" target="_blank" class="btn btn-s-md btn-success" type="submit"><i class="fa fa-plus"></i> 点此添加新表单</a>
						                  </span>
                                                <!--<span style="margin-left:100px;color:red;">需要微信分享时带有图片和说明性文字的，请到微信管理中心给您的网站和手机网站的域名授权即可实现.</span>-->
                                            </div>
                                        </div>
                                    </form>

                                </div>
                            </div>
                        </header>
                        <style>
                            .tc_bg{
                                width:100%;
                                height:100%;
                                position: fixed;
                                left: 0;
                                top: 0;
                                z-index:9999;
                                background-color: rgba(0,0,0,.5);
                            }
                            .tc_box{
                                width:100%;
                                height:100%;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                            }
                            .tc_boxd{
                                width: 45%;
                                height: auto;
                                border: 1px solid lightblue;
                                background-color: #fff;
                            }
                            .tc_box_title{
                                width: 100%;
                                height: 35px;
                                box-sizing: border-box;
                                display: flex;
                                justify-content: space-between;
                                border-bottom: 1px solid lightblue;
                            }
                            .tc_box_title span{
                                width: auto;
                                height: 35px;
                                line-height: 35px;
                                font-size: 16px;
                                color: #333;
                                padding: 0 10px;
                            }
                            .tc_box_title small{
                                width: 35px;
                                height: 35px;
                                line-height: 35px;
                                font-size: 18px;
                                color: #333;
                                text-align: center;
                                cursor: pointer;
                            }
                            .tc_cc{
                                width: 100%;
                                height: auto;
                                min-height: 200px;
                                padding: 10px;
                                box-sizing: border-box;
                            }
                            .other_channel{
                                float: left;
                                padding: 10px;
                                /*height: 360px;*/
                            }
                            .tc_cc img{
                                margin-left: 10px;
                            }
                            </style>
                        <div id="other"class="tc_bg" style="display: none;">
                            <div class="tc_box">
                                <div class="tc_boxd">
                                    <div class="tc_box_title"><span>其它渠道</span><small onclick="close_tc();">x</small></div>
                                    <div class="tc_cc">

                                    </div>
                                </div>
                            </div>
                        </div>
                        <section class="scrollable wrapper w-f">
                            <section class="panel panel-default">
                                <div class="table-responsive">
                                    <table class="table table-striped m-b-none">
                                        <thead>
                                        <tr>
                                            <th width="18%">表单名</th>
                                            <th width="5%">提交数</th>
                                            <th width="5%">错误数</th>
                                            <th width="5%">点击数</th>
                                            {volist name="channel" id="c"}
                                            <th width="10%">{$c.channel_name}渠道</th>
                                            {/volist}
                                            <th width="10%">其他渠道</th>
                                            <th width="5%">预览</th>
                                            <th width="5%">操作</th>
                                        </tr>
                                        </thead>
                                        <tbody id="tbody">
                                        {volist name="info" id="vo"}
                                        <tr id="tr_{$vo.id}">
                                            <td style="line-height: 90px"><a href="/advert/Advert/customerList.html?advert_code={$vo.advert_code}" target="_blank">{$vo.name}</a></td>
                                            <td style="line-height: 90px"><a href="/advert/Advert/customerList.html?advert_code={$vo.advert_code}" target="_blank" style="color:red">{$vo.request_num}</a></td>
                                            <td style="line-height: 90px"><a href="/advert/Advert/customerList.html?advert_code={$vo.advert_code}&is_in=4" target="_blank">{$vo.repeat_num}</a></td>
                                            <td style="line-height: 90px"><a href="#">{$vo.click_num}</a></td>
                                            {volist name="vo.son" id="ch"}
                                            <td>
                                                <a href="{$ch.advurl}" target="_blank">
                                                    <img style="width:80px;height:80px;" src="__PUBLIC__/qrcode/{$ch.qrcode}">
                                                </a>
                                                <br>
                                                <input type="text" size="11" value="{$ch.advurl}">
                                            </td>
                                            {/volist}
                                            <td><button  style="margin-top: 35px;" onclick="showOtherChannels('{$vo.id}')" data-toggle="modal" data-target=".form_other_channel" class="btn btn-s-md btn-default" alt="其他渠道点此打开"><i class="fa  fa-fw m-r-xs" title="其他渠道点此打开">MORE...</i></button></td>
                                            <td>
                                                <a href="{$vo.yl}" class="btn btn-xs btn-bg btn-default" title="预览" style="padding: 4px 20px;margin-top: 35px;" target="_blank">预览</a>
                                            </td>
                                            <td>
                                                <div class="btn-group" style="margin-top: 25px;">
                                                    <a  href="/advert/Advert/export?advert_code={$vo.advert_code}" class="btn btn-xs btn-bg " title="导出"><i class="fa fa-download 2x"></i></a>
                                                    <a class="btn btn-xs btn-bg" onclick="createEwm('{$vo.advert_code}');" title="重新生成二维码"><i class="fa fa-wrench 2x"></i></a><br><br>
                                                    <a type="button" href="/advert/Advert/createForm?advert_code={$vo.advert_code}&id={$vo.id}" class="btn btn-xs btn-bg btn-default" title="编辑" target="_blank"><i class="fa fa-edit"></i></a>
                                                    <button style="margin-left:10px;" type="button" onclick="delAdvert({$vo.id});" class="btn btn-xs btn-bg btn-default" title="删除"><i class="fa fa-minus"></i></button>
                                                </div>
                                            </td>
                                        </tr>
                                        {/volist}
                                        </tbody>
                                    </table>
                                </div>
                            </section>
                        </section>
                        <footer class="footer bg-white b-t">
                            <div class="row text-center-xs">
                                <div class="col-md-6 hidden-sm">
                                    <p class="text-muted m-t">第 {$page} 页，共 {$count} 条，每页 {$limit} 条，共 {$total} 页</p>
                                </div>
                                <div class="col-md-6 col-sm-12 text-right text-center-xs">
                                    <ul class="pagination pagination-sm m-t-sm m-b-none">
                                        {if $page > 2}
                                        <li><a href="javascript:void(0)" onclick="jump({1})">第一页</a></li>
                                        {/if}
                                        {if $page > 1}
                                        <li><a href="javascript:void(0)" onclick="jump({$prev})">上一页</a></li>
                                        {/if}
                                        {if $page < $total}
                                        <li><a href="javascript:void(0)" onclick="jump({$next})">下一页</a></li>
                                        {/if}
                                        {if $page+1 < $total}
                                        <li><a href="javascript:void(0)" onclick="jump({$total})">最后一页</a></li>
                                        {/if}
                                    </ul>
                                </div>
                            </div>
                        </footer>

                    </section>
                </section>
            </section>
        </section>
        <style>
            .loader4 {
                width:45px;
                height:45px;
                display:inline-block;
                padding:0px;
                border-radius:100%;
                border:5px solid;
                border-top-color:rgba(246, 36, 89, 1);
                border-bottom-color:rgba(0,0,0, 0.1);
                border-left-color:rgba(246, 36, 89, 1);
                border-right-color:rgba(0,0,0, 0.1);
                -webkit-animation: loader4 1s ease-in-out infinite;
                animation: loader4 1s ease-in-out infinite;
            }
            @keyframes loader4 {
                from {transform: rotate(0deg);}
                to {transform: rotate(360deg);}
            }
            @-webkit-keyframes loader4 {
                from {-webkit-transform: rotate(0deg);}
                to {-webkit-transform: rotate(360deg);}
            }
        </style>
        <div class="loader4-box" style="width:100%;height:100%;position:fixed;background-color:rgba(255,255,255,.7);left:0px;top:0px;z-index:998;display: none;"><div class="loader4" style="position: absolute;top:50%;left: 50%;margin-top:-40px;margin-left: -40px;"></div></div>
    </div>
    </div>
</div>
{/block}
<script>
    {block name="script"}
    function showOtherChannels(id){
        var host = "{$host}";
        var html = '';
        $.ajax({
        type: "POST",
        url: '/advert/Advert/otherChannel',
        data: {aid:id},
        success: function (msg) {
            if (msg.length == 0) {
                html += '<div class="other_channel"><h4>暂无其它渠道</h4></div>';
            } else {
                for(var i=0;i<msg.length;i++){
                    html+= '<div class="other_channel"><p style="text-align: center;">'+msg[i]["channel_name"]+'</p><a target="_blank" href="'+msg[i]["advurl"]+'"><img style="width:80px;height:80px;" src="__PUBLIC__/qrcode/'+msg[i]["qrcode"]+'"></a><br><input type="text" size="11" value="'+msg[i]["advurl"]+'"></div>';
                }
            }
            $('.tc_cc').html(html);
            $('#other').css('display','block');
        }
    })
}
    function createEwm(code){
        $('.loader4-box').show();
        $.ajax({
            type: "POST",
            url: '/advert/Advert/createEwm',
            data: {advert_code: code},
            success: function (msg) {
                $('.loader4-box').hide();
                alert('生成完毕');
                window.location.reload();
            }
        })
    }
    function close_tc(){
        $('#other').css('display','none');
    }
        function jump(page){
            $.ajax({
                type: "POST",
                url: '/advert/Advert/index',
                data: {page:page},
                success: function (msg) {
                    if (msg.code != 200) {
                        layer.alert(msg.msg);
                    }else{
                        var info = msg.data.info;
                        var rep = '';
                        for (var i = 0; i < info.length; i++) {
                            rep += '<tr id="'+info[i]["id"]+'">';
                            rep +=  '<td style="line-height: 90px"><a href="/advert/Advert/customerList.html?advert_code='+info[i]["advert_code"]+'" target="_blank">'+info[i]["name"]+'</a></td>';
                            rep +=  '<td style="line-height: 90px"><a href="/advert/Advert/customerList.html?advert_code='+info[i]["advert_code"]+'" target="_blank" style="color:red">'+info[i]["request_num"]+'</a></td>';
                            rep +=  '<td style="line-height: 90px"><a href="/advert/Advert/customerList.html?advert_code='+info[i]["advert_code"]+'&is_in=4" target="_blank">'+info[i]["repeat_num"]+'</a></td>';
                            rep +=  '<td style="line-height: 90px"><a href="#">'+info[i]["click_num"]+'</a></td>';
                            var channel = info[i]["son"];
                            for(var j=0;j<channel.length;j++){
                                rep +=  '<td>';
                                rep +=  '<a href="'+channel[j]["advurl"]+'" target="_blank">';
                                rep +=  '<img style="width:80px;height:80px;" src="__PUBLIC__/qrcode/'+channel[j]["qrcode"]+'">';
                                rep +=  '</a>';
                                rep +=  '<br>';
                                rep +=  '<input type="text" size="11" value="'+channel[j]["advurl"]+'">';
                                rep +=  '</td>';
                            }
                        rep +=  '<td><button  style="margin-top: 35px;" onclick="showOtherChannels(\''+info[i]["id"]+'\')" data-toggle="modal" data-target=".form_other_channel" class="btn btn-s-md btn-default" alt="其他渠道点此打开"><i class="fa  fa-fw m-r-xs" title="其他渠道点此打开">MORE...</i></button></td>';
                                    rep +=  '<td>';
                                    rep +=  '<a href="'+info[i]["yl"]+'" class="btn btn-xs btn-bg btn-default" title="预览" style="padding: 4px 20px;margin-top: 35px;" target="_blank">预览</a>';
                                    rep +=  '</td>';
                                    rep +=  '<td>';
                                    rep +=  '<div class="btn-group" style="margin-top: 25px;">';
                                    rep +=  '<a  href="/advert/Advert/export?advert_code='+info[i]["advert_code"]+'" class="btn btn-xs btn-bg " title="导出"><i class="fa fa-download 2x"></i></a>';
                                    rep +=  '<a class="btn btn-xs btn-bg" onclick="createEwm(\''+info[i]["advert_code"]+'\');" title="重新生成二维码"><i class="fa fa-wrench 2x"></i></a><br><br>';
                                    rep +=  '<a type="button" href="/advert/Advert/createForm?advert_code='+info[i]["advert_code"]+'&id='+info[i]["id"]+'" class="btn btn-xs btn-bg btn-default" title="编辑" target="_blank"><i class="fa fa-edit"></i></a>';
                                    rep +=  '<button style="margin-left:10px;" type="button" onclick="delAdvert('+info[i]["id"]+');" class="btn btn-xs btn-bg btn-default" title="删除"><i class="fa fa-minus"></i></button>';
                                    rep +=  '</div>';
                                    rep +=  '</td>';
                                    rep +=  '</tr>';
                        }
                        $("#tbody").html(rep);
                        //设置页脚信息
                        var foot = '<div class="row text-center-xs"> <div class="col-md-6 hidden-sm"> <p class="text-muted m-t">第 '+msg.data.page+' 页，共 '+msg.data.count+' 条，每页 '+msg.data.limit+' 条，共 '+msg.data.total+' 页</p></div> <div class="col-md-6 col-sm-12 text-right text-center-xs"> <ul class="pagination pagination-sm m-t-sm m-b-none">';
                        if(msg.data.page > 2){
                            foot += '<li><a href="javascript:void(0)" onclick="jump(1)">第一页</a></li>';
                        }
                        if(msg.data.page > 1){
                            foot += '<li><a href="javascript:void(0)" onclick="jump('+msg.data.prev+')">上一页</a></li>';
                        }
                        if(msg.data.page < msg.data.total){
                            foot += '<li><a href="javascript:void(0)" onclick="jump('+msg.data.next+')">下一页</a></li>';
                        }
                        if(msg.data.page+1 < msg.data.total){
                            foot += '<li><a href="javascript:void(0)" onclick="jump('+msg.data.total+')">最后一页</a></li>';
                        }
                        foot += '</ul></div></div>';
                        $('.footer').html(foot);
                    }
                }
            })
        }
    function delAdvert(id){
        if(confirm("确定删除吗?")){
            //点击确定后操作
            $.ajax({
                type: "POST",
                url: '/advert/Advert/delAdvert',
                data: {id: id},
                success: function (msg) {
                    if (msg.code != 200) {
                        layer.alert(msg.msg);
                    } else {
                        alert('删除成功');
                        $('#tr_'+id).remove();
                    }
                }
            })
        }
    }
    {/block}
</script>