{extend name="public:base" /}
{block name="css"}
<style type="text/css">
/*不让表格单元格换行*/
.el-table .cell {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.omgui-btn-box .el-button{padding:0;}
 @media all and (max-width:450px) {
    .el-step__title{font-size:1rem;}
}
</style>
{/block}
{block name="content"}
<div class="page-content" id="order">
	<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">
		    <el-steps :active="1" align-center>
		        <el-step title="30分钟成功率：{$ratedata['minutes30']}" icon="el-icon-date"></el-step>
		        <el-step title="1小时成功率：{$ratedata['hour1']}" icon="el-icon-medal-1"></el-step>
                <el-step title="今日成功率：{$ratedata['today']}" icon="el-icon-sunny"></el-step>
                <el-step title="昨日成功率：{$ratedata['yesterday']}" icon="el-icon-moon"></el-step>
            </el-steps>
			<!--<el-collapse style="margin-bottom:10px;"><el-collapse-item>
				<template slot="title"><i class="el-icon-d-caret"></i>条件筛选<font color="#428FEC">（点击进入）</font></template>
				<el-card class="box-card">-->
				<div class="row" >
					<div class="col-md-6 col-xs-12 omgui-flex-box">
						<label class="omgui-label">订单时间：</label>
						<input type="text" class="omgui-input" id="startDate" placeholder="开始日期">
						&nbsp;至&nbsp; 
						<input type="text" class="omgui-input" id="endDate" placeholder="终止日期">
					</div>
					<div class="col-md-6 col-xs-12">
						<div class="omgui-btn-box">
							<el-tooltip class="item" effect="dark" content="今天" placement="top">
								<el-button @click="handleDate('today')" icon="el-icon-sunrise"><span class="hidden-xs">今天</span></el-button>
							</el-tooltip>
							<el-tooltip class="item" effect="dark" content="昨天" placement="top">
								<el-button @click="handleDate('yesterday')" icon="el-icon-moon"><span class="hidden-xs">昨天</span></el-button>
							</el-tooltip>
							<el-tooltip class="item" effect="dark" content="7天内" placement="top">
								<el-button @click="handleDate('week')" icon="el-icon-date"><span class="hidden-xs">7天</span></el-button>
							</el-tooltip>
							<el-tooltip class="item" effect="dark" content="30天内" placement="top">
								<el-button @click="handleDate('month')" icon="el-icon-reading"><span class="hidden-xs">30天</span></el-button>
							</el-tooltip>
							<el-tooltip class="item" effect="dark" content="全部" placement="top">
								<el-button @click="handleDate('all')" icon="el-icon-timer"><span class="hidden-xs">全部</span></el-button>
							</el-tooltip>
							<el-tooltip class="item hidden-xs" effect="dark" content="导出数据" placement="top">
								<el-button @click="exportExcel()"  type="primary" plain icon="el-icon-upload2"><span class="hidden-xs">导出数据</span></el-button>
							</el-tooltip>
						</div>
					</div>
				</div>	
				<div class="row">
					<div class="col-md-2 col-sm-6 col-xs-12 omgui-flex-box">
						<label class="omgui-label">订单类型：</label>
						<el-select @change="selecTypeChange" v-model="typeid" placeholder="请选择" style="width:100%;">
							<el-option
								v-for="item in typeList"
								:key="item.value"
								:label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
					<div class="col-md-2 col-sm-6 col-xs-12 omgui-flex-box">
						<label class="omgui-label">通道类型：</label>
						<el-select @change="selectWayChange" v-model="wayid" placeholder="请选择" style="width:100%;">
							<el-option
								v-for="item in wayList"
								:key="item.value"
								:label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
					<div class="col-md-2 col-sm-6 col-xs-12 omgui-flex-box">
						<label class="omgui-label">支付状态：</label>
						<el-select @change="selectStatusChange" v-model="status" placeholder="请选择" style="width:100%;">
							<el-option
							  v-for="item in statusList"
							  :key="item.value"
							  :label="item.label"
							  :value="item.value">
							</el-option>
						</el-select>
					</div>
					<div class="col-md-2 col-sm-6 col-xs-12 omgui-flex-box select-disabled">
						<el-select @change="selectKeyChange" v-model="key" placeholder="请选择" style="width:100%;flex:1;">
							<el-option
							  v-for="item in keyList"
							  :key="item.value"
							  :label="item.label"
							  :value="item.value">
							</el-option>
						</el-select>&nbsp;&nbsp;
						<el-input :placeholder="keyPlaceholder" v-model="value" clearable style="flex:2;"></el-input>
					</div>
					<div class="col-md-4 col-sm-6 col-xs-12">
						<div class="omgui-btn-box">
							<el-button @click="search()" id="search" type="success" icon="el-icon-search"><span class="hidden-xs">查询</span></el-button>
							<el-button @click="batdel()" type="danger" icon="el-icon-delete"><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>
				</div>
			<!--</el-card></el-collapse-item></el-collapse>-->
			<template>
				<el-table 
				fix
				id="tableId"
				:header-cell-style="{ textAlign: 'center' }"
				:data="tableData"
				@selection-change="handleSelectionChange"
				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 type="selection" align="center" v-if="!hidden"></el-table-column>
    				<el-table-column
    					  prop="number" label="订单编号">
    					  <template slot-scope="scope">
    						<el-popover trigger="hover" placement="top">
    						  {{ scope.row.number }}&nbsp;<el-tag @click="copy(scope.row.number)" size="mini" style="cursor: pointer;">复制</el-tag>
    						  <div slot="reference" class="name-wrapper">
    							{{ scope.row.number }}
    						  </div>
    						</el-popover>
    					  </template>
    				</el-table-column>
					<el-table-column prop="money" label="订单金额" align="center"></el-table-column>
					<el-table-column prop="way" label="支付通道" align="center">
						<template slot-scope="scope">
							<span v-html='scope.row.way'></span>
						</template>
					</el-table-column>
					<el-table-column prop="statusText" label="支付状态" align="center">
						<template slot-scope="scope">
							<span v-html='scope.row.statusText'></span>
						</template>
					</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="agent" label="上级代理" align="center"></el-table-column>
					<el-table-column prop="subject" label="订单说明" align="center" show-overflow-tooltip="true"></el-table-column>
					<!--<el-table-column prop="shop_items" label="购买物品" align="left" show-overflow-tooltip="true"></el-table-column>-->
					<el-table-column prop="create_time" label="下单时间" align="center" show-overflow-tooltip="true">
					</el-table-column>
					<el-table-column  label="操作" align="center">
					    <template slot-scope="scope" >
						<el-button-group>
							<el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row.id)"></el-button>
						</el-button-group>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页器 -->
				<div class="el-page">
					<el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange" 
					:current-page.sync="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"}
<!--layui日期控件的代码都写在laydate.js文件里-->
<script src="__STATIC__/js/laydate.js"></script>
<script type="text/javascript">
//切换右侧导航选中项
switchTab(11);
var order = new Vue({
	el: '#order',
	data: function() {
		return { 
			typeList: [
				{value: -1,label: '全部'},
				{value: 0,label: '充值平台币'},
				{value: 1,label: '充值人民币'},
				{value: 2,label: '购买商品'}
			], 
			typeid:-1,
			statusList: [
				{value: -1,label: '全部'},
				{value: 0,label: '等待支付'},
				{value: 1,label: '支付成功'},
				{value: 2,label: '支付失败'},
				{value: 3,label: '已退款'},
			], 
			status: -1,
			wayList: [
				{value: -1,label: '全部'},
				{value: 0,label: '平台币'},
				{value: 1,label: '支付宝'},
				{value: 2,label: '微信支付'},
				{value: 3,label: 'QQ钱包'},
			], 
			wayid:-1,
			keyList: [
				{value: 'number',label: '订单编号'},
				{value: 'account',label: '充值账号'},
				{value: 'subject',label: '商品名称'},
			], 
			key: 'number',
			keyPlaceholder:"请输入订单编号",
			value:'',
			accountList: [{
				id: 0,
				name: '全部'
			}], 
			userid: 0,
			tableData:[],
			currentPage: 1,
            total: 0,
            pageSize: Number({$config['page_num']}),
			jsonData:{},
			multipleSelection: [],
			ids: [],// 选中数组ID
			hidden:true,//默认隐藏
		}
	},
	/*初始化*/
	created: function() {
		this.getData();
	},
	methods: {
	    isMobile() {
        	 let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
        	 return flag;
        },
		handleSelectionChange(selection) {
			this.ids = selection.map(item => item.id);
			//this.multipleSelection = val;
		},
        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/Order/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);
				}
			});
		},
		search(){
			var that = this;
			var startdate=document.getElementById("startDate").value;
			var enddate=document.getElementById("endDate").value;
			var start = new Date(startdate);
			var end = new Date(enddate);
			if(start.getTime() > end.getTime()){
                mui.alert('结束日期不能小于开始日期', '提示');
                return;
            }
			that.jsonData={
				'startTime':startdate,
				'endTime':enddate,
				'status':that.status,
				'noticeStatus':that.notice,
				'zoneid':that.zoneid,
				'userid':that.userid,
				'typeid':that.typeid,
				'wayid':that.wayid,
				'key':that.key,
				'value':that.value,
			}
			that.getData();
		},
		selecTypeChange(typeid){
			this.typeid = typeid;
			this.jsonData['typeid']=this.typeid;
			this.getData();
		},
		selectKeyChange(value){
			if (value == 'number'){
                this.keyPlaceholder = '请输入订单编号'
            }else if (value == 'account'){
                this.keyPlaceholder = '请输入玩家充值账号'
            }else if (value == 'subject'){
                this.keyPlaceholder = '请输入商品名称'
            }
		},
		selectStatusChange(status){
			this.status = status;
			this.jsonData['status']=this.status;
			this.getData();
		},
		selectWayChange(wayid){
		    this.wayid = wayid;
			this.jsonData['wayid']=this.wayid;
			this.getData();
		},
		batdel(){
			var that=this;
		
			if(that.ids.length<=0){
			    that.hidden = false;
				toastr.warning('请先选中需要删除的数据行');
				return;
			}
			mui.confirm('确定要删除这些订单吗？', '提示', ['否', '是'], function(e) {
                if (e.index == 1) {
                    $.post("{:url('@Admin/Order/alldel')}",{'ids':that.ids,'token':'{$token}'}, function (data) {
						if(data.code==1){
							toastr.success(data.msg);
							that.getData();
						}else{
							toastr.error(data.msg);
						}
					});
                }
			}); 
		},
		clear(){
			var that=this;
			mui.confirm('确定要删除所有无效的订单吗？', '提示', ['否', '是'], function(e) {
				 if (e.index == 1) {
				    mui.showLoading("正在批量删除中...","div");
					$.post("{:url('@Admin/Order/clear')}",{'token':'{$token}'}, function (data) {
					    mui.hideLoading();
						if(data.code==1){
							toastr.success(data.msg);
							that.getData();
						}else{
							toastr.error(data.msg);
						}
					});
				}
			});
		},
		handleDelete(id){
			var that=this;
			mui.confirm('确定要删除这个订单吗？', '提示', ['否', '是'], function(e) {
				if (e.index == 1) {
					$.post("{:url('@Admin/Order/del')}",{'id':id,'token':'{$token}'}, function (data) {
						if(data.code==1){
							toastr.success(data.msg);
							that.getData();
						}else{
							toastr.error(data.msg);
						}
					});
				}
			}); 
		},
		copy(number){
		  let save = function (e){
			e.clipboardData.setData('text/plain',number); 
			e.preventDefault();  //阻止默认行为
		  }
		  document.addEventListener('copy',save);//添加一个copy事件
		  document.execCommand("copy");//执行copy方法
		  toastr.success('复制成功');
		},
		handleDate(type){
		    var start="",end="";
    		/*获取今天的日期*/
    		var nowdate = new Date();
    		var y = nowdate.getFullYear();
    		var m = nowdate.getMonth()+1;
    		var d = nowdate.getDate();
    		var today = y+'-'+m+'-'+d;
            switch(type) {
    			 case "today":/*今天*/
    				start=today+" 00:00:00";
    				end=today+" 23:59:59";
    			break;
    			case "yesterday":/*昨天*/
    				var yesterday=new Date(nowdate.setDate(nowdate.getDate()-1));
    				var y = yesterday.getFullYear();
    				var m = yesterday.getMonth()+1;
    				var d = yesterday.getDate();
    				var formatwdate = y+'-'+m+'-'+d;
    				start=formatwdate+" 00:00:00";
    				end=formatwdate+" 23:59:59";
    			break;
    			case "week":/*7天*/
    				var oneweekdate=new Date(nowdate.setDate(nowdate.getDate()-7));
    				var y = oneweekdate.getFullYear();
    				var m = oneweekdate.getMonth()+1;
    				var d = oneweekdate.getDate();
    				var formatwdate = y+'-'+m+'-'+d;
    				start=formatwdate+" 00:00:00";
    				end=today+" 23:59:59";
    			break;
    			case "month":/*30天*/
    				var onemonthdate=new Date(nowdate.setMonth(nowdate.getMonth()-1));
    				var y = onemonthdate.getFullYear();
    				var m = onemonthdate.getMonth()+1;
    				var d = onemonthdate.getDate();
    				var formatwdate = y+'-'+m+'-'+d;
    				start=formatwdate+" 00:00:00";
    				end=today+" 23:59:59";
    			break;
    			case "all":/*全部*/
    				start="1970-01-01 00:00:00";
    				end=today+" 23:59:59";
    			break;
    		}
    		/*layui日期时间控制相关的js代码*/
            layui.use(['laydate'], function(){
                var laydate = layui.laydate;
                laydate.render({
                	elem:'#startDate',
                	type: 'datetime',
                	format: 'yyyy-MM-dd HH:mm:ss',
                	value: start
                }); 
                laydate.render({
                	elem:'#endDate',
                	type: 'datetime',
                	format: 'yyyy-MM-dd HH:mm:ss',
                	value: end
                });
                /*自动点击搜索按钮*/
                $("#search").click();
            });
		},
		// 导出excel
        exportExcel(){
          const xlsxParam = { raw: true };//转换成excel时，不会被科学计数法，使用原始的格式
          /*cloneNode(true) 拷贝节点*/
          let dom=document.getElementById("tableId").cloneNode(true);
          
          /**移除表格操作列 */
          let tableHeader = dom.querySelector('.el-table__header-wrapper');
          let tableBody = dom.querySelector('.el-table__body-wrapper');
          let headerDom = tableHeader.childNodes[0].querySelectorAll('th');
          for (let key in headerDom) {
    	      if (headerDom[key].innerText === '操作') {
    	        headerDom[key].remove();
    	      }
    	    }
          let tableList = tableBody.childNodes[0].childNodes[1].querySelectorAll('td');
          if(tableList.length<=0){
              toastr.error("当前表格没有可以导出的数据");
              return;
          }
          for (let key = 0; key < tableList.length; key++) {
              var text = tableList[key].innerText;
              //截取订单编号
              if(text.indexOf("复制")!=-1){
                  tableList[key].innerText=text.substring(0,text.indexOf("复制"));
              }
    	      if (tableList[key].querySelectorAll('.el-button').length > 0) {
    	        tableList[key].remove();
    	      }
    	    }
          // 文件名
          const filename = "订单数据.xlsx";
          /* 用id */
          const workbook = XLSX.utils.table_to_book(dom,xlsxParam)
          /* 移除第一列 */
          workbook.Sheets.Sheet1['!cols'][0]={hidden:true}
          /* 将二进制字符串作为输出 */
          const wbout = XLSX.write(workbook, {
            bookType: "xlsx",
            bookSST: true,
            type: "array",
          });
          try {
            window.saveAs(
              new Blob([wbout], { type: "application/octet-stream" }),
              filename
            );
          } catch (e) {
            console.log(e);
          }
          return wbout;
        },
    }
});
</script> 
{/block}