<template>
    <view class="content">
        <form @submit="issueForm" class="take">
            <view class="take-label">
                <view class="item">
                    <view class="name">
                        <image src="@/static/icons/takeIcon_08.png" mode="widthFix"></image>收款银行
                    </view>
                    <view class="time">{{service.bank}}</view>
                </view>
                <view class="item">
                    <view class="name">
                        <image src="@/static/icons/takeIcon_09.png" mode="widthFix"></image>收款银行帐号
                    </view>
                    <view class="time">{{service.bank_no}}</view>
                </view>
                <!-- <view class="item">
                    <view class="name">
                        <image src="@/static/icons/takeIcon_04.png" mode="widthFix"></image>手机号码
                    </view>
                    <view class="time">{{username}}</view>
                </view> -->
                <view class="item">
                    <view class="name">
                        <image src="@/static/icons/takeIcon_10.png" mode="widthFix"></image>打款金额
                    </view>
                    <input class="entry" type="text" :value="price" name="price" placeholder="请输入打款金额" />
                </view>
                <view class="item">
                    <view class="name">
                        <image src="@/static/icons/takeIcon_05.png" mode="widthFix"></image>转款账户
                    </view>
                    <input class="entry" maxlength="4" type="text" name="name" placeholder="请输入转款人账户名" />
                </view>
                <!-- <view class="item">
                    <view class="name">
                        <image src="@/static/icons/takeIcon_06.png" mode="widthFix"></image>银行卡
                    </view>
                    <input class="entry" type="idcard" name="card_no" placeholder="请输入银行卡" />
                </view> -->
                <view class="item">
                    <view class="name">
                        <image src="@/static/icons/takeIcon_07.png" mode="widthFix"></image>打款凭证
                    </view>
                    <view class="issueNew" @click="openImg()">
                        <image class="issueNew-icon" :src="voucher.showpath || '/static/imgs/cover_img.png'" mode="aspectFill"></image>
                        <view class="issueNew-text">请上传转款电子回单</view>
                    </view>
                </view>
            </view>
            <view class="userdata-btn">
            	<button class="issue-btn" form-type="submit" size="mini" :disabled="disabled">提交审核</button>
            </view>
        </form>
		
		<!-- 提示 -->
		<view class="tipsBack" v-if="examineShow"></view>
		<view class="tipsCont" v-if="examineShow">
			<view class="tipsWhite">
				<image class="tipsCont-img" src="http://api.temple.siyuankunlun.cn/storage/materials/2023/01/04/11ed4204fbf696c067af79c8b12ad0ac.png" mode="widthFix"></image>
				<view class="tipsWhite-top">
					<view class="tipsWhite-name">
						提交成功
					</view>
					<view class="tipsWhite-text">
						已提交给后台审核, 请您耐心等待
					</view>
				</view>
				<view class="tipsWhite-btn">
					<view class="tipsWhite-btn-go" @click="judgeGeneral">
						知道了
					</view>
				</view>
			</view>
		</view>
    </view>
</template>

<script>
    import { openIndex, identitiesee } from '@/apis/interfaces/member'
    import { userIndex } from '@/apis/interfaces/user'
    import { uploads } from '@/apis/interfaces/uploading'
    export default {
    	data() {
    		return {
                service : '',
                username: '',   //用户手机号
                price   : '',   //打款金额
                seeData : {
                    name    : '',
                    card_no : ''
                },
                voucher :{      //打款凭证
                    showpath: '',
                    path	: ''
                },
                disabled 	: false , // 提交按钮状态
				examineShow : false,   // 提示弹出
    		}
    	},
    	onShow() {
    	    userIndex().then(res => {
                this.username = res.username
    	    }).catch(err => {
    	    	uni.showToast({
    	    		title: err.message,
    	    		icon: "none"
    	    	})
    	    })
            
            identitiesee(this.$Route.query.identity_id).then(res => {
                this.service = res.identity.service
                this.price   = res.identity.price
            }).catch(err => {
            	uni.showToast({
            		title: err.message,
            		icon: "none"
            	})
            })
    	},
    	methods: {
            // 上传图片
            openImg(){
            	uni.chooseImage({
            		count	: 1,
            		success	: path => {
            			uploads([{
            				uri : path.tempFilePaths[0]
            			}]).then(res => {
            				this.voucher = {
            					showpath: res.url[0],
            					path: res.path[0]
            				}
            			}).catch(err => {
            				uni.showToast({
            					title: err.message,
            					icon : 'none'
            				})
            			})
            		}
            	})
            },
            
            // 提交表单
            issueForm(e) {
                //card_no    : value.card_no,
                let value    = e.detail.value;
                let data = {
                    name       : value.name,
                    price      : value.price,
                    cover      : this.voucher.path
                }
                openIndex(this.$Route.query.identity_id, data).then(res => {
                    this.disabled = true
					this.examineShow = true
                }).catch(err => {
                	uni.showToast({
                		title: err.message,
                		icon : 'none'
                	})
                })
            },
			
			// 知道了
			judgeGeneral() {
				this.examineShow = false
				this.$Router.push({ name: 'User' });
			}
    	}
    }
</script>

<style lang="scss" scoped>
    .content {
        background-color: #f4f4f4;
    }
    .take-label {
        padding: $padding $padding 0;
        box-sizing: border-box;
        border-bottom: 160rpx solid transparent;
        .item {
            padding: $padding - 5 $padding - 10 $padding;
            box-sizing: border-box;
            background-color: #FFFFFF;
            border-bottom: 2rpx solid #f3f3f3;
            font-size: $title-size-lg;
            margin-bottom: $margin;
            border-radius: $radius;
            .name {
                width: 100%;
                display: flex;
                line-height: 44rpx;
                margin-bottom: 20rpx;
                image {
                    width: 44rpx;
                    height: 44rpx;
                    margin-right: 15rpx;
                }
            }
            .time {
                width: 100%;
                color: $text-gray;
            }
            .entry {
                width: 100%;
                background-color: #f4f4f4;
                font-size: $title-size-lg;
                padding: 0 $padding;
                height: 84rpx;
                line-height: 84rpx;
                box-sizing: border-box;
                border-radius: $radius-sm;
                color: $text-gray;
            }
            .issueNew {
                text-align: center;
                margin-top: 20rpx;
                .issueNew-icon {
                    width: 200rpx;
                    height: 200rpx;
                }
                .issueNew-text {
                    font-size: $title-size-m;
                    color: $text-gray;
                }
            }
        }
    }
    
    /* 按钮 */
    .userdata-btn {
        width: 100%;
        box-sizing: border-box;
        padding: 30rpx;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 99;
        right: 0;
        background: white;
        .issue-btn {
            background: #1d37e2;
            text-align: center;
            color: white;
            height: 90rpx;
            line-height: 90rpx;
            font-size: 34rpx;
            font-weight: normal;
            width: 100%;
            margin: 0;
            padding: 0;
            border-radius: 10rpx;
            &[disabled] {
                background: #1d37e2 !important;
                color: #fff !important;
            }
        }
    }
    
    // .site-btn {
    //     padding: $padding - 10 $padding;
    //     margin-top: $margin * 3;
    //     button[size="mini"] {
    //         width: 100%;
    //         background: #1d37e2;
    //         height: 88rpx;
    //         line-height: 88rpx;
    //         font-size: $title-size;
    //         color: white;
    //         padding: 0;
    //         &[disabled] {
    //             background: #a4affd !important;
    //             color: #fff !important;
    //         }
    //     }
    // }
	
	// 提交成功弹出
	.tipsBack {
		position: fixed;
		width: 100vw;
		height: 100vh;
		left: 0;
		top: 0;
		z-index: 99;
		background-color: rgba(0, 0, 0, .8);
	}
	.tipsCont {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-box-pack: center;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 100;
		padding: 0 10%;
		box-sizing: border-box;
	}
	
	.tipsWhite {
		background-color: #ffffff;
		border-radius: 20rpx;
		overflow: hidden;
		text-align: center;
		padding: 30rpx;
		box-sizing: border-box;
	}
	
	.tipsWhite-top {
		box-sizing: border-box;
	}
	
	.tipsCont-img {
		width: 50%;
		margin: 20rpx auto 0;
	}
	
	.tipsWhite-name {
		text-align: center;
		color: #111111;
		font-size: 40rpx;
		font-weight: 600;
		margin-bottom: 15rpx;
	}
	
	.tipsWhite-text {
		font-size: 30rpx;
		color: #666666;
		line-height: 48rpx;
	}
	
	.tipsWhite-btn {
		display: flex;
		padding: $padding 10rpx;
		box-sizing: border-box;
		.tipsWhite-btn-go {
			flex: 2;
			color: #fff;
			margin: 40rpx 15rpx 0;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			border: 2rpx solid #F6F6F6;
			background-color: #2297ff;
			border-radius: $radius-m;
		}
	}
</style>
