<template>

	<view style="display: flex;flex-direction: column; background: #f7f7f7;height: 100%;box-sizing: border-box;position: absolute;width: 100%;">

		<NavBar ref="nav" navTitle="提菜人信息" :showIcon="true" :supportChange="false">
		</NavBar>

		<view style="display: flex;flex-direction: column; margin: 10px; border-radius: 15px; background: #fff;
		padding: 10px;">

			<view style="display: flex;flex-direction: row;align-items: center;">

				<text style="font-size: 14px;color: #999;">提菜人</text>

				<input placeholder="请输入提菜人"
					style="font-size: 25rpx;flex: 1;height: 35px;line-height: 35px;padding-left: 10px;padding-right: 10px; margin-left: 15px;
					border-bottom: 1px #EFEFEF solid;padding-bottom: 1px;"
					:value="page.name" @input="onKeyInput1" />
			</view>

			<view style="display: flex;flex-direction: row;align-items: center;">

				<text style="font-size: 14px;color: #999;">电&ensp;&ensp;话</text>

				<input placeholder="请输入联系电话" type="number" maxlength="11"
					style="font-size: 25rpx;flex: 1;height: 35px;line-height: 35px;padding-left: 10px;padding-right: 10px; margin-left: 15px;"
					:value="page.phone" @input="onKeyInput2" />
			</view>
		</view>
		
		<view
			style=" width: 100%; box-sizing: border-box; padding-left: 10vw;padding-right: 10vw;display: flex;flex-direction: row; justify-content: center;align-items: center;">
			<text style=" background: #FF9900;color: #fff;margin-top: 20px;margin-bottom: 20px; border-radius: 20px; 
				padding-top: 10px;padding-bottom: 10px;padding-left: 25vw;padding-right: 25vw; text-align: center;" @click="confirm()">确认</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: {
					name: "",
					phone: ""
				}
			}
		},
		onLoad(options) {
			this.page.name = options.name
			this.page.phone = options.phone
		},
		methods: {

			onKeyInput1(event) {
				this.page.name = event.target.value
			},
			onKeyInput2(event) {
				this.page.phone = event.target.value
			},
			confirm() {
				uni.$emit('changePer', this.page)
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss">

</style>