<template>
	<view style=" width: 100%;height: 100%; display: flex;background-color: #F7F7F7;" :style="vuex_theme">
		<view class="wrap_box">
			<view style="padding: 0 20rpx;">
				<u-form :model="form" :error-type="errorType" ref="uForm">
					<c-input-item label="朋友姓名" type="text1" name="name" v-model="form.name" :rightIcon="false">
					</c-input-item>
					<c-input-item label="朋友联系方式" type="number1" name="mobile" v-model="form.mobile" :rightIcon="false">
					</c-input-item>
					<view style="width: 100%;height: 1rpx;background-color: #f7f7f7;"></view>
					<view style="margin-top: 50rpx;">
						<view class="text_gray_26">其他说明</view>
						<view style="min-height: 300rpx;width: 100%;padding: 30rpx 0;">
							<u-input v-model="form.ability" type="textarea" :maxlength='maxLength'
								placeholder="请简单介绍您朋友的工作经历…" custom-style="text_black_30"
								:placeholder-style="text_gray_30" />
						</view>
						<!-- <view class="text_gray_30" style="text-align: right;">
							{{form.ability?form.ability.length:0}}/{{maxLength}}
						</view> -->
						<view style="height: 2rpx;margin: 30rpx 0;background-color: #e5e5e5;"></view>
					</view>
				</u-form>
			</view>
		</view>
		<view class="footer">
			<view style="width: 100%;height: 1rpx;border: 1rpx solid #f7f7f7;"></view>
			<view style="padding: 20rpx 40rpx 70rpx 40rpx;" >
				<view class="confirm" @click="confirm">保存</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				maxLength: 300,
				curLength: 0,
				form: {
					name: "",
					mobile: "",
					ability: "",
					position_id: ""
				},
			}
		},

		onLoad(option) {
			console.log('option', option)
			this.form.position_id = option ? option.position_id : ""
		},

		methods: {

			showToast(msg) {
				uni.showToast({
					title: msg,
					icon: 'none'
				})
			},

			confirm() {
				console.log('confirm--', this.form)
				if (this.form.name && this.form.mobile && this.form.ability) {
					if (this.$u.test.mobile(this.form.mobile)) {
						this.$u.api.jobRecommendUrlApi({
							...this.form
						}).then(res => {
							if(res){
								console.log('res--',res)
								this.$u.route({
									url: '/pages/student/home/recommendSuccess/recommendSuccess',
									type: 'navigateTo',
								});
							}
						})
					} else {
						this.showToast("手机号码错误，请重新输入")
					}
				} else {
					this.showToast("请完善数据")
				}
			},


		}
	}
</script>

<style lang="scss" scoped>
	.wrap_box {
		padding: 20rpx;
		background-color: #fff;
		margin: 20rpx 20rpx 0 20rpx;
		width: 100%;

		.text_black_30 {
			font-size: 30rpx;
			font-family:' PingFangSC-Regular, PingFang SC';
			font-weight: 500;
			color: #000000;
			line-height: 30rpx;
		}

		.text_gray_26 {
			font-size: 26rpx;
			font-weight: 300;
			color: #000;
		}

		.text_gray_30 {
			font-size: 30rpx;
			color:rgba(0,0,0,0.45);
			line-height: 30rpx;
		}
	}

	.footer {
		width: 100%;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;

		.confirm {
			background: linear-gradient(180deg, var(--primary-color000) 0%, var(--primary-color) 100%);
			box-shadow: 0px 2px 20px 0px var(--primary-color03);
			border-radius: 24px;
			padding: 24rpx;
			text-align: center;
			font-size: 34rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
</style>