<template>
    <view v-if="data" class="insurance-plan">
        <c-popup
            :show="isShow"
            show-close
            :show-close-handler="false"
            close-icon="close"
            :btn-close="false"
            :row-tile="true"
            :btns="data.btns || btns"
            close-icon-size="22px"
            max-height="70vh"
            mask-bg-color="rgba(0, 0, 0, .7)"
            :visibility-only-mask="true"
            @close="handlePopupPlanClose"
            @btntap="handlePopupPlanConfirm"
        >
            <view
                v-if="data.status === '定向预约' && data.imgUrl"
                slot="topSlot"
                class="insurance-plan__top"
            >
                <view class="insurance-plan__top__title">
                    <image class="insurance-plan__top__title__picture" src="https://medactivity.cdn.bcebos.com/ydh/head-sculpture.png"/>
                    <view class="insurance-plan__top__title__infor c-color-gray c-font-normal">
                        <view class="insurance-plan__top__title__infor__name c-font-medium	c-color-title c-font-wb">李军涛</view>
                        <view class="insurance-plan__top__title__infor__company">
                            中国平安保险公司
                            <view class="line"/>
                            从业<text class="c-color-main">12</text>年
                        </view>
                    </view>
                </view>
                <view class="insurance-plan__top__tips c-font-normal">请提交您的联系信息，方便该顾问尽快联系您</view>
            </view>
            <view
                v-else-if="(data.status === 'tpreserve' || data.status === 'hmb') && data.title"
                slot="topSlot"
                class="insurance-plan__top c-tac c-gap-top-xmiddle"
            >
                <view class="c-color-title c-font-wb c-font-big-less">{{ data.title }}</view>
                <view v-if="data.textList && data.textList.length" class="city-insurance__notes__item__text c-font-normal">
                    <text
                        v-for="(item, index) in data.textList"
                        :key="index"
                        :style="{color: item.color}"
                    >{{ item.text }}</text>
                </view>
            </view>
            <view class="insurance-plan__content">
                <view class="insurance-plan__content__name">
                    <view class="insurance-plan__content__name__title c-font-medium-less c-color-title	">称呼</view>
                    <input
                        type="text"
                        placeholder="请输入您的称呼"
                        placeholder-style="color: #B8B8B8; fontSize: 0.15rem;"
                        :maxlength="10"
                        class="insurance-plan__content__name__input"
                        :value="planNameValue"
                        @input="onInputName"
                        @focus="inputTap('consult_name')"
                    >
                    <view
                        :style="{position: 'relative', margin: '0 0 0 0.08rem'}"
                        @tap="swtichSex(1)"
                    >
                        <view
                            :class="['insurance-plan__content__name__btn', 'c-font-13', planSex === 1 && 'checedSex']"
                        >
                            先生
                        </view>
                        <view :class="[planSex === 0 || planSex === -1 ? 'bordermini' : '']"/>
                    </view>
                    <view
                        :style="{position: 'relative', margin: '0 0 0 0.08rem'}"
                        @tap="swtichSex(0)"
                    >
                        <view
                            :class="['insurance-plan__content__name__btn', 'c-font-13', 'woman', planSex === 0 && 'checedSex']"
                        >
                            女士
                        </view>
                        <view :class="[planSex === 1 || planSex === -1 ? 'bordermini' : '']"/>
                    </view>
                </view>
                <view class="c-line-superfine-after"/>
                <view class="insurance-plan__content__phone">
                    <view class="insurance-plan__content__phone__title c-font-medium-less c-color-title">手机号</view>
                    <input
                        type="phone"
                        placeholder="务必填写，方便联系您"
                        placeholder-style="color: #B8B8B8; fontSize: 0.15rem;"
                        :maxlength="11"
                        class="insurance-plan__content__phone__input"
                        :value="planPhoneValue"
                        @input="onInputPhone"
                        @focus="inputTap('consult_phone')"
                    >
                </view>
                <view class="c-line-superfine-after"/>
                <view class="insurance-plan__content__verify-code">
                    <view class="insurance-plan__content__verify-code__title c-font-medium-less c-color-title">验证码</view>
                    <input
                        type="number"
                        placeholder="请输入验证码"
                        placeholder-style="color: #B8B8B8; fontSize: 0.15rem;"
                        :maxlength="6"
                        class="insurance-plan__content__verify-code__input"
                        :value="planVerifyCodeValue"
                        @input="onInputVerifyCode"
                        @focus="inputTap('consult_verify')"
                    >
                    <view
                        class="insurance-plan__content__verify-code__getcode"
                        :style="{color: checkPlanInput && codeStatus != 1 ? '#00C8C8' : '#B8B8B8'}"
                        @tap="getVerifyCode"
                    >
                        {{ codeText }}{{ codeStatus === 1 ? '秒后重新获取' : '' }}
                    </view>
                </view>
                <view class="c-line-superfine-after"/>
            </view>
        </c-popup>
    </view>
