<template>
	<view class="cell">
		<input class="uni-input" maxlength="11" v-model="value" focus placeholder="请输入手机号" />
		<button type="warn" class="btn" @click="confirm">确定</button>
		<uni-popup ref="message" type="message">
			<uni-popup-message type="error" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import {
		modifyPhone
	} from '../../api/user.js'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				value: '',
				messageText: '请输入正确的手机号'
			};
		},
		computed: {
			...mapState({
				user: store => store.user
			})
		},
		methods: {
			async confirm() {
				let reg = /^[1][3,4,5,7,8][0-9]{9}$/;
				if (reg.test(this.value)) {
					const res = await modifyPhone({
						Id: this.user._id,
						phone: this.value,
						lastUpdatedBy: {
							account: uni.getStorageSync('account'),
							person: this.user.name,
							sex: this.user.sex,
							IDCard: this.user.IDCard,
							factory: this.user.factory,
							warehouse: this.user.warehouse,
							line: this.user.line
						},
						accessToken: uni.getStorageSync('tokenInfo'),
						account: uni.getStorageSync('account')
					}) 
				} else {
					this.$refs.message.open()
				}
			}
		},
		checkTelephone(telephone) {
			let reg = "/^[1][3,4,5,7,8][0-9]{9}$/";
			if (!reg.test(telephone)) {
				return false;
			} else {
				return true;
			}
		}
	}
</script>

<style lang="scss">
	.cell {
		padding: 100rpx 20rpx;

		.uni-input {
			padding: 20rpx 5rpx;
			border-bottom: 1rpx solid #b4b4b4;
			margin-bottom: 50rpx;
		}

		.btn {
			width: 70%;
		}
	}
</style>