{extend name="main"}
{block name="style"}
<style type="text/css">
	.w-300px{width: 300px;}
</style>
{/block}
{block name="body"}
<div class="bg-white mb-3">
	<el-form :model="search" @submit.native.prevent="submitForm" ref="search" label-position="right">
		<div class="flex py-3">

		  <el-form-item label="状态" prop="status" class="flex mb-0 pl-3">
		  	<el-select v-model="search.status" placeholder="请选择" class="w-100px">
			    <el-option label="全部"value="all"></el-option>
			    <el-option label="未支付":value="0"></el-option>
			    <el-option label="已支付":value="1"></el-option>
			    <el-option label="已完成":value="2"></el-option>
			    <el-option label="已取消":value="-1"></el-option>
			</el-select>
		  </el-form-item>

		  <el-form-item label="用户ID" prop="uid" class="flex mb-0 pl-3">
		    <el-input v-model="search.uid" placeholder="请输入你想搜索的关键词"></el-input>
		  </el-form-item>
		  <el-form-item label="订单号" prop="otrade" class="flex mb-0 pl-3">
		    <el-input v-model="search.otrade" placeholder="请输入你想搜索的关键词"></el-input>
		  </el-form-item>

		  <el-form-item class="flex mb-0 pl-3">
		    <el-button type="primary" @click="initHtml">查询</el-button>
		    <el-button @click="resetForm('search')">重置</el-button>
		    <el-button type="text" @click="seniorSearch= !seniorSearch">更多搜索<i class="el-icon-arrow-up el-icon--right" v-if="seniorSearch"></i><i class="el-icon-arrow-down el-icon--right" v-else></i></el-button>
		  </el-form-item>
			
		</div>
		<transition>
		<div class="pb-3" v-show="seniorSearch">
		  <el-form-item label="订单类型" prop="type" label-width="120px">
		  	<el-select v-model="search.type" clearable filterable multiple placeholder="请选择">
			    <el-option
			      v-for="item in OrderType"
			      :key="item.value"
			      :label="item.title"
			      :value="item.value">
			    </el-option>
			</el-select>
		  </el-form-item>
		  <el-form-item label="支付方式" prop="pay_type" label-width="120px">
		  	<el-select v-model="search.pay_type" placeholder="请选择">
			    <el-option label="全部"value="all"></el-option>
			    <el-option label="支付宝":value="1"></el-option>
			    <el-option label="微信":value="2"></el-option>
			    <el-option label="Apple Pay":value="3"></el-option>
			    <el-option label="积分":value="4"></el-option>
			    <el-option label="权益兑换":value="5"></el-option>
			    <el-option label="字节跳动":value="6"></el-option>
			    <el-option label="百度":value="7"></el-option>
			</el-select>
		  </el-form-item>

		  <el-form-item label="时间" prop="time" label-width="120px">
		  	<el-date-picker
		      v-model="search.time"
		      type="daterange"
		      align="left"
		      range-separator="至"
		      start-placeholder="开始日期"
		      end-placeholder="结束日期"
		      format="yyyy-M-d"
		      value-format="yyyy-M-d"
		      :picker-options="pickerOptions">
		    </el-date-picker>
		  </el-form-item>
		</div>
		</transition>
	</el-form>
</div>
<div class="bg-white p-3">
	<div class="table-responsive">
		<el-table
			ref="tableList"
	      	:data="tableData"
    		v-loading="search.ajax"
    		style="width: 100%;"
    		header-cell-class-name="table-header-DDE6FB">
	      <el-table-column
	        prop="oid"
	        label="ID"
	        width="60">
	      </el-table-column>
	      <el-table-column
	        label="用户"
	        width="260">
		      <template slot-scope="scope">
		      	<div class="flex flex-center">
					<el-image
					  	v-if="scope.row.headimg" 
					    style="width: 30px; height: 30px"
					    lazy
					    class="rounded-circle mr-2"
					    :src="scope.row.headimg" 
					    :preview-src-list="[scope.row.headimg]">
					</el-image>
		      		<div>
						{{scope.row.nickname}}
		      		</div>
		      	</div>
		      </template>
	      </el-table-column>
	      <el-table-column
	      	prop="type"
	        label="订单类型"
	        width="160">
	      </el-table-column>
	      <el-table-column
	        prop="otitle"
	        label="名称/订单号">
		      	<template slot-scope="scope">
		      		<div class="text-primary">{{scope.row.otitle}}</div>
		      		<div class="small">{{scope.row.otrade}}</div>
		      	</template>
	      </el-table-column>
	      <el-table-column
	      	prop="oprice"
	        label="订单金额/抵扣积分"
	        width="180">
		      	<template slot-scope="scope">
		      		<div class="text-primary">￥{{scope.row.oprice}}</div>
		      		<div v-if="scope.row.score">{{scope.row.score}}积分</div>
		      	</template>
	      </el-table-column>
	      <el-table-column
	        label="支付方式"
	        width="160">
		      <template slot-scope="scope">
		      	<span class="text-primary" v-if="scope.row.pay_type === 1">支付宝</span>
		      	<span class="text-success" v-else-if="scope.row.pay_type === 2">微信</span>
		      	<span class="text-warning" v-else-if="scope.row.pay_type === 3">Apple Pay</span>
		      	<span class="text-warning" v-else-if="scope.row.pay_type === 4">积分</span>
		      	<span class="text-info" v-else-if="scope.row.pay_type === 5">权益兑换</span>
		      	<span class="text-danger" v-else-if="scope.row.pay_type === 6">字节跳动</span>
		      	<span class="text-primary" v-else-if="scope.row.pay_type === 7">百度</span>
		      	<span class="text-secondary" v-else-if="scope.row.status===1 || scope.row.status===2">未知</span>
		      </template>
	      </el-table-column>
	      <el-table-column
	      	prop="channel_type"
	        label="渠道"
	        width="160">
	      </el-table-column>
	      <el-table-column
	        label="状态"
	        width="100">
		      <template slot-scope="scope">
		      	<span class="text-dark" v-if="scope.row.status===0">待支付</span>
		      	<span class="text-danger" v-if="scope.row.status===1">已支付</span>
		      	<span class="text-success" v-if="scope.row.status===2">已完成</span>
		      	<span class="text-secondary" v-if="scope.row.status===-1">已取消</span>
		      	<span class="text-danger small" v-if="scope.row.delete_time">(删)</span>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="时间线"
	        width="220">
		      <template slot-scope="scope">
		        <div class="small">
		          <div>创建时间: {{ scope.row.create_time }}</div>
		          <div>更新时间: {{ scope.row.update_time }}</div>
		          <div v-if="scope.row.status===0">过期时间: {{ scope.row.expire_time }}</div>
		          <div v-if="scope.row.status===1 || scope.row.status===2">支付时间: {{ scope.row.pay_time }}</div>
		          <div v-if="scope.row.status===1 || scope.row.status===2">完成时间: {{ scope.row.finish_time }}</div>
		          <div v-if="scope.row.status===-1">取消时间: {{ scope.row.cancel_time }}</div>
		          <div v-if="scope.row.delete_time">删除时间: {{ scope.row.delete_time }}</div>
		        </div>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="/"
	        width="80">
		      <template slot-scope="scope">
		      	<el-link v-if="(scope.row.status===1 || scope.row.status===2) && (scope.row.pay_type===1 || scope.row.pay_type===2 || scope.row.pay_type===3 || scope.row.pay_type===6 || scope.row.pay_type===7)" type="primary" :underline="false" @click="getPayInfo(scope.row.pay_type,scope.row.otrade);">支付信息</el-link>
		      </template>
	      </el-table-column>
	    </el-table>
	</div>
	<div class="table-responsive py-3">
		<el-pagination
		  background
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :current-page="search.page"
	      :page-sizes="[10,50,100,200]"
	      :page-size="search.pageSize"
	      layout="total, sizes, prev, pager, next, jumper"
	      :total="search.total">
	    </el-pagination>
	</div>
</div>
<el-dialog title="支付信息" :visible.sync="dialogTableVisible">
	<table class="table">
		<tr v-for="(v,index) in payInfo">
			<td width="180">{{index}}</td>
			<td>{{v}}</td>
		</tr>
	</table>
</el-dialog>
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="OrderType"}
	var OrderType=[];
	{else/}
	var OrderType={:json_encode($OrderType,JSON_UNESCAPED_UNICODE)};
	{/empty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			seniorSearch:false,
			OrderType:OrderType,
			dialogTableVisible:false,
	        payInfo: {},
			labelPosition:'right',
	        pickerOptions: {
	          shortcuts: [{
	            text: '最近一周',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
	              picker.$emit('pick', [start, end]);
	            }
	          }, {
	            text: '最近一个月',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
	              picker.$emit('pick', [start, end]);
	            }
	          }, {
	            text: '最近三个月',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
	              picker.$emit('pick', [start, end]);
	            }
	          }, {
	            text: '最近半年',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
	              picker.$emit('pick', [start, end]);
	            }
	          }]
	      	},
			search:{
				uid:'',
				otrade:'{:request()->get('otrade','')}',
				status:'all',
				pay_type:'all',
				type:[],
				time:[],
				ajax:false,
				page:1,
				total:0,
				pageSize:10
			},
			tableData:[],
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
		},
	    methods: {
			resetForm:function(formName) {
				this.$refs[formName].resetFields();
			},
			handleSizeChange(val) {
				this.search.page=1;
				this.search.pageSize=val;
	          	this.initHtml();
			},
			handleCurrentChange(val) {
				this.search.page=val;
	          	this.initHtml();
			},
			getPayInfo:function(pay_type,otrade){
				var _this=this;
				var loadingEl=XYBase.openloading();
				$.getJSON('/orders/getPayInfo/'+pay_type+'/'+otrade,function(ret){
					loadingEl.close();
					if(ret){
						if(ret.code === 0){
							_this.payInfo=ret.data;
							_this.dialogTableVisible=true;
						}else XYBase.msg(ret.msg);
					}else XYBase.error(XYBase.config.system_network_error);
				});
			},
	      	initHtml() {
	      		var _this=this;
	      		_this.search.ajax=true;
				$.ajax({
					url:'',
					type:'get',
					data:_this.search,
					dataType:'json',
					error:function(err){
	      				_this.search.ajax=false;
						XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
	      				_this.search.ajax=false;
						if (ret) {
							if (ret.code === 0) {
								_this.search.total=ret.data.total;
								_this.tableData=ret.data.data;
							}else{
								XYBase.msg(ret.msg);
							}
						}else{
							XYBase.error(XYBase.config.system_network_error);
						}
					}
				});
			}
	    }
	});
	$(function(){
		vm.initHtml();
		reloadWindowSize();
		$(window).resize(function(){
			reloadWindowSize();
		});
	});
	function reloadWindowSize (argument) {
		var winW=$(window).width();
		if(winW <= 576){
			vm.labelPosition='top';
		}else{
			vm.labelPosition='right';
		}
	}
</script>
{/block}