<!--
 * @Description:
 * @Version: 2.0
 * @Autor: kangpuqing
 * @Date: 2022-01-21 11:01:40
 * @LastEditors: kangpuqing
 * @LastEditTime: 2022-01-21 12:12:34
-->
<template>
    <view v-if="showPass" class="pass-container">
        <view id="passBox"></view>
    </view>
</template>

<script>
/**
 * @file 验证码校验h5组件
 * @author kangpuqing01
 * @categories 业务组件
 * @tags [component]
 */

import {getPassObj} from '@utils/pass';
import {request} from '@utils/request';

export default {
    config: {
        component: true
    },
    props: {
        /**
         * 是否名字人机验证，1命中
         */
        checkCode: {
            type: Number,
            require: true
        },
        /**
         * 回调地址
         */
        callbackUrl: {
            type: String,
            require: true
        }
    },
    data() {
        return {
            showPass: false
        };
    },
    lifetimes: {
        attached() {
            // 是否命中人机验证
            if (this.checkCode) {
                // 当前只支持h5接入
                if (process.env.MARS_ENV === 'h5') {
                    this.showPass = true;
                    this.$mpUpdated(() => {
                        // 人机通用验证能力接入
                        getPassObj({
                            id: 'passBox',
                            cb: data => {
                                if (this.callbackUrl) {
                                    request({
                                        url: this.callbackUrl,
                                        data: {
                                            ds: data && data.ds,
                                            tk: data && data.tk
                                        }
                                    })
                                        .then(res => {
                                            let passed = res && res.data && res.data.verify;
                                            passed && (this.showPass = false);
                                        })
                                        .catch(err => {
                                            console.err(err);
                                        });
                                }
                            }
                        });
                    });
                }
            }
        }
    }
};
</script>

<style lang="less" scoped>
.pass-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    background: rgba(200, 200, 200, 0.7);
    z-index: 999;
    justify-content: center;
    align-items: center;

    #passBox {
        border-radius: 12px;
        overflow: hidden;
    }
}
</style>
