<template>
	<view class="from-content">
		<view class="from-block" v-if="pickerArr.length > 0" >
			<view class="from-block-item">
				<label>办理业务</label>
				<picker class="from-block-val" :range="pickerArr" :value="pickerIndex" range-key="title" @change="pickerIndex = $event.detail.value">
					<view class="from-block-picker nowrap">{{pickerArr[pickerIndex].title}}
						<u-icon class="from-block-picker-icon" name="arrow-down" color="#555" size="15"></u-icon>
					</view>
				</picker>
			</view>
			<view class="from-block-item">
				<label>业务价格</label>
				<view class="from-block-val price">￥{{pickerArr[pickerIndex].price}}</view>
			</view>
			<view class="from-block-item">
				<label>业务描述</label>
				<view class="from-block-val">{{pickerArr[pickerIndex].subtitle}}</view>
			</view>
		</view>
		<view class="from-block">
			<view class="from-block-item">
				<label>客户姓名</label>
				<input class="from-block-val from-block-input" placeholder="请输入客户姓名" v-model="name" />
			</view>
			<view class="from-block-item">
				<label>手机号码</label>
				<input class="from-block-val from-block-input" type="number" placeholder="请输入客户手机号码" v-model="phone" />
			</view>
		</view>
		<button class="from-btn" @click="onSubmit">提交办理</button>
	</view>
</template>

<script>
	import { accountManagement, accountFrom } from '@/apis/interfaces/index.js'
	export default {
		data() {
			return {
				pickerArr	: [],
				pickerIndex	: 0,
				name		: '',
				phone		: ''
			};
		},
		onLoad() {
			uni.showLoading({
				title: '加载中...',
				mask : true
			})
			accountManagement().then(res => {
				uni.hideLoading()
				this.pickerArr = res;
				this.pickerIndex = res.findIndex(val => val.id == this.$Route.query.id)
			}).catch(err => {
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			})
		},
		methods: {
			// 提交表单
			onSubmit(){
				let { name, phone, pickerArr, pickerIndex } = this
				
				console.log(pickerArr[pickerIndex])
				
				if(name === ''){
					uni.showToast({
						title: '请输入客户姓名',
						icon : 'none'
					})
					return
				}
				if(phone === ''){
					uni.showToast({
						title: '请输入客户手机号码',
						icon : 'none'
					})
					return
				}
				uni.showLoading({
					title: "提交中...",
					mask : true
				})
				accountFrom({
					name	: name,
					mobile	: phone
				}, pickerArr[pickerIndex].id).then(res => {
					let { order_type, order_id, order_no } = res;
					this.$Router.replace({
						name	: 'Pay',
						params	: {
							paytype		: 'synthesize',
							orderId		: order_id,
							orderType	: order_type.replace(/\\/g, '-')
						},
					})
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.from-content{
		min-height: 100vh;
		padding: 30rpx;
		background: #f7f8f9;
	}
	.from-block{
		background: white;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		padding: 0 30rpx;
	}
	.from-block-item{
		min-height: 70rpx;
		display: flex;
		font-size: 32rpx;
		border-bottom: solid 1rpx #f3f3f3; 
		padding: 15rpx 0;
		&:last-child{ border: none; }
		label{ width: 200rpx; line-height: 70rpx; }
		.from-block-val{ width: calc(100% - 200rpx); text-align: right; line-height: 70rpx;
			&.price{ color: $main-color; font-weight: bold; }
		}
		.from-block-input{ height: 70rpx; font-size: 32rpx; }
		.from-block-picker{ padding-right: 50rpx; position: relative; }
		.from-block-picker-icon{ position: absolute; right: 0; top: 50%; margin-top: -15rpx; }
	}
	.from-btn{ width: 100%; background-color: $main-color; color: white; line-height: 95rpx; height: 95rpx; border-radius: 45rpx; font-size: 32rpx; font-weight: bold;
		&::after{ display: none; }
	}
</style>
