{extend name="main"}
{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="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="1"></el-option>
		    <el-option label="下架":value="0"></el-option>
		</el-select>
	  </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
			ref="tableList"
	      	:data="tableData"
    		v-loading="search.ajax"
    		style="width: 100%;"
    		header-cell-class-name="table-header-DDE6FB">
	      <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="券名">
		      <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>
		      </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.use_start_time">{{scope.row.use_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="140">
		      <template slot-scope="scope">
		      	<div class="small">
		      		<div>总：{{scope.row.stock}}</div>
		      		<div :class="scope.row.surplus_stock<10?'text-danger':'text-success'">剩余：{{scope.row.surplus_stock}}</div>
		      		<div>已删除：{{scope.row.del_sum}}</div>
		      	</div>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="叠加"
	        width="80">
		      <template slot-scope="scope">
		      	<transition>
		      		<span class="text-success" v-if="scope.row.superposition">可叠加</span>
		      		<span class="text-secondary" v-else>不叠加</span>
				</transition>
		      </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.status==1 || scope.row.status==2" 
		      		@click="setStatus(scope.row);" 
		      		:loading="scope.row.status==2">上架</el-button>
		      		<el-button type="info" size="minism" 
		      		v-else="scope.row.status==0 || scope.row.status==2" 
		      		@click="setStatus(scope.row);" 
		      		:loading="scope.row.status==2">下架</el-button>
				</transition>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="创建/更新/可用时间"
	        width="240">
		      <template slot-scope="scope">
		        <div class="small">
		          <div>{{ scope.row.create_time }}</div>
		          <div>{{ scope.row.update_time }}</div>
		          <div>{{ scope.row.use_start_time }}</div>
		        </div>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="/"
	        width="180">
		      <template slot-scope="scope">
		        <el-button
		            type="success"
		            plain
		            round
		            size="minism"
		            @click="add(scope.row)">
		            增发
		        </el-button>
		        <el-button
		            type="primary"
		            plain
		            round
		            size="minism"
		            @click="window.open('/coupon/edit/'+scope.row.id)">
		            编辑
		        </el-button>
		        <el-button
		            type="danger"
		            plain
		            round
		            size="minism"
		            @click="del(scope.row,scope.$index)">
		            删除
		        </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>
<el-dialog
  title="增发优惠券"
  :visible.sync="dialogVisible"
  width="600px"
  :before-close="cancelRefuseWinSubmit">
	<el-form :model="form" label-width="80px" :rules="rules" ref="form" size="small">
	  <el-form-item label="优惠券">
	  	ID：{{rowData.id}}-{{rowData.title}}
	  </el-form-item>
	  <el-form-item label="规则">
      	<div class="flex">
	  		<div class="mr-2">满</div>
	    	<div>{{rowData.satisfy_price}}</div>
	  		<div class="mx-2" v-if="rowData.type">打</div>
	  		<div class="mx-2" v-else>减</div>
	    	<div v-if="rowData.type"><span v-if="rowData.discount/10<10">{{rowData.discount/10}}</span>折</div>
	    	<div v-else>{{rowData.price}}元</div>
    	</div>
    	<div class="small" v-if="rowData.limit_sum">每个用户可领取{{rowData.limit_sum}}次</div>
    	<div class="small" v-else>每个用户可领取不限次</div>
		<div class="small" v-if="rowData.use_start_time">{{rowData.use_start_time}}可用</div>
	  </el-form-item>
	  <el-form-item label="数量" prop="stock">
		<el-input-number v-model="form.stock" :step="1" step-strictly :min="1"></el-input-number>
	  </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"
	      @change="selectedEndTime">
	    </el-date-picker>
	  </el-form-item>
	</el-form>
	<div slot="footer">
	    <el-button @click="cancelRefuseWinSubmit">取 消</el-button>
	    <el-button type="primary" @click="submitForm('form');" :loading="form.ajax">{{form.ajax?'提交中...':'提交'}}</el-button>
	</div>
</el-dialog>
{/block}
{block name="script"}
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			labelPosition:'right',
			dialogVisible:false,
      endPickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        },
    	},
			rowData:{},
	        form:{
	        	id:0,
	        	ajax:false,
	        	stock:10,
	        	end_time:''
	        },
	        rules: {
	          stock: [
	            { required: true, message: '增发数量不能为空', trigger: 'blur' },
	          ],
	          end_time: [
	            { required: true, message: '请选择过期时间', trigger: 'change' },
	          ],
	        },
			search:{
				status:'all',
				ajax:false,
				page:1,
				total:0,
				pageSize:10
			},
			tableData:[],
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
		},
	    methods: {
			selectedEndTime(val){
				if (this.rowData.use_start_time) {
					if (new Date(this.rowData.use_start_time)>new Date(val)) {
						XYBase.msg('结束时间不能小于开始时间');
						this.form.end_time='';
					}
				}
			},
	    	add(data){
	    		this.rowData=data;
	    		this.dialogVisible=true;
	    	},
	      	cancelRefuseWinSubmit(done){
	      		this.rowData={};
				this.form.id=0;
	      		this.$refs.form&&this.$refs.form.resetFields();
	      		typeof done==='function'&&done();
				this.dialogVisible=false;
	      	},
			submitForm(formName) {
				var _this=this;
				_this.$refs[formName].validate((valid) => {
				  if (valid) {
		    		if (_this.form.ajax) return;
					_this.form.ajax=true;
					_this.form.id=_this.rowData.id;
					$.ajax({
						url:'/coupon/raise',
						type:'post',
						data:_this.form,
						dataType:'json',
						error:function(err){
							_this.form.ajax=false;
				          	XYBase.error(XYBase.config.system_network_error);
						},
						success:function(ret){
							_this.form.ajax=false;
							if (ret) {
								if (ret.code === 0) {
									_this.rowData.stock+=_this.form.stock;
									_this.rowData.surplus_stock+=_this.form.stock;
									_this.cancelRefuseWinSubmit();
									XYBase.success(ret.msg);
								}else XYBase.msg(ret.msg);
							}else XYBase.error(XYBase.config.system_network_error);
						}
					})
				  } else {
					return XYBase.warning('请先把表单填写完整。');
				  }
				});
			},
	    	del(data,index){
	    		var _this=this;
		        _this.$confirm('此操作将永久删除ID：'+data.id+'【'+data.title+'】优惠券, 是否继续?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
		        	data.loading=1;
		        	$.getJSON('/coupon/del/'+data.id,function(ret){
		        		data.loading=0;
		        		if (ret) {
		        			if (ret.code == 0) {
		        				_this.tableData.splice(index,1);
		        			}else{
		        				XYBase.msg(ret.msg);
		        			}
		        		}else{
							XYBase.error(XYBase.config.system_network_error);
		        		}
		        	});
		        }).catch(() => {
    				XYBase.msg('已取消删除');
		        });
	    	},
	    	setStatus(data){
	    		if (data.status==2) return;
	    		var status=1,oldStatus=data.status;
	    		if (data.status) status=0;
	    		data.status=2;
	    		$.getJSON('/coupon/setStatus/'+data.id+'/'+status,function(ret){
	    			data.status=oldStatus;
	    			if (ret) {
	    				if (ret.code === 0) {
	    					data.status=status;
	    				}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>
{/block}