<template>
	<view class="add">
		<tm-nav-bar left-icon="arrow-left" title="添加设备" @clickLeft="back" />

		<view class="step">
			<liu-step-bar :stepList="stepList" :step="step" @clickStep="clickStep"></liu-step-bar>
		</view>
		<view class="content" v-if="step == 1">
			<view class="form">
				<view class="form-item">
					<view class="title">手机号码</view>
					<view class="input">
						<input type="text" v-model="phone" placeholder="请输入手机号码"/>
					</view>
				</view>
				<view class="form-item">
					<view class="title">短信验证码</view>
					<view class="input">
						<input type="text" v-model="code" placeholder="请输入验证码"/>
						<button>发送验证码</button>
					</view>
				</view>
			</view>
		</view>
		<view class="content" v-if="step == 2">
			<view class="form">
				<view class="form-item">
					<view class="title">姓名</view>
					<view class="input">
						<input type="text" v-model="name" placeholder="请输入姓名"/>
					</view>
				</view>
				<view class="form-item">
					<view class="title">性别</view>
					<view class="input" style="margin: 20rpx 0rpx">
						<radio-group v-model="sex">
							<label class="radio-label" style="margin-right: 50rpx" v-for="(item, index) in radioOptions" :key="index">
								<radio :value="item.value">{{ item.label }}</radio>
							</label>
						</radio-group>
					</view>
				</view>
				<view class="form-item">
					<view class="title">年龄</view>
					<view class="input">
						<input type="text" v-model="age" placeholder="请输入年龄"/>
					</view>
				</view>
			</view>
		</view>
		<view v-if="step == 3">
			<view class="ok">
				<image src="../../static/image/ok.png" mode="widthFix"></image>
				<view class="" style="text-align: center">
					已添加
				</view>
			</view>
			<view class="content">
				<view class="over">
					<view class="left">
						<image src="../../static/logo.png" mode=""></image>
						<text>设备名称</text>
					</view>
					<view class="right">
						<text>设备id</text>
					</view>
				</view>
			</view>
		</view>
		<view class="next" @click="next()">
			{{step == 3? '完成' : '下一步'}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stepList: [{
					name: '绑定手机',
					id: 1
				}, {
					name: '信息完善',
					id: 2
				}, {
					name: '完成添加',
					id: 3
				}],
				step: 1,
				radioValue: '',
				radioOptions: [
			        { label: '男士', value: '0' },
					{ label: '女士', value: '1' },
				],
				phone: '',
				code: '',
				name: '',
				sex: '',
				age: ''
			}
		},
		methods: {
			clickStep(e) {
				this.step = e.id;
			},
			next() {
				if (this.step == 1) {
					console.log('验证')
					this.step++;
				} else if (this.step == 2) {
					console.log('提交信息')
					this.step++;
				} else if (this.step == 3) {
					console.log('完成')
					uni.navigateTo({
						url: '/pages/device/device'
					})
				}
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	uni-button {
		width: 200rpx;
		height: 70rpx;
		font-size: 26rpx;
		line-height: 70rpx;
		background-color: red;
		color: #fff;
		margin: 0rpx !important;
	}
	.add {
		.step {
			padding: 40rpx 20rpx;
			height: 140rpx;
		}
		.next {
			position: fixed;
			bottom: 100rpx;
			left: 0;
			right: 0;
			width: 400rpx;
			height: 60rpx;
			padding: 20rpx 40rpx;
			background-color: red;
			line-height: 60rpx;
			color: #fff;
			font-size: 32rpx;
			text-align: center;
			margin: 0 auto;
			border-radius: 100rpx;
		}
		
		.content {
			background-color: #fff;
			padding: 30rpx;
			border-radius: 20rpx;
			margin: 20rpx 40rpx;
			.form {
				.form-item:last-child {
					border-bottom: none;
				}
				.form-item {
					border-bottom: 1rpx solid grey;
					margin-bottom: 20rpx;
					.title {
						font-size: 30rpx;
						font-weight: 600;
					}
					.input {
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
					input {
						font-size: 28rpx;
						color: grey;
						line-height: 100rpx;
						height: 100rpx;
						uni-button {
							margin: 0;
							padding: 0;
							width: 80rpx;
							height: 30rpx;
							margin: 0rpx !important;
						}
					}
				}
			}
			
			.over {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 30rpx;
				.left {
					display: flex;
					align-items: center;
					image {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}
				}
			}
			
		}
		.ok {
			padding: 100rpx 0rpx;
			display: flex;
			justify-content: center;
			image {
				width: 500rpx;
				height: 300rpx;
			}
		}
	}
</style>