{extend name="public:common" /}
{block name="css"}
<link rel="stylesheet" href="__STATIC__/css/swiper.min.css">
<link rel="stylesheet" href="__STATIC__/css/user.css">
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .swiper-container{border-bottom: 2px dashed #0EC5A1;padding:5px 0px;}
  .swiper-slide{width:80px!important;text-align:center;color:#333;cursor: pointer;}
  .actived{color:#0EC5A1;}
</style>

{/block}
{block name="content"}
<div class="page-content" id="main">
     <div class="user-box layui-form">
    	<div class="user-box-avatar">
    		<a href="{:url('@Agent/Main/index')}"><img src="/static/img/default.gif"></a>
    	</div>
    	<div class="user-box-content">
    		<p style="font-size:15px;">账 号：<font color="#FDE2B7">{$agent['account']}</font><span class="badge">{$agent['type_text']}</span>
    		</p>
    		<p style="font-size:12px;">平台币：<span v-text="agentmonay"></span>{$config.money_alias}</p>
    		<p style="font-size:12px;">人民币：<span v-text="agentrmb"></span>元{if condition="$config.agent_tixian eq 1 " /}（可提现）{/if}</p>
    	</div>
    </div>

<!--导航菜单-->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide" :class="{'actived': activeIndex == 'panel'}"  @click="switchMenu('panel')">数据面板</div>
    <div class="swiper-slide" :class="{'actived': activeIndex == 'order'}"  @click="switchMenu('order')">订单列表</div>
    <div class="swiper-slide">
        <el-dropdown>
          <span class="el-dropdown-link" :class="{'actived': activeIndex == 'daili'||activeIndex == 'add'}">
            下级代理<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><a @click="switchMenu('daili')">代理列表</a></el-dropdown-item>
            {if condition="$config.agent_add eq '1' && $agent.type neq 3" /}
            <el-dropdown-item><a @click="switchMenu('add')">新增代理</a></el-dropdown-item>
            {/if}
          </el-dropdown-menu>
        </el-dropdown>
    </div>
    <div class="swiper-slide" :class="{'actived': activeIndex == 'user'}" @click="switchMenu('user')">玩家管理</div>
    {if condition="$config.agent_tixian eq 1 " /}
    <div class="swiper-slide">
        <el-dropdown>
          <span class="el-dropdown-link" :class="{'actived': activeIndex == 'tixian'||activeIndex == 'apply'}">
            提现管理<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><a @click="switchMenu('tixian')">提现记录</a></el-dropdown-item>
            <el-dropdown-item><a @click="switchMenu('apply')">申请提现</a></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
    </div>
    {/if}
    <div class="swiper-slide" :class="{'actived': activeIndex == 'money'}" @click="switchMenu('money')">资金记录</div>
  </div>
</div>
<!--内容显示-->
<div class="layui-tab-content" style="padding:10px 0px;">
	<iframe id="mainFrame" :src="activePath" width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes"></iframe>
</div>
</div>
{/block}
{block name="javascript"}
<script type="text/javascript">
var main = new Vue({
	el: '#main',
	data: function() {
		return {
		    agentmonay:0,
		    agentrmb:0,
		    tableData:[],
			currentPage: 1,
            total: 0,
            pageSize: Number({$config['front_num']}),
			jsonData:{},
			activeIndex:"panel",
			activePath:"",
		}
	},
	/*初始化*/
	created: function() {
	    this.agentmonay = Number("{$agent.money}");
	    this.agentrmb = Number("{$agent.rmb}");
	    var active = localStorage.getItem("agent-active");
	    if(active!=null && active!=""){
	        if(active=="apply"){
	            active="tixian";
	        }
	        if(active=="add"){
	            active="daili";
	        }
	        this.activeIndex=active;
	    }
	    this.switchMenu(this.activeIndex);
	    //获取屏幕高度
    	var screenHeight = $(window).height();
    	console.log("屏幕高度是：" + screenHeight + "像素");
    	var h = (screenHeight-500)>300?(screenHeight-500):screenHeight;
    	$("#mainFrame").height(h);
	},
	methods: {
	    switchMenu(key) {
	        //保存上次切换的菜单，保证刷新或者重新进入后还是在之前的界面
            localStorage.setItem("agent-active",key);
	        this.activeIndex = key;
	        if(key=="add"){
	            var width = ismobile() ? "80%" : "50%";
	            layer.open({
                    type: 2
                    ,title: '添加代理'
                    ,content: '{:url("@Agent/Daili/add")}'
                    ,shadeClose:true
                	,moveOut:true
                	,maxmin:true
                	,fixed:false
                    ,area: [width, '80%']
    				,offset: 'auto'
                });
	        }else if(key=="apply"){
	            var width = ismobile() ? "80%" : "50%";
	            layer.open({
                    type: 2
                    ,title: '申请提现'
                    ,content: '{:url("@Agent/Daili/apply")}'
                    ,shadeClose:true
                	,moveOut:true
                	,maxmin:true
                	,fixed:false
                    ,area: [width, '80%']
    				,offset: 'auto'
                });
    	    }else{
	            this.activePath="{:url('@Agent/Main/"+key+"')}";
    	    }
        },
	}
});
</script>
<script src="__STATIC__/js/swiper-4.2.0.min.js"></script>
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container', {
    autoplay: false,//可选选项，自动滑动
    freeMode:true,//滑动不够一格，不会自动贴合
    slidesPerView:4,//设置slider容器能够同时显示的slides数量
})
</script>
{/block}