<template>
    <view class="box">
        <!-- 地址弹层 -->
        <view
            v-if="addressInfo && showUserAddr"
            class="box__addrmodal"
            @touchmove.prevent.stop
        />
        <view
            v-if="addressInfo && showUserAddr"
            class="box__addrmodal__c"
            @touchmove.prevent.stop
        >
            <view
                v-for="(f, i) in addressInfo.inputConfig"
                :key="i"
                use-trackby
                class="box__addrmodal__c__f"
            >
                <text class="c-font-normal form__tit">{{ f.label }}</text>
                <input
                    v-if="f.name !== 'authCode' && f.name !== 'btn' && f.name !== 'tip'"
                    v-model="f.value"
                    :name="f.name"
                    :focus="f.focus || false"
                    :placeholder="f.placeholder || ''"
                    :minlength="f.minlength ? f.minlength - 0 : 1"
                    :maxlength="f.maxlength ? f.maxlength - 0 : 100"
                    type="text"
                    cursor-spacing="20"
                    placeholder-style="font-size: 12px"
                    placeholder-class="form__input__ph"
                    class="form__input"
                    @focus="formFocus($event, i)"
                    @input="formInput($event, i)"
                    @blur="formBlur($event, i)"
                >
                <input
                    v-else-if="f.name === 'authCode'"
                    v-model="f.value"
                    :focus="f.focus"
                    :minlength="f.minlength ? f.minlength - 0 : 1"
                    :maxlength="f.maxlength ? f.maxlength - 0 : 100"
                    :class="{sms: f.name === 'anthCode'}"
                    :name="f.name"
                    type="number"
                    cursor-spacing="20"
                    placeholder-class="form__input__ph"
                    class="form__input"
                    @focus="formFocus($event, i)"
                    @input="formInput($event, i)"
                    @blur="formBlur($event, i)"
                >
                <view v-if="f.name === 'authCode'" class="sms__btn">
                    <c-icon
                        v-show="f.showClose"
                        class="sms__btn__close"
                        name="close-circle-solid"
                        font-size="14px"
                        @tap.stop="formClear($event, i)"
                    />
                    <text
                        :class="{disabled: f.smsBtnDisabled}"
                        class="sms__btn__text c-font-normal c-color-gray"
                        @tap.stop="onSendSmsCode(f, i)"
                    >{{ text ? text : '获取验证码' }}</text>
                </view>
            </view>
            <template v-if="addressInfo.tip">
                <view
                    v-for="(t, i) in addressInfo.tip"
                    :key="t"
                    class="box__addrmodal__c__tips c-font-normal c-color-gray"
                    :class="{last: i === addressInfo.tip.length - 1}"
                >
                    {{ t }}
                </view>
            </template>
            <view
                v-if="addressInfo.btn"
                class="box__addrmodal__c__btn"
                @tap.stop="onSubmitUserForm"
            >{{
                addressInfo.btn.text || '填写完成'
            }}</view>
            <view class="m-icon m-icon-coupon-close box__addrmodal__c__close" @tap.stop="onCloseModal"/>
        </view>
    </view>
</template>

