{extend name="public:base" /}
{block name="css"}
<style>
.switchStyle .el-switch__label {
  position: absolute!important;
  display: none!important;
  color: #fff!important;
}
.switchStyle .el-switch__label--left {
  z-index: 9!important;
  left: 6px!important;
}
.switchStyle .el-switch__label--right {
  z-index: 9!important;
  left: -14px!important;
}
.switchStyle .el-switch__label.is-active {
  display: block!important;
}
.switchStyle.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 60px !important;
}
</style>
{/block}
{block name="content"}
<div class="page-content" id="item">
	<div class="panel">
		<div class="panel-heading">
			<h3 class="panel-title panel-title-blue"><i class="iconfont">&#xe64a;</i>背包物品统计</h3>
		</div>
		<div class="panel-body">
		    <div class="row">
		         <div class="col-lg-2 col-sm-3 col-xs-12 omgui-flex-box">
		        <label class="omgui-label">所属区服：</label>
				<el-select @change="selectChange" v-model="serverid" placeholder="请选择" style="width:100%;">
					<el-option
						v-for="item in serverList"
						:key="item.server"
						:label="item.name"
						:value="item.server">
					</el-option>
				</el-select>
		    </div>
				<div class="col-lg-2 col-sm-3 col-xs-12 omgui-flex-box">
					<label class="omgui-label">选择物品：</label>
					<el-select
						  v-model="itemid"
						  v-loadmore="loadMore"
						  placeholder="请选择" style="width:100%;">
						  <el-option
						    @click.native="selectChange(item.id)"
							v-for="item in itemList"
							:key="item.id"
							:label="item.name"
							:value="item.id"
						  ></el-option>
						</el-select>
				</div>
				<div class="col-lg-4 col-sm-6 col-xs-12 omgui-flex-box">
    				<el-input
    					placeholder="请输入物品ID或者名称"
    					prefix-icon="el-icon-search"
    					v-model="keyword" @change="search()" clearable>
    				</el-input>&nbsp;&nbsp;
    				<el-button type="success" icon="el-icon-search"><span class="hidden-xs">搜索</span></el-button>
    			</div>
			</div>
			<el-alert type="info" effect="dark" show-icon style="margin-bottom:10px;">
        		<template slot='title'>
        			提示：选择您要查看的<font color="yellow">物品</font>，会自动统计<el-tag type="danger" size="mini" effect="dark">拥有</el-tag> 该物品的玩家和物品数量排行。
        		 </template>
        	</el-alert>
			<template>
				<el-table 
				:header-cell-style="{ textAlign: 'center' }" 
				:data="tableData"
				border fit highlight-current-row style="width: 100%">
				<template slot="empty">
					<div class='nonedata'><img src='__STATIC__/images/none.png'/><p>暂无数据</p></div>
				</template>
				    <el-table-column prop="itemid" label="物品ID" align="center"></el-table-column>
				    <el-table-column prop="itemname" label="物品名称" align="center"></el-table-column>
					<el-table-column prop="account" label="玩家账号" align="left"></el-table-column>
					<el-table-column prop="rolename" label="角色名称" align="center"></el-table-column>
					<el-table-column prop="num" label="物品数量" align="center"></el-table-column>
					<el-table-column prop="packText" label="所在背包" align="center">
						<template slot-scope="scope">
							<span v-html='scope.row.packText'></span>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页器 -->
				<div class="el-page">
					<el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange" 
					:current-page="currentPage" 
					:page-sizes="[10,20,30,40,50,100]" 
					:page-size="pageSize" 
					layout="total, sizes, prev, pager, next, jumper" 
					:total="total">
					</el-pagination>
				</div>
			</template>
		</div>
	</div>
</div>
{/block} 
{block name="javascript"}
<script type="text/javascript">
//切换右侧导航选中项
switchTab(45);
// 注册滚动条加载触发事件v-loadmore绑定
Vue.directive('loadmore', {
  bind (el, binding) {
    // 获取element-ui定义好的scroll盒子
    const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
    SELECTWRAP_DOM.addEventListener('scroll', function () {
      const CONDITION = parseInt(this.scrollHeight - this.scrollTop) <= this.clientHeight
      if (CONDITION) {
        binding.value()
      }
    })
  }
});
var task = new Vue({
	el: '#item',
	data: function() {
		return {
		    serverList: [], 
			serverid: 10,
		    tableData:[],
			currentPage: 1,
            total: 0,
            pageSize: Number({$config['page_num']}),
			itemList: [], 
			itemid: 0,
			itemname: "",
			keyword:"",
			jsonData:{},
		}
	},
	/*初始化*/
	created: function() {
	    //添加到数组里
		this.serverList = this.serverList.concat({:json_encode($serverList)});
		//默认显示第一个区服
		this.serverid = this.serverList[0].server;
		this.getItemList();
	},
	methods: {
        handleSizeChange(val) {
            /*改变每页显示的条数*/
            this.pageSize=val
			/*在改变每页显示的条数时，要将页码显示到第一页*/
            this.currentPage=1
            this.getData()
        },
        handleCurrentChange(val) {
            /*改变默认的页数*/
            this.currentPage=val
            this.getData()
        },
        getItemList(){
			var that = this;
			that.jsonData["page"] = that.currentPage;
			that.jsonData["limit"] = that.pageSize;
			$.ajax({
				type: "GET",
				url: '{:url("@Admin/Game/getItemList")}',
				dataType: "json",
				data: that.jsonData,
				contentType: "application/json;charset=UTF-8",
				success: function(res) {
					if(res.code == 1) {
						// 将返回的数据连接起来
						that.itemList = that.itemList.concat(res.data) 
						that.total = res.count;
						//默认显示第一个
						that.itemid = that.itemList[0].id;
					}else{
						toastr.error(res.msg);
						that.itemList=[{id: 0,name: '无数据'}];
						that.itemid = 0;
					}
				},
				error: function(error) {
					console.log("请求数据异常，Error："+error);
				}
			});
		},
		search(){
			this.jsonData["name"] = this.keyword;
			//重置
			this.itemList=[];
			this.currentPage=1;
			this.getItemList();
		},
		selectChange(id){
			var that = this;
			let name="";
			if (id != "" && id != null && id != "undefined") {
                for (let i in that.itemList) {
                    if (that.itemList[i]["id"] === id) {
                        name = that.itemList[i]["name"];
                        break;
                    }
                }
                that.itemid = id;
                that.itemname = name;
                this.getData()
            }
		},
		loadMore() {
			/*改变默认的页数*/
            this.currentPage++;
			this.getItemList()
		},
		getData(){
			var that = this;
			that.jsonData["serverid"] = that.serverid;
			that.jsonData["itemid"] = that.itemid;
			that.jsonData["itemname"] = that.itemname;
			that.jsonData["page"] = that.currentPage;
			that.jsonData["limit"] = that.pageSize;
			$.ajax({
				type: "GET",
				url: '{:url("@Admin/Item/data")}',
				dataType: "json",
				data: that.jsonData,
				contentType: "application/json;charset=UTF-8",
				success: function(res) {
					if(res.code == 1) {
						that.tableData = res.data;
						that.total = res.count;
					}
				},
				error: function(error) {
					console.log("请求数据异常，Error："+error);
				}
			});
		},
	}
});
</script>
{/block}