<!--手机验证码组件-->

<template>
    <div class="t2">
        <div class="form-item">
            <input
                id="formsys_codeNum"
                ref="codeNum"
                v-model.trim="item.code"
                class="form-short-input t2"
                name="验证码"
                type="text"
                placeholder="请输入验证码"
                @focus="focusEvent"
                @blur="blurEvent"
            />
            <button
                ref="codeNumBtn"
                class="btn btn-getCode pressActive"
                @click="getIdfCode"
            >
                {{ codeTxt }}
            </button>
            <!-- <div class="vtf-tip t2" @click="clearTip">{{ tipTxt }}</div> -->
        </div>
    </div>
</template>

<script>
import NetWork from '~publicAsset/libs/network';
import EventBus from '~publicAsset/libs/eventbus';
import { validateForBlur } from '~publicAsset/libs/validation'; // 表单验证
import WeChat from '~publicAsset/libs/init_wechat';
import * as Utils from '../utils.js';
import toast from "~publicAsset/libs/toast";

export default {
    props: ['item', 'get_phone', 'set_idf_num'],
    data: function() {
        return {
            codeTxt: '获取验证码',
            codeType: 0, // 验证码状态（默认未点击0，1正在发送，2重新发送）
            product_id: '',
            tipTxt: '', // 提示文本
            idfState: false // 默认未验证
        };
    },
    created: function() {
        let $this = this;
        EventBus.$on('hideBox', function() {
            if ($this.$refs.codeNum.value == '123') {
                $this.$refs.codeNum.value = '';
            }
        });
        EventBus.$on('setCode', function() {
            console.log('222222222');
            if ($this.$refs.codeNum.value == '') {
                console.log('12344');
                $this.$refs.codeNum.value = '123';
                $this.blurEvent();
            }
        });
        let dataStr = document.getElementById('initData').value;
        this.initData = JSON.parse(dataStr);
        WeChat.init(this.initData);

        // 设置获取验证码按钮点击状态
        EventBus.$on('setCodeState', function(state) {
            if ($this.codeType == 1) {
                // 正在发送中不改变点击状态
                return;
            }
            if (state) {
                // 可点击
                console.log('$this.$refs.codeNumBtn', $this.$refs.codeNumBtn);
                if (window.isSpecialActivity && !window.isShowPhoneVerify) {
                    $this.$refs.codeNum.value = '123';
                    $this.blurEvent();
                }
                $this.$refs.codeNumBtn.removeAttribute('disabled');
                $this.$refs.codeNumBtn.classList.add('pressActive');
            } else {
                $this.$refs.codeNumBtn.disabled = 'disabled';
                $this.$refs.codeNumBtn.classList.remove('pressActive');
            }
        });
    },
    mounted() {
        let $this = this;
        if (window.isSpecialActivity && window.isShowPhoneVerify) {
            console.log('$this.$refs.codeNum', $this.$refs.codeNum);
            $this.$refs.codeNum.removeAttribute('autofocus');
        }
    },
    methods: {
        // 获取验证码
        getIdfCode: function(e) {
            if (this.codeType == 1) {
                // 如果正在获取验证码
                return;
            }
            e.target.focus(); // 隐藏键盘
            let phone = this.get_phone();
            // disabled对touchend无效 需要加多一层验证
            // /////////
            // 临时增加
            window.phone_num = phone;
            /////////
            if (phone == '') {
                toast(this.item.placeholder);
                return;
            }
            if (!/^1\d{10}$/.test(phone)) {
                toast(this.item.formatErrorMsg);
                return;
            }
            let $this = this;
            this.codeType = 1;
            // 请求发送验证码
            // NetWork.request('get_answerer_verify_code', {
            // 发送验证码请求新接口
            NetWork.request(
                'distribute/send_code_recruit_distributor',
                {
                    phone: phone,
                    type: $this.item.idfCodeType || ''
                },
                function(data) {
                    if (!data) {
                        $this.codeType = 0;
                        EventBus.$emit('vueAlert', {
                            desc: '请求失败，请刷新页面重试'
                        });
                    }
                    if (data.code != 0) {
                        $this.codeType = 0;
                        let message = data.data ? data.data.message : '请求失败，请刷新页面重试';
                        EventBus.$emit('vueAlert', {
                            desc: message
                        });
                        return;
                    }
                    // 设置不可点击
                    $this.$refs.codeNumBtn.disabled = 'disabled';
                    $this.$refs.codeNumBtn.classList.remove('pressActive');
                    let num = 60;
                    $this.codeTxt = '已发送（' + num + '）';
                    let timeInterval = setInterval(() => {
                        num--;
                        $this.codeTxt = '已发送（' + num + '）';
                        if (num == 0) {
                            $this.codeTxt = '重新发送';
                            $this.codeType = 0;
                            clearInterval(timeInterval);
                            // 设置可点击
                            $this.$refs.codeNumBtn.removeAttribute('disabled');
                            $this.$refs.codeNumBtn.classList.add('pressActive');
                        }
                    }, 1000);
                }
            );
        },
        // 设置表单验证通过状态
        setFormState: function(state) {
            this.set_idf_num(state);
            this.idfState = state;
        },
        // 失去焦点事件
        blurEvent: function() {
            Utils.fixedIOS12.onblur();
        },
        // 聚焦事件
        focusEvent: function() {
            Utils.fixedIOS12.onfocus();
        }
    }
};
</script>

<style lang="scss" scoped>
.form-item {
    position: relative;
    margin-top: 0.16rem;
}
.form-short-input {
    width: 100%;
    height: 0.88rem;
    padding: 0.24rem;
    box-sizing: border-box;
    border-radius: 0.08rem;
    border: 1px solid #dcdcdc;
    outline: none;
}

.btn {
    height: 0.8rem;
    background-color: transparent;
    font-size: 0.28rem;
    outline: 0;
    &:focus {
        outline: 0;
    }
}

.btn-green {
    border: 0;
    background-color: #ff7d2a;
    color: #fff;
}

/*获取验证码按钮*/
.btn-getCode {
    position: absolute;
    height: 0.72rem;
    text-align: center;
    top: 0.08rem;
    right: 0;
    color: #ff8533;
    padding: 0 0.32rem;
    border-left: 1px #e5e5e5 solid;
}
/*验证提示*/
.vtf-tip {
    right: 2.5rem;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #c8c8c8;
}
</style>
