{extend name="main"}
{block name="style"}
{css href="__TEMPLATE_STATIC__/user.css"}
{/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 bg-white">
			<div class="p-4">
				<div class="flex pb-3">
					<div class="flex-1 block-title-before py-2">套餐增值包</div>
					<div class="py-2 text-secondary">
						使用积分购买更优惠，多充多送，<el-link href="/user/vip/my-points" type="primary" :underline="false">立即充值</el-link>
					</div>
				</div>
				<div class="row">
					<div class="col-4 p-3 vip-list">
						<div class="border border-lg vip-item p-3 shadow">
							<div class="py-3 text-center">
								<img src="__TEMPLATE_STATIC__/icon/icon_value_added_download_resume.png" width="60">
							</div>
							<div class="h6 text-center pb-3 mb-0 text-666666">
								简历包
							</div>
							<div class="pt-3 text-666666 h-100px">
								简历打包购买更实惠，VIP会员购买可享最低<t class="text-D8B077" v-if="ValueAdded.download_resume.discount>0">{{ValueAdded.download_resume.discount/10}}折</t><t class="text-D8B077" v-else>无</t>优惠
							</div>
							<div class="flex text-center p-3">
								<div class="flex-1 border border-lg border-D8B077 px-5 py-2 rounded-pill text-D8B077 h6 mb-0 vip-btn pointer" @click="openNewBuy(ValueAdded.download_resume)">立即购买</div>
							</div>
						</div>
					</div>
					<div class="col-4 p-3 vip-list">
						<div class="border border-lg vip-item p-3 shadow">
							<div class="py-3 text-center">
								<img src="__TEMPLATE_STATIC__/icon/icon_value_added_time_refresh.png" width="60">
							</div>
							<div class="h6 text-center pb-3 mb-0 text-666666">
								智能刷新
							</div>
							<div class="pt-3 text-666666 h-100px">
								让职位随时名列前茅,在同类信息中崭露头角，VIP会员购买最低享受<t class="text-D8B077" v-if="ValueAdded.time_refresh.discount>0">{{ValueAdded.time_refresh.discount/10}}折</t><t class="text-D8B077" v-else>无</t>优惠
							</div>
							<div class="flex text-center p-3">
								<div class="flex-1 border border-lg border-D8B077 px-5 py-2 rounded-pill text-D8B077 h6 mb-0 vip-btn pointer" @click="openNewBuy(ValueAdded.time_refresh,true)">立即购买</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="p-4">
				<div class="flex pb-3">
					<div class="flex-1 block-title-before py-2">企业推广服务</div>
				</div>
				<div class="row">
					<div class="col-4 p-3 vip-list">
						<div class="border border-lg vip-item p-3 shadow">
							<div class="py-3 text-center">
								<img src="__TEMPLATE_STATIC__/icon/icon_value_added_jobs_top.png" width="60">
							</div>
							<div class="h6 text-center pb-3 mb-0 text-666666">
								职位置顶
							</div>
							<div class="pt-3 text-666666 h-100px">
								职位置顶让你的职位始终名列前茅。VIP会员可享最低<t class="text-D8B077" v-if="ValueAdded.jobs_top.discount>0">{{ValueAdded.jobs_top.discount/10}}折</t><t class="text-D8B077" v-else>无</t>优惠
							</div>
							<div class="flex text-center p-3">
								<div class="flex-1 border border-lg border-D8B077 px-5 py-2 rounded-pill text-D8B077 h6 mb-0 vip-btn pointer" @click="openNewBuy(ValueAdded.jobs_top,true)">立即购买</div>
							</div>
						</div>
					</div>
					<div class="col-4 p-3 vip-list">
						<div class="border border-lg vip-item p-3 shadow">
							<div class="py-3 text-center">
								<img src="__TEMPLATE_STATIC__/icon/icon_value_added_urgent.png" width="60">
							</div>
							<div class="h6 text-center pb-3 mb-0 text-666666">
								紧急招聘
							</div>
							<div class="pt-3 text-666666 h-100px">
								急招不用苦等，职位加急，为职位增加曝光量。VIP会员可享最低<t class="text-D8B077" v-if="ValueAdded.urgent.discount>0">{{ValueAdded.urgent.discount/10}}折</t><t class="text-D8B077" v-else>无</t>优惠
							</div>
							<div class="flex text-center p-3">
								<div class="flex-1 border border-lg border-D8B077 px-5 py-2 rounded-pill text-D8B077 h6 mb-0 vip-btn pointer" @click="openNewBuy(ValueAdded.urgent,true)">立即购买</div>
							</div>
						</div>
					</div>
					<!-- <div class="col-4 p-3 vip-list">
						<div class="border border-lg vip-item p-3 shadow">
							<div class="py-3 text-center">
								<img src="__TEMPLATE_STATIC__/icon/icon_value_added_company_tpl.png" width="60">
							</div>
							<div class="h6 text-center pb-3 mb-0 text-666666">
								企业模板
							</div>
							<div class="pt-3 text-666666 h-100px">
								企业模板，与众不同，彰显企业专业水准。VIP会员可享最低<t class="text-D8B077">8折</t>优惠
							</div>
							<div class="flex text-center p-3">
								<div class="flex-1 border border-lg border-D8B077 px-5 py-2 rounded-pill text-D8B077 h6 mb-0 vip-btn pointer">立即购买</div>
							</div>
						</div>
					</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:valueadded name="valueadded"}
	var ValueAdded={:json_encode($valueadded,JSON_UNESCAPED_UNICODE)};
	{else/}
	var ValueAdded=[];
	{/xycms:valueadded}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			userInfo:UserInfo,
			loginTabs:XYBase.loginTabs,
			ValueAdded:ValueAdded,
			feedback:XYBase.feedback,
			buy:XYBase.buy,
			xy_score:{
				recharge_rate:{xycms:scoreconfig name="recharge_rate"},
				is_integer:{xycms:scoreconfig name="is_integer"},
				proportion:{xycms:scoreconfig name="proportion"},
			},
			page:{
				status:'publishing',
		    	ajax:false,
				total:0,
				page: 1
			},
			jobsList:[]
		},
		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({
			openNewBuy(val,showJobsList){
	    		document.body.style="overflow: hidden;padding-right:17px;";
	    		this.buy.title='增值服务';
	    		this.buy.stitle=val.title;
				this.buy.pay_status='value-added';
	    		this.buy.form.pay_type='';
	    		this.buy.form.type=val.type;
	    		this.buy.listData=val.data;
	    		this.buy.view=true;
	    		if (showJobsList){
					this.initHtml();
	    			this.buy.showSelectedJobs=true;
	    			this.buy.showJobsList=true;
	    		}
			},
			setPageChange(val){
				this.page.page=val;
				this.initHtml();
			},
			initHtml(){
				var _this=this;
				_this.page.ajax=true;
				_this.sendGet({
					url:'/user/jobs/management',
					data:_this.page,
				},function(ret){
					_this.page.ajax=false;
					if (ret) {
						_this.jobsList=[];
						_this.page.total=ret.data.total;
						if (ret.code === 0) {
							_this.jobsList=ret.data.data;
						}else XYBase.msg(ret.msg);
					}
				});
			}
		})
	});
</script>
{/block}