{extend name="main"}
{block name="style"}
<style type="text/css">
	.w-100px{width: 100px;}
	.w-80px{width: 60px;}
	.flex-lable{width: 100px;color: #6c757d;text-align: right;padding-right: 10px;}
</style>
{/block}
{block name="body"}
<div class="bg-white mb-3">
	<el-form :model="search" @submit.native.prevent="submitForm" ref="search" label-position="right" class="flex py-3">

	  <el-form-item label="搜索类型" prop="search_type" class="flex mb-0 pl-3">
	  	<el-select v-model="search.search_type" placeholder="请选择" class="w-100px">
		    <el-option key="uid"label="UID"value="uid"></el-option>
		    <el-option key="user"label="用户名"value="user"></el-option>
		    <el-option key="mobile"label="手机号"value="mobile"></el-option>
		    <el-option key="email"label="邮箱"value="email"></el-option>
		</el-select>
	  </el-form-item>

	  <el-form-item label="状态" prop="status" class="flex mb-0 pl-3">
	  	<el-select v-model="search.status" placeholder="请选择" class="w-100px">
		    <el-option key="all"label="全部"value="all"></el-option>
		    <el-option :key="1"label="正常":value="1"></el-option>
		    <el-option :key="0"label="禁用":value="0"></el-option>
		</el-select>
	  </el-form-item>

	  <el-form-item :label="getSearchType()" prop="key" class="flex mb-0 pl-3">
	    <el-input v-model="search.key" 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-form-item>
	</el-form>
</div>
<div class="bg-white p-3">
	<div class="table-responsive">
			<el-table
	      	:data="tableData"
			v-loading="search.ajax"
			style="width: 100%;"
			header-cell-class-name="table-header-DDE6FB">
	      <el-table-column
	        prop="id"
	        label="ID"
	        width="100">
	      </el-table-column>
	      <el-table-column
	        prop="uid"
	        label="UID"
	        width="100">
	      </el-table-column>
	      <el-table-column
	        label="用户"
	        min-width="180">
		      <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
	        label="内容">
		      <template slot-scope="scope">
		      	<div>{{scope.row.rule_name}}</div>
		      	<div class="text-secondary small">{{scope.row.vip_name}}</div>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="剩余数量/数量"
	        width="140">
		      <template slot-scope="scope">
	      		<el-popover
					placement="left"
					width="300"
					title="编辑权益"
					trigger="click">
					<el-form label-position="top">
						<el-input v-model="scope.row.surplus_value" class="mb-2" size="mini">
							<template slot="prepend"><div class="w-80px">剩余数量</div></template>
							<template slot="append">{{scope.row.unit}}</template>
						</el-input>
						<el-input v-model="scope.row.value" class="mb-2" size="mini">
							<template slot="prepend"><div class="w-80px">数量</div></template>
							<template slot="append">{{scope.row.unit}}</template>
						</el-input>
					    <el-date-picker
					      v-model="scope.row.expiry_time"
					      align="right"
					      type="date"
					      format="yyyy-M-d"
					      value-format="yyyy-M-d"
					      :picker-options="endPickerOptions"
					      placeholder="End Time" class="mb-2" size="mini">
					    </el-date-picker>
						<div class="flex">
							<div class="flex-1"></div>
							<el-button
					            type="primary"
					            size="mini"
					            :loading="scope.row.status==2"
					            @click="editRights(scope.row)">
					            确定
					        </el-button>
						</div>
					</el-form>
		      	<div class="small flex pointer" slot="reference">
		      		<div>{{scope.row.surplus_value}}{{scope.row.unit}}</div>
		      		<div class="mx-1">/</div>
		      		<div>{{scope.row.value}}{{scope.row.unit}}</div>
				</div>
				</el-popover>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="时间/过期时间"
	        width="180">
		      <template slot-scope="scope">
		      	<div class="small">
			      	<div>{{scope.row.create_time}}</div>
			      	<div v-if="scope.row.is_expiry==1">已过期</div>
			      	<div v-else-if="!scope.row.status" class="text-primary">已使用</div>
			      	<div v-else>{{scope.row.expiry_time}}</div>
		      	</div>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="/"
	        width="80">
		      <template slot-scope="scope">
		        <el-button
		            type="danger"
		            size="minism"
		            plain
		            round
		            v-if="scope.row.is_expiry!==1&&scope.row.status"
		            :loading="scope.row.is_expiry==2"
		            @click="invalidRights(scope.row)">
		            作废
		        </el-button>
		      </template>
	      </el-table-column>
	    </el-table>
	</div>
	<div class="table-responsive py-3 text-center">
		<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>
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="role"}
	var role=[];
	{else/}
	var role={:json_encode($role,JSON_UNESCAPED_UNICODE)};
	{/empty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			role:role,
			labelPosition:'right',
			search:{
				{notempty name=":request()->get('uid')"}
				search_type:'uid',
				key:'{:request()->get('uid')}',
				{elseif request()->get('user')/}
				search_type:'user',
				key:'{:request()->get('user')}',
				{elseif request()->get('mobile')/}
				search_type:'mobile',
				key:'{:request()->get('mobile')}',
				{elseif request()->get('email')/}
				search_type:'email',
				key:'{:request()->get('email')}',
				{else/}
				search_type:'uid',
				key:'',
				{/notempty}
				status:'all',
				sort:'default',
				ajax:false,
				page:1,
				total:0,
				pageSize:10
			},
	        endPickerOptions: {
	          disabledDate(time) {
	            return time.getTime() < Date.now();
	          },
	      	},
			tableData:[],
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
		},
	    methods: {
	    	getSearchType(){
	    		var text='UID';
	    		switch(this.search.search_type){
	    			case 'uid':
	    				text='UID';
	    				break;
	    			case 'user':
	    				text='用户名';
	    				break;
	    			case 'mobile':
	    				text='手机号';
	    				break;
	    			case 'email':
	    				text='邮箱';
	    				break;
	    		}
	    		return text;
	    	},
	    	editRights(data){
	    		if (data.status==2) return;
				data.status=2;
				$.ajax({
					url:'/user/vip/editRights/'+data.id,
					data:data,
					type:'post',
					dataType:'json',
					success:function(ret){
				        if (ret) {
							if(ret.code == 0){
								XYBase.success(ret.msg);
								data.value=ret.data.value;
								data.surplus_value=ret.data.surplus_value;
								data.status=ret.data.status;
								data.expiry_time=ret.data.expiry_time;
								data.is_expiry=ret.data.is_expiry;
							}else{
								XYBase.msg(ret.msg);
							}
				        }else{
			          		XYBase.error(XYBase.config.system_network_error)
				        }
					},
					error:function(err){
			          	XYBase.error(XYBase.config.system_network_error)
					}
				});
	    	},
	    	invalidRights(data){
	    		if (data.is_expiry==2) return;
	    		data.is_expiry=2;
	    		$.getJSON('/user/vip/invalidRights/'+data.id,function(ret){
	    			data.is_expiry=0;
	    			if (ret) {
	    				if (ret.code === 0) {
	    					data.is_expiry=1;
	    				}else{
	    					XYBase.msg(ret.msg);
	    				}
	    			}else{
						XYBase.error(XYBase.config.system_network_error);
	    			}
	    		});
	    	},
			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();
			},
	      	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>
{include file="business"/}
{/block}