<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="pickerChange">
					<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>
		<view class="from-block">
			<view class="from-block-item" v-if="pickertype == 'select'">
				<label>资费类型</label>
				<picker class="from-block-val" :range="selectP" :value="selectPIndex" range-key="name" @change="pickerSelectChange">
					<view class="from-block-picker nowrap">{{selectP[selectPIndex].name}}
						<u-icon class="from-block-picker-icon" name="arrow-down" color="#555" size="15"></u-icon>
					</view>
				</picker>
			</view>
			<view class="from-block-item" v-if="needAmount > 0">
				<label>标的额</label>
				<input class="from-block-val from-block-input" type="number" placeholder="请输入标的额" @input="onKeyInput" />
			</view>
			<view class="from-block-item" v-if="pickertype != 'free'">
				<label>服务费</label>
				<input class="from-block-val from-block-input" type="number" :value="price || '0'" disabled />
			</view>
			<view class="from-block-item" v-else>
				<label>服务费</label>
				<input class="from-block-val from-block-input" type="number" placeholder="请输入客户服务费(元)" v-model="priceValue" />
			</view>
			
			<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" maxlength="11" />
			</view>
		</view>
		<button class="from-btn" @click="onSubmit">提交办理</button>
	</view>
</template>

<script>
	import { customTypes,customTypeStore } from '@/apis/interfaces/custom.js'
	import { settleAmount, amountType, bigfiveStore } from '@/apis/interfaces/index.js'
	export default {
		data() {
			return {
				pickerArr	: [],
				pickerIndex	: 0,
				pickertype  : '',
				name		: '',
				phone		: '',
                price       : '',
				priceValue  : '',
				amount      : 0,
				needAmount	: 0,
				selectP		: [],
				selectPIndex: 0
			};
		},
		onShow() {
			const parentData = JSON.parse(decodeURIComponent(this.$Route.query.record))
			this.needAmount	 = parentData.need_amount
			this.pickerArr   = parentData.child.data
			this.pickertype  = parentData.type
			this.selectP	 = parentData.select_p || []
		},
		methods: {
			// 获取标的额
			onKeyInput(e) {
				this.amount = e.detail.value
				this.settleInfo()
			},
			
			// 标的额比例计算
			settleInfo() {
				let { pickerArr, pickerIndex } = this
				let id = pickerArr[pickerIndex].id
				settleAmount({
					amount: this.pickertype == 'select' ? this.selectP[this.selectPIndex].key : this.amount,
				}, id).then(res => {
					this.price = res.price
				}).catch(err => {
					this.price = 0
					uni.showToast({
						title: err.message,
						icon : 'none',
				        mask:true,
				        duration:3000
					})
				})
			},
			
			
			
			// 选择办理业务
			pickerChange(e) {
				this.pickerIndex = e.detail.value
				// 获取三级分类服务费类型
				this.amountTypeInfo();
			},
			
			// 选择资费信息
			pickerSelectChange(e){
				this.selectPIndex = e.detail.value
				this.settleInfo()
			},
			
			// 三级分类服务费类型
			amountTypeInfo() {
				// this.$Route.query.bigFiveId
				let { pickerArr, pickerIndex } = this
				let id = pickerArr[pickerIndex].id
				amountType(id).then(res => {
					let { type, need_amount, select_p } = res;
					this.pickertype = type
					this.needAmount = need_amount
					
					console.log(select_p)
					
					this.selectP	= select_p || []
					if(type == 'select'){
						this.settleInfo()
					}
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none',
				        mask:true,
				        duration:3000
					})
				})
			},
			
			// 提交表单
			onSubmit(){
				let { name, phone, pickerIndex, price, priceValue, amount, pickerArr, pickertype, selectP, selectPIndex } = this
				if(pickertype != 'free') {
					if(amount === ''){
						uni.showToast({
							title: '请输入标的额',
							icon : 'none'
						})
						return
					}
				} else {
					if(priceValue === ''){
						uni.showToast({
							title: '请输入服务费金额',
							icon : 'none'
						})
						return
					}
				}
				if(name === ''){
					uni.showToast({
						title: '请输入客户姓名',
						icon : 'none'
					})
					return
				}
				if(phone === ''){
					uni.showToast({
						title: '请输入客户手机号码',
						icon : 'none'
					})
					return
				}
				uni.showLoading({
					title: "提交中...",
					mask : true
				})
				
				let params = {
					big_id  	:   pickerArr.length > 0 ? pickerArr[pickerIndex].id : this.$Route.query.bigFiveId,
				    name    	:   name,
					amount  	:   amount,
				    mobile  	:   phone,
				    price   	:   pickertype == 'free' ? priceValue : price,
					select_key	: 	selectP.length > 0 ? selectP[selectPIndex].key : ''
				}
				
				bigfiveStore(params).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',
                        mask:true,
                        duration:3000
					})
				})
			}
		}
	}
</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>