</template>

<script>
/**
 * @file 保险商城弹窗
 * @author yinlejia
 * @categories 业务组件
 * @tags [component]
 */
import CPopup from '@baidu/med-ui/components/Popup/Popup';
import * as conf from '@utils/conf';
import {request} from '@utils/request';
import {ubcSend} from '@utils/log';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CPopup,
    },
    props: {
        /* 数据 */
        data: {
            type: Object,
            default: () => {
                return {};
            }
        },
        // 显示
        isShow: {
            type: Boolean,
            default: false
        },
        // 来源
        resoure: {
            type: String,
            default: ''
        },
        // 打点
        log: {
            type: Object,
            default: () => {
                return {};
            }
        },
        // 城市
        city: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            planNameValue: '',
            planSex: -1, // 0 女 1 男
            planPhoneValue: '',
            planVerifyCodeValue: '',
            checkPlanInput: false,
            btns: [],
            codeText: '获取验证码',
            codeStatus: 0,
            timer: null,
        };
    },
    methods: {
        getVerifyCode() {
            if (this.codeStatus === 0 || this.codeStatus === 2) {
                if (!this.checkInput()) {
                    return;
                }
                const url = conf.goApiHost + '/insurance/api/v1/sms/code';
                request({
                    url,
                    data: {
                        mobile: this.planPhoneValue
                    },
                    method: 'POST',
                    header: {
                        'content-type': 'application/x-www-form-urlencoded'
                    }
                }).then(res => {
                    if (res.data.msg){
                        this.$api.showToast({
                            title: res.data.msg,
                            icon: 'none',
                        });
                    }
                    this.codeStatus = 1;
                    this.codeText = 60;
                    this.timer = setInterval(() => {
                        this.codeText -= 1;
                        if (this.codeText === 0) {
                            clearInterval(this.timer);
                            this.codeStatus = 2;
                            this.codeText = '重新获取';
                        }
                    }, 1000);
                });
            }
        },
        handlePopupPlanConfirm() {
            ubcSend({
                type: 'clk',
                value: 'consult_submit',
                ext: Object.assign({
                    pd: 'bx',
                    value_type: this.data.type,
                }, this.log.ext || {})
            });
            if (this.checkInput()) {
                if (!this.planVerifyCodeValue.length) {
                    this.$api.showToast({
                        title: '请输入验证码',
                        icon: 'none',
                    });
                    return;
                }
                if (this.planVerifyCodeValue.length < 6) {
                    this.$api.showToast({
                        title: '验证码输入错误，请核对后重新输入',
                        icon: 'none',
                    });
                    return;
                }
                const url = conf.goApiHost + '/insurance/api/v1/reserve/new';
                request({
                    url,
                    data: {
                        mobile: this.planPhoneValue,
                        smsCode: this.planVerifyCodeValue,
                        productType: this.data.status,
                        sex: this.planSex,
                        userName: this.planNameValue,
                        city: this.city
                    },
                    method: 'POST',
                    header: {
                        'content-type': 'application/x-www-form-urlencoded'
                    }
                }).then(res => {
                    this.$api.showToast({
                        title: res.data.msg || '网络不好，请稍后重试',
                        icon: 'none',
                    });
                    if (res.data.msg) {
                        this.handlePopupPlanClose();
                    }
                });
            }
        },
        checkInput() {
            const exp = /^1[3456789][0-9*]{9}$/;
            if (!this.planNameValue.length) {
                this.$api.showToast({
                    title: '请输入您的称呼',
                    icon: 'none',
                });
                return false;
            } else if (this.planSex === -1) {
                this.$api.showToast({
                    title: '请选择您的性别',
                    icon: 'none',
                });
                return false;
            } else if (!this.planPhoneValue.length) {
                this.$api.showToast({
                    title: '请输入您的手机号',
                    icon: 'none',
                });
                return false;
            } else if (!exp.test(this.planPhoneValue)) {
                this.$api.showToast({
                    title: '请输入正确的手机号',
                    icon: 'none',
                });
                return false;
            }
            return true;
        },
        handlePopupPlanClose() {
            this.planNameValue = '';
            this.planVerifyCodeValue = '';
            this.planPhoneValue = '';
            this.planSex = -1;
            this.codeStatus = 0;
            this.codeText = '获取验证码';
            clearInterval(this.timer);
            this.$emit('onClose');
        },
        checkPlanInputFun() {
            const exp = /^1[3456789][0-9*]{9}$/;
            if (this.planSex !== -1 && exp.test(this.planPhoneValue) && this.planNameValue.length) {
                this.checkPlanInput = true;
            } else {
                this.checkPlanInput = false;
            }
        },
        swtichSex(sex) {
            ubcSend({
                type: 'clk',
                value: 'consult_gender',
                ext: Object.assign({
                    pd: 'bx',
                    value_type: this.data.type,
                }, this.log.ext || {})
            });
            this.planSex = sex;
            this.checkPlanInputFun();
        },
        onInputName(e) {
            this.planNameValue = e.detail.value;
            this.checkPlanInputFun();
        },
        onInputPhone(e) {
            this.planPhoneValue = e.detail.value;
            this.checkPlanInputFun();
        },
        onInputVerifyCode(e) {
            this.planVerifyCodeValue = e.detail.value;
        },
        inputTap(type) {
            ubcSend({
                type: 'clk',
                value: type,
                ext: Object.assign({
                    pd: 'bx',
                    value_type: this.data.type,
                }, this.log.ext || {})
            });
        }
    }
};
</script>

