{extend name="main"}
{block name="style"}
<style type="text/css">
	.w-100px{width: 100px;}
	.w-200px{width: 200px;}
	#container{line-height: 1;}
	.el-date-editor .el-range-separator{width:auto;}
</style>
{/block}
{block name="body"}
<div class="bg-white p-3">
	<div class="table-responsive">
		<el-form :model="form" @submit.native.prevent="submitForm" :rules="rules" ref="form" label-width="120px" :label-position="labelPosition">

		  <el-form-item label="接收人群" prop="crowd">
		    <el-radio-group v-model="form.crowd" @change="querySearchAsync">
		      <el-radio :label="'all'">所有人</el-radio>
		      <el-radio :label="'company'">企业用户</el-radio>
		      <el-radio :label="'personal'">个人用户</el-radio>
		      <el-radio :label="'mp'">关注公众号用户</el-radio>
		      <el-radio :label="'mobile'">绑定手机号用户</el-radio>
		      <el-radio :label="'email'">绑定邮箱用户</el-radio>
		    </el-radio-group>
		  </el-form-item>

		  <el-form-item label="套餐">
		  	<el-radio-group v-model="form.vip_level" @change="querySearchAsync">
			    <el-radio label="all">不限</el-radio>
			    <el-radio v-for="(v,index) in vip" :label="v.level" v-if="v.is_company">{{v.title}}</el-radio>
			</el-radio-group>
		  </el-form-item>

		  <el-form-item label="注册时间" prop="register_time">
		    <el-date-picker
		      v-model="form.register_time"
		      type="daterange"
		      align="right"
		      unlink-panels
		      range-separator="至"
		      start-placeholder="开始日期"
		      end-placeholder="结束日期"
		      :picker-options="pickerOptions"
		      format="yyyy-M-d"
		      value-format="yyyy-M-d"
		      @change="querySearchAsync">
		    </el-date-picker>
		  </el-form-item>

		  <el-form-item label="优惠券" prop="coupon_id">
			  <el-select
			    v-model="form.coupon_id"
			    filterable
			    remote
			    reserve-keyword
			    placeholder="搜索优惠券名"
			    :remote-method="getCoupon"
			    :loading="loading"
			    class="col-12 col-sm-4 px-0"
			    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 label="有效期" prop="end_time">
		    <el-date-picker
		      v-model="form.end_time"
		      align="right"
		      type="datetime"
		      format="yyyy-M-d HH:mm:ss"
		      value-format="yyyy-M-d HH:mm:ss"
		      :picker-options="endPickerOptions"
		      placeholder="End Time">
		    </el-date-picker>
		  </el-form-item>

		  <el-form-item label="结果">
		  	共{{form.total}}人
		  </el-form-item>

		  <el-form-item>
		    <el-button type="primary" @click="submitForm('form')">发放</el-button>
		  </el-form-item>
		</el-form>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="vip"}
	var vip=[];
	{else/}
	var vip={:json_encode($vip,JSON_UNESCAPED_UNICODE)};
	{/empty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			labelPosition:'right',
			vip:vip,
			user_list:[],
			form:{
				crowd:'all',
				vip_level:'all',
				coupon_id:'',
				end_time:'',
				register_time:[],
				total:0,
				ajax:false,
			},
	        endPickerOptions: {
	          disabledDate(time) {
	            return time.getTime() < Date.now();
	          },
	      	},
	        pickerOptions: {
	          disabledDate(time) {
	            return time.getTime() > Date.now();
	          },
	          shortcuts: [{
	            text: '今日',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setTime(start.getTime() - 3600 * 1000 * 24);
	              picker.$emit('pick', [start, end]);
	            }
	          },{
	            text: '三天内',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
	              picker.$emit('pick', [start, end]);
	            }
	          },{
	            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]);
	            }
	          }]
	        },
			loading:false,
			CouponData:[],
	        rules: {
	          crowd: [
	            { required: true, message: '请选择接收人群', trigger: 'blur' },
	          ],
	          coupon_id: [
	            { required: true, message: '请选择优惠券', trigger: 'change' },
	          ],
	          end_time: [
	            { required: true, message: '请选择优惠券有效期', trigger: 'change' },
	          ],
	        }
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
			this.querySearchAsync();
		},
		methods:{
		    querySearchAsync() {
		    	var _this=this;
		    	if (this.form.ajax)return;
		    	this.form.ajax=true;
		    	$.getJSON('',this.form,function(ret){
		    		_this.form.ajax=false;
		    		if (ret) {
		    			if (ret.code === 0) {
		    				_this.form.total=ret.data;
		    			}else{
		    				XYBase.msg(ret.msg);
		    			}
		    		}
		    	});
		    },
			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.form.coupon_id='';
								_this.CouponData=ret.data.data;
							}
						}
					}
				});
			},
			submitForm:function(formName) {
				if (this.form.total<=0)return XYBase.msg('当前筛选结果为0');
				var _this=this;
				var D=_this.form;
				_this.$refs[formName].validate((valid) => {
				  if (valid) {
					const loading = XYBase.openloading();
					$.ajax({
						url:'',
						data:D,
						type:'post',
						dataType:'json',
						success:function(ret){
					        loading.close();
					        if (ret) {
								if(ret.code == 0){
									XYBase.success(ret.msg);
								}else{
									XYBase.msg(ret.msg);
								}
					        }else{
				          		XYBase.error(XYBase.config.system_network_error)
					        }
						},
						error:function(err){
					        loading.close();
				          	XYBase.error(XYBase.config.system_network_error)
						}
					});
				  } else {
					XYBase.warning('请先把表单填写完整。');
				    return false;
				  }
				});
			},
			resetForm:function(formName) {
				this.$refs[formName].resetFields();
			},
		}
	});
$(function(){
	reloadWindowSize();
	$(window).resize(function(){
		reloadWindowSize();
	});
});
function reloadWindowSize (argument) {
	var winW=$(window).width();
	if(winW <= 576){
		vm.labelPosition='top';
	}else{
		vm.labelPosition='right';
	}
}
</script>
{/block}