<script>
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import {request} from '@utils/request';
import {apiHost} from '@utils/conf';
export default {
    config: {
        component: true
    },
    components: {
        CIcon
    },
    props: {
        actId: {
            type: String || Number,
            default: ''
        },
        showUserAddr: {
            type: Boolean,
            default: false
        },
        addressInfo: {
            type: Object,
            default: () => {}
        }
        // 配置展示的具体项
        // configData: {
        //     type: Array,
        //     default: () => []
        // }
    },
    data() {
        return {
            smsCodeTimer: null,
            text: '' //倒计时展示
        };
    },
    beforeDestroy() {
        this.smsCodeTimer && clearInterval(this.smsCodeTimer);
    },
    methods: {
        // 校验手机号
        isValidPhoneNumber(string) {
            const result = /^1[3456789][0-9]{9}$/.test(string);
            return result;
        },
        // 发送验证码, 验证码倒计时
        onSendSmsCode(f, fi) {
            if (f.smsBtnDisabled) {
                return;
            }
            let smsFi =
                this.addressInfo && this.addressInfo.inputConfig
                    ? this.addressInfo.inputConfig.findIndex(f => f.name === 'phone')
                    : [];

            let phone = smsFi > -1 ? this.addressInfo.inputConfig[smsFi].value : '';
            if (!phone) {
                this.$set(this.addressInfo.inputConfig[smsFi], 'focus', true);
                this.$api.showToast({title: this.addressInfo.inputConfig[smsFi].placeholder, icon: 'none'});
                return;
            }
            request({
                url: apiHost + this.addressInfo.inputConfig[fi].asyncUrl,
                method: 'POST',
                header: {
                    'content-type': 'application/x-www-form-urlencoded'
                },
                data: {
                    phone
                }
            }).then(res => {
                let time = 60;
                this.$set(this.addressInfo.inputConfig[fi], 'smsBtnDisabled', true);
                this.$api.showToast({title: '验证码已发送', icon: 'none'});

                this.smsCodeTimer = setInterval(() => {
                    if (time > 0) {
                        // this.$set(this.addressInfo.inputConfig[fi], 'smsText', `${time}s重新获取`);
                        this.text = `${time}s重新获取`;
                        --time;
                    } else {
                        clearInterval(this.smsCodeTimer);
                        this.text = '获取验证码';
                        this.$set(this.addressInfo.inputConfig[fi], 'smsBtnDisabled', false);
                        // this.$set(this.addressInfo.inputConfig[fi], 'smsText', '获取验证码');
                    }
                }, 1000);
            });
        },
        // form focus
        formFocus(e, i) {
            this.$set(this.addressInfo.inputConfig[i], 'focus', true);
            this.$set(this.addressInfo.inputConfig[i], 'showClose', true);
        },
        // form input
        formInput(e, i) {
            const value = e.detail.value;
            this.$set(this.addressInfo.inputConfig[i], 'value', value);
        },
        // form blur
        formBlur(e, i) {
            this.$set(this.addressInfo.inputConfig[i], 'focus', false);
            if (this.addressInfo.inputConfig[i].name !== 'authCode') {
                this.$set(this.addressInfo.inputConfig[i], 'showClose', false);
            }
        },
        // form value clear
        formClear(e, i) {
            this.$set(this.addressInfo.inputConfig[i], 'value', '');
            this.$set(this.addressInfo.inputConfig[i], 'showClose', false);
        },
        // 去空格
        trim(str) {
            if (typeof str === 'string') {
                return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
            }
            return str;
        },
        onSubmitUserForm() {
            this.$emit('submitReceiveForm', this.addressInfo.inputConfig);
        },
        onCloseModal() {
            this.$emit('closeReceiveForm');
        }
    }
};
</script>

