<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>{{stationName}}</view>
			</view>
			<view class="form-row form-flex">
				<view><text class="red">*</text>投递手机号</view>
				<view>
					<u-input v-model="formData.customerMobile" 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 v-for="(item,index) in rubbishtype" :key="item.id" @click="selRubbishType(item)" :class="formData.rubbishType==item.rubbishType?'active':''">
						<view class="imgs">
							<u-image :src="`/static/${item.rubbishType}.png`" width="70rpx" height="70rpx"></u-image>
						</view>
						<view class="info">
							<view>{{item.rubbishTypeDictValue}}</view>
							<view class="texts">{{item.rubbishWeight||0}}g/{{item.goleNum||0}}乐豆</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="step2" v-if="current==1">
			<view class="form-row form-flex">
				<view>投递手机号</view>
				<view>{{formData.customerMobile}}</view>
			</view>
			<view class="form-row form-flex">
				<view>用户乐豆余额</view>
				<view class="flex-row"><text>{{currentGold}}</text><u-image width="30rpx" height="30rpx" src="/static/ledou.png"></u-image></view>
			</view>
			<view class="form-row form-flex">
				<view>投递类型</view>
				<view>
					{{curRubbishType.rubbishTypeDictValue}}
					<text class="des">({{curRubbishType.rubbishWeight||0}}g/{{curRubbishType.goleNum||0}}乐豆)</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 class="flex-row"><text class="nums">{{goldNum}}</text><u-image width="30rpx" height="30rpx" src="/static/ledou.png"></u-image></view>
			</view>
		</view>
		<view class="buttons">
			<view v-if="current==0" ><u-button shape="circle" :loading="loading" :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>
		
		<!-- 注意事项 -->
		<view class="notes">
			<view>注意事项:</view>
			<view>
				<view>1.请等待电子秤数据稳定后,再点击提交按钮</view>
				<view>2.提交数据时,请仔细检查投递重量是否正确</view>
				<view>3.下次称重时,记得将上次称重的物品取下,避免重复称重</view>
			</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>
	import {findBySrcDeviceNo, saveDelivery} from '@/api/delivery.js'
	import {queryldByMobile} from '@/api/officialPartnerGoldLog.js'
	export default {
		data() {
			return {
				showOk: false,
				modelContent:'',
				customStyle: {
					background: '#00aaff'
				},
				current: 0,
				numList: [{
					name: '用户认证'
				}, {
					name: '称重'
				}],
				stationName: '', // 网点名称
				formData:{
					customerMobile: '', // 客户电话
					rubbishType: '', // 投递类型
					rubbishWeight:0, // 投递重量
					srcDeviceCode: '',
					operatorNo: ''
				},
				currentGold: 0, // 用户乐豆余额
				blueConnect: true,
				deviceId: null,
				rubbishtype: [],
				curRubbishType: null,
				loading: false
			}
		},
		computed: {
			// 计算可兑换乐豆
			goldNum(){
				let ret = 0
				if(this.curRubbishType&&this.curRubbishType.rubbishWeight&&this.curRubbishType.goleNum){
					ret = this.balanceData / this.curRubbishType.rubbishWeight / this.curRubbishType.goleNum
				}
				return Math.floor(ret)
			},
			// 称重结果
			balanceData() {
				this.cancel()
				let _this = this
				let data = _this.$store.state.vuex_balanceData
				console.log(data)
				
				// 解析结果
				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')
				_this.formData.rubbishWeight = weight
				return fh + weight
			}
		},
		onLoad(options) {
			let _this = this
			// 设备id,去掉冒号并转小写
			this.deviceId = options.deviceId.toLowerCase()
			this.deviceId = this.deviceId.replace(/:/g,'')
			
			// 连接中断
			uni.$on('blueConnectClose',function(){
				_this.reConnect(1)
			})
			// 连接成功
			uni.$on('blueConnectCallback',function(type){
				if(type&&!this.blueConnect){
					_this.blueConnect = true
					uni.showModal({
						title: '提示',
						content: '重连成功,请重新称重',
						showCancel: false,
					})
				}else{
					_this.reConnect(0)
				}
			})
			
			// 通过设备id查询网点信息
			this.findBySrcDeviceNo()
		},
		onUnload() {
			uni.$off('blueConnectClose')
			uni.$off('blueConnectCallback')
		},
		methods: {
			// 获取网点信息
			findBySrcDeviceNo(){
				uni.showLoading({
				    title: '加载中',
					mask: true
				});
				findBySrcDeviceNo({srcDeviceCode:this.deviceId}).then(res=>{
					console.log(res,'====')
					if(res.status == 200){
						this.rubbishtype = res.data.list
						this.stationName = res.data.stationEntity.name
						this.formData.srcDeviceCode = this.deviceId
						this.formData.operatorNo = this.$store.state.vuex_userData.id
					}else{
						uni.showModal({
							title: '提示',
							content: res.message,
							showCancel: false,
							complete(e) {
								 uni.navigateBack()
							}
						})
					}
					uni.hideLoading()
				})
			},
			// 选择投递类型
			selRubbishType(item){
				this.formData.rubbishType = item.rubbishType
				this.curRubbishType = item
			},
			// 重连蓝牙设备
			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.customerMobile == ''){
					uni.showToast({
						icon: 'none',
						title: '请输入手机号码'
					})
					return
				}
				if(this.formData.customerMobile.length!=11){
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号码'
					})
					return
				}
				if(this.formData.rubbishType == ''){
					uni.showToast({
						icon: 'none',
						title: '请选择投递类型'
					})
					return
				}
				
				this.loading = true
				// 查询用户乐豆余额
				queryldByMobile({mobile: this.formData.customerMobile}).then(res => {
					if(res.status == 200){
						this.current = this.current + 1
						this.currentGold = res.data.currentGold
					}
					this.loading = false
				})
			},
			// 上一步
			prev(){
				this.current = this.current - 1
			},
			// 提交保存结果
			submit(){
				let that = this
				console.log(this.formData.rubbishWeight,'this.formData.rubbishWeight')
				if(this.balanceData<=0){
					uni.showToast({
						icon: 'none',
						title: '请投放物品!'
					})
					return
				}
				// 判断设备蓝牙是否仍然连接中
				uni.getBluetoothDevices({
				  success(res) {
					let has = res.devices.find(item => {
						let deviceId = item.deviceId.toLowerCase()
						return deviceId.replace(/:/g,'') == that.deviceId
					})
					// console.log(has,'判断设备仍然连接中')
					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(){
				// console.log(this.formData,'formData')
				saveDelivery(this.formData).then(res => {
					if(res.status == 200){
						setTimeout(()=>{
							uni.navigateBack()
						},500)
					}
					uni.showToast({
						icon: 'none',
						title: res.message
					})
				})
			}
		}
	}
</script>

<style lang="less">
.content{
	width: 100%;
	padding: 20rpx;
	background-color: #FFFFFF;
	.steps{
		padding: 40rpx 0;
		border-bottom: 1px solid #f8f8f8;
	}
	.flex-row{
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	.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;
		> view{
			width: 46%;
			border: 1px solid #eee;
			margin: 10rpx;
			padding: 10rpx 20rpx;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			background-color: #f8f8f8;
			.texts{
				font-size: 24rpx;
				color: #999;
				padding: 2rpx 0;
			}
			.imgs{
				width: 90rpx;
			}
			.info{
				flex-grow: 1;
			}
		}
		.active{
			border-color: #e69900;
			background-color: #ffaa00;
			color: #FFFFFF;
			.texts{
				color: #FFFFFF;
			}
		}
	}
	.buttons{
		padding: 50rpx 5%;
		display: flex;
		align-items: center;
		justify-content: center;
		>view{
			width: 50%;
			padding: 0 5%;
		}
	}
	.notes{
		margin-top: 50rpx;
		border-radius: 10rpx;
		color: #999;
		> view{
			&:first-child{
				padding: 10rpx 20rpx;
			}
			&:last-child{
				padding: 0 40rpx;
				> view{
					padding: 6rpx 20rpx;
				}
			}
		}
	}
	.slot-content{
		padding: 25rpx 50rpx 50rpx;
	}
}
</style>