<template>
    <view>
        <view class="favourTitle">
            <image class="favourTitle-img" src="https://card.ysd-bs.com/storage/materials/2021/09/01/favour_title.png" mode="widthFix"></image>
        </view>
        
        <view class="favourBack" v-if="typeArr[typeIndex]">
            <image class="favourBack-img" src="https://card.ysd-bs.com/storage/materials/2021/09/01/favour_back.png" mode="widthFix"></image>
            <view class="favourBack-cont-title">我的{{ typeArr[typeIndex].value }}</view>
            <view class="favourBack-cont">
                <view class="favourBack-cont-name">{{ typeArr[typeIndex].value }}</view>
                <view class="favourBack-cont-number">
                    <text>{{ typeArr[typeIndex].key == 'silver' ? account.silver : account.drill }}</text>元
                </view>
            </view>
        
            <view class="favourCont">
                <view class="favourBlack">
                    <view class="favourCont-title">赠好友消费红包</view>
                    <form @submit="formSubmit">
                        <view class="favourCont-label">
                            <view class="favourCont-name">账户类型</view>
                            <picker class="favourCont-picker" :range="typeArr" :range-key="'value'" @change="typeBind">
                                <view class="tabs-text">
                                    {{ typeArr[typeIndex].value }}
                                </view>
                                <image src="/static/icon/rightsArrow.png"></image>
                            </picker>
                        </view>
                        <view class="favourCont-label">
                            <view class="favourCont-name">好友手机号</view>
                            <view class="favourCont-check">
                                <input type="number" @input="bindKeyInput" placeholder="输入好友手机号" />
                                <view class="favourCont-check-btn" @tap="checkTel">校验号码</view>
                            </view>
                        </view>
                        <view class="favourCont-label">
                            <view class="favourCont-name">转账金额</view>
                            <input type="digit" name="amount" placeholder="请输入转账金额" />
                        </view>
                        <view class="favourCont-label">
                            <view class="favourCont-name">支付密码</view>
                            <input type="number" name="paypass" placeholder="请输入支付密码" password />
                        </view>
                        <button class="favourCont-btn" formType="submit" :disabled="disabled">立即转入</button>
                    </form>
                </view>
                <navigator class="favourCont-record" v-if="typeArr[typeIndex]" hover-class="none" :url="'/pages/account/account?type=' + typeArr[typeIndex].key"><text>赠予记录</text>
                </navigator>
            </view>
        </view>
        
        <!-- 校验手机号弹出 -->
        <view class="popTel-back" v-if="popShow"></view>
        <view class="popTel" v-if="popShow">
            <view class="popTel-title">当前转入的账户信息</view>
            <view class="popTel-cont">
                <image class="popTel-head" :src="userInfo.avatar"></image>
                <view class="popTel-name">{{ userInfo.nickname }}</view>
            </view>
            <view class="popTel-btn" @tap="popHide">知道了</view>
        </view>
    </view>
</template>

<script>
    import { transfers, ajaxTel, transfersForm } from '@/apis/interfaces/user'
    export default {
    	data() {
    		return {
                account  : '', //账户积分
                typeArr  : [], //转账类型
                typeIndex: 0,  //转账下标
                userInfo : '', //转账用户信息
                mobile   : '',  //转账手机号
                disabled : false, //支付按钮状态
                popShow  : false  //校验弹出层
    		}
    	},
        onLoad(options) {
            // 获取账户下拉列表
            this.accountList();
        },
        methods: {
            // 账户下拉列表
            accountList() {
                transfers().then(res=>{
                    this.account = res.account
                    this.typeArr = res.accounts
                }).catch(err=>{})
            },
        
            // 账户下拉选择
            typeBind(e) {
                this.typeIndex = e.detail.value
            },
            
            // 转入的手机号
            bindKeyInput(val){
                this.mobile = val.detail.value
            },
        
            // 校验手机号码
            checkTel() {
                ajaxTel(this.mobile).then(res=>{
                    this.userInfo = res
                    this.popShow  = !this.popShow
                }).catch(err=>{})
            },
        
            // 关闭校验弹出
            popHide() {
                this.popShow = !this.popShow
            },
        
            // 提交表单
            formSubmit(e) {
                // 检查用户登录状态
                const Paypass = uni.getStorageSync("hasPaypass")
                if(Paypass == false) {
                    uni.showModal({
                        title   : '提示',
                        content : '抱歉，您还没有设置支付密码',
                        success : res=> {
                            if (res.confirm) {
                                uni.navigateTo({
                                    url: '/pages/payPassword/setup?source=favourUrl'
                                })
                            } else if (res.cancel) {}
                        }
                    })
                    return
                }
                let newAmount  = e.detail.value.amount,
                    newMobile  = this.mobile,
                    newPaypass = e.detail.value.paypass,
                    newType    = this.typeArr[this.typeIndex].key
        
                transfersForm({
                    mobile: newMobile,
                    type: newType,
                    amount: newAmount,
                    paypass: newPaypass
                }).then(res=>{
                    this.disabled = true
                    uni.showToast({
                        title: '转入成功',
                    })
                    setTimeout(()=>{
                        uni.redirectTo({
                            url: "/pages/account/account?type=" + newType
                        })
                    },2000)
                }) .catch(err=>{
                    uni.showToast({
                        title: err.message,
                        icon:'none'
                    })
                })   
            }
        }
    }
</script>

<style lang="scss" scoped>
    page {
        background-color: #000000;
    }
    
    .favourTitle {
        text-align: center;
        margin: 40rpx 0;
    }
    
    .favourBack{
        position: relative;
        width: 100vw;
    }
    
    .favourBack-img {
        width: 100vw;
        display: block;
    }
    
    .favourBack-cont {
        position: absolute;
        top: 100rpx;
        left: 0;
        padding-left: 14%;
        z-index: 1;
        color: #606060;
        width: 100%;
        box-sizing: border-box;
    }
    
    .favourBack-cont-number {
        color: #000000;
        width: 100%;
        margin-top: 20rpx;
        text {
            font-size: 50rpx;
            font-weight: 600;
            padding-right: 10rpx;
            display: inline-block;
        }
    }
    
    .favourBack-cont-title {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        text-align: center;
        font-size: 26rpx;
        line-height: 50rpx;
    }
    
    .favourCont {
        background-color: #ffffff;
        padding: 40rpx 50rpx;
        width: 100%;
        box-sizing: border-box;
        border-radius: 5rpx 5rpx 0 0;
    }
    
    .favourBlack {
        background-color: #e9e9e9;
        padding: 40rpx;
        box-sizing: border-box;
        border-radius: 45rpx;
    }
    
    .favourCont-record {
        line-height: 90rpx;
        text-align: center;
        font-size: 34rpx;
    }
    
    .favourCont-title {
        font-size: 45rpx;
        text-align: center;
    }
    
    .favourCont-label {
        display: flex;
        margin-top: 40rpx;
        font-size: 28rpx;
        input {
            font-size: 28rpx;
        }
    }
    
    .favourCont-check,
    .favourCont-picker,
    .favourCont-label>input {
        background-color: #c9c9c9;
        display: flex;
        width: calc(100% - 160rpx);
        padding: 0 20rpx;
        box-sizing: border-box;
        height: 80rpx;
        line-height: 80rpx;
    }
    
    .favourCont-picker {
        position: relative;
        image {
            width: 40rpx;
            height: 40rpx;
            position: absolute;
            right: 0;
            top: 20rpx;
            z-index: 2;
        }
        input {
            height: 80rpx;
            line-height: 80rpx;
        }
    }
    
    .favourCont-check input,
    .favourCont-picker input {
        height: 80rpx;
        line-height: 80rpx;
    }
    
    .favourCont-name {
        width: 160rpx;
        line-height: 80rpx;
    }
    
    
    .favourCont-check-btn {
        width: 150rpx;
        text-align: center;
        background-color: #a1a1a1;
        line-height: 60rpx;
        height: 60rpx;
        margin-top: 10rpx;
        font-size: 24rpx;
    }
    
    .favourCont-btn {
        width: 100% !important;
        background-color: #dbc190;
        margin-top: 40rpx;
        border-radius: 60rpx;
    }
    
    .tabs-text {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        padding-left: 20rpx;
        box-sizing: border-box;
    }
    
    /* 校验弹出层 */
    .popTel-back {
        position: fixed;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, .7);
        width: 100vw;
        height: 100vh;
        z-index: 10;
    }
    
    .popTel {
        position: fixed;
        left: 140rpx;
        right: 140rpx;
        top: 30%;
        z-index: 11;
        background-color: #fff;
        border-radius: 20rpx;
        text-align: center;
        overflow: hidden;
    }
    
    .popTel-title {
        font-size: 32rpx;
        background-color: #ff8e65;
        color: #fff;
        line-height: 80rpx;
    }
    
    .popTel-cont {
        padding: 60rpx 0;
    }
    
    .popTel-head {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        margin: 0 auto 20rpx;
        border: #ff8e65 solid 2rpx;
    }
    
    .popTel-btn {
        border-top: 2rpx solid #dedede;
        line-height: 90rpx;
        color: #ff8e65;
        font-size: 30rpx;
    }
</style>
