<template>
	<view class="content">
		<view class="steps">
			<u-steps :list="numList" active-color="#00aaff" :current="current"></u-steps>
		</view>
		<view class="step1" v-if="current==0">
			<view class="form-row form-flex">
				<view><text class="red">*</text>网点名称</view>
				<view>啊撒旦解放拉风小区</view>
			</view>
			<view class="form-row form-flex">
				<view><text class="red">*</text>投递手机号</view>
				<view>
					<u-input v-model="formData.phone" type="number" input-align="right" :custom-style="{color: '#666'}" :maxlength="11" placeholder="请输入手机号码"></u-input>
				</view>
			</view>
			<view class="form-row">
				<view><text class="red">*</text>投递类型</view>
				<view class="form-grid">
					<view class="active">
						<view>废旧纸张</view>
						<view class="texts">200g/1乐豆</view>
					</view>
					<view>
						<view>废旧纸张</view>
						<view class="texts">200g/1乐豆</view>
					</view>
					<view>
						<view>废旧纸张</view>
						<view class="texts">200g/1乐豆</view>
					</view>
					<view>
						<view>废旧纸张</view>
						<view class="texts">200g/1乐豆</view>
					</view>
				</view>
			</view>
		</view>
		<view class="step2" v-if="current==1">
			<view class="form-row form-flex">
				<view>投递手机号</view>
				<view>13709146191</view>
			</view>
			<view class="form-row form-flex">
				<view>用户乐豆余额</view>
				<view><text>560</text></view>
			</view>
			<view class="form-row form-flex">
				<view>投递类型</view>
				<view>
					废旧衣服
					<text class="des">(200g/1乐豆)</text>
				</view>
			</view>
			<view class="form-row form-flex">
				<view>投递重量</view>
				<view><text class="nums">{{balanceData}}g</text></view>
			</view>
			<view class="form-row form-flex">
				<view>可兑换乐豆数</view>
				<view><text class="nums">10</text></view>
			</view>
		</view>
		<view class="buttons">
			<view v-if="current==0" ><u-button shape="circle" :custom-style="customStyle" @click="next()" type="primary">下一步</u-button></view>
			<view v-if="current==1"><u-button shape="circle" @click="prev()">上一步</u-button></view>
			<view v-if="current==1"><u-button shape="circle" @click="submit()" :custom-style="customStyle" type="primary">提交</u-button></view>
		</view>
		
		<!-- 提交确认弹框 -->
		<u-modal v-model="showOk" :duration="50" show-cancel-button @confirm="confirm" @cancel="cancel">
			<view class="slot-content">
				<rich-text :nodes="modelContent"></rich-text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showOk: false,
				modelContent:'',
				customStyle: {
					background: '#00aaff'
				},
				current: 0,
				numList: [{
					name: '用户认证'
				}, {
					name: '称重'
				}],
				formData:{
					address: '',
					phone: '',
					washType: '0'
				},
				blueConnect: true,
				deviceId: null
			}
		},
		computed: {
			balanceData() {
				let data = this.$store.state.vuex_balanceData
				console.log(data.split(','))
				let weight = data.split(',')[2]
				let uit = ''
				let fh = ''
				weight = weight.replace('\n','')
				
				// 符号位
				if(weight.indexOf('+')>=0){
					fh = '+'
				}
				if(weight.indexOf('-')>=0){
					fh = '-'
				}
				
				// 解析数字
				if(weight.indexOf('kg')>0){
					weight = weight.replace(/\+|-|[kg]/g,'')
					console.log(weight,'kg-weight')
					weight = Number(weight) * 1000
					uit = 'kg'
				}else if(weight.indexOf('lb')>0){
					weight = weight.replace(/\+|-|[lb]/g,'')
					console.log(weight,'lb-weight')
					weight = Math.floor(Number(weight) * 453.59237)
					uit = 'lb'
				}else{
					weight = weight.replace(/\+|-|g/g,'')
					console.log(weight,'g-weight')
					weight = Number(weight)
					uit = 'g'
				}
				console.log(weight,uit,fh,'weight end')
				return fh + weight
			}
		},
		onLoad(options) {
			let _this = this
			this.deviceId = options.deviceId
			// 连接中断
			uni.$on('blueConnectClose',function(){
				_this.reConnect(1)
			})
			// 连接成功
			uni.$on('blueConnectCallback',function(type){
				if(type){
					_this.blueConnect = true
					uni.showModal({
						title: '提示',
						content: '重连成功，请重新称重',
						showCancel: false,
					})
				}else{
					_this.reConnect(0)
				}
			})
		},
		onUnload() {
			uni.$off('blueConnectClose')
			uni.$off('blueConnectCallback')
		},
		methods: {
			reConnect(type){
				this.blueConnect = false
				uni.showModal({
					title: '提示',
					content: type ? '蓝牙连接设备已断开，请重新绑定连接' : '请检测电子秤或手机蓝牙是否开启，确认后请重新连接',
					showCancel: false,
					confirmText: '重新连接',
					complete(e){
						if(e.confirm){
							uni.$emit('blueReConnect')
						}
					}
				})
			},
			next(){
				if(this.formData.phone == ''){
					uni.showToast({
						icon: 'none',
						title: '请输入手机号码'
					})
					return
				}
				if(this.formData.washType == ''){
					uni.showToast({
						icon: 'none',
						title: '请选择投递类型'
					})
					return
				}
				
				this.current = this.current + 1
			},
			prev(){
				this.current = this.current - 1
			},
			submit(){
				let that = this
				// 判断设备仍然连接中
				uni.getBluetoothDevices({
				  success(res) {
				    console.log(res.devices,that.deviceId)
					let has = res.devices.find(item => item.deviceId == that.deviceId)
					if(that.blueConnect && has){
						that.showOk = true
						that.modelContent = `
						<div>
							<div style="font-weight:bold;padding:10px 0;">投递重量：<span style="color:red">${that.balanceData}</span> g</div>
							<div>提交后将为此用户计入本次投递数据，确认提交吗？</div>
						</div>
						`
					}else{
						that.reConnect(1)
					}
				  }
				})
			},
			// 取消提交
			cancel(){
				this.showOk = false
				this.modelContent = ''
			},
			// 确认提交
			confirm(){
				
			}
		}
	}
</script>

<style lang="less">
.content{
	width: 100%;
	padding: 20rpx;
	background-color: #FFFFFF;
	.steps{
		padding: 40rpx 0;
		border-bottom: 1px solid #f8f8f8;
	}
	.form-flex{
		display: flex;
		align-items: center;
		> view{
			&:first-child{
				width: 30%;
			}
			&:last-child{
				width: 70%;
				text-align: right;
				color: #666;
			}
		}
	}
	.form-row{
		border-bottom: 1px solid #f8f8f8;
		padding: 20rpx 15rpx;
		position: relative;
		.red{
			color: red;
			margin-right: 6rpx;
		}
		.des{
			color: #666;
			margin-left: 5rpx;
			font-size: 24rpx;
		}
		.nums{
			color: red;
			margin-right: 5rpx;
		}
	}
	.form-grid{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-around;
		> view{
			width: 45%;
			border: 1px solid #eee;
			margin: 20rpx 0;
			padding: 20rpx;
			border-radius: 6rpx;
			text-align: center;
			.texts{
				font-size: 24rpx;
				color: #999;
				padding: 10rpx 0;
			}
		}
		.active{
			border-color: #ffaa00;
			background-color: #ffd36a;
			color: #FFFFFF;
			.texts{
				color: #FFFFFF;
			}
		}
	}
	.buttons{
		padding: 50rpx 5%;
		display: flex;
		align-items: center;
		justify-content: center;
		>view{
			width: 50%;
			padding: 0 5%;
		}
	}
	.slot-content{
		padding: 25rpx 50rpx 50rpx;
	}
}
</style>
