{extend name="main"}
{block name="style"}
{css href="__TEMPLATE_STATIC__/user.css"}
<style>
.el-tag--vip{color: #D8B077;border-color: #D8B077;background-color: transparent;}
.text-vip{color: #D8B077;}
.border-vip{border-color: #D8B077 !important;}
.el-divider__text.h6{font-size: 1.2rem;}
</style>
{/block}
{block name="header"}
{include file="module/user_top_nav"/}
{/block}
{block name="body"}
<div class="flex1 flex h-100">
	<div class="w-180px bg-dark p-4 overflow-y-auto">
	{include file="module/user/company_left" left="module/user/company_left_vip"/}
	</div>
	<div class="frame-body flex-1 overflow-y-auto py-3">
		<div class="container-xl p-4 shadow mb-3" style="background-image: url(__TEMPLATE_STATIC__/vip_bg.png);background-size: 100% 100%;">
			<div class="flex text-666666">
				<div class="flex-1">
					<h5 class="font-weight-bold">{{userInfo.company_name}}</h5>
					<div class="pt-2">
						<el-tag :type="userInfo.company_vip?'vip':'info'" class="rounded-pill">{{userInfo.company_vip.title}}</el-tag>
					</div>
					<div class="text-secondary py-3">
						服务期限：{{userInfo.company_vip_time?userInfo.company_vip_time:'永久'}}
					</div>
					<div class="flex flex-center">
						<div class="pr-2">
							<img src="__TEMPLATE_STATIC__/icon/icon_vip.png" alt="" width="22">
						</div>
						<div><span class="h6">VIP会员享受更多招聘特权</span></div>
					</div>
				</div>
				<div class="bg-0-gray-0 mx-3" style="width: 2px;"></div>
				<div class="px-5 w-75">
					<div class="row text-center">
						<div class="col-3 py-3">
							<div class="mb-2">
								<img src="__TEMPLATE_STATIC__/icon/icon_vip_jobs.png" alt="" height="31">
							</div>
							<div class="text-secondary text-nowrap">发布职位：{{userInfo.release_jobs_sum}}</div>
						</div>
						<div class="col-3 py-3">
							<div class="mb-2">
								<img src="__TEMPLATE_STATIC__/icon/icon_vip_resume.png" alt="" height="31">
							</div>
							<div class="text-secondary text-nowrap">简历点数：{{userInfo.download_resume}}</div>
						</div>
						<div class="col-3 py-3">
							<div class="mb-2">
								<img src="__TEMPLATE_STATIC__/icon/icon_vip_invite_aninterview.png" alt="" height="31">
							</div>
							<div class="text-secondary text-nowrap">邀请面试：{{userInfo.invite_aninterview}}</div>
						</div>
						<div class="col-3 py-3">
							<div class="mb-2">
								<img src="__TEMPLATE_STATIC__/icon/icon_vip_refresh_sum.png" alt="" height="31">
							</div>
							<div class="text-secondary text-nowrap">刷新次数：{{userInfo.refresh_sum}}</div>
						</div>
						<div class="col-3 py-3">
							<div class="mb-2">
								<img src="__TEMPLATE_STATIC__/icon/icon_vip_resume.png" alt="" height="31">
							</div>
							<div class="text-secondary text-nowrap">招聘会场次：{{userInfo.job_fair}}</div>
						</div>
						<div class="col-3 py-3">
							<div class="mb-2">
								<img src="__TEMPLATE_STATIC__/icon/icon_vip_top_day.png" alt="" height="31">
							</div>
							<div class="text-secondary text-nowrap">置顶天数：{{userInfo.top_day}}</div>
						</div>
						<div class="col-3 py-3">
							<div class="mb-2">
								<img src="__TEMPLATE_STATIC__/icon/icon_vip_urgent_day.png" alt="" height="31">
							</div>
							<div class="text-secondary text-nowrap">紧急招聘天数：{{userInfo.urgent_day}}</div>
						</div>
						<div class="col-3 py-3">
							<div class="mb-2">
								<img src="__TEMPLATE_STATIC__/icon/icon_vip_im_max_people.png" alt="" height="31">
							</div>
							<div class="text-secondary text-nowrap">聊天人数：{{userInfo.im_max_people}}</div>
						</div>
						<div class="col-3 py-3">
							<div class="mb-2">
								<img src="__TEMPLATE_STATIC__/icon/icon_vip_today_down_resume.png" alt="" height="31">
							</div>
							<div class="text-secondary text-nowrap">每日下载简历上限：{{userInfo.today_down_resume}}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="container-xl bg-white shadow pb-3">
			<div class="p-4">
				<div class="pb-4 flex">
					<div class="border-bottom px-3 py-2 border-lg pointer" :class="activeName=='vip'?'border-vip text-vip':'text-secondary'" @click="activeName='vip'">会员套餐</div>
					<div class="border-bottom px-3 py-2 border-lg pointer" :class="activeName=='rights'?'border-vip text-vip':'text-secondary'" @click="setSearchType('rights')">我的权益</div>
					<div class="border-bottom px-3 py-2 border-lg pointer" :class="activeName=='detailed'?'border-vip text-vip':'text-secondary'" @click="setSearchType('detailed')">权益使用明细</div>
					<div class="flex-1 border-bottom border-lg"></div>
					<div class="border-bottom border-lg pb-2" v-show="activeName=='detailed'">
						<el-date-picker
					      	v-model="search.time"
					      	type="daterange"
					      	range-separator="至"
					      	start-placeholder="开始日期"
					      	end-placeholder="结束日期"
					      	format="yyyy 年 MM 月 dd 日"
					      	value-format="timestamp"
							:picker-options="PickerOptions"
					       	size="mini" class="rounded-0">
					    </el-date-picker>
					    <el-button type="primary" size="mini" class="rounded-0" @click="sendInitHtml">查询</el-button>
					</div>
				</div>
				<div class="row" v-show="activeName=='vip'">
					<div class="col-4 p-3 vip-list" v-for="(v,index) in vip">
						<div class="border border-lg vip-item pt-3" :class="{'is_sell_out':v.stock>0 && v.surplus_stock<=0}">
							<div class="discount font-italic" v-if="v.discount>0">{{v.discount/10}}<span class="small">折</span></div>
							<div class="w-75 mx-auto el-divider el-divider--horizontal">
								<div class="el-divider__text is-center h6 mb-0 text-666666 font-weight-bold">{{v.title}}</div>
							</div>
							<div class="h4 text-center py-3 mb-0 text-D8B077">
								{{v.discount>0?v.price*(v.discount/100):v.price}}<span class="font-size-sm text-secondary ml-2">元<s class="pl-1" v-if="v.discount>0">原价:{{v.price}}</s></span>
							</div>
							<div class="py-3 text-666666 vip-rule-list">
								<div class="flex vip-rule-item p-3" v-for="(va,i) in v.rule">
									<div class="flex-1">{{va.title}}</div>
									<div v-if="va.type==='input'">{{va.value}}<span class="small">{{va.unit}}</span></div>
									<div v-if="va.type==='switch'">{{va.value?'有':'无'}}</div>
								</div>
								<div class="flex p-3">
									<div class="flex-1">增值服务专享折扣</div>
									<div class="text-D8B077">{{v.va_discount>0?(v.va_discount/10)+'折':'无折扣'}}
										<el-popover
										    placement="left"
										    width="200"
										    trigger="hover">
											<div class="flex p-2 small" v-for="(va,i) in v.va">
												<div class="flex-1">{{va.title}}</div>
												<div class="text-D8B077">{{va.discount>0?(va.discount/10)+'折':'无折扣'}}</div>
											</div>
											<i class="el-icon-question ml-2 text-secondary pointer" slot="reference"></i>
										</el-popover>
									</div>
								</div>
							</div>
							<div class="flex text-center p-4">
								<div class="flex-1 border border-lg border-D8B077 px-5 py-2 rounded-pill text-white h6 mb-0 vip-btn" v-if="v.stock > 0 && v.surplus_stock<=0">已售罄</div>
								<div class="flex-1 border border-lg border-D8B077 px-5 py-2 rounded-pill text-D8B077 h6 mb-0 vip-btn pointer" v-else @click="openNewBuy(v)">立即购买</div>
							</div>
						</div>
					</div>
				</div>
				<div v-show="activeName=='rights' || activeName=='detailed'">
					<div class="table-responsive">
						<el-table
							ref="multipleTable"
					      	:data="tableData"
				    		stripe
				    		v-loading="search.ajax"
				    		style="width: 100%;"
				    		header-cell-class-name="bg-F4F4F4">
					      <el-table-column
					        label="内容">
						      <template slot-scope="scope">
						      	<div>{{scope.row.title}}</div>
						      	<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="100">
						      <template slot-scope="scope">
						      	<div>{{scope.row.value}}{{scope.row.unit}}</div>
						      </template>
					      </el-table-column>
					      <el-table-column
					        label="剩余数量"
					        width="200"
					        v-if="search.type=='rights'">
						      <template slot-scope="scope">
						      	<div>{{scope.row.surplus_value}}{{scope.row.unit}}</div>
						      </template>
					      </el-table-column>
					      <el-table-column
					        label="过期时间"
					        width="120"
					        v-if="search.type=='rights'">
						      <template slot-scope="scope">
						      	<div v-if="scope.row.is_expiry">已过期</div>
						      	<div v-else-if="!scope.row.status" class="text-primary">已使用</div>
						      	<div v-else>{{scope.row.expiry_time}}</div>
						      </template>
					      </el-table-column>
					      <el-table-column
					      	prop="create_time"
					        label="时间"
					        width="180">
					      </el-table-column>
					    </el-table>
					</div>
					<div class="table-responsive py-3">
						<el-pagination
						  background
						  :hide-on-single-page="true"
						  @current-change="setPageChange"
					      :current-page="search.page"
					      :page-size="15"
					      layout="total,  prev, pager, next, jumper"
					      :total="search.total">
					    </el-pagination>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{/block}
{block name="footer"}
{include file="module/login"/}
{include file="module/buy_win"/}
{/block}
{block name="script"}
<script type="text/javascript">
	{xycms:vip name="vip_list"}
	var vip={:json_encode($vip_list,JSON_UNESCAPED_UNICODE)};
	{else/}
	var vip=[];
	{/xycms:vip}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			userInfo:UserInfo,
			loginTabs:XYBase.loginTabs,
			feedback:XYBase.feedback,
			activeName:'vip',
			vip:vip,
			buy:XYBase.buy,
			search:{
				time:[],
				type:'score_task',
		    	ajax:false,
				total:0,
				page: 1
			},
	        PickerOptions:{
	        	disabledDate: (time) => {
			      return time.getTime() < Date.now()-(3600*24*365*100*1000)||time.getTime() > Date.now();
			  	}
	        },
			tableData:[]
		},
		watch:{
		    view:XYBase.viewWatch,
		    loginTabs:XYBase.loginTabsWatch,
			userInfo:{
				handler(val,oldVal){
					if (!val.id) {
						window.location.reload();
					}
				},
				deep:true
			},
		},
		created(){
			XYBase.created(this);
		},
		methods:XYBase.methods({
			setPageChange(val){
				this.search.page=val;
				this.initHtml();
			},
			setSearchType(val){
				this.activeName=val;
				if (this.search.type==val) return;
				this.search.type=val;
				this.search.page=1;
				this.initHtml();
			},
			sendInitHtml(){
				this.search.page=1;
				this.initHtml();
			},
			initHtml(){
				var _this=this;
				_this.search.ajax=true;
				_this.sendGet({
					url:'/user/vip/getMyRights',
					data:_this.search,
				},function(ret){
					_this.search.ajax=false;
					if (ret) {
						_this.tableData=[];
						_this.search.total=ret.data.total;
						if (ret.code === 0) {
							var Data=ret.data.data;
							if (_this.search.type=='rights')
								Data.sort(function(x,y){
									return x.is_expiry-y.is_expiry;
								});
							_this.tableData=Data;
						}else XYBase.msg(ret.msg);
					}
				});
			},
			openNewBuy(val){
	    		document.body.style="overflow: hidden;padding-right:17px;";
	    		this.buy.title='会员服务';
	    		this.buy.stitle='套餐升级';
				this.buy.pay_status='vip';
	    		this.buy.form.pay_type='';
	    		this.buy.form.type=1;
	    		this.buy.form.alias_id=val.id;
	    		this.buy.price=val.price;
	    		this.buy.score_price=val.discount>0?val.price*(val.discount/100):val.price;
	    		this.buy.data=val;
	    		this.buy.view=true;
			}
		})
	});
</script>
{/block}