{extend name="Public/base"/}
{block name="css"}
<link rel="stylesheet" href="__PUBLIC__/css/reset.css?v={$Think.const.APP_VERSION}">
<link rel='stylesheet' href="__PUBLIC__/item/css/layui.css?v={$Think.const.APP_VERSION}">
<link rel='stylesheet' href="__PUBLIC__/css/crm.css?v={$Think.const.APP_VERSION}">
<link rel='stylesheet' href="__PUBLIC__/css/customer.css?v={$Think.const.APP_VERSION}">
<link rel='stylesheet' href="__PUBLIC__/css/color.css?v={$Think.const.APP_VERSION}">

<link rel='stylesheet' href="__PUBLIC__/jqgrid/css/ui.jqgrid.css?v={$Think.const.APP_VERSION}"/>
<link rel='stylesheet' href="__PUBLIC__/jqgrid/css/ui.multiselect.css?v={$Think.const.APP_VERSION}"/>
<link rel='stylesheet' href="__PUBLIC__/jqgrid/css/jquery.ui.datepicker.css?v={$Think.const.APP_VERSION}"/>
<link rel='stylesheet' href="__PUBLIC__/jqgrid/css/jquery.contextmenu.css?v={$Think.const.APP_VERSION}"/>
<link rel='stylesheet' href="__PUBLIC__/jqgrid/jquery-ui-1.12.1.custom/jquery-ui.css?v={$Think.const.APP_VERSION}"/>
{/block}
{block name="js"}
<script src="__PUBLIC__/js/public.js?v={$Think.const.APP_VERSION}"></script>
<script src="__PUBLIC__/js/echarts.online.js?v={$Think.const.APP_VERSION}"></script>
<script src="__PUBLIC__/js/index1.js?v={$Think.const.APP_VERSION}"></script>
<script src="__PUBLIC__/js/raphael.js?v={$Think.const.APP_VERSION}"></script>
<script src="__PUBLIC__/js/cycle.js?v={$Think.const.APP_VERSION}"></script>
<script>
    $(function(){
        // $(".nul_bli").eq(0).find(".navb").addClass("active");
    })
</script>
{/block}
<style>
    {block name="style"}
    .tab_shop{
        margin-left: 400px;
    }
    .tab_shop ul{
        margin: 19px;
        overflow: hidden;
    }
    .tab_shop li{
        float: left;
        width: 425px;
        margin: 5px;
        text-align: center;
        height: 30px;
        line-height: 30px;
        border-radius: 4px;
        cursor: pointer;
        border: 1px solid #768da2;
        color: #768da2;
    }
    .tab_shop li:hover{
        border: 1px solid #01b88a;
        color: #3c3c3c;
    }
    .tab_shop .li-check{
        color: #fff;
        background-color: #01b88a;
    }
    .index_top{
        height: auto;
    }
    .home-wrap{
        height: 80px;
    }
    .user-left{
        float: left;
    }
    @media screen and (max-width: 1490px){
        .tab_shop{
            clear: both;
            margin-left: 0;
        }
    }
    {/block}
