<template>
	<view class="home">
		<view class="top">
			<!-- <view class="search">
				<u-icon name="search" size="30" />
				搜索职位/公司
			</view> -->
			<u-search placeholder="搜索职位/公司" v-model="selTitle" @custom="load"/>
		</view>
		<u-tabs
			:list="tabList"
			@change="changeTabs"
			:activeStyle="{
				color: '#303133',
				fontWeight: 'bold',
				transform: 'scale(1.25)',
				transition: 'all .2s linear'
			}"
		>
			<view
				slot="right"
				style="padding: 0 30rpx 0 10rpx"
				@tap="addTab"
			>
				<u-icon
					name="plus"
					size="21"
					bold
				></u-icon>
			</view>
		</u-tabs>
		<scroll-view scroll-y class="list" @scrolltolower="loadMore">
			<view class="list-item" v-for="item in list" @click="toDetail(item)">
				<view class="list-title">{{ item.name }}</view>
				<view class="money">{{item.salaryMin}}~{{item.salaryMax}}</view>
				<view class="f_s">
					<view class="tag">{{item.recruitType}}</view>
					<view class="tag">{{ item.qualification }}</view>
					<view class="tag">{{ item.experience }}</view>
				</view>
				<view class="company f_s">
					<u--image
					    :src="item.org.logo"
					    width="60rpx"
					    height="60rpx"
						radius="4"
					/>
					<text style="padding: 0 10px;font-weight: 300;font-size: 28rpx;">{{ item.orgName }}</text>
				</view>
				<view class="f_b occupational">
					<view>{{item.industryName}}</view>
					<view>{{item.city != '市辖区' ? item.city : item.province + ' ' + item.region}}</view>
				</view>
			</view>
			<u-loadmore 
				:status="status" 
				:loading-text="loadingText" 
				:loadmore-text="loadmoreText" 
				:nomore-text="nomoreText" 
			/>
		</scroll-view>
		<resume-popup
			:visible="visible"
			appId="2021005184646262"
			outBizNo="outBizNo"
			templateId="DEFAULT"
			onClose="onClose"
			onSuccess="onSuccess"
			onFailure="onFailure"
		/>
	</view>
</template>

<script>
	import { getResume } from '../../util/loginSetInfo.js'
	export default {
		data() {
			return {
				pageNum: 1,
				pageSize: 10,
				outBizNo: '',
				visible: false,
				list: [],
				selTitle: '',
				tabName: '推荐',
				status: 'nomore', // loadmore  loading
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '实在没有了',
				tabList: [
					{name: '推荐'}
				]
			}
		},
		onLoad() {
			this.$scope.onClose = this.onClose;
			this.$scope.onSuccess = this.onSuccess;
			this.$scope.onFailure = this.onFailure;
		},
		onPullDownRefresh() {
			this.selTitle = ''
			this.pageNum = 1
		    this.load('sx')
		},
		onShow() {
			this.getDetail()
			this.load()
		},
		methods: {
			generateOutBizNo() {
			  const timestamp = new Date().getTime();
			  const random = Math.floor(Math.random() * 10000).toString().padStart(4, '0');
			  return `job_auth_${timestamp}_${random}`;
			},
			loadMore() {
				if (this.status == 'loadmore') {
					this.pageNum = this.pageNum + 1
					this.load()
				}
			},
			handleTap() {
				this.outBizNo = this.generateOutBizNo()
				this.visible = true;
			},
			onFailure({code, message}) {
				console.log(code, message);
				this.visible = true
			},
			onClose() {
				this.visible = false;
			},
			onSuccess(applyId) {
				this.visible = false;
				getResume(applyId,()=> {
					uni.showToast({
						title: '登录成功',
						icon: 'none'
					})
					this.getDetail()
					this.addTab()
				})
			},
			getDetail() {
				if (uni.getStorageSync('jy-recruit-token')) {
					this.$http.get('/person/person/details', {}).then(res => {
						if (!res.data) {
							uni.showToast({
								title:'登录信息有误，请重新登录',
								icon: 'none'
							})
							uni.clearStorageSync()
							return
						}
						this.userInfo = res.data
						this.$http.get('/objective/l', {personId: res.data.id}).then(res => {
							this.tabList = [{name: '推荐'}]
							for(const item of res.data.list) {
								this.tabList.push({
									name:item.industryName,
									province: item.province,
									city: item.city
								})
							}
						})
					})
				}
			},
			addTab() {
				if (uni.getStorageSync('jy-recruit-token')) {
					uni.navigateTo({
						url: `/pages/user/resume/addIntention?id=${this.userInfo.id}`
					})
				} else {
					this.handleTap()
				}
			},
			changeTabs(e) {
				this.tabName = e.name
				this.load()
			},
			load(type) {
				let province = '',city = ''
				if (this.tabName != '推荐') {
					province = this.tabList.find(item => item.name == this.tabName).province
					city = this.tabList.find(item => item.name == this.tabName).city
				}
				this.status = 'loading'
				this.$http.get('/public/recruit/l', {
					status: 'up',
					baseCode: 'jyjfb',
					selTitle: this.selTitle,
					city,province,
					industryName: this.tabName == '推荐' ? '' : this.tabName,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
				}).then(res => {
					this.list = this.pageNum == 1 ? res.data.list : [...this.list,...res.data.list],
					this.status = this.list.length >= res.data.total ? 'nomore' : 'loadmore'
					if (type == 'sx') {
						uni.stopPullDownRefresh();
						setTimeout(() => {
							uni.showToast({
								title: '刷新成功',
								icon: 'none'
							})
						},500)
					}
				})
			},
			toDetail(el = {}) {
				uni.navigateTo({
					url: `/pages/home/jobDetails?id=${el.id}&source=jyzp`
				})
			}
		}
	}
</script>

<style lang="scss">
.home{
	height: 100vh;
	overflow: hidden;
	.top{
		height: 120rpx;
		background-image: linear-gradient(to right, #C0E2F2, #D1D5F5),linear-gradient(to top, #fff,transparent);
		background-blend-mode: overlay;
		display: flex;
		justify-content: center;
		align-items: center;
		
		padding: 0 30rpx;
		.u-search__content{
			background-color: #fff !important;
			.u-search__content__input{
				background-color: #fff !important;
			}
		}
		
		.search{
			height: 70rpx;
			background: #fff;
			border-radius: 30rpx;
			width: 670rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			color: $uni-text-color-grey;
		}
	}
	.list{
		height: calc(100%  - 190rpx);
		overflow: auto;
		padding: 30rpx;
		box-sizing: border-box;
		.list-item{
			background-color: #fff;
			border-radius: 20rpx;
			padding: 30rpx;
			.list-title{
				font-weight: bold;
				font-size: 32rpx;
				margin-bottom: 10rpx;
				
			}
			.money{
				color: #647BEB;
				text-align: right;
				margin-bottom: 10rpx;
				font-weight: bold;
			}
			.company{
				margin: 20rpx 0;
				color: #666;
				font-size: 30rpx;
			}
			.occupational{
				color: #666;
				font-size: 26rpx;
				font-weight: 300;
			}
		}
		.list-item + .list-item{
			margin-top: 30rpx;
		}
	}
}
</style>