<style lang="less" scoped>
.insurance-plan {
    &__top {
        color: #b8b8b8;
        margin-bottom: 0.15rem;
        &__title {
            margin: 0.17rem 0 0.17rem 0.17rem;
            display: flex;
            &__picture {
                height: 0.52rem;
                flex: 0 0 0.52rem;
                margin-right: 0.08rem;
            }
            &__infor {
                display: flex;
                flex-wrap: wrap;
                &__name {
                    flex: 0 0 100%;
                }
                &__company {
                    flex: 0 0 100%;
                    display: flex;
                    align-items: center;
                    .line {
                        width: 1px;
                        height: 0.13rem;
                        background-color: #E0E0E0;
                        margin: 0 0.1rem
                    }
                }
            }
        }
        &__tips {
            width: 100%;
            height: 0.4rem;
            background-color: #FAFAFA;
            line-height: 0.4rem;
            text-align: center;
        }
    }
    &__content {
        width: 92vw;
        height: 45vh;
        margin: 0 auto;
        &__name {
            width: 100%;
            height: 0.45rem;
            display: flex;
            align-items: center;
            &__title {
                line-height: 0.45rem;
                flex: 0 0 18%;
            }
            &__input {
                height: 0.45rem;
                flex: 1 1 49%;
                outline: none; 
                font-size: 0.15rem;
                color: #1f1f1f;
            }
            &__btn {
                width: 0.55rem;
                height: 0.28rem;
                line-height: 0.28rem;
                flex: 0 0 0.55rem;
                text-align: center;
                border-radius: 42px;
                box-sizing: border-box;
            }
        }
        &__phone {
            width: 100%;
            height: 0.45rem;
            display: flex;
            align-items: center;
            &__title {
                line-height: 0.45rem;
                flex: 0 0 18%;
            }
            &__input {
                height: 0.45rem;
                flex: 1 1 49%;
                outline: none; 
                font-size: 0.15rem;
                color: #1f1f1f;
            }
        }
        &__verify-code {
            width: 100%;
            height: 0.45rem;
            display: flex;
            align-items: center;
            &__title {
                line-height: 0.45rem;
                flex: 0 0 18%;
            }
            &__input {
                height: 0.45rem;
                flex: 1 1 49%;
                outline: none; 
                font-size: 0.15rem;
                color: #1f1f1f;
            }
            &__getcode {
                font-size: 0.15rem;
                color: #b8b8b8;
            }
        }
    }
    &__bottom {
        width: 100px;
        height: 100px;
    }
}
.checedSex {
    background-color: #00C8C8;
    color: #FFFFFF;
    border: none;
}
.bordermini {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 300%;
    height: 300%;
    transform: scale(0.33);
    transform-origin: left top;
    box-sizing: border-box;
    border: 1px solid #B8B8B8;
    border-radius: 0.55rem;
}
</style>
