<template>
	<view style="background-color: #f7f7f7;" :style="vuex_theme">
		<view class="">
			<view v-if="list.length>0" style="padding: 10rpx 0;">
				<view class="list" v-for="(item, i) in list" :key="i">
					<view class="items" @click="goDetail(item)">
						<view style="display: flex;">
							<view class="title">{{item.name}}</view>
							<view v-if="item.status=='onboarded'" class="flag1">已入职</view>
							<view v-else-if="item.status=='abandon'" class="flag2">不合格</view>
							<view v-else class="flag3">已推荐</view>
							<view class="text_time">{{timeFormat(item.recommend_time)}}</view>
						</view>
						<view style="display: flex;padding-top: 36rpx;">
							<image src="/static/img/common/phone.png" style="width: 32rpx;height: 32rpx;"></image>
							<view style="margin-left: 16rpx;font-size: 28rpx;color: #000;">联系方式： {{item.mobile}}</view>
						</view>
						<view style="display: flex;padding-top: 22rpx;">
							<image src="/static/img/common/zan.png" style="width: 32rpx;height: 32rpx;"></image>
							<view style="margin-left: 16rpx;font-size: 28rpx;color: #000;">推荐职位： {{item.position_name}}({{item.customer_name}})</view>
						</view>
					</view>
				</view>
				<view style="height: 20px;"></view>
				<c-loading :loading="loading"></c-loading>
				<view style="height: 20px;"></view>
			</view>
			<view v-else class="no_data">
				<image class="img" lazy-load=true :src="vuex_baseImgUrl && `${vuex_baseImgUrl}noData.png`"></image>
				<view style="
			  font-size: 16px;
			  color: #333333;
			  margin-top: 60rpx;
			  text-align: center;
			">暂无数据</view>
			</view>
		</view>
		<u-popup class="popup" v-model="show" :border-radius="22" mode="bottom"
			:closeable=true close-icon-size="36">
			<view class="title">全部工作地点</view>
			<view style="width: 100%;height: 1rpx;background-color: #ebebeb;"></view>
			<view v-for="(item, index) in addressList" :key="index">
				<view class="list" @click="gotomp(item)">
					<text class="text">{{item.province}}{{item.city}}{{item.district}}{{item.address}}</text>
					<image src="/static/img/common/arrow_right.png"
						style="width: 32rpx;height: 32rpx;margin-left: auto;"></image>
				</view>
			</view>
			<view style="width: 100%;height: 100rpx;background-color: #FFFFFF;"></view>
		</u-popup>
	</view>
</template>

<script>
	import listMixin from "@/common/mixins/list-mixin.js";
	import {
		degreeOptions,
		workOptions,
	} from '@/common/util.js'
	export default {
		mixins: [listMixin],
		data() {
			return {
				list: [],
			}
		},

		onLoad() {
			
		},

		onShow() {
			this.finished = false;
			this.loading = "loadmore";
			this.page = 1;
			this.list = []
			this._getList()
		},

		methods: {
			timeFormat(value, format = 'yyyy/mm/dd') {
				return this.$u.timeFormat(value, format)
			},
			
			goDetail(e) {
				console.log("goDetail--", e)
				this.$u.route({
					url: '/pages/student/home/job-detail/job-detail',
					params: {
						id: e.position_id
					}
				})
			},
			
			async getData(requestParams) {
				const {
					search = {}
				} = requestParams;

				let params = {};
				params.offset = 10 * (this.page - 1)
				params.limit = 10;

				return await this.$u.api.getRecommendListUrlAPI(params);
			},

			async _getList() {
				if (this.page == 1) {
					this.list = [];
				}
				
				// 根据实际情况修改自己修改key
				let result = await this.getData({
					page: this.page-1, // 传入页码
					size: this.size, // 传入每页条数
					search: this.search, // 传入搜索的对象
				});
			
				this.total = result.total_count;
				
				if(result.total_count<10){
					this.finished = true
					this.loading = "nomore";
				}
				this.list = this.list.concat(result.items)
			},
		}
	}
</script>

<style>
	page {
		background-color: #f7f7f7;
	}
</style>

<style lang="scss" scoped>
	.list {

		.items {
			width: 686rpx;
			padding: 36rpx;
			margin: 0 auto;
			border-radius: 8rpx;
			background-color: #ffffff;
			margin-top: 16rpx;

			.title {
				display: inline-block;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 32rpx;
				vertical-align: middle;
			}
			
			.flag1{
				background: rgba(91,178,246,0.06);
				margin-left: 10rpx;
				min-width: 76rpx;
				
				font-size: 12px;
				font-family: PingFangSC-Light, PingFang SC;
				font-weight: 300;
				color: #5BB2F6;
			}
			
			.flag2{
				background: rgba(0,0,0,0.05);
				margin-left: 10rpx;
				min-width: 60rpx;
				
				font-size: 12px;
				font-family: PingFangSC-Light, PingFang SC;
				font-weight: 300;
				color: rgba(0,0,0,0.65);
			}
			
			.flag3{
				background: var(--primary-color006);
				margin-left: 10rpx;
				min-width: 60rpx;
				
				font-size: 12px;
				font-family: PingFangSC-Light, PingFang SC;
				font-weight: 300;
				color: var(--primary-color);
			}
			
			.text_time{
				font-size: 24rpx;
				font-family: PingFangSC-Light, PingFang SC;
				font-weight: 300;
				color: rgba(0,0,0,0.45);
				margin: auto;
				    margin-right: 1rpx;
			}
		}
	}

	.no_data {
		width: 100%;

		.img {
			display: block;
			margin: 0 auto;
			padding-top: 200rpx;
			width: 260rpx;
			height: 200rpx;
		}

		.text_black_28 {
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			margin-top: 48rpx;
			text-align: center;
		}
	}
</style>