<template>
    <view>
        <view>{{ item.text }}</view>
        <!--手机填写框-->
        <view v-if="item.name === 'phonecollect'">
            <view class="phone-input-wrap">
                <input
                    v-if="!isSubmit"
                    placeholder="请在此输入手机号"
                    :type="keyboard"
                    :autofocus="item.focus === 0 ? false : true"
                    :maxlength="maxlen"
                    class="phone-input-item"
                    :class="item.color ? item.color : 'green'"
                    :value="value"
                    @input="phoneNumberInput"
                    @focus="onFocus"
                />
                <view v-else class="ipt-plcholder-radius phone-input-item">{{value}}</view>
            </view>
            <view
                @tap.stop="onTapSend(item)"
                :class="['c-span-btn', 'submit-btn-wrap',
                item.color ? item.color : 'green',
                (isSubmit || value.length !== 11)?'submit-btn-wrap-disabled':'']">
                <login-btn
                    :disabled="!(item.msUrl || item.sfUrl) || item.login"
                    @onTapStart="onTapStart(item)"
                    @onLoginSuccess="onTapSend(item)"
                >
                    提交
                </login-btn>
            </view>
            <!--iphonex重新填写电话时，不能输入-->
            <view class="template-hidden">{{value}}</view>
        </view>
    </view>
</template>

<script>
/**
 * @file 信息收集电话
 * @author huanghongwei
 * @categories 业务组件
 * @tags [component]
 */

import {navigate} from '../../utils/navigate';
import {request} from '../../utils/request';
import {throttle} from '../../utils/core';
import {pay} from '../../utils/pay';
import LoginBtn from '@components/common/login-btn';
let phone = '';

export default {
    config: {
        component: true
    },
    components: {
        LoginBtn
    },
    props: {
        /**
         * x
         */
        item: {
            type: Object,
            default: {}
        },
        /**
         * x
         */
        isLast: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            value: '',
            phone: phone,
            keyboard: 'text', // 初始化为text，因为rd传默认电话有'*'
            maxlen: 11,
            focus: true,
            isSubmit: false// 提交后不可点
        };
    },
    watch: {
        isLast(value) {
            if (value === false && this.item.always !== 1) {
                this.isSubmit = true;
            }
        }
    },
    lifetimes: {
        attached() {
            if (this.item.default) {
                this.value = this.item.default;
            }
            else {
                this.keyboard = 'number';
            }
        }
    },
    methods: {
        onTapStart(item) {
            if (process.env.MARS_ENV === 'h5') {
                this.onTapSend(item);
            }
        },
        // 点击发送
        onTapSend: throttle(function (item) {
            if (this.isSubmit) {// 已经提交成功后不可点
                return;
            }
            // 手机号
            if (item.name === 'phonecollect') {
                // 11位后可点
                if (this.value.length !== 11) {
                    return;
                }
                const isPhone = this.isValidPhone(this.value);
                if (isPhone === true) {
                    phone = this.value;
                    this.phone = phone;
                    if (this.item.callbackUrl) {
                        /**
                         * 提交
                         * @event questionReply
                         */
                        this.$emit('questionReply', {
                            name: this.phone,
                            value: this.phone,
                            callbackUrl: this.item.callbackUrl
                        });
                        // this.isSubmit = true;
                    }
                    if (item.msUrl || item.sfUrl) {
                        navigate({
                            url: item.msUrl || item.sfUrl
                        });
                    }
                    if (item.type && item.type === 'changePhone' && item.submitUrl) {
                        request({
                            data: {
                                phone: this.phone
                            },
                            url: item.submitUrl,
                            isFirstScreen: false,
                            isNeedLogin: true
                        }).then(resp => {
                            let data = resp.data;
                            if (data.pay_url) {
                                pay({
                                    url: data.pay_url
                                });
                                this.$emit('submit');
                                return;
                            }
                            else if (data.jumpUrl) {
                                navigate({
                                    url: data.jumpUrl
                                });
                                this.$emit('submit');
                            }
                        });
                    }
                    if (!item.login) {// 未登录，用户输入手机号带到下一页
                        this.$api.setStorageSync('phoneipt', this.phone);
                    }
                }
                else {
                    /* global getApp */
                    this.$api.showToast({
                        title: '请输入正确的手机号',
                        icon: 'none'
                    });
                }
            }
        }, 1000),
        // 验证手机号
        isValidPhone(phone) {
            return /^1[3456789][0-9*]{9}$/.test(phone) || /[*]/.test(phone);
        },
        phoneNumberInput(e) {
            this.value = e.detail.value;
        },
        onFocus() {
            this.keyboard = 'number';
            this.value = '';
        }
    }
};
</script>

<style lang="less">
.phone-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    margin: 10px 0;
    padding: 0 14px;
    background: #f6f6f6;
    border-radius: 19px;
    height: 38px;
}

.phone-input-item {
    outline: none;
    height: 20px;
    line-height: 20px;
    font-size: 16px;
    color: #333;
    background: #f6f6f6;

    &.green {
        caret-color: #00c8c8;
    }

    &.blue {
        caret-color: #489af6;
    }
}

.ipt-plcholder-radius {
    border-radius: 19px;
}

.template-hidden {
    position: absolute;
    bottom: 0;
    visibility: hidden;
}

.submit-btn-wrap {
    border-radius: 19px;
    color: #fff;
    height: 38px;
    line-height: 38px;
    text-align: center;

    &.green {
        background: #00c8c8;
    }

    &.blue {
        background: #489af6;
    }

    &-disabled {
        opacity: .5;
    }
}
</style>