<template>
    <view>
        <!-- 提示信息 -->
        <view class="prompt">
            验证您的钱包助记词
        </view>
        <!-- 助记词 -->
        <view class="mnemonic">
            <view class="item" v-for="(item, index) in validation" :key="index" :class="item === null ? 'hide': ''"
                @click="onKeys('removeKey', index)">{{ item }}</view>
        </view>
        <!-- 选择助记词 -->
        <block v-if="mnemonic.length > 0">
            <view class="mnemonic-title">
                按顺序填写助记词
            </view>
            <view class="mnemonic-select">
                <view class="item" v-for="(item, index) in mnemonic" :key="index" @click="onKeys('addKey', index)">
                    {{ item }}</view>
            </view>
        </block>
        <!-- 按钮 -->
        <view class="buttons">
            <button type="default" @click="verifyMnemonic">验证</button>
        </view>
    </view>
</template>

<script>
    import {
        hash
    } from "@/apis/interfaces/wallet"
    export default {
        data() {
            return {
                validation: new Array(12).fill(null), // 验证key
                mnemonic: [], // 助记词key
                sign: '', // 助记词校验签名
                seedString: '', // 助记词原词
            }
        },
        mounted() {
            let seed = this.$Route.query.seed.split(',')
            seed.sort(() => {
                return Math.random() - .5
            });
            console.log(seed)
            // this.mnemonic = seed
            // this.sign = this.$Route.query.sign
            // this.seedString = this.$Route.query.seed
        },
        methods: {
            // 填写助记词
            onKeys(type, index) {
                if (type === 'addKey') {
                    this.$set(this.validation, this.validation.findIndex(val => val === null), this.mnemonic[index])
                    this.$delete(this.mnemonic, index)
                    return
                }
                if (type === 'removeKey' && this.validation[index] !== null) {
                    this.mnemonic.push(this.validation[index])
                    this.$delete(this.validation, index)
                    this.validation.push(null)
                }
            },
            // 验证助记词
            verifyMnemonic() {
                if (this.validation.findIndex(val => val === null) > -1) {
                    uni.showToast({
                        title: '请完整填写助记词',
                        icon: 'none'
                    })
                    return
                }
                let seed = this.validation.toString().replace(/,/g, ',')
                if (this.seedString !== seed) {
                    uni.showToast({
                        title: '验证失败，请确认您的助记词',
                        icon: 'none'
                    })
                    return
                }
                uni.redirectTo({
                    url: './create'
                })
            }
        }
    }
</script>

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

    // 选择助记词
    .mnemonic-title {
        padding-top: $padding * 2;
        margin: 0 $margin * 2;
        font-size: $title-size-m;
        color: $main-color;
    }

    .mnemonic-select {
        display: flex;
        flex-wrap: wrap;
        padding: $padding $padding + $padding / 2;

        .item {
            background-color: white;
            line-height: 68rpx;
            height: 68rpx;
            width: 68rpx;
            text-align: center;
            margin: $margin / 2;
            border-radius: $radius-m;
            box-shadow: 0 0 4rpx 4rpx rgba($color: $text-color, $alpha: .02);
        }
    }

    // 助记词
    .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;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;

        .item {
            background: rgba($color: $border-color, $alpha: .4);
            min-width: 58rpx;
            height: 58rpx;
            line-height: 58rpx;
            text-align: center;
            color: $text-color;
            margin: $margin / 2;

            &.hide {
                border: dashed 1px $border-color;
                box-sizing: border-box;
                background-color: white;
            }
        }
    }

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

        .text {
            text-align: center;
            margin-bottom: $margin * 2;
            font-size: $title-size-lg;
            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;

            &[disabled] {
                background: rgba($color: $main-color, $alpha: .8);
            }
        }
    }
</style>
