<template>
    <div>
        <div v-if="!isNoData">
        <mt-header title="人工发放"></mt-header>

        <div class="flex_center top_info">
            <div>
                <div class="netType_div"
                     :style="{background: (urlParamsDetail.netType == 1 ? '#13C2C2': '#1890FF')}"
                >
                    <span>{{urlParamsDetail.netTypeName}}</span>
                </div>
                <div class="netNameTitle">{{urlParamsDetail.netName}}</div>
            </div>

            <div>
                <img src="../../assets/img/Vector.png" style="width: 36px;height: 40px">
            </div>
        </div>

        <div class="listTitle"><span class="listTitle_span">领取人信息</span></div>

        <div class="inp_pad_resident">
            <mt-field label="领取人姓名" placeholder="请输入领取人姓名(必填)" v-model="formData.residentName"></mt-field>
            <mt-field label="身份证号" placeholder="请输入领取人身份证号" v-model="formData.idCar"></mt-field>
            <mt-field label="手机号码" placeholder="请输入领取人手机号(必填)" v-model="formData.telephone"></mt-field>
            <mt-field label="验证码" placeholder="请输入验证码(必填)" v-model="formData.code">
              <span style="color: forestgreen;font-size: 12px" @click="getCode" v-if="sendFlag">发送验证码</span>
                <span style="color: forestgreen;font-size: 12px" v-if="countDownTimeFlag" disabled>{{countDownTime}}s后重新获取</span>
                <span style="color: forestgreen;font-size: 12px" @click="getCode" v-if="replaceSendFlag">重新获取验证码</span>
            </mt-field>
        </div>

        <div class="bottom_btn">
            <mt-button type="primary" @click="nextStep" size="large"> 下一步</mt-button>
        </div>
        </div>
        <no-data v-if="isNoData">
            <span slot="content">该网点目前非营业中...！</span>
            <div slot="btn"></div>
        </no-data>
    </div>
</template>

