<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">
			<view
				slot="right"
				style="padding: 0 30rpx 0 10rpx"
				@tap="addTab"
			>
				<u-icon
					name="plus"
					size="21"
					bold
				></u-icon>
			</view>
		</u-tabs>
		<view class="list">
			<view class="list-item" v-for="item in list" @click="toDetail(item)">
				<view class="list-title f_b">
					<view class="f_s">
						{{ item.name }}
					</view>
					<view class="money">{{item.salaryMin}}~{{item.salaryMax}}</view>
				</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" 
			/>
		</view>
		<LoginOpen v-if="loginShow" @close="loginSuccess"/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginShow: false,
				list: [],
				selTitle: '',
				tabName: '推荐',
				status: 'nomore',
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '实在没有了',
				tabList: [
					{name: '推荐'}
				]
			}
		},
		onLoad() {
		},
		onPullDownRefresh() {
		    this.load('sx')
		},
		onShow() {
			this.getDetail()
			this.load()
		},
		methods: {
			getDetail() {
				if (uni.getStorageSync('jy-recruit-token')) {
					this.$http.get('/person/person/details', {}).then(res => {
						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})
							}
						})
					})
				}
			},
			addTab() {
				if (uni.getStorageSync('jy-recruit-token')) {
					uni.navigateTo({
						url: `/pages/user/resume/addIntention?id=${this.userInfo.id}`
					})
				} else {
					this.loginShow = true
				}
			},
			loginSuccess(e) {
				this.loginShow = false
				if (e) {
					this.getDetail()
				}
			},
			changeTabs(e) {
				this.tabName = e.name
				this.load()
			},
			load(type) {
				this.$http.get('/public/recruit/l', {
					status: 'up',
					baseCode: 'jyjfb',
					selTitle: this.selTitle,
					industryName: this.tabName == '推荐' ? '' : this.tabName
				}).then(res => {
					this.list = res.data.list
					if (type == 'sx') {
						uni.stopPullDownRefresh();
						uni.showToast({
							title: '刷新成功',
							icon: 'none'
						})
					}
				})
			},
			toDetail(el = {}) {
				uni.navigateTo({
					url: `/pages/home/jobDetails?id=${el.id}`
				})
			}
		}
	}
</script>

<style lang="scss">
.home{
	height: 100%;
	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: 36rpx;
				margin-bottom: 20rpx;
				.t{
					background-color: #EFF7FE;
					color: #33A1CA;
					margin-left: 20rpx;
					font-weight: normal;
				}
				.money{
					color: #647BEB;
				}
			}
			.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>
