<template>
    <view>
        <view class="propery">
            <view class="propery-content">
                <view class="currency">钱包余额</view>
                <view class="balance">{{ balance.balance || '0' }}</view>
                <view class="frozen">{{ balance.frozen || '0' }} 冻结中</view>
                <view class="balance-flex">
                    <view class="balance-flex-item" @click="showAddress">区块链地址</view>
                    <view class="balance-flex-item" @click="showPrivatekey('privatekey')">我的私钥</view>
                </view>
            </view>
        </view>
        <!-- 账户记录 -->
        <view class="record">
            <view class="record-tabs">
                <view class="tabs-item" :class="logsType === 0 ? 'show': ''" @click="onLogsType(0)">全部</view>
                <view class="tabs-item" :class="logsType === 2 ? 'show': ''" @click="onLogsType(2)">收入</view>
                <view class="tabs-item" :class="logsType === 1 ? 'show': ''" @click="onLogsType(1)">支出</view>
            </view>
            <record :list="logs" />
            <!-- ios安全距离 -->
            <view class="ios-bottom"></view>
        </view>
        <!-- 钱包密码 -->
        <u-popup :show="passwordShow" @close="resetPassword" mode="center" round="10" borderRadius="10">
            <view class="validationPassword">
                <view class="from">
                    <view class="title">验证钱包密码</view>
                    <view class="inputs">
                        <text v-for="item in password.length" :key="item">•</text>
                        <text class="flicker-animation">|</text>
                    </view>
                </view>
            </view>
        </u-popup>
        <!-- key -->
        <u-keyboard mode="number" random dotDisabled :overlay="false" :show="passwordShow" confirmText="验证"
            @change="keyValChange" @backspace="keyValBackspace" @confirm="payPassword('confirm', passwordPages)"
            @cancel="passwordShow = false"></u-keyboard>
    </view>
</template>

<script>
    import record from '@/components/property/record'
    import {
        sum,
        logs,
        securityCheck
    } from '@/apis/interfaces/wallet'
    export default {
        components: {
            record
        },
        data() {
            return {
                balance: {},
                logs: [],
                logsType: 0,
                password: '',
                passwordShow: false,
                passwordPages: ''
            };
        },
        onShow() {
            Promise.all([
                sum(),
                logs()
            ]).then(res => {
                this.balance = res[0]
                this.logs = res[1]
            }).catch(err => {
                uni.showToast({
                    icon: 'none',
                    title: err.message
                })
            })
        },
        methods: {
            // 键盘输入
            keyValChange(e) {
                if (this.password.length >= 6) return
                this.password += e
            },
            // 键盘删除
            keyValBackspace(e) {
                if (this.password.length) this.password = this.password.substr(0, this.password.length - 1)
            },
            // 弹出私钥
            showPrivatekey(pages) {
                this.passwordShow = true
                this.passwordPages = pages
            },
            // 重置密码
            resetPassword() {
                this.passwordShow = false
                this.password = ''
            },
            // 验证私钥
            payPassword(type) {
                if (type === 'confirm') {
                    if (this.password === '') {
                        uni.showToast({
                            title: '请输入安全密码',
                            icon: 'none'
                        })
                        return
                    }
                    securityCheck(this.password).then(res => {
                        switch (this.passwordPages) {
                            case 'privatekey':
                                this.$Router.push({
                                    name: 'WalletPrivatekey',
                                    params: {
                                        password: this.password
                                    }
                                })
                                break;
                            case 'ResetPassword':
                                this.$Router.push({
                                    name: 'ResetPassword',
                                    params: {
                                        password: this.password
                                    }
                                })
                                break;
                            case 'WalletMnemonic':
                                this.$Router.push({
                                    name: 'WalletMnemonic',
                                    params: {
                                        password: this.password
                                    }
                                })
                                break;
                        }
                        this.resetPassword()
                    }).catch(err => {
                        uni.showToast({
                            title: err.message,
                            icon: 'none',
                        })
                    })
                    return
                }
                this.$refs.showPassword.close()
            },
            // 交易记录
            onLogsType(index) {
                if (this.logsType === index) return
                this.logsType = index
                this.logs = []
                logs({
                    flag: this.logsType
                }).then(res => {
                    this.logs = res
                })
            },
            // 区块地址
            showAddress() {
                uni.showModal({
                    title: '我的区块链地址',
                    content: this.balance.address,
                    cancelText: '复制',
                    cancelColor: '#009B69',
                    success: (res) => {
                        if (res.cancel) {
                            uni.setClipboardData({
                                data: this.balance.address
                            })
                        }
                    }
                })
            }
        },
        onNavigationBarButtonTap(e) {
            if (e.index === 0) {
                uni.showActionSheet({
                    itemList: ['导出助记词', '修改密码'],
                    success: (res) => {
                        switch (res.tapIndex) {
                            case 0:
                                this.showPrivatekey('WalletMnemonic')
                                break;
                            case 1:
                                this.showPrivatekey('ResetPassword')
                                break;
                        }
                        uni.hideLoading()
                    }
                })
            }
        }
    }
</script>

<style>
    .flicker-animation {
        animation: flicker .8s infinite;
    }

    @keyframes flicker {
        0% {
            opacity: 0;
        }

        100 {
            opacity: 1;
        }
    }
</style>

<style lang="scss" scoped>
    // 验证密码弹出层
    .validationPassword {
        width: 80vw;

        .from {
            padding: $padding*2;
            text-align: center;

            .title {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-weight: bold;
                font-size: $title-size;
                padding-bottom: $padding;
            }

            // input{
            // 	background: $window-color;
            // 	height: 90rpx;
            // 	left: 90rpx;
            // 	font-size: $title-size-lg;
            // 	border-radius: 45rpx;
            // }
            .inputs {
                background-color: $window-color;
                height: 90rpx;
                line-height: 90rpx;
                border-radius: 45rpx;
                font-size: $title-size-lg;
                text-align: center;

                text {
                    padding: 0 10rpx;
                    text-align: center;
                }

                .placeholder {
                    color: $text-gray;
                }
            }
        }

        .buttons {
            text-align: center;
            padding: 0 $padding*2;

            .button {
                height: 90rpx;
                line-height: 90rpx;
                margin-bottom: $margin;

                &.cancel {
                    color: $text-gray;
                }

                &.confirm {
                    color: white;
                    background: $main-color;
                    border-radius: 45rpx;
                }
            }
        }

        // 
        // 
    }

    // 账户
    .propery {
        position: relative;
        padding-top: var(--status-bar-height);
        background-image: linear-gradient(to right, $main-color, #22aa98);

        &::before {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            content: " ";
            // background-image: url(@/static/background/wallet-back.png);
            background-size: 100%;
            background-repeat: no-repeat;
        }

        .propery-content {
            position: relative;
            z-index: 1;
            padding: $padding * 5 $padding * 2;
            text-align: center;

            .currency {
                font-size: $title-size-m;
                color: rgba($color: white, $alpha: .8);
            }

            .balance {
                font-size: $title-size * 2;
                padding: ($padding / 2) 0;
                color: white;
            }

            .frozen {
                background: rgba($color: #000000, $alpha: .1);
                color: rgba($color: white, $alpha: .7);
                display: inline-block;
                padding: 0 $padding;
                font-size: $title-size-m;
                height: 50rpx;
                line-height: 50rpx;
                border-radius: $radius-m;
                border: solid 1rpx rgba($color: white, $alpha: .4)
            }

            .balance-flex {
                display: flex;
                justify-content: center;
                margin-top: $margin * 3;

                .balance-flex-item {
                    background-color: white;
                    width: 200rpx;
                    height: 75rpx;
                    line-height: 75rpx;
                    color: $main-color;
                    margin: 0 $margin;
                    border-radius: $radius-m;
                    font-size: $title-size-lg;
                }
            }
        }
    }

    // 记录
    .record {
        background-color: white;
        border-radius: $radius $radius 0 0;
        padding: $padding ($padding * 2);
        margin-top: -$margin;
        position: relative;
        z-index: 2;

        .record-tabs {
            display: flex;
            justify-content: space-around;
            font-weight: bold;
            font-size: $title-size;
            color: $text-gray;
            line-height: 70rpx;
            margin-bottom: $margin;

            .tabs-item {
                position: relative;
                padding: 0 $padding;

                &.show {
                    color: $main-color;

                    &::before {
                        position: absolute;
                        bottom: 0;
                        left: $padding;
                        right: $padding;
                        height: 4rpx;
                        content: " ";
                        background-color: $main-color;
                    }
                }
            }
        }
    }
</style>