<script>

    import {Toast} from 'mint-ui'
    import {getQueryVariable} from "../../utils/common";
    import {getCheckShortMessage, getShortMessage} from "../../utils/api";
    import NoData from "../component/noData";

    export default {
        components: {NoData},
        data() {
            return {
                formData: {
                    residentName: undefined,
                    idCar: undefined,
                    telephone: undefined,
                    code: undefined
                },
                routerDetail: {},//路由信息
                urlParamsDetail: {},//微信扫一扫所带参数信息
                countDownTime: 60,
                sendFlag: true,//发送显示
                countDownTimeFlag: false,//倒计时显示
                replaceSendFlag: false,//重新发送显示
                isNoData: false,
            }
        },
        created() {
            // this.routerDetail = this.$route.query
            // console.log( this.routerDetail)
            // if (this.routerDetail.telephone) {
            //     this.formData = {
            //         residentName: this.routerDetail.residentName,
            //         idCar: this.routerDetail.idCar,
            //         telephone: this.routerDetail.telephone,
            //     }
            // }
            this.urltext()
        },
        methods: {
            // 接收url后的数据
            urltext() {
                let id = getQueryVariable('id')
                let netType = getQueryVariable('netType')
                let netTypeName = getQueryVariable('netTypeName')
                let netName = getQueryVariable('netName')
                let netStauts = getQueryVariable('status')
                let urlParams = {
                    id,
                    netType,
                    netTypeName,
                    netName,
                    status: netStauts
                }
                if (urlParams.status == 1) {
                    this.isNoData = true
                }
                this.urlParamsDetail = urlParams
            },
            getCode() {
                    var ckPhone = /^1(?:3[0-9]|4[5-9]|5[0-9]|6[12456]|7[0-8]|8[0-9]|9[0-9])[0-9]{8}$/;
                    var cktel = /^0[1-9][0-9]{1,2}-[2-8][0-9]{6,7}$/;
                    if (ckPhone.test(this.formData.telephone) || cktel.test(this.formData.telephone)) {
                        this.countDownTime = 60
                        this.sendFlag = false
                        this.countDownTimeFlag = true
                        this.replaceSendFlag = false
                        let par = {
                            mobile: this.formData.telephone
                        }
                        getShortMessage(par)
                        this.getTimeDown()

                    } else {
                        return Toast({
                            message: '请输入正确的手机号！',
                            duration: 2000
                        });
                    }
            },
            getTimeDown() {
              this.timer = setInterval(() => {
                  this.countDownTime--
                  if (this.countDownTime == 0) {
                      this.replaceSendFlag = true
                      this.countDownTimeFlag = false
                      clearInterval(this.timer)
                  }
              }, 1000)
            },
            nextStep() {
                if (!this.formData.residentName || this.formData.residentName.trim() == '') {
                    return Toast({
                        message: '请输入领取人姓名！',
                        duration: 2000
                    });
                }
                if (this.formData.idCar) {
                    let result = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(this.formData.idCar)
                    if (!result) {
                        return Toast({
                            message: '请输入正确的身份证号！',
                            duration: 2000
                        });
                    }
                }

                if (!this.formData.telephone) {
                    return Toast({
                        message: '请输入领取人手机号！',
                        duration: 2000
                    });
                }
                if (this.formData.telephone) {
                    var ckPhone = /^1(?:3[0-9]|4[5-9]|5[0-9]|6[12456]|7[0-8]|8[0-9]|9[0-9])[0-9]{8}$/;
                    var cktel = /^0[1-9][0-9]{1,2}-[2-8][0-9]{6,7}$/;
                    if (ckPhone.test(this.formData.telephone) || cktel.test(this.formData.telephone)) {}
                    else {
                        return Toast({
                            message: '请输入正确的手机号！',
                            duration: 2000
                        });
                    }
                }
                let params = {
                    code: this.formData.code,
                    mobile: this.formData.telephone
                }
                getCheckShortMessage(params).then(({data}) => {
                    if (data.data) {
                        let par = {
                            ...this.urlParamsDetail,
                            ...this.formData
                        }
                        this.$router.push({path:'/manualCollection', query: par})
                    } else {
                        return Toast({
                            message: '请输入正确的验证码！',
                            duration: 2000
                        });
                    }
                })

            },

        }
    }
</script>

<style  lang="less">
    .inp_pad_resident {
        padding: 0px 16px!important;
        color: #42526E!important;
        span {
            font-size: 14px!important;
            margin-left: 5px;
        }
        .mint-cell {
            border-bottom: 0.5px solid rgba(0, 0, 0, 0.05)!important;
            /*.mint-cell-title {*/
            /*    width: 80px!important;*/
            /*    flex: none;*/
            /*}*/
        }
        ::-webkit-input-placeholder
        {
            text-align: right!important;
            color: #C1C7D0!important;
            font-size: 14px!important;
        }
        input[type=text] {
            border: 0px!important;
        }
        input[type=text]:focus {
            box-shadow: 0 0 0 0!important;
        }

    }

    .bottom_btn {
            position: fixed;
            z-index: 2;
            bottom: 0px;
           width: 100%;
    }
    .top_info {
        border: 1px solid #F3F3F3;
        border-radius: 0px 0px 16px 16px;
        padding: 12px;
        box-shadow: darkgrey 0px 2px 20px -10px;
    }
    .netType_div {
        text-align: center;
        color: white;
        border-radius: 8px 2px;
        padding: 4px 9px;
        width: 95px;
        font-size: 10px
    }

    .netNameTitle {
        font-size: 14px!important;
        font-weight: 500;
        margin-top: 11px
    }
    .listTitle {
        margin: 20px 0px 12px 16px;
        .listTitle_span {
            font-weight: 600;
            font-size: 16px;
            line-height: 22px;
        }
    }
</style>
