{extend name="main"}
{block name="style"}
{css href="__TEMPLATE_STATIC__/user.css"}
<style>
.user-vip-bg{
	height: 121px;
	width: 321px;
	background-image: url(__TEMPLATE_STATIC__/user_vip_bg.png);
	background-size: 321px 121px;
	background-repeat: no-repeat;
}
.user-vip-text{
font-size: 18px;
font-weight: 500;
color: #D8B077;
line-height: 20px;
background: linear-gradient(0deg, #C3A36D 0%, #E8D3AA 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;}
.el-button--vip{
	width: 90px;
	color: #FFFFFF;
	background: linear-gradient(45deg, #C3A36D 0%, #E8D3AA 100%);
	border:0;
	padding: 10px 0 !important;
}
.el-button--vip span{color: #FFFFFF; }
.text-D5CDC3{color: #D5CDC3}
.bg-F8F9FD{background-color: #F8F9FD}
.row.mx--5{margin-left: -0.5rem;margin-right: -0.5rem;}
.row.mx--5 [class*="col-"]{padding-left: .5rem;padding-right: .5rem;}
</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_home"/}
	</div>
	<div class="frame-body flex-1 overflow-y-auto py-3">
		<div class="container-xl">
			<div class="flex mb-3">
				<div class="flex-1 bg-white shadow p-4">
					{notempty name="Find"}
					<div class="flex flex-bottom">
						<div class="flex-1 border-bottom">
							<div class="flex flex-center">
								<el-image
							      class="w-60px h-60px"
							      src="{$Find.logo}"
							      fit="contain"
							      :preview-src-list="['{$Find.logo}']"></el-image>
								<div class="flex-1 pl-3">
									<div class="flex flex-center">
										<div class="h6 mb-0 font-weight-bold">{$Find.title}</div>
										<div class="pl-4">
											{volist name="attestation" id="v"}
												{eq name="Find.attestation" value="$v.value"}
												{switch $v.value}
												    {case 1}<el-button type="{$v.type}" icon="el-icon-time" round size="minism">{$v.title}</el-button>{/case}
												    {case 3}<el-button type="{$v.type}" icon="el-icon-circle-check" round size="minism">{$v.title}</el-button>{/case}
												    {default /}<el-button type="{$v.type}" icon="el-icon-circle-close" round size="minism" @click="window.location.href='/user/attestation'">{$v.title}</el-button>
												{/switch}
												{/eq}
											{/volist}
										</div>
									</div>
									<div class="text-666666 pt-3">{$Find.nature} | {$Find.industry} | {$Find.size_type} | {$Find.contacts_city}</div>
								</div>
							</div>
							<div class="text-666666 small py-2">积分：<span class="text-D8B077 mr-2">{{userInfo.score}}</span>(可用积分)<a href="/user/score" class="ml-2">我的积分</a></div>
							<div class="py-3 flex">
								<el-button plain round size="small">
									<div class="flex flex-center">
										<img src="__TEMPLATE_STATIC__/icon/icon_wx_pyq.png" alt="" height="16" class="mr-2">
										<div>转发到朋友圈</div>
									</div>
								</el-button>
								<el-button plain round size="small">
									<div class="flex flex-center">
										<img src="__TEMPLATE_STATIC__/icon/icon_wx_miniprogram.png" alt="" height="16" class="mr-2">
										<div>微信小程序</div>
									</div>
								</el-button>
							</div>
						</div>
						<div class="user-vip-bg text-v-center">
							<div>
								<div class="user-vip-text mb-3" v-if="userInfo.company_vip_time">{{userInfo.company_vip.title}} 享受专属特权</div>
								<div class="user-vip-text mb-3" v-else>成为VIP企业 享受专属特权</div>
								<div class="flex flex-center">
									<div class="text-D5CDC3 small">会员总时长：</div>
									<div class="text-D8B077">{{userInfo.company_vip_time?userInfo.company_vip_time:'永久'}}</div>
									<div class="text-D5CDC3 small ml-2" v-if="userInfo.company_vip_time">到期</div>
									<div class="pl-2">
										<a href="/user/vip/server" class="el-button flex-1 el-button--vip is-round" v-if="userInfo.company_vip_level>0"><span>续费会员</span></a>
										<a href="/user/vip/server" class="el-button flex-1 el-button--vip is-round" v-else><span>立即开通</span></a>
									</div>
								</div>
							</div>
						</div>
					</div>
					{else/}
					<div class="flex flex-bottom">
						<div class="flex-1 border-bottom">
							<div class="flex flex-center">
								<div class="flex-1">
									<div class="flex flex-center">
										<a href="/user/account" class="el-link">去完善企业资料</a>
									</div>
									<div class="text-666666 pt-3"></div>
								</div>
							</div>
							<div class="text-666666 small py-2">积分：<span class="text-D8B077 mr-2">{{userInfo.score}}</span>(可用积分)<a href="/user/score" class="ml-2">我的积分</a></div>
							<div class="py-3 flex">
								<el-button plain round size="small">
									<div class="flex flex-center">
										<img src="__TEMPLATE_STATIC__/icon/icon_wx_pyq.png" alt="" height="16" class="mr-2">
										<div>转发到朋友圈</div>
									</div>
								</el-button>
								<el-button plain round size="small">
									<div class="flex flex-center">
										<img src="__TEMPLATE_STATIC__/icon/icon_wx_miniprogram.png" alt="" height="16" class="mr-2">
										<div>微信小程序</div>
									</div>
								</el-button>
							</div>
						</div>
						<div class="user-vip-bg text-v-center">
							<div>
								<div class="user-vip-text mb-3" v-if="userInfo.company_vip_time">{{userInfo.company_vip.title}} 享受专属特权</div>
								<div class="user-vip-text mb-3" v-else>成为VIP企业 享受专属特权</div>
								<div class="flex flex-center">
									<div class="text-D5CDC3 small">会员总时长：</div>
									<div class="text-D8B077">{{userInfo.company_vip_time?userInfo.company_vip_time:'永久'}}</div>
									<div class="text-D5CDC3 small ml-2" v-if="userInfo.company_vip_time">到期</div>
									<div class="pl-2">
										<a href="/user/vip/server" class="el-button flex-1 el-button--vip is-round" v-if="userInfo.company_vip_level>0"><span>续费会员</span></a>
										<a href="/user/vip/server" class="el-button flex-1 el-button--vip is-round" v-else><span>立即开通</span></a>
									</div>
								</div>
							</div>
						</div>
					</div>
					{/notempty}
					<div class="pt-3 flex flex-center text-center">
						<div class="flex-1">
							<a href="/user/jobs/management" class="d-block py-3">
								<h4 class="text-primary">{{statistics.jobs_sum}}</h4>
								<div class="text-dark">招聘中的职位</div>
							</a>
						</div>
						<div class="flex-1">
							<a href="/user/resume/management" class="d-block py-3">
								<h4 class="text-primary">{{statistics.not_resume_sum}}</h4>
								<div class="text-dark">待处理简历</div>
							</a>
						</div>
						<div class="flex-1">
							<a href="/user/resume/management" class="d-block py-3">
								<h4 class="text-primary">{{statistics.resume_sum}}</h4>
								<div class="text-dark">收到的简历</div>
							</a>
						</div>
						<div class="flex-1">
							<a href="/user/resume/management" class="d-block py-3">
								<h4 class="text-primary">{{statistics.resume_efficiency}}%</h4>
								<div class="text-dark">简历查看率</div>
							</a>
						</div>
						<div class="flex-1">
							<a href="/user/resume/interview-invitation" class="d-block py-3">
								<h4 class="text-primary">{{statistics.invite_aninterview_sum}}</h4>
								<div class="text-dark">面试邀请</div>
							</a>
						</div>
						<div class="flex-1">
							<a href="/user/who-saw-me" class="d-block py-3">
								<h4 class="text-primary">{{statistics.company_browse_sum}}</h4>
								<div class="text-dark">谁在关注我</div>
							</a>
						</div>
						<div class="flex-1">
							<a href="/user/who-saw-me" class="d-block py-3">
								<h4 class="text-primary">{{statistics.view}}</h4>
								<div class="text-dark">被浏览次数</div>
							</a>
						</div>
					</div>
				</div>
				<div class="w-250px ml-3 bg-white shadow p-3" v-if="userInfo.adviser">
					<div class="flex flex-v-center">
						<el-divider class="bg-D8B077">专属客服</el-divider>
					</div>
					<div>
						<div class="flex flex-v-center" style="align-items: flex-start;">
							<el-avatar :size="40" :src="userInfo.adviser.headimg"></el-avatar>
							<div class="pl-3">
								<div class="font-weight-bold text-333333">{{userInfo.adviser.nickname}}</div>
								<div class="text-666666" v-if="userInfo.adviser.mobile">手机：{{userInfo.adviser.mobile}}</div>
								<div class="text-666666" v-if="userInfo.adviser.email">邮箱：{{userInfo.adviser.email}}</div>
								<div class="text-666666" v-if="userInfo.adviser.other_contact" v-html="getHtml(userInfo.adviser.other_contact)"></div>
							</div>
						</div>
						<div v-if="userInfo.adviser.other_img" class="text-v-center">
							<img :src="userInfo.adviser.other_img" alt="" class="w-75">
						</div>
					</div>
				</div>
			</div>
			<div class="bg-white shadow mb-3 p-3">
				<div class="bg-1E54E5 p-3 flex">
			      	<div class="el-dropdown-link el-link text-666666"
			      	@click="showEcharts= !showEcharts">
			        	访客统计<i class="el-icon-caret-top el-icon--right" v-if="showEcharts"></i><i class="el-icon-caret-bottom el-icon--right" v-else></i>
			      	</div>
				    <div class="flex-1"></div>
				    <div>
					    <el-radio-group v-model="echarts_search.key"
					    @change="getCharts">
						    <el-radio :label="1">近7天</el-radio>
						    <el-radio :label="2">近15天</el-radio>
						    <el-radio :label="3">近30天</el-radio>
						</el-radio-group>
				    </div>
				    <div class="flex-1"></div>
				</div>
				<div class="mt-3" v-show="showEcharts">
					<div class="overflow-hidden" id="charts"></div>
				</div>
				<div class="flex border-bottom border-lg mt-3">
					<div class="flex-1 block-title-before py-2">招聘服务</div>
				</div>
				<div class="row py-3 mx--5">
					<div class="col-3">
						<a href="/user/jobs/release" class="bg-F8F9FD p-3 flex flex-center rounded" target="_blank">
							<div>
								<img src="__TEMPLATE_STATIC__/icon/icon_company_home_job.png" alt="" height="49">
							</div>
							<div class="flex-1 pl-3">
								<div class="text-666666">发布职位</div>
								<div class="small text-999999">免费实名发布招聘信息</div>
							</div>
						</a>
					</div>
					<div class="col-3">
						<a href="/user/jobs/management" class="bg-F8F9FD p-3 flex flex-center rounded" target="_blank">
							<div>
								<img src="__TEMPLATE_STATIC__/icon/icon_company_home_top.png" alt="" height="49">
							</div>
							<div class="flex-1 pl-3">
								<div class="text-666666">置顶管理</div>
								<div class="small text-999999">让您发布的职位名列前茅</div>
							</div>
						</a>
					</div>
					<div class="col-3">
						<a href="/user/resume/management?action=status0" class="bg-F8F9FD p-3 flex flex-center rounded" target="_blank">
							<div>
								<img src="__TEMPLATE_STATIC__/icon/icon_company_home_resume.png" alt="" height="49">
							</div>
							<div class="flex-1 pl-3">
								<div class="text-666666">未查看的简历</div>
								<div class="small text-999999">有<span class="text-danger">{{statistics.not_resume_sum}}</span>份简历未查看</div>
							</div>
						</a>
					</div>
					<div class="col-3">
						<a href="/resume" class="bg-F8F9FD p-3 flex flex-center rounded" target="_blank">
							<div>
								<img src="__TEMPLATE_STATIC__/icon/icon_company_home_search.png" alt="" height="49">
							</div>
							<div class="flex-1 pl-3">
								<div class="text-666666">搜索人才库</div>
								<div class="small text-999999">海量人才库尽在掌握</div>
							</div>
						</a>
					</div>
				</div>
			</div>
			<div class="bg-white shadow p-3">
				<div class="flex border-bottom border-lg">
					<div class="flex-1 block-title-before py-2">推荐人才</div>
					<div class="py-2">
						<el-link @click="refreshRecommendResume();" icon="el-icon-refresh" :underline="false">换一批</el-link>
					</div>
				</div>
				<div class="row pt-3 home-resume-list">
					<div class="col-4" v-for="(v,index) in recommend">
						<a :href="'/resume/'+v.id+'.html'" class="bg-white p-3" target="_blank">
							<div class="flex flex-center pb-3">
								<div>
									<img :src="v.headimg" width="60" height="60" class="rounded-circle">
								</div>
								<div class="flex-1 h6 mb-0 pl-3">
									<div class="flex flex-center">
										<div class="flex-1 text-dark">{{v.name}}</div>
										<div class="text-secondary small">信息完整度:<span class="text-primary h5 mb-0">{{v.progress}}%</span></div>
									</div>
									<ul class="resume-seniority flex mt-2 text-secondary small">
										<li>{{v.sex==1?'先生':''}}{{v.sex==2?'女士':''}}</li>
										<li>{{v.educational_background}}</li>
										<li>{{v.age}}岁</li>
										<li>{{v.work_experience_time?v.work_experience_time+'年':'无'}}工作经验</li>
									</ul>
								</div>
							</div>
							<div class="border-top flex">
								<div class="mt-2 text-secondary small flex-1">{{v.industry}}</div>
								<div class="text-secondary mt-2 small"><i class="el-icon-location-information mr-2"></i>{{v.job_area}}</div>
							</div>
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{/block}
{block name="footer"}
{include file="module/login"/}
{/block}
{block name="script"}
{js href="/static/plugin/Echarts/echarts.min.js"}
<script type="text/javascript">
var chart=null,chartDom=null;
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			userInfo:UserInfo,
			loginTabs:XYBase.loginTabs,
			feedback:XYBase.feedback,
			statistics:{
				jobs_sum:'--',
				resume_sum:'--',
				not_resume_sum:'--',
				resume_efficiency:'--',
				invite_aninterview_sum:'--',
				company_browse_sum:'--',
				view:'--'
			},
			showEcharts:false,
			echarts_search:{
				key:1,
			},
			search:{
				ajax:false,
				page:1,
				refresh:false,
			},
			recommend:[]
		},
		watch:{
		    view:XYBase.viewWatch,
		    loginTabs:XYBase.loginTabsWatch,
		    showEcharts(val,oldVal){
		    	setTimeout(function(){
		    		bodyResizeChange();
		    		chart&&chart.showLoading();
			    	chart&&chart.hideLoading();
		    	},300);
		    },
			userInfo:{
				handler(val,oldVal){
					if (!val.id) {
						window.location.reload();
					}
				},
				deep:true
			},
		},
		created(){
			XYBase.created(this);
			this.recommendResume();
			this.initStatistics();
		},
		methods:XYBase.methods({
			refreshRecommendResume(){
				this.search.page++;
				this.recommendResume();
			},
			recommendResume(){
				var _this=this;
				_this.search.ajax=true;
				if (_this.search.refresh){
					_this.search.page=1;
					_this.search.refresh=false;
				}
				_this.sendGet({
					url:'/user/getRecommendResume',
					data:_this.search,
				},function(ret){
					_this.search.ajax=false;
					if (ret) {
						_this.recommend=[];
						if (ret.data.current_page==ret.data.last_page)
							_this.search.refresh=true;
						if (ret.code === 0)
							_this.recommend=ret.data.data;
					}
				});
			},
			initStatistics(){
				var _this=this;
				_this.sendGet({
					url:'/user/statistics'
				},function(ret){
					if (ret && ret.code === 0) _this.statistics=ret.data;
				});
			}
		})
	});
$(function(){
	$(window).resize(function(){
		bodyResizeChange();
	});
	initCharts();
	getCharts();
});
function getCharts() {
	vm.sendGet({
		url:'/ajax/charts_statistics',
		data:vm.echarts_search
	},function(ret){
		if(ret){
			if(ret.code===0){
				setChartsOption(ret.data)
			}
		}
	});
}
function bodyResizeChange(){
	chartDom.style.height=parseInt($(window).height()*0.5)+'px';
	chart&&chart.resize();
}
function initCharts() {
	chartDom=document.getElementById('charts');
	chartDom.style.height=parseInt($(window).height()*0.5)+'px';
	chart = echarts.init(chartDom);
}
function setChartsOption(data) {
	chart.setOption({
		yAxis: {
			title: {
				text: ''
			}
		},
		xAxis: {
	        type: 'category',
	        boundaryGap: false,
	        data: data.time
	    },
	    legend: {
	        data: data.legend
	    },
	    series: data.series,
	    tooltip: {
	        trigger: 'axis'
	    },
	    grid: {
	        left: '3%',
	        right: '4%',
	        bottom: '3%',
	        containLabel: true
	    },
	},{
		replaceMerge: ['xAxis', 'legend', 'series']
	});
}
</script>
{/block}