<template>
	<view class="content">
		<image src="../../static/img/djsq-top.png" mode="widthFix" class="top"></image>
		<view class="sq">
			<view class="sq-item flex">
				<view class="flex item-left">
					+86
				</view>
				<input type="text" placeholder="请输入手机号" class="inp" v-model="phone">
			</view>
			<view class="sq-item flex">
				<view class="flex item-left">
					<image src="../../static/icon/u-name.png" mode=""></image>
				</view>
				<input type="text" placeholder="请输入姓名" class="inp" v-model="name">
			</view>
			<view class="sq-item flex">
				<view class="flex item-left">
					<image src="../../static/icon/u-level.png" mode=""></image>
				</view>
				<picker @change="bindLevelChange" :value="index" :range="levelList" mode="selector" range-key="name">
					<view class="inp" v-show="chooseLevel.name">{{chooseLevel.name}}</view>
					<input type="text" placeholder="请选择级别" class="inp" v-show="!chooseLevel.name" disabled>
				</picker>
			</view>
			<view class="sb" @click="sub()">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import { getLevelList,sqLevel } from '@/api/user.js'
	export default {
		data() {
			return {
				levelList: [],
				index: 0,
				chooseLevel: {},
				phone: '',
				name: '',
				loaded: false,
			}
		},
		onLoad() {
			this.getLevelList()
		},
		computed: {
			...mapState('user',['userInfo'])
		},
		onShow() {

		},
		onReachBottom() {

		},
		onReady() {

		},
		methods: {
			bindLevelChange(e) {
				console.log(e)
				this.chooseLevel = this.levelList[e.detail.value]
			},
			getLevelList() {
				getLevelList().then(res => {
					this.levelList = res.data
				})
			},
			sub() {
				let that = this
				if(that.loaded) {
					return
				}
				if(that.phone == '') {
					return that.$api.msg('请输入手机号')
				}
				if (!/(^1[2|3|4|5|6|7|8][0-9]{9}$)/.test(this.phone)) {
					that.$api.msg('请输入正确的手机号');
					return;
				}
				if(that.name == '') {
					return that.$api.msg('请输入姓名')
				}
				if(that.chooseLevel.name == '') {
					return that.$api.msg('请选择级别')
				}
				that.loaded = true
				sqLevel({
					uid: that.userInfo.uid,
					real_name: that.name,
					phone: that.phone,
					level: that.chooseLevel.id
				}).then(res => {
					uni.showToast({
						title:'提交成功',
						duration:2000
					});
					that.loaded = false
					setTimeout(()=> {
						uni.switchTab({
							url:'/pages/user/user'
						})
					},1500)
				}).catch(err => {
					that.loaded = false
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		min-height: 100%;
		height: auto;
		background-color: #fff;
	}

	.top {
		width: 750rpx;
	}

	.sq {
		width: 750rpx;
		height: 946rpx;
		background: #FFFFFF;
		border-radius: 83rpx 83rpx 0rpx 0rpx;
		margin-top: -110rpx;
		position: relative;
		padding-top: 100rpx;
	}

	.sq-item {
		width: 614rpx;
		height: 97rpx;
		background: #fff;
		border: 1px solid #E0E0E0;
		border-radius: 49rpx;
		margin: 0 auto 48rpx;

		.item-left {
			font-size: 28rpx;
			font-weight: 500;
			color: #d7ae7a;
			flex-grow: 1;
			justify-content: center;
			align-items: center;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.inp {
			flex-shrink: 0;
			width: 500rpx;
		}
	}
	.sb {
		width: 626rpx;
		height: 86rpx;
		background: linear-gradient(41deg, #D7A465, #D7AE7A);
		border-radius: 43rpx;
		font-size: 33rpx;
		font-weight: 500;
		color: #FAFAFA;
		line-height: 86rpx;
		text-align: center;
		margin:100rpx auto 0;
	}
</style>