<style lang="less" scoped>
.box {
    &__addrmodal {
        position: fixed;
        z-index: 920;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
        &__c {
            width: 73vw;
            height: 3.95rem;
            padding: 0.3rem 0.2rem;
            background-color: #fff;
            transform: translateY(-50%);
            background-size: 100% auto;
            box-sizing: border-box;
            border-radius: 0.1rem;
            font-family: PingFangSC-Medium, Droid Sans Fallback;
            position: fixed;
            z-index: 920;
            transform: translate(-50%, -50%);
            top: 50vh;
            left: 50vw;
            // &.list {
            //     height: 74vw;
            //     display: flex;
            //     flex-direction: column;
            //     justify-content: space-between;
            //     padding: 0.35rem 0.3rem 0.3rem;
            // }
            &__f {
                display: flex;
                position: relative;
                margin-bottom: 0.15rem;
                .form__tit {
                    width: 0.6rem;
                    font-family: PingFangSC-Medium;
                    color: #666;
                    line-height: 0.38rem;
                }
                .form__input {
                    background-color: #f8f8f8;
                    height: 0.38rem;
                    line-height: 0.38rem;
                    border-radius: 0.19rem;
                    color: #666;
                    box-sizing: border-box;
                    padding: 0 0.15rem;
                    outline: none;
                    flex: 1;
                    &__ph {
                        color: #858585;
                        font-size: 12px;
                    }
                    &::placeholder {
                        color: #858585;
                        font-size: 12px;
                    }
                    &.sms {
                        padding-right: 1.2rem;
                        width: calc(100% - 0.55rem);
                    }
                }
                .disabled {
                    opacity: 0.5;
                }
                .sms__btn {
                    position: absolute;
                    right: 0.15rem;
                    top: 0.07rem;
                    height: 0.38rem;
                    &__close {
                        color: #d8d8d8;
                        margin-right: 0.08rem;
                        position: relative;
                        z-index: 9;
                    }
                    &__text {
                        &::before {
                            content: '';
                            display: inline-block;
                            width: 1px;
                            height: 0.13rem;
                            background: #eee;
                            position: relative;
                            top: 0.01rem;
                            margin-right: 0.08rem;
                        }
                    }
                }
            }
            &__l {
                display: inline-block;
                vertical-align: middle;
                font-family: PingFangSC-Regular;
                position: relative;
                &.receiver {
                    font-family: PingFangSC-Medium;
                    font-size: 0.17rem;
                    color: #333;
                    margin-right: 0.1rem;
                }
                &.phone {
                    font-size: 0.12rem;
                    color: #999;
                }
                &.address {
                    margin-top: 0.05rem;
                    color: #333;
                    font-size: 0.14rem;
                    position: absolute;
                    left: 0.3rem;
                    right: 0.2rem;
                    top: 0.57rem;
                }
            }
            &__right {
                &::before {
                    content: '';
                    display: block;
                    height: 1px;
                    background: #e0e0e0;
                    margin-bottom: 0.3rem;
                    transform: scaleY(0.5);
                }
            }
            &__tips {
                text-align: center;
                width: 1.96rem;
                margin: 0 auto;
                &.last {
                    margin-bottom: 0.19rem;
                }
            }
            &__btn {
                background-image: linear-gradient(144deg, #ff8c02 0%, #fe3303 100%, #f8c76c 100%);
                width: 2rem;
                height: 0.4rem;
                line-height: 0.4rem;
                border-radius: 0.2rem;
                color: #fff;
                text-align: center;
                font-size: 0.18rem;
                margin: 0 auto;
                &.phone {
                    background-image: linear-gradient(134deg, #00cfa3 0%, #05cfcd 61%, #00d3ea 100%);
                    box-shadow: 0 5px 10px 0 rgba(0, 200, 200, 0.3);
                }
            }
            &__close {
                position: absolute;
                left: 0;
                right: 0;
                bottom: -13vw;
                color: #fff;
                font-size: 0.22rem;
                text-align: center;
            }
        }
    }
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #f8f8f8 inset;
}

@media only screen and (max-width: 320px) {
    .box__addrmodal__c {
        width: 85vw;
        height: auto;
        &.list {
            padding: 0.15rem 0.2rem;
        }
        &__tips {
            margin: 0 auto 0.1rem;
        }
        &__f {
            margin-bottom: 0.1rem;
        }
    }
    .box__act__prize__run .notice-bar {
        top: -2.3vw;
    }
}
@media screen and (max-width: 320px) {
    .box__addrmodal__c {
        &.list {
            padding: 0.15rem 0.2rem;
        }
        &__tips {
            margin: 0 auto 0.1rem;
        }
        &__f {
            margin-bottom: 0.1rem;
        }
    }
    .box__pmodal__c {
        &__tit {
            margin-top: 2vw;
            margin-bottom: 0.1rem;
        }
        &__name {
            margin-bottom: 0.1rem;
        }
        &__valid {
            margin-top: 0;
        }
        &__btn {
            margin: 0.1rem auto 0;
        }
        &__p4 {
            .left {
                margin-left: 0;
            }
        }
    }
}
@media screen and (min-width: 321px) and (max-width: 360px) {
    .box__addrmodal__c {
        padding: 0.2rem;
        height: auto;
        overflow: hidden;
        // &__tips {
        //     margin: 0 auto 0.1rem;
        // }
        &__f {
            margin-bottom: 0.1rem;
            .form__input.sms {
                padding-right: 1rem;
            }
        }
    }
    .box__pmodal__c {
        &__tit {
            margin-top: 2vw;
            margin-bottom: 0.1rem;
        }
        &__name {
            margin-bottom: 0.1rem;
        }
        &__valid {
            margin-top: 0.2rem;
        }
        &__btn {
            margin: 0.1rem auto 0;
        }
        &__p4 {
            .left {
                margin-left: 0;
            }
        }
    }
}
@media screen and (min-width: 361px) and (max-width: 375px) {
    .box__addrmodal__c {
        padding: 0.22rem 0.2rem 0.25rem;
        width: 80vw;
        height: auto;
        // &__tips {
        //     margin: 0 auto 0.1rem;
        // }
        &__f {
            margin-bottom: 0.1rem;
        }
    }
    .box__pmodal__c {
        &__tit {
            margin-top: 4vw;
        }
        &__name {
            margin-bottom: 0.1rem;
        }
        &__valid {
            margin-top: 0.2rem;
        }
        &__btn {
            margin: 0.1rem auto 0;
        }
        &__p4 {
            .left {
                margin-left: 1vw;
            }
        }
    }
}
@media screen and (min-width: 376px) and (max-width: 400px) {
    .box__addrmodal__c {
        padding: 0.25rem;
        &__tips {
            margin: 0 auto 0.1rem;
        }
        &__f {
            margin-bottom: 0.1rem;
        }
    }
    .box__pmodal__c {
        &__tit {
            margin-top: 5vw;
        }
        &__p4 {
            .left {
                margin-left: 2vw;
            }
        }
    }
}
@media screen and (min-width: 415px) {
    .box__addrmodal__c {
        padding: 0.3rem;
        &__tips {
            margin: 0 auto 0.15rem;
        }
        &__f {
            margin-bottom: 0.15rem;
        }
    }
}
</style>
