<template>
	<!-- login页面 -->
	<view>
		<view class="login">
			<view class="content">
				<view class="title">请绑定手机号</view>
				<view class="labales">
					<input type="number" maxlength="11" v-model="phone" placeholder="手机号" />
				</view>
				<view class="labales flex-inp">
					<input type="number" maxlength="6" placeholder="请输入验证码" v-model="sms_code" />
					<u-button id="btn" class="identifying" :hair-line="false" hover-class="none" :class="is_sendcode ? 'sended' : ''" @click="getCode" :disabled="is_sendcode">{{ is_sendcode ? time_count + "后可以重新发送" : "发送验证码" }}</u-button>
				</view>
				<!-- 服务协议 -->
				<view class="pact">
                    <checkbox-group @change="change">
                        <checkbox class="check-tit" color="#1ADE00" :checked="checked" />
                    </checkbox-group>
					<text>我已详细阅读并同意</text>
					<text class="pact_text" v-for="(item,index) in pactList" :key="index" @click="infoPact(index)">
                        {{ item }}
                    </text>
				</view>
			</view>
			<!-- denglu QQ weixin -->
			<view class="btn-login" @click="bindPhone">{{login}}</view>
            <u-toast ref="uToast" />
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
                phone: "",
                sms_code: "",
				login: '绑定',
				show: true,
                checked: false,
                // 时间
                timer: null,
				is_sendcode: false, // 60s
                time_count: 60,
                pactList: [ "《用户协议》", "《隐私协议》", "《使用协议》" ],
			};
		},
		methods: {
            // 勾选协议
			change(e) {
                this.checked = !this.checked;
                console.log(this.checked);
            },
            // 获取验证码
            getCode() {
                if (this.$u.test.isEmpty(this.phone)) {
                    this.$refs.uToast.show({
                        title: '手机号格式不能为空！',
                        type: 'error',
                    })
                    return;
                }
                if(!(/^1[3456789]\d{9}$/.test(this.phone))){
                    this.$refs.uToast.show({
                        title: '手机号格式不正确！',
                        type: 'warning',
                    })
                    return;
                }
                this.$u.api.sendSmsCode({
                    member_mobile: this.phone,
                    smslog_type: 4,
                }).then(res => {
                    if (res.errCode == 0) {
                        console.log(res);
                        this.$refs.uToast.show({
                            title: res.message,
                            type: 'success',
                        })
                        // 发送验证码
                        this.getSendCode();
                    } else {
                        this.$refs.uToast.show({
                            title: res.message,
                            type: 'warning',
                        })
                    }
                })
            },
            // 绑定手机号
            bindPhone() {
                if (this.$u.test.isEmpty(this.phone)) {
                    this.$refs.uToast.show({
                        title: '手机号不能为空！',
                        type: 'error',
                    })
                    return;
                }
                if(!(/^1[3456789]\d{9}$/.test(this.phone))){
                    this.$refs.uToast.show({
                        title: '手机号格式不正确！',
                        type: 'warning',
                    })
                    return;
                }
                if(this.$u.test.isEmpty(this.sms_code)){
                    this.$refs.uToast.show({
                        title: '验证码不能为空！',
                        type: 'warning',
                    })
                    return;
                }
                if(this.sms_code.length == 0){
                    this.$refs.uToast.show({
                        title: '验证码有误！',
                        type: 'warning',
                    })
                    return;
                }
                if(!this.checked){
                    this.$refs.uToast.show({
                        title: '请同意协议！',
                        type: 'warning',
                    })
                    return;
                }
                this.$u.api.mobileBind({
                    member_mobile: this.phone,
                    sms_code: this.sms_code,
                }).then(res => {
                    console.log(res);
                    if (res.errCode == 0) {
                        this.$refs.uToast.show({
                            title: res.message,
                            type: 'success',
                        })
                        uni.navigateTo({
                             url: '/pageA/topick/topick'
                        });
                    } else {
                        this.$refs.uToast.show({
                            title: res.message,
                            type: 'warning',
                        })
                    }
                })
            },
            // 协议详情
            infoPact(index) {
                // console.log(index);
                uni.navigateTo({
				    url: '/pageA/pactList/pactList?index=' + index
				});
            },
            // 60s
            getSendCode() {
                const TIME_COUNT = 60;
                if (!this.timer) {
                    this.time_count = TIME_COUNT;
                    this.is_sendcode = true;
                    this.timer = setInterval(() => {
                        if (this.time_count > 0 && this.time_count <= TIME_COUNT) {
                            this.time_count--;
                        } else {
                            this.is_sendcode = false;
                            clearInterval(this.timer);
                            this.timer = null;
                        }
                    }, 1000);
                }
            },
		}
	};
</script>

<style lang="scss" scoped>
    
    page {
        background-color: #fff;
    }

	.title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 150rpx;
		color: #333;
	}

	.content {
		width: 630rpx;
		z-index: 99999;
		margin: 0 auto;
		padding-top: 130rpx;
        
        .labales {
            position: relative;
            display: flex;
            align-items: center;
            padding: 20rpx;
        	border-bottom: 1px #BFBFBF solid;
            input {
                width: 100%;
            }
        }
        
        .flex-inp {
            justify-content: space-between;
            margin-top: 70rpx;
        }

		.labales text {
			font-size: 30rpx;
			color: #999;
		}
        
		.identifying {
            flex-shrink: 0;
			font-size: 26rpx;
			font-weight: 500;
			color: #FF780F !important;
            border: none;
		    background-color: #fff;
		}

        .sended {
            color: #666 !important;
        }

	}
    
    .pact {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin: 20rpx 0;
        &>text {
            font-size: 22rpx;
            font-weight: 400;
            color: #333;
        }
    }
    
    .check-tit {
        font-size: 20rpx;
    }
    
    ::v-deep uni-checkbox .uni-checkbox-input {
        width: 24rpx;
        height: 24rpx;
        border-color: #d1d1d1 !important;
        border-radius: 50% !important;
    }
    
    ::v-deep uni-checkbox .uni-checkbox-input-checked:before {
        font-size: 28rpx;
    }

	.pact_text {
		font-size: 22px;
		font-weight: 400;
		color: rgba(129, 188, 253, 1) !important;
	}

	.btn-login {
        width: 650rpx;
        height: 90rpx;
        margin: 300rpx auto 0;
        text-align: center;
        line-height: 90rpx;
        color: #fff;
        font-size: 34rpx;
        border-radius: 50rpx !important;
        background-color: #FF780F;
    }

    button::after{ border: none; }
</style>
