{extend name="main"}
{block name="style"}
<style type="text/css">
	.flex-lable{width: 140px;color: #6c757d;text-align: right;padding-right: 10px;}
</style>
{/block}
{block name="body"}
<div class="bg-white p-3">
	<div class="flex pb-3">
		<div class="flex-1">
	        <el-button
	            type="primary"
	            size="mini"
	            @click="window.open('/vip/add')">
	            创建主套餐
	        </el-button>
		</div>
		<div class="small text-secondary">当前共有：{{search.total}}个主套餐</div>
	</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 type="expand" width="40">
			  <template slot-scope="scope">
			  	<div class="flex">
			  		<div class="flex-1">
					  	<div class="text-dark" v-if="scope.row.rule">
					  		<div class="flex pb-3" v-for="(v,index) in scope.row.rule">
				  				<div class="flex-lable">{{v.title}}</div>
				  				<div class="flex-1">
				  					<p class="text-primary" v-if="v.type==='input'">{{v.value}}{{v.unit}}</p>
				  					<p class="text-primary" v-else-if="v.type==='switch'">{{v.value?'开启':'关闭'}}</p>
				  					<p class="mb-0 text-secondary small">{{v.desc}}</p>
				  				</div>
					  		</div>
					  	</div>
					  	<div class="text-center py-5 text-secondary small" v-else>无可用规则</div>
			  		</div>
			  		<div class="flex-1">
					  	<div class="text-dark" v-if="scope.row.vip.length">
					  		<div class="flex pb-3" v-for="(v,index) in scope.row.vip">
				  				<div class="flex-lable">{{v.title}}</div>
				  				<div class="flex-1">
							      	<div class="small text-secondary" v-if="v.discount">
							      		<div>{{v.discount/10}}折</div>
							      	</div>
							      	<div class="small text-secondary" v-else>
							      		<div>无折扣</div>
							      	</div>
				  				</div>
					  		</div>
					  	</div>
			  		</div>
			  	</div>
			  </template>
		  </el-table-column>
	      <el-table-column
	        label="图标"
	        width="80">
		      <template slot-scope="scope">
				  <el-image
				  	v-if="scope.row.icon" 
				    style="width: 20px; height: 20px"
				    :src="scope.row.icon" 
				    :preview-src-list="[scope.row.icon]">
				  </el-image>
		      </template>
	      </el-table-column>
	      <el-table-column
	        prop="title"
	        label="名称">
	      </el-table-column>
	      <el-table-column
	        label="会员类型"
	        width="120"
	        :filter-multiple="false"
		    :filters="[{text: '企业会员', value: 1}, {text: '个人会员', value: 0}]"
		    :filter-method="filterHandlerIsCompany">
		      <template slot-scope="scope">
		      	<transition>
		      		<el-button type="primary" size="minism" v-if="scope.row.is_company==1">企业会员</el-button>
		      		<el-button type="success" size="minism" v-if="scope.row.is_company==0">个人会员</el-button>
				</transition>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="价格"
	        width="100">
		      <template slot-scope="scope">
		      	<div class="small text-secondary" v-if="scope.row.discount">
		      		<div><s>原价：{{scope.row.price}}</s></div>
		      		<div>折扣：{{scope.row.discount/10}}折</div>
		      		<div class="text-primary">现价：{{(scope.row.price*(scope.row.discount/100)).toFixed(2)}}</div>
		      	</div>
		      	<div class="small text-secondary" v-else>
		      		<div class="text-primary">现价：{{scope.row.price}}</div>
		      	</div>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="库存"
	        width="140">
		      <template slot-scope="scope">
		      	<div class="small text-secondary" v-if="scope.row.stock">
		      		<div>库存：{{scope.row.stock}}</div>
		      		<div :class="scope.row.surplus_stock<10?'text-danger':'text-success'">剩余库存：{{scope.row.surplus_stock}}</div>
		      	</div>
		      	<div class="small text-secondary" v-else>不限制</div>
		      </template>
	      </el-table-column>
	      <el-table-column
	        prop="sold"
	        label="已售"
	        width="100">
	      </el-table-column>
	      <el-table-column
	        prop="level"
	        label="优先级"
	        width="100">
	      </el-table-column>
	      <el-table-column
	        label="状态"
	        width="80"
	        :filter-multiple="false"
		    :filters="[{text: '上架', value: 1}, {text: '下架', value: 0}]"
		    :filter-method="filterHandlerStatus">
		      <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="80">
		      <template slot-scope="scope">
		      	<transition>
		      		<el-button type="success" size="minism"
		      		v-if="scope.row.default==1 || scope.row.default==2" 
		      		:loading="scope.row.default==2">是</el-button>
		      		<el-button type="info" size="minism" 
		      		v-else="scope.row.default==0 || scope.row.default==2" 
		      		@click="setDefault(scope.row);" 
		      		:loading="scope.row.default==2">否</el-button>
				</transition>
		      </template>
	      </el-table-column>
	      <el-table-column
	        prop="start_time"
	        label="开始时间"
	        width="120">
	      </el-table-column>
	      <el-table-column
	        prop="end_time"
	        label="结束时间"
	        width="120">
	      </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>
		          <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-column
	        label="/"
	        width="80">
		      <template slot-scope="scope">
		        <el-button
		            type="primary"
		            size="minism"
		            @click="window.open('/vip/edit/'+scope.row.id)">
		            编辑
		        </el-button>
		      </template>
	      </el-table-column>
	    </el-table>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="cate"}
	var cate=[];
	{else/}
	var cate={:json_encode($cate,JSON_UNESCAPED_UNICODE)};
	{/empty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			search:{
				ajax:false,
				total:0
			},
			tableData:[],
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
			this.initHtml();
		},
	    methods: {
	    	setStatus(data){
	    		if (data.status==2) return;
	    		var status=1,oldStatus=data.status;
	    		if (data.status) status=0;
	    		data.status=2;
	    		$.getJSON('/vip/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);
	    			}
	    		});
	    	},
	    	setDefault(data){
	    		var _this=this;
	    		if (data.default==2) return;
	    		var oldStatus=data.default;
	    		data.default=2;
	    		$.getJSON('/vip/setDefault/'+data.id,function(ret){
	    			data.default=oldStatus;
	    			if (ret) {
	    				if (ret.code === 0) {
	    					for (var i = 0; i < _this.tableData.length; i++) {
	    						if (_this.tableData[i].default&&_this.tableData[i].is_company===data.is_company) {
	    							_this.tableData[i].default=0;
	    							break;
	    						}
	    					}
	    					data.default=1;
	    				}else{
	    					XYBase.msg(ret.msg);
	    				}
	    			}else{
						XYBase.error(XYBase.config.system_network_error);
	    			}
	    		});
	    	},
			resetForm:function(formName) {
				this.$refs[formName].resetFields();
			},
		    filterHandlerStatus(value, row, column) {
        		return row.status === value;
		    },
		    filterHandlerIsCompany(value, row, column) {
        		return row.is_company === value;
		    },
	      	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);
						}
					}
				});
			}
	    }
	});
</script>
{/block}