{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/cycle.js?v={$Think.const.APP_VERSION}"></script>
<script src="__PUBLIC__/js/raphael.js?v={$Think.const.APP_VERSION}"></script>
<script>
    $(function(){
        $(".nul_bli").eq(0).find(".navb").addClass("active");
    })
</script>
{/block}
<style>
    {block name="style"}
    .index_data2 .cus-link .cus-link-wrap li {
        width: auto;
    }
    .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="pic" >
            <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" >
                                <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:#00ff00"{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}">
                        </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>

        <div class="index_con">
            <div class="index_cc">
                <div class="index_c">
                    {include file="Public:kzjx"/}
                    <div class="index_chart">
                        <div class="index_c_left">
                            <div class="index_da2_tit">指标<span class="box" data-type="mubiao_btn">
                                {auth code='menu1512028704'}
                                <a href="{:url('crm/Setting/goalSet')}">目标设置</a>
                                {/auth}
                            </span></div>
                            <div class="index_da2_con">
                                {volist name="aim" id="vo"}
                                <span><small>{$vo.kpi_name}</small><strong>{$vo.kpi}{$aim.kpi_unit}</strong></span>
                                <i></i>
                                {/volist}
                            </div>
                            <div class="index_c_chart">
                               {if condition="empty($aim) neq true"}
                                <div id="processingbar" class="processingbar">
                                    <font>
                                        <span style="display: none">
                                            {if $yeji > 100}
                                                100%
                                            {else}
                                                {$yeji}
                                            {/if}
                                        </span>
                                        <b>{$yeji}%</b>
                                        <br>业绩完成
                                    </font>
                                </div>
                                {/if}
                                <div class="index_jdt_con">
                                    <div class="jdt_name_con">
                                        {volist name="aim" id="jdt_name"}
                                        <div class="jdt_name">{$jdt_name.kpi_name}</div>
                                        {/volist}
                                    </div>
                                    <div class="index_jdt">
                                        {volist name="aim" id="kpi"}
                                        <div class="layui-progress layui-progress-big" lay-showPercent="true">
                                            <div class="layui-progress-bar layui-bg-blue2" lay-percent="{$kpi.reach}%" style="width: {$kpi.reach|default=0}%">
                                            </div>
                                        </div>
                                        <br/>
                                        {/volist}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="index_c_right">
                            <div id="radar_div" style="width: 450px;height:260px; margin-top:10px;"></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>
{/block}
<script>
    {block name="script"}
    $(function(){
        $('.checkPop').click(function(){
            var position_code= $(this).attr('id');
            $.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();
        $.ajax({
            type: "post",
            async: false,
            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);
                }
            }
        });
        $( "#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].validOrder){
                                $('#'+k+'_order').html(result.data[k].validOrder.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].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].jindian){
                                $('#'+k+'_jd').html(result.data[k].jindian.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].yyzh){
                                $('#'+k+'_yyRate').html(result.data[k].yyzh.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:'#pic'
                ,ext: 'jpg'
                ,area: ['100', '100px']
                ,field:'file'
                ,size:'1024'
                ,accept:'images'
                ,done: function(res){
                    if(res.state==1){
                        $('#pic').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);
        });
    });
    {/block}
</script>