<template>
    <view>
        <!-- 提示信息 -->
        <view class="prompt">请按照顺序记录并确保正确备份助记词</view>
        <!-- 助记词 -->
        <ul class="mnemonic">
            <li v-for="(item, index) in mnemonic" :key="index">{{item}}</li>
        </ul>
        <!-- 按钮 -->
        <view class="buttons">
            <view class="text">注：助记词是用户账户的唯一标识，不能分享给他人，掌握该助记词即可控制该账户与钱包</view>
            <!-- <button type="default" @click="goto">验证助记词</button> -->
        </view>
    </view>
</template>

<script>
    import {
        seed
    } from "@/apis/interfaces/wallet"
    export default {
        data() {
            return {
                mnemonic: []
            }
        },
        mounted() {
            seed({
                code: this.$Route.query.password
            }).then(res => {
                this.mnemonic = res.seed.split(' ')
            }).catch(err => {
                uni.showToast({
                    icon: 'none',
                    title: err.message
                })
            })
        },
        methods: {
            goto() {
                this.$Router.replace({
                    name: 'WalletValidation',
                    params: {
                        seed: this.mnemonic,
                        sign: this.sign
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    // 提示信息
    .prompt {
        color: $text-gray;
        text-align: center;
        line-height: 90rpx;
        font-size: $title-size-m;
    }

    // 跳过
    .skip {
        padding: $padding * 2;
        text-align: center;
        color: $text-gray;

        navigator {
            color: $main-color;
            margin-left: $margin/2;
            display: inline-block;
        }
    }

    // 助记词
    .mnemonic {
        margin: $margin $margin * 2;
        border-radius: $radius-m;
        box-shadow: 0 0 4rpx 4rpx rgba($color: $text-color, $alpha: .02);
        background-color: white;
        padding: $padding;
        list-style: none;
        display: flex;
        flex-wrap: wrap;

        li {
            text-align: center;
            height: 58rpx;
            padding: 0 $padding/2;
            line-height: 58rpx;
            margin: $margin / 2;
            color: $text-color;
            background: rgba($color: $border-color, $alpha: .4);
        }
    }

    // 按钮
    .buttons {
        padding: $padding $padding * 2;

        .text {
            text-align: center;
            margin-bottom: $margin * 2;
            font-size: $title-size-m;
            color: $text-price;
        }

        button {
            height: 90rpx;
            line-height: 90rpx;
            background-color: $main-color;
            border-radius: $radius-lg;
            color: white;
            font-weight: bold;
            font-size: $title-size;

            &::after {
                display: none;
            }
        }
    }
</style>
