<template>
    <view>
        <view>{{ item.text }}</view>
        <!-- 数字键盘 -->
        <view
            class="kbord"
            :class="isShow ? 'kb-enter': 'kb-leave'">
            <!-- 输入框 -->
            <view class="kb-input c-color-gray c-line-top">
                <text class="c-font-medium">{{ item.label }}：</text>
                <text>{{ value }}</text>
            </view>
            <view>
                <!-- 数字 -->
                <view class="kb-num-left">
                    <view
                        v-for="o in 10"
                        class="kb-num-cell"
                        :class="{'kb-num-cell-middle': o === 10}"
                        @tap="onTapCell(o)">{{ o === 10 ? 0 : o }}</view>
                </view>
                <!-- 按钮 -->
                <view class="kb-num-right">
                    <view
                        @tap="onTapDel"
                        class="kb-del kb-num-cell"></view>
                    <view
                        @tap="onTapSend"
                        class="kb-send kb-num-cell">发送</view>
                </view>
            </view>
        </view>
        <!-- 验证码获取器 -->
        <im-sms
            v-if="item.name === 'sms'"
            :phone="phone"
            :sms="sms"
            @success="onLoginSuccess"></im-sms>
    </view>
</template>

<script>
import ImSms from './im-sms';

let phone = '';

export default {
    config: {
        component: true
    },
    components: {
        'im-sms': ImSms
    },
    props: {
        item: {
            type: Object,
            default: {}
        },
        isLogin: {
            type: Boolean,
            default: false
        },
        isLast: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            value: '',
            phone: phone,
            sms: '',        // 验证码
            isShow: false   // 是否显示键盘
        };
    },
    watch: {
        isLast(value) {
            if (value === false) {
                this.isShow = false;
            }
        }
    },
    lifetimes: {
        attached() {
            // 判断登录态
            if (this.isLogin === false) {
                // 调起键盘
                const timeid = setTimeout(() => {
                    this.isShow = true;
                    this.$emit('heightChange', {
                        pos: 'bottom',
                        height: 259
                    });
                    clearTimeout(timeid);
                }, 800);
            }
        }
    },
    methods: {
        // 点击数字
        onTapCell(num) {
            this.value += num === 10 ? 0 : num;
        },
        // 点击删除(从最后一位逐个删除)
        onTapDel() {
            this.value = this.value.slice(0, this.value.length-1);
        },
        // 点击发送
        onTapSend() {
            const {
                callbackUrl,
                name
            } = this.item;

            // 手机号
            if(name === 'phone') {
                const isPhone = this.isValidPhone(this.value);
                if (isPhone === true) {
                    phone = this.value;
                    this.phone = phone;
                    this.$emit('questionReply', {
                        params: this.phone,
                        value: this.phone,
                        callbackUrl: callbackUrl
                    });
                    this.value = '';
                    this.isShow = false;
                }
                else {
                    getApp().$api.showToast({
                        title: '手机号不符合格式，请重新输入',
                        icon: 'none'
                    });
                }
            }
            // 验证码
            else if (name === 'sms') {
                this.sms = this.value;
            }
        },
        // 验证手机号
        isValidPhone(phone) {
            return /^1[3456789][0-9*]{9}$/.test(phone);
        },
        onLoginSuccess(info) {
            this.$emit('questionReply', {
                params: info.phone,
                value: info.sms,
                callbackUrl: this.item.callbackUrl
            });
            this.$emit('heightChange', {
                pos: 'bottom',
                height: 0
            });
        }
    }
};
</script>

<style lang="less">
.kbord {
    position: fixed;
    background-color: #FFF;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    transition: transform .3s;
}
.kb-enter {
    transform: translate3d(0, 0, 0);
}
.kb-leave {
    transform: translate3d(0, 100%, 0);
}
.kb-input {
    padding: 0 12px;
    height: 42px;
    line-height: 42px;
}
.kb-num-left {
    padding-right: 25%;
}
.kb-num-right {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 25%;
    height: 216px;
}
.kb-num-cell {
    position: relative;
    width: calc(33.33333333%);
    font-size: 24px;
    font-style: normal;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    height: 54px;
    line-height: 54px;
    &:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 200%;
        height: 200%;
        transform: scale(0.5);
        transform-origin: 0 0;
        pointer-events: none;
        box-sizing: border-box;
        border-color: #e5e5e5;
        border-style: solid;
        border-width: 1px 1px 0 0;
    }
    &:active {
        background-color: #f2f2f2;
    }
}
.kb-num-cell-middle {
    width: 100%;
}
.kb-del {
    font-size: 0;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAeCAMAAABg6AyVAAAAbFBMVEUAAAAfHiIdHB4eHR8dHR4eHB4dHB4dHR8gICIdHB4dHB4dHB4dHB8eHh8hISEeHR8fHB8fHR8fHR8fHx8eHiArKyszMzMeHB8eHB8fHR8eHiAeHh4dHB4vLjDY2Nn////b29zKysq9vb28vLzkfBRpAAAAHHRSTlMAK/PW+I/llBv77N1kSCPwWlFAOTMGBb28hHlu08g5sgAAAMlJREFUOMuV1MsWgiAQgGHQyOx+s+sgYO//jnnMGIdDDfwbN99CYEDQFiVEKkolPUG7gl9VTWC31NKuDbVz+Fc1tRJtPDmxS2BS3p5ZC+XXnnbAVoz2WEBCH7uZAalzGoa06whGiznT6sG2xgX4QO2Aej1+KN7XBKL2FvGaMtTWBhbQhtoaYzVQrHKwuGf8hhAPSF5g3xPSt45sCHcouNWx436FGA+RHyQcD35EcUj54U8ff4WYvVi1zLjelUh/OG6XjOeLWv5hfAOI+HLwwOAqhAAAAABJRU5ErkJggg==") no-repeat center center;
    -webkit-background-size: auto 15px;
    background-size: auto 15px;
    width: 100%;
    height: 108px;
    line-height: 108px;
}
.kb-send {
    font-size: 20px;
    color: #fff;
    background-color: #02b7ca;
    width: 100%;
    height: 108px;
    line-height: 108px;
}

</style>