{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="email">
	<div class="panel">
		<div class="panel-heading">
			<h3 class="panel-title panel-title-blue"><i class="iconfont">&#xe683;</i>邮件发送记录</h3>
		</div>
		<div class="panel-body">
			<div class="row" style="clear:both;">
				<div class="col-sm-5 col-xs-12 omgui-flex-box">
					<el-button v-on:click="sendToFull()" type="warning" icon="el-icon-message"><span class="hidden-xs">发送</span>全服邮件</el-button>
					<el-button v-on:click="sendToOne()" type="primary" icon="el-icon-user"><span class="hidden-xs">发送</span>个人邮件</el-button>
					<el-tooltip class="item" effect="dark" content="清空全部邮件记录" placement="bottom">
						<el-button @click="clear()" type="info" icon="el-icon-brush"><span class="hidden-xs">清空记录</span></el-button>
					</el-tooltip>
				</div>
				<div class="col-sm-7 col-xs-12 omgui-flex-box">
					<label class="omgui-label">所属区服：</label>
					<el-select @change="selectChange" v-model="serverid" placeholder="请选择">
						<el-option
							v-for="item in serverList"
							:key="item.server"
							:label="item.name"
							:value="item.server">
						</el-option>
					</el-select>
					&nbsp;&nbsp;<el-input
						placeholder="请输入玩家账号或角色名进行查询"
						prefix-icon="el-icon-search"
						v-model="keyword" @change="search()" clearable>
					  </el-input>
					  <div style="margin-left:10px;">
						<el-button @click="search()" type="success" icon="el-icon-search"><span class="hidden-xs">查询</span></el-button>
					</div>
				</div>
			</div>
			<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="id" label="序号" align="center"></el-table-column>
					<el-table-column prop="servername" label="区服" align="center"></el-table-column>
					<el-table-column prop="account" label="玩家账号" align="center"></el-table-column>
					<el-table-column prop="rolename" label="角色名字" align="center"></el-table-column>
					<el-table-column prop="title" label="邮件标题" align="center"></el-table-column>
					<el-table-column prop="content" label="邮件内容" align="center"></el-table-column>
					<el-table-column prop="items" label="包含物品" align="center"></el-table-column>
					<el-table-column prop="create_time" label="发送时间" align="center"></el-table-column>
					<el-table-column prop="statusText" label="发送结果" align="center" show-overflow-tooltip="true">
						<template slot-scope="scope">
							<span v-html='scope.row.statusText'></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(8);
var email = new Vue({
	el: '#email',
	data: function() {
		return {
			tableData:[],
			currentPage: 1,
            total: 0,
            pageSize: Number({$config['page_num']}),
			jsonData:{},
			serverList: [{server: -1,name: '请选择'},{server: 0,name: '全服'}], 
			serverid: -1,
			keyword:"",
		}
	},
	/*初始化*/
	created: function() {
		//添加到数组里
		this.serverList = this.serverList.concat({:json_encode($serverList)});
		//默认显示第一个区服
		//this.serverid = this.serverList[0].server;
		this.getData();
	},
	methods: {
		selectChange(id){
			this.serverid = id;
			this.jsonData['serverid'] = this.serverid;
			this.getData();
		},
		handleSizeChange(val) {
            /*改变每页显示的条数*/
            this.pageSize=val
			/*在改变每页显示的条数时，要将页码显示到第一页*/
            this.currentPage=1
            this.getData()
        },
        handleCurrentChange(val) {
            /*改变默认的页数*/
            this.currentPage=val
            this.getData()
        },
		getData(){
			var that = this;
			that.jsonData["page"] = that.currentPage;
			that.jsonData["limit"] = that.pageSize;
			$.ajax({
				type: "GET",
				url: '{:url("@Admin/Email/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;
					}else{
						that.tableData =[];
						that.total = 0;
					}
				},
				error: function(error) {
					console.log("请求数据异常，Error："+error);
				}
			});
		},
		search(){
			this.jsonData['keyword'] = this.keyword;
			this.getData();
		},
		sendToFull(){
			var width = ismobile() ? "90%" : "50%";
			layer.open({
                type: 2
                ,title: '发送全服邮件'
                ,content: 'full'
                ,shadeClose:true
            	,moveOut:true
            	,maxmin:true
            	,fixed:false
                ,area: [width, '80%']
				,offset: 'auto'
            });
		},
		sendToOne(){
			var width = ismobile() ? "90%" : "50%";
			layer.open({
                type: 2
                ,title: '发送个人邮件'
                ,content: 'one'
                ,shadeClose:true
            	,moveOut:true
            	,maxmin:true
            	,fixed:false
                ,area: [width, '80%']
				,offset: 'auto'
            });
		},
		clear(){
			var that=this;
			mui.confirm('确定要清空全部邮件记录吗？', '提示', ['否', '是'], function(e) {
				 if (e.index == 1) {
					$.post("{:url('@Admin/Email/clear_record')}",{'token':'{$token}'}, function (data) {
						if(data.code==1){
							toastr.success(data.msg);
							that.getData();
						}else{
							toastr.error(data.msg);
						}
					});
				}
			});
		},
	}
});
</script>
{/block}