<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: #60CA2C;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>