{extend name="main"}
{block name="style"}
{css href="__TEMPLATE_STATIC__/user.css"}
{/block}
{block name="header"}
{include file="module/user_top_nav"/}
{/block}
{block name="body"}
<div class="flex1 flex h-100">
	<div class="w-180px bg-dark p-4 overflow-y-auto">
	{include file="module/user/company_left" left="module/user/company_left_vip"/}
	</div>
	<div class="frame-body flex-1 overflow-y-auto py-3">
		<div class="container-xl pb-4 shadow bg-white">
			<el-tabs v-model="search.type" :before-leave="tabsChange">
				<el-tab-pane label="全部" name="all"></el-tab-pane>
				<el-tab-pane label="套餐订单" name="vip"></el-tab-pane>
				<el-tab-pane label="增值服务订单" name="value-added"></el-tab-pane>
				<el-tab-pane label="积分订单" name="score"></el-tab-pane>
			</el-tabs>
			<div class="bg-1E54E5 p-3 my-3 flex">
				<div><i class="el-icon-warning h3 mb-0 text-primary"></i></div>
				<div class="flex-1 pl-2">
					<h6 class="text-primary">小提示</h6>
					<div class="text-secondary">订单创建之后，超过15分钟没有完成支付，系统将会自动将订单取消</div>
				</div>
			</div>
			<div class="table-responsive text-666666">
				<el-table
					ref="multipleTable"
			      	:data="tableData"
		    		stripe
		    		v-loading="search.ajax"
		    		style="width: 100%;"
		    		header-cell-class-name="bg-1E54E5 text-666666">
			      <el-table-column
			        label="订单内容">
				      <template slot-scope="scope">
				      	<div class="text-info">{{scope.row.otitle}}</div>
				      	<div class="flex small">
				      		<div>{{scope.row.otrade}}</div>
				      		<div class="px-2">|</div>
					        <el-popover trigger="hover" placement="top">
					          <p>创建时间: {{ scope.row.create_time }}</p>
					          <p>更新时间: {{ scope.row.update_time }}</p>
					          <p v-if="scope.row.status===0">过期时间: {{ scope.row.expire_time }}</p>
					          <p v-if="scope.row.status===1 || scope.row.status===2">支付时间: {{ scope.row.pay_time }}</p>
					          <p v-if="scope.row.status===1 || scope.row.status===2">完成时间: {{ scope.row.finish_time }}</p>
					          <p v-if="scope.row.status===-1">取消时间: {{ scope.row.cancel_time }}</p>
					          <div slot="reference" class="name-wrapper">
					            下单时间：{{ scope.row.create_time }}
					          </div>
					        </el-popover>
					    </div>
				      </template>
			      </el-table-column>
			      <el-table-column
			        label="订单金额"
			        width="120">
				      <template slot-scope="scope">
				      	<span class="text-primary">{{scope.row.oprice}}</span>
				      	<div class="small text-secondary" v-if="scope.row.score>0">抵扣积分:{{scope.row.score}}</div>
				      </template>
			      </el-table-column>
			      <el-table-column
			        label="支付方式"
			        width="100">
				      <template slot-scope="scope">
				      	<span v-if="scope.row.pay_type === 1">支付宝</span>
				      	<span v-else-if="scope.row.pay_type === 2">微信</span>
				      	<span v-else-if="scope.row.pay_type === 3">ApplePay</span>
				      	<span v-else-if="scope.row.pay_type === 4">积分</span>
				      	<span v-else-if="scope.row.pay_type === 5">权益兑换</span>
				      	<span v-else-if="scope.row.status===1 || scope.row.status===2">未知</span>
				      </template>
			      </el-table-column>
			      <el-table-column
			        label="状态"
			        width="100">
				      <template slot-scope="scope">
				      	<span class="text-primary" 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>
				      </template>
			      </el-table-column>
			      <el-table-column
			        label="操作"
			        width="100">
				      <template slot-scope="scope">
				      	<el-link v-if="scope.row.status===0" type="primary" :underline="false" @click="openNewBuy(scope.row)">支付</el-link>
				      	<el-link v-if="scope.row.status===0" type="primary" :underline="false" @click="cancelOrder(scope.row)">取消</el-link>
				      	<el-link v-if="scope.row.status===1 || scope.row.status===2 || scope.row.status===-1" type="danger" :underline="false" @click="delOrder(scope.row,scope.$index)">删除</el-link>
				      </template>
			      </el-table-column>
			    </el-table>
			</div>
			<div class="table-responsive py-3">
				<el-pagination
				  background
				  :hide-on-single-page="true"
				  @current-change="setPageChange"
			      :current-page="search.page"
			      :page-size="15"
			      layout="total,  prev, pager, next, jumper"
			      :total="search.total">
			    </el-pagination>
			</div>
		</div>
	</div>
</div>
{/block}
{block name="footer"}
{include file="module/login"/}
{include file="module/buy_win"/}
{/block}
{block name="script"}
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			userInfo:UserInfo,
			loginTabs:XYBase.loginTabs,
			feedback:XYBase.feedback,
			buy:XYBase.buy,
			search:{
				type:'all',
		    	ajax:false,
				total:0,
				page: 1
			},
			tableData:[]
		},
		watch:{
		    view:XYBase.viewWatch,
		    loginTabs:XYBase.loginTabsWatch,
			userInfo:{
				handler(val,oldVal){
					if (!val.id) {
						window.location.reload();
					}
				},
				deep:true
			},
		},
		created(){
			XYBase.created(this);
			this.initHtml();
		},
		methods:XYBase.methods({
			setPageChange(val){
				this.search.page=val;
				this.initHtml();
			},
			tabsChange(val){
				this.search.type=val;
				this.search.page=1;
				this.initHtml();
			},
			initHtml(){
				var _this=this;
				_this.search.ajax=true;
				_this.sendGet({
					url:'',
					data:_this.search,
				},function(ret){
					_this.search.ajax=false;
					if (ret) {
						_this.tableData=[];
						_this.search.total=ret.data.total;
						if (ret.code === 0) {
							_this.tableData=ret.data.data;
						}else XYBase.msg(ret.msg);
					}
				});
			},
			orderPaySuccess(val) {
				if (!this.hasOwnProperty('buy'))
					return ;
				if (val.otrade===this.buy.orderInfo.otrade){
					this.buy.pay_status='success';
					this.buy.data.status=1;
					switch(this.buy.form.pay_type){
						case 'alipay':
						this.buy.data.pay_type=1;
						break;
						case 'wxpay':
						this.buy.data.pay_type=2;
						break;
					}
					this.buy.data.pay_time=XYBase.Date.date('Y-m-d H:i:s');
				}
				if (_this.buy.orderTimeEr)
						clearInterval(_this.buy.orderTimeEr);
			},
			setPayType(type){
				if (this.buy.ajax || this.buy.form.pay_type==type)return;
				this.buy.ajax=true;
				this.buy.form.pay_type=type;
				this.buy.orderInfo.otrade='';
				this.buy.orderInfo.url='';
				var _this=this;
				_this.sendPost({
					url:'/pay/getOrderInfoByOtrade',
					data:_this.buy.form
				},function(ret) {
					_this.buy.ajax=false;
					if (ret) {
						if (ret.code === 0) {
							if (_this.buy.orderTimeEr)
		   						clearInterval(_this.buy.orderTimeEr);
							_this.buy.orderTimeEr=setInterval(function(){
								if (_this.buy.orderInfo.time<=0){
		   							clearInterval(_this.buy.orderTimeEr);
		   							_this.buy.orderTimeEr=null;
		   							_this.buy.orderInfo={
										otrade:'',
										url:'',
										time:0,
									}
									_this.buy.form.pay_type='';
								}
								_this.buy.orderInfo.time--;
							},1000);
							return _this.buy.orderInfo=ret.data;
						}else{
							XYBase.msg(ret.msg);
						}
					}
					_this.buy.form.pay_type='';
				});
			},
			openNewBuy(val){
	    		document.body.style="overflow: hidden;padding-right:17px;";
	    		this.buy.title='订单详情';
	    		this.buy.stitle=val.otitle;
				this.buy.pay_status='order';
	    		this.buy.form.otrade=val.otrade;
	    		this.buy.form.pay_type='';
	    		this.buy.form.type=val.type;
	    		this.buy.data=val;
	    		this.buy.view=true;
			},
			cancelOrder(val){
				var _this=this;
				_this.$confirm('确定要取消【'+val.otitle+'】订单吗？', '提示', {
					dangerouslyUseHTMLString:true,
		          	confirmButtonText: '确定',
		          	cancelButtonText: '取消',
		          	type: 'warning'
		        }).then(() => {
					_this.sendPost({
						url:'/pay/cancelOrder',
						data:{otrade:val.otrade}
					},function(ret) {
						if (ret) {
							if (ret.code === 0) {
								val.status=-1;
								val.cancel_time=XYBase.Date.date('Y-m-d H:i:s');
							}else{
								XYBase.msg(ret.msg);
							}
						}
					});
		        }).catch(() => {
		        	XYBase.msg('已取消');
		        });
			},
			delOrder(val,index){
				var _this=this;
				_this.$confirm('确定要删除【'+val.otitle+'】订单吗？', '提示', {
					dangerouslyUseHTMLString:true,
		          	confirmButtonText: '确定',
		          	cancelButtonText: '取消',
		          	type: 'warning'
		        }).then(() => {
					_this.sendPost({
						url:'/pay/delOrder',
						data:{otrade:val.otrade}
					},function(ret) {
						if (ret) {
							if (ret.code === 0) {
								_this.tableData.splice(index,1);
							}else{
								XYBase.msg(ret.msg);
							}
						}
					});
		        }).catch(() => {
		        	XYBase.msg('已取消');
		        });
			}
		})
	});
</script>
{/block}