<template>
	<view>
		
		<view class="username">
			<view class="namecont font15">设备类型</view>
			<picker mode="selector" style="width: 70%;" :range="serviceType" range-key="codeName"
				@change="bindUserCard">
				<view class=" text1 fotrt marRight10 font14" v-if="serviceName">
					{{serviceName}}
				</view>
				<view class=" text1 fotrt marRight10 fcor666 font14" v-else>
					请选择设备类型
				</view>
			</picker>
			<image class="flright" style="width: 15px;height: 15px;" src="../../../static/img/downj.png">
			</image>
		</view>

		<view class="username">
			<view class="namecont font15">购买方式</view>
			<picker mode="selector" style="width: 70%;" :range="moneyType" range-key="codeName" @change="bindUserCard1">
				<view class=" text1 fotrt marRight10 font14" v-if="payName">
					{{payName}}
				</view>
				<view class=" text1 fotrt marRight10 fcor666 font14" v-else>
					请选择购买方式
				</view>
			</picker>
			<image class="flright" style="width: 15px;height: 15px;" src="../../../static/img/downj.png">
			</image>
		</view>

		<view class="username">
			<view class="namecont">设备单价</view>
			<input placeholder="请输入设备单价" v-model="unitPrice" style="width: 70%;" disabled="true"
				placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
		</view>

		<view class="username">
			<view class="namecont">设备数量</view>
			<input placeholder="请输入设备数量" v-model="servienum" style="width: 70%;" disabled="true"
				placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
		</view>
		<view class="width80 font16  mart30 fotrt fcoreb5">
			支付金额: <text class="font24 margle">¥{{payPrice}}</text>
		</view>

		<button class="btns" @click="createDeviceOrder">确认</button>
	</view>
</template>

<script>
	import {
		getDevicePrice,
		createDeviceOrder,
		payOrder
	} from '../../../Utils/Api.js';
	let app = getApp();
	// #ifdef H5
	var jweixin = require('jweixin-module');
	// #endif
	export default {
		data() {
			return {
				userInfo: app.globalData.userInfo,
				// storeid: '', // 门店id
				servienum: 1, // 设备数量
				serviceType: [], //设备类型
				moneyType: [], // 购买方式
				serviceid: '', //设备id
				serviceName: '', //设备名字
				payid: '', //购买id
				payName: '', //购买方式名字
				unitPrice: 0, //支付单价
				payPrice: 0 //支付金额
			}
		},
		onLoad(options) {
			this.serviceType = app.globalData.Dictionaries.DEVICE_TYPE;
			this.moneyType = app.globalData.Dictionaries.DEVICE_ORDER_TYPE;
		},
		methods: {
			//查询设备单价
			getDevicePrice() {
				if (!this.payid) {
					return;
				}
				if (!this.serviceid) {
					return;
				}
				let datas = {
					priceType: this.payid,
					deviceType: this.serviceid
				}
				getDevicePrice(datas).then(res => {
					if (res.return_code == '000000') {
						this.unitPrice = res.return_data;
						this.payPrice = res.return_data;
					}
				})
			},
			//选择设备类型
			bindUserCard(e) {
				this.serviceid = this.serviceType[e.target.value].codeValue;
				this.serviceName = this.serviceType[e.target.value].codeName;
				this.getDevicePrice();
			},
			//选择购买方式
			bindUserCard1(e) {
				this.payid = this.moneyType[e.target.value].codeValue;
				this.payName = this.moneyType[e.target.value].codeName;
				this.getDevicePrice();
			},
			//支付
			createDeviceOrder() {
				if (!this.serviceid) {
					uni.showToast({
						duration: 2000,
						title: '请选择设备类型',
						icon: 'none'
					})
					return;
				}
				if (!this.payid) {
					uni.showToast({
						duration: 2000,
						title: '请选择购买方式',
						icon: 'none'
					})
					return;
				}
				let datas = {
					"orderType": this.payid,
					"deviceType": this.serviceid,
					"deviceNum": "1"
				}
				createDeviceOrder(datas).then(res => {
					if (res.return_code == '000000') {
						this.payOrder(res.return_data.orderNo);
					} else {
						uni.showToast({
							duration: 2000,
							title: res.return_msg,
							icon: 'none'
						})
					}
				})
			},
			//获取支付参数
			payOrder(item) {
				let datas = {
					"orderNo": item,
					"openId": app.globalData.openId
				}
				payOrder(datas).then(res => {
					if (res.return_code == '000000') {
						this.payRequest(res);
					}
				});
			},
			//H5支付
			payRequest: function(self) {
				uni.showLoading({
					title: '支付中...'
				})
				jweixin.config({
					// debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
					appId: self.return_data.appId, // 必填,公众号的唯一标识
					timestamp: self.return_data.timeStamp, // 必填,生成签名的时间戳
					nonceStr: self.return_data.nonceStr, // 必填,生成签名的随机串
					signature: self.return_data.sign, // 必填,签名,见附录1
					jsApiList: ['chooseWXPay'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
				});
				uni.hideLoading();
				jweixin.ready(function() {
					jweixin.checkJsApi({
						jsApiList: ['chooseWXPay'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
						success: function(res) {},
						fail: function(res) {}
					});
					jweixin.chooseWXPay({
						appId: self.return_data.appId,
						timestamp: self.return_data
							.timeStamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
						nonceStr: self.return_data.nonceStr, // 支付签名随机串,不长于 32 位
						package: self.return_data
							.package, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=***)
						signType: 'MD5', // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
						paySign: self.return_data.sign, // 支付签名
						success: function(res) {
							// 支付成功后的回调函数
							uni.showToast({
								title: '支付成功'
							})
							uni.navigateBack({})
						},
						cancel: function(r) {},
						fail: function(res) {}
					});
				});

				jweixin.error(function(res) {
					uni.showToast({
						icon: 'none',
						title: '支付失败了',
						duration: 4000
					});
				});
			},

		}
	}
</script>

<style lang="scss">
	

	.username {
		width: calc(100% - 90upx);
		height: 100upx;
		display: flex;
		align-items: center;
		background-color: rgba($color: #ffffff, $alpha: 0.1);
		border-bottom: 1px solid #f6f6f6;
		padding: 8upx 45upx;

		input {
			width: 50%;
			height: 50upx;
			font-size: 16px;
			color: #333333;
			font-weight: blod;
			text-align: right;
		}

		.namecont {
			color: #666666;
			width: 28%;
		}
	}

	.btns {
		margin-top: 200rpx;
		width: 80%;
		margin-left: 10%;
		height: 50px;
		line-height: 50px;
		background-color: #0083f5;
		color: #FFFFFF;
		font-weight: bold;
	}
</style>