</style>
{block name="main"}
<div class="if_wrap">
    <div id="if_con">
        <div class="index_top">
            <div class="user-left">
                <span class="index_user">
            <img src="__PUBLIC__/upload/pic/{$info.id}.jpg" onerror="javascript:this.src='__PUBLIC__/img/user_tt_b.jpg';" id="photo" >
            <span><strong>{$info.staffname}</strong><small>{$Think.session.main_position_name}</small></span>
        </span>
                <input type="hidden" id="staff_id" value="{$info.id}">
                {auth code='menu1512987394'}
                <div class="home-wrap"{if condition="empty($group_info) eq true"}style="display: none"{/if}>
                <div class="user_fir">
                    <div class="user_fa">查看小伙伴</div>
                    <div class="user_fa_con">
                        <div class="user_fa_tit">我的小伙伴</div>
                        <div class="user_fad">
                            {volist name="group_info" id="group"}

                            <!--<a href="{:url('Customer/index',[id=>$group.staff_id])}" class="user_fd" >-->
                            <a href="#" class="user_fd" >
                                <img src="__PUBLIC__/upload/pic/{$group.staff_id}.jpg" onerror="javascript:this.src='__PUBLIC__/img/user_tt_b.jpg';">
                                <span {if $group.status}style="color:#01b88a"{else/}style="color:#ccc"{/if}>
                                {$group.staff_name}
                                </span>
                            </a>
                            {/volist}
                        </div>
                    </div>
                </div>
            </div>
            {/auth}
            <!-- <div class="index_line"></div>
             <div class="index_date">时间：</div>
             <div class="home-wrap">
                 <div class="user_fir">
                     <div class="user_fa">
                         {if condition="$times eq 'month'"}本月
                         {elseif condition="$times eq 'last_month'"/}上月
                         {elseif condition="$times eq 'week'"/}本周
                         {elseif condition="$times eq 'last_week'"/}上周
                         {elseif condition="$times eq 'today'"/}当天
                         {else/}当天
                         {/if}
                     </div>
                     <div class="user_date_con">
                         <div class="user_da">
                             <span><a href="{:url('Customer/index',[id=>$info.id,times=>month])}">本月</a></span>
                             <span><a href="{:url('Customer/index',[id=>$info.id,times=>last_month])}">上月</a></span>
                             <span><a href="{:url('Customer/index',[id=>$info.id,times=>week])}">本周</a></span>
                             <span><a href="{:url('Customer/index',[id=>$info.id,times=>last_week])}">上周</a></span>
                             <span><a href="{:url('Customer/index',[id=>$info.id,times=>today])}">当天</a></span>
                         </div>
                         <input type="hidden" id="times" value="{$times|default=today}">
                         <input type="hidden" id="wu" value="{$wu}">
                     </div>
                 </div>
             </div>-->
        </div>
        <!-- <div class="tab_shop">
            <ul>
                {if condition="count($positions) gt 1"}
                {volist name="positions" id="pop"}
                <li class="checkPop {if $Think.session.main_position_code eq $pop.position_code}li-check{/if}" id="{$pop.position_code}">{$pop.brandclass}-{$pop.shop_name}-{$pop.department_name}-{$pop.position_name}</li>
                {/volist}
                {/if}
            </ul>
        </div> -->
    </div>
    <input type="hidden" id="wu" value="{$wu}">
    <div class="index_con">
        <div class="index_cc">
            <div class="index_c">
                    <p style="width: 100%;text-align: center;margin-top: 60px;">{$msg}</p>
            </div>
        </div>

    </div>
</div>
</div>
{/block}
<script>
    {block name="script"}
    $(function(){
        $('.checkPop').click(function(){
            var position_code= $(this).attr('id');
            temp=0;
            $.ajax({
                type: "post",
                async: false,
                url: "{:Url('crm/Customer/change_shop')}",
                data: {position_code:position_code},
                dataType: "json",
                success: function (result) {
                    if(result){
                        // layer.alert('切换成功,请稍后...');
                        window.location.href="/";
                    }else{
                        layer.alert('切换失败，请重新操作');
                        return false;
                    }
                }
            })
        });
        var id = $('#staff_id').val();
        var times = $('#times').val();
        if($('#wu').val()>0){
            $.ajax({
                type: "post",
                url: "{:Url('crm/Customer/getHomeTu')}",
                data: {staff_id:id,times:times},
                dataType: "json",
                success: function (result) {
                    if(result != null){
                        var myChart1 = echarts.init(document.getElementById('radar_div'));
                        var option1 = optionP;
                        option1.radar.indicator = eval(result.a);
                        option1.series[0].data[0].value  = eval(result.b);
                        myChart1.setOption(option1);
                    }
                }
            });
        }
        //目标
        $.ajax({
            type: "post",
            async: false,
            url: "{:Url('crm/Customer/getAIM')}",
            data: {staff_id:id,times:times},
            dataType: "json",
            success: function (result) {
                if(result.code == 200){
                    var len = result.data.length;
                    var inp = '';
                    var rate = '';
                    var name = '';
                    var goalRate = '';
                    //目标
                    for(var i=0;i<len;i++){
                        inp += '<span><small>'+result.data[i]["kpi_name"]+'</small><strong>'+result.data[i]["kpi"]+'</strong></span><i></i>';
                    }
                    $('#goal').html(inp);
                    //业绩
                    rate += '<font><span style="display: none">'+result["yeji"]+'</span> <b>'+result["yeji"]+'%</b> <br>业绩完成 </font>';
                    $('#processingbar').html(rate);
                    $('#processingbar').css('display','block');
                    //目标
                    for(var k=0;k<len;k++){
                        name += '<div class="jdt_name">'+result.data[k]["kpi_name"]+'</div>';
                    }
                    $('#name').html(name);
                    //进度
                    for(var kk=0;kk<len;kk++){
                        var reach = result.data[kk]["reach"] ? result.data[kk]["reach"] : 0;
                        goalRate += '<div class="layui-progress layui-progress-big" lay-showPercent="true"><div class="layui-progress-bar layui-bg-blue2" lay-percent="'+reach+'%" style="width: '+reach+'%"><span class="layui-progress-text">'+reach+'%</span></div></div> <br/>';
                    }
                    $('#goalRate').html(goalRate);
                }
            }
        });
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();
        {if $info.id eq $Think.session.staff_id}
        fileSelected();
        {/if}

        $.ajax({
            type: "post",
            url: "{:Url('crm/Customer/getIndexData')}",
            data: {id:"{$info.id}",times:"{$times}"},
            dataType: "json",
            success: function (result) {
                if(result.code == 200){
                    for(var k in result.data){
                        for(var key in result.data[k]){
                            if(result.data[k].cost){
                                $('#'+k+'_cost').html(result.data[k].cost.value);
                            }
                            if(result.data[k].allCRM){
                                $('#'+k+'_mkz').html(result.data[k].allCRM.value);
                            }
                            if(result.data[k].validCRM){
                                $('#'+k+'_yx').html(result.data[k].validCRM.value);
                            }
                            if(result.data[k].validDJ){
                                $('#'+k+'_yx_dj').html(result.data[k].validDJ.value);
                            }
                            if(result.data[k].validOrder){
                                $('#'+k+'_order').html(result.data[k].validOrder.value);
                            }
                             if(result.data[k].order_start){
                                $('#'+k+'_order_start').html(result.data[k].order_start.value);
                            }
                            if(result.data[k].all_cost){
                                $('#'+k+'_mkz_cost').html(result.data[k].all_cost.value);
                            }
                            if(result.data[k].order_cost){
                                $('#'+k+'_order_cost').html(result.data[k].order_cost.value);
                            }
                            if(result.data[k].tel){
                                $('#'+k+'_tel').html(result.data[k].tel.value);
                            }
                            if(result.data[k].qq){
                                $('#'+k+'_qq').html(result.data[k].qq.value);
                            }
                            if(result.data[k].invalidOrder){
                                $('#'+k+'_wx_order').html(result.data[k].invalidOrder.value);
                            }
                            if(result.data[k].validJD){
                                $('#'+k+'_validJD').html(result.data[k].validJD.value);
                            }
                            if(result.data[k].fact){
                                $('#'+k+'_fact').html(result.data[k].fact.value);
                            }
                            if(result.data[k].loss){
                                $('#'+k+'_loss').html(result.data[k].loss.value);
                            }
                            if(result.data[k].jdwd_crm){
                                $('#'+k+'_dzz').html(result.data[k].jdwd_crm.value);
                            }
                            // if(result.data[k].jd_crm){
                                // $('#'+k+'_yy').html(result.data[k].jd_crm.value);
                            // }
                            if(result.data[k].cus_a){
                                $('#'+k+'_a').html(result.data[k].cus_a.value);
                            }
                            if(result.data[k].youxiao){
                                $('#'+k+'_validRate').html(result.data[k].youxiao.value);
                            }
                            if(result.data[k].zhuanhua){
                                $('#'+k+'_zhuanhua').html(result.data[k].zhuanhua.value);
                            }
                            if(result.data[k].zd){
                                $('#'+k+'_zd').html(result.data[k].zd.value);
                            }
                            if(result.data[k].orderOnline){
                                $('#'+k+'_orderOnline').html(result.data[k].orderOnline.value);
                            }
                            if(result.data[k].mkzZD){
                                $('#'+k+'_mkzZD').html(result.data[k].mkzZD.value);
                            }
                            if(result.data[k].mkzOrder){
                                $('#'+k+'_mkzOrder').html(result.data[k].mkzOrder.value);
                            }
                            if(result.data[k].telRate){
                                $('#'+k+'_telRate').html(result.data[k].telRate.value);
                            }
                            if(result.data[k].chengjiao){
                                $('#'+k+'_succ').html(result.data[k].chengjiao.value);
                            }
                            if(result.data[k].ake){
                                $('#'+k+'_aRate').html(result.data[k].ake.value);
                            }
                            if(result.data[k].orderzhuanhuan){
                                $('#'+k+'_orderzhuanhuan').html(result.data[k].orderzhuanhuan.value);
                            }
                            if(result.data[k].one_fact){
                                $('#'+k+'_one_fact').html(result.data[k].one_fact.value);
                            }
                            if(result.data[k].one_avg){
                                $('#'+k+'_one_avg').html(result.data[k].one_avg.value);
                            }
                            if(result.data[k].total_fact){
                                $('#'+k+'_total_fact').html(result.data[k].total_fact.value);
                            }
                        }
                    }
                }
            }
        })
    });

    //上传图片
    function fileSelected() {
        layui.use('upload',function(){
            var upload = layui.upload;
            upload.render({
                url: '{:url(upload_photo)}'
                ,elem:'#photo'
                ,ext: 'jpg'
                ,area: ['100', '100px']
                ,field:'file'
                ,size:'1024'
                ,accept:'images'
                ,done: function(res){
                    if(res.state==1){
                        $('#photo').attr('src','__PUBLIC__/upload/pic/'+res.path);
                        layui.form.render();
                    }else{
                        layer.alert(res.msg);
                    }
                },
                error:function(){
                    layer.alert("头像上传失败，请重试。");
                }
            });
        })
    }


    var optionP = {};
    optionP.title = {text:''}
    optionP.radar = {
        name: {
            textStyle: {
                color: '#fff',
                backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
            }
        },
    };
    optionP.series = [{
        type: 'radar',
        data : [
            {
                value : [],
            }
        ]
    }];



    layui.use(['element', 'form'], function(){
        var element = layui.element;

        element.on('tab(test)', function(data){
            console.log(this, data);
        });

        element.on('nav(test)', function(elem){
            console.log(elem)
        });

        element.on('collapse(test)', function(data){
            console.log(data);
        });
    });
    $(function() {
        var c = $('#processingbar');
        animateEle();
        $(window).scroll(function() {
            animateEle()
        });

        function animateEle() {
            var b = {
                top: $(window).scrollTop(),
                bottom: $(window).scrollTop() + $(window).height()
            };
            c.each(function() {
                if (b.top <= $(this).offset().top && b.bottom >= $(this).offset().top && !$(this).data('bPlay')) {
                    $(this).data('bPlay', true);
                    var a = $(this).find('font span').text().replace(/\%/, '');
                    if ($(this).find("font span").text() !== "0%") {
                        $(this).svgCircle({
                            parent: $(this)[0],
                            w: 110,
                            R: 47,
                            sW: 10,
                            color: ["#56bb2b", "#56bb2b", "#56bb2b"],
                            perent: [100, a],
                            speed: 150,
                            delay: 400
                        })
                    }
                    if ($(this).find("font span").text() == "0%") {
                        $(this).find("font span").css("color", "#a9a9a9");
                        $(this).svgCircle({
                            parent: $(this)[0],
                            w: 110,
                            R: 47,
                            sW: 10,
                            color: ["#d1d1d1", "#d1d1d1", "#d1d1d1"],
                            perent: [100, a],
                            speed: 150,
                            delay: 400
                        })
                    }
                }
            })
        }
    });
    {/block}
</script>