{extend name="main"}
{block name="body"}
<div class="bg-white p-3">
	<el-form :model="search" @submit.native.prevent="submitForm" ref="search" label-width="120px" :label-position="labelPosition" size="mini">

	  <el-form-item label="搜索类型" prop="search_type">
	    <el-radio-group v-model="search.search_type">
	      <el-radio :label="'id'">ID</el-radio>
	      <el-radio :label="'alias'">券码</el-radio>
	      <el-radio :label="'uid'">UID</el-radio>
	      <el-radio :label="'user'">用户名</el-radio>
	      <el-radio :label="'mobile'">手机号</el-radio>
	      <el-radio :label="'email'">邮箱</el-radio>
	    </el-radio-group>
	  </el-form-item>

	  <el-form-item :label="getSearchType()" prop="key">
	    <el-input v-model="search.key" class="col-12 col-sm-2 pl-0 pr-0"></el-input>
	  </el-form-item>

	  <el-form-item label="状态" prop="status">
	    <el-radio-group v-model="search.status">
	      <el-radio :label="'all'">全部</el-radio>
	      <el-radio :label="-1">已过期</el-radio>
	      <el-radio :label="0">不可用</el-radio>
	      <el-radio :label="1">可使用</el-radio>
	      <el-radio :label="2">已使用</el-radio>
	    </el-radio-group>
	  </el-form-item>

	  <el-form-item label="优惠券" prop="coupon_id">
		  <el-select
		    v-model="search.coupon_id"
		    filterable
		    remote
		    reserve-keyword
		    placeholder="搜索优惠券名"
		    :remote-method="getCoupon"
		    :loading="loading"
		    size="mini"
		    popper-class="business-el-select-dropdown__item"
			@focus="getCoupon('')">
		    <el-option
		      v-for="item in CouponData"
		      :key="item.id"
		      :label="getCouponLabel(item)"
		      :value="item.id">
		      <div class="flex" style="min-width: 300px;">
		      	<div class="flex-1">
				   	<div>[{{item.superposition?'可叠加':'不叠加'}}]-{{item.title}}</div>
				   	<div class="small text-primary">
				   		剩余：{{item.surplus_stock}}
				   	</div>
		      	</div>
		      	<div class="flex-1 text-right">
			      	<div class="flex">
			      		<div class="flex-1"></div>
				  		<div class="mr-2">满</div>
				    	<div>{{item.satisfy_price}}</div>
				  		<div class="mx-2" v-if="item.type">打</div>
				  		<div class="mx-2" v-else>减</div>
				    	<div v-if="item.type"><span v-if="item.discount/10<10">{{item.discount/10}}</span>折</div>
				    	<div v-else>{{item.price}}元</div>
			    	</div>
			    	<div class="small" v-if="item.use_start_time">{{item.use_start_time}}可用</div>
		      	</div>
		      </div>
		    </el-option>
		  </el-select>
	  </el-form-item>

	  <el-form-item>
	    <el-button type="primary" @click="initHtml">查询</el-button>
	    <el-button @click="resetForm('search')">重置</el-button>
	  </el-form-item>
	</el-form>
	<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 class="table-responsive">
		<el-table
	      	:data="tableData"
    		stripe
    		v-loading="search.ajax"
    		style="width: 100%;">
	      <el-table-column
	        prop="id"
	        label="ID"
	        width="60">
	      </el-table-column>
	      <el-table-column
	        prop="cate"
	        label="分类"
	        width="100">
	      </el-table-column>
	      <el-table-column
	        label="用户"
	        width="240">
		      <template slot-scope="scope">
		      	<div class="flex flex-center" v-if="scope.row.uid">
					<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>
				      	<el-link :href="'/user?uid='+scope.row.uid" target="_blank"
				      	:underline="false"
				      	title="用户中心">{{scope.row.nickname}}</el-link>
		      		</div>
		      	</div>
		      	<div v-else>未领取</div>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="券名">
		      <template slot-scope="scope">
			   	<div>{{scope.row.title}}</div>
			   	<div class="small text-primary">
				   	<div v-if="scope.row.alias_list.length">{{scope.row.alias_list.join('，')}}</div>
				   	<div v-else>全品类</div>
				   	<div>{{scope.row.alias}}</div>
			   	</div>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="规则"
	        width="200">
		      <template slot-scope="scope">
		      	<div class="flex">
			  		<div class="mr-2">满</div>
			    	<div>{{scope.row.satisfy_price}}</div>
			  		<div class="mx-2" v-if="scope.row.type">打</div>
			  		<div class="mx-2" v-else>减</div>
			    	<div v-if="scope.row.type"><span v-if="scope.row.discount/10<10">{{scope.row.discount/10}}</span>折</div>
			    	<div v-else>{{scope.row.price}}元</div>
		    	</div>
		    	<div class="small" v-if="scope.row.limit_sum">每个用户可领取{{scope.row.limit_sum}}次</div>
		    	<div class="small" v-else>每个用户可领取不限次</div>
		    	<div class="small" v-if="scope.row.start_time">{{scope.row.start_time}}可用</div>
		    	<div class="small" v-if="scope.row.vip_level>0">{{scope.row.vip_name}}可用</div>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="叠加"
	        width="80">
		      <template slot-scope="scope">
		      	<transition>
		      		<el-button type="success" size="minism" v-if="scope.row.superposition">可叠加</el-button>
		      		<el-button type="info" size="minism" v-else>不叠加</el-button>
				</transition>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="状态"
	        width="80">
		      <template slot-scope="scope">
		      	<transition>
		      		<el-button type="info" size="minism"
		      		v-if="scope.row.status==-1">已过期</el-button>
		      		<el-button type="info" size="minism"
		      		v-if="scope.row.status==0">不可用</el-button>
		      		<el-button type="success" size="minism"
		      		v-if="scope.row.status==1">可使用</el-button>
		      		<el-button type="danger" size="minism"
		      		v-if="scope.row.status==2">已使用</el-button>
				</transition>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="时间线"
	        width="180">
		      <template slot-scope="scope">
		        <el-popover trigger="hover" placement="top">
		          <p>创建时间: {{ scope.row.create_time }}</p>
		          <p>更新时间: {{ scope.row.update_time }}</p>
		          <p>可用时间: {{ scope.row.start_time }}</p>
		          <p>过期时间: {{ scope.row.end_time }}</p>
		          <p>领取时间: {{ scope.row.receive_time }}</p>
		          <p>使用时间: {{ scope.row.use_time }}</p>
		          <div slot="reference" class="name-wrapper">
		            <el-tag size="small" type="info">{{ scope.row.create_time }}</el-tag>
		          </div>
		        </el-popover>
		      </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>
{/block}
{block name="script"}
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			labelPosition:'right',
			search:{
				search_type:'uid',
				key:'',
				coupon_id:'',
				status:'all',
				ajax:false,
				page:1,
				total:0,
				pageSize:10
			},
			loading:false,
			CouponData:[],
			tableData:[],
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
		},
	    methods: {
	    	getSearchType(){
	    		var text='UID';
	    		switch(this.search.search_type){
	    			case 'id':
	    				text='ID';
	    				break;
	    			case 'alias':
	    				text='券码';
	    				break;
	    			case 'uid':
	    				text='UID';
	    				break;
	    			case 'user':
	    				text='用户名';
	    				break;
	    			case 'mobile':
	    				text='手机号';
	    				break;
	    			case 'email':
	    				text='邮箱';
	    				break;
	    		}
	    		return text;
	    	},
			getCouponLabel(item){
				var label=item.title;
				label+=' - 满';
				label+=item.satisfy_price;
				if (item.type) {
					label+='打';
					label+=item.discount/10;
					label+='折';
				}else{
					label+='减';
					label+=item.price;
					label+='元';
				}
				return label;
			},
	      	getCoupon(query) {
	      		var _this=this;
				$.ajax({
					url:'/coupon',
					type:'get',
					data:{
						key:query,
						search_type:'title',
						status:1,
						page:1,
						total:0,
						pageSize:100
					},
					dataType:'json',
					success:function(ret){
						if (ret) {
							if (ret.code === 0) {
								_this.search.coupon_id='';
								_this.CouponData=ret.data.data;
							}
						}
					}
				});
			},
			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>
{/block}