<template>
    <div class="grade-status">
        <div class="nav">
          <!--  <van-icon
                    name="arrow-left"
                    size="20"
                    class="nav-left"
                    @click="handlerBack"
            />-->
            <span class="nav-title">区块链溯源</span>
        </div>
        <div class="forest-content">
            <span class="name-class">{{name}}</span>
            <span class="nameSum-class">{{nameSum}}</span>
            <div class="pass-word">
                <van-password-input
                        :value="value"
                        info="刮开图层，请输入6位溯源密码"
                        :focused="showKeyboard"
                        @focus="showKeyboard = true"
                        :gutter="5"
                />
                <!-- 数字键盘 -->
                <van-number-keyboard
                        :show="showKeyboard"
                        @input="onInput"
                        @delete="onDelete"
                        @blur="showKeyboard = false"
                />
            </div>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import { PasswordInput, NumberKeyboard } from 'vant';
    import { scanCode,} from "@/api/security";
    Vue.use(PasswordInput);
    Vue.use(NumberKeyboard);
    export default {
        data() {
            return {
                name:'西田森商品',
                nameSum:'溯源查询',
                value: '',
                showKeyboard: true,
                shaValue:'',
            };
        },
        created() {
            this.sheetShow = true
            let params = window.location.search;
            if (params) {
                let shaValue = params.split("=")[1];
                if (shaValue) {
                    this.shaValue = shaValue;
                }
            }
        },
        methods: {
           /* handlerBack() {
                try {
                    this.$bridgeToAppFun.navigateBack();
                } catch {
                    this.$router.go(-1);
                }
            },*/
            onInput(key) {
                this.value = (this.value + key).slice(0, 6);
                if(this.value.length == 6){
                    const params = {
                        securityCode: this.value,
                        shaValue:this.shaValue,
                    };
                    scanCode(params).then(res => {
                        if (res.code == 0) {
                            localStorage.setItem("shaValue", res.data);
                            this.$router.push("/certification");
                        } else {
                            this.$toast.fail(res.message);
                        }
                    });
                }
            },
            onDelete() {
                this.value = this.value.slice(0, this.value.length - 1);
            }
        }
    };
</script>

<style lang="scss" scoped>
    $white: #ffffff;
    .grade-status {
        width: 100%;
        height: 298px;
        background-image: url("../assets/images/森林状态.png");
        background-size: cover;
        .nav {
            position: relative;
            display: flex;
            align-items: center;
            width: 100%;
            height: 46px;
            color: #fff;
            .nav-left {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 52px;
                height: 100%;
                line-height: 46px;
                text-align: center;
            }
            .nav-title {
                max-width: 60%;
                margin: 0 auto;
                font-weight: bold;
                font-size: 16px;
            }
        }
        .forest-content {
            text-align: center;
            padding-top: 25px;
            width: 345px;
            height: 578px;
            margin-left: 15px;
            background-color: #ffffff;
            .name-class{
                font-size: 16px;
                color: #666666;
                float: left;
                padding-left: 20px;
            }
            .nameSum-class{
                display: block;
                font-size: 24px;
                color: #333333;
                padding-top: 89px;
            }
            .pass-word{
                padding-top: 40px;
                .van-password-input__item{
                    background-color: #ebedf0;
                }
            }
        }
    }
</style>
<style lang="scss">
</style>