<template>
    <!-- pages/register/register.wxml -->
    <view class="container">
        <view class="register-container">
            <form @submit="bindRegisterSubmit">
                <view class="form-container">
                    <view class="macid-item">
                        <input type="text" name="macid" placeholder="请输入设备编号" class="form-input" :value="macid" />
                        <image src="/static/resource/images/xiangji.png" class="form-img-right" @tap="bindScanCode"></image>
                    </view>
                    <view class="form-item">
                        <image src="/static/resource/images/shouji.png" class="form-img"></image>
                        <input type="text" name="username" placeholder="请输入手机号" class="form-input" :value="username" @input="bindUsernameInput" />
                        <!-- image wx:if="{{ username }}" src="/resource/images/x.png" class="form-img-right" bindtap="bindUsernameClear"></image -->
                    </view>
                    <view class="form-item code-form">
                        <image src="/static/resource/images/duanxin.png" class="form-img"></image>
                        <input type="text" name="code" placeholder="请输入验证码" class="form-input" />
                        <view class="code-button" @tap="bindSendCode">
                            <text class="code-text">{{ sec == 0 ? '获取验证码' : sec + 's后重发' }}</text>
                        </view>
                        <!-- image wx:if="{{ username }}" src="/resource/images/x.png" class="form-img-right" bindtap="bindUsernameClear"></image -->
                    </view>
                    <view class="form-item">
                        <image src="/static/resource/images/mima.png" class="form-img"></image>
                        <input type="text" password name="password" placeholder="请输入密码" class="form-input" />
                        <!-- image wx:if="{{ password }}" src="/resource/images/x.png" class="form-img-right" bindtap="bindPasswordClear"></image -->
                    </view>
                    <view class="form-item">
                        <image src="/static/resource/images/mima.png" class="form-img"></image>
                        <input type="text" password name="password2" placeholder="请确认密码" class="form-input" />
                        <!-- image wx:if="{{ password }}" src="/resource/images/x.png" class="form-img-right" bindtap="bindPasswordClear"></image -->
                    </view>
                    <view class="form-btn">
                        <button class="login-btn" form-type="submit">注册</button>
                    </view>

                    <view class="contract-item flex-row flex-start">
                        <view class="p-right" style="width: 28rpx; height: 28rpx; line-height: 28rpx" @tap="bindContractInfo">
                            <image class="check-icon" :src="'/static/resource/images/check-' + (contract_id == 1 ? 'yes' : 'no') + '.png'"></image>
                        </view>
                        <view class="contract-item flex-row flex-start">
                            <view @tap="bindContractInfo" style="padding-left: 8rpx" :data-contractid="item.contract_id">我已阅读并同意</view>
                            <view style="color: #4e6ef2" @tap="bindContractToAgreement">《用户服务协议》</view>
                            <view style="color: #4e6ef2" @tap="bindContractToPrivacy">《隐私政策》</view>
                        </view>
                    </view>
                </view>
            </form>
        </view>
    </view>
</template>

<script>
// pages/register/register.js

var config = require('../../common/config.js');
var http = require('../../common/http.js');
var common = require('../../common/common.js');
var storage = require('../../common/storage.js');
export default {
    data() {
        return {
            contract_id: 0,
            macid: '',
            username: '',
            sec: 0,
            secTimer: null
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        bindContractToAgreement() {
            uni.navigateTo({
                url: '/pages/contract/contract?contract_id=270',
                success: function (res) {},
                fail: function (res) {},
                complete: function (res) {}
            });
        },

        bindContractToPrivacy() {
            uni.navigateTo({
                url: '/pages/contract/contract?contract_id=102',
                success: function (res) {},
                fail: function (res) {},
                complete: function (res) {}
            });
        },

        bindUsernameInput: function (e) {
            this.setData({
                username: e.detail.value
            });
        },

        bindScanCode() {
            uni.scanCode({
                onlyFromCamera: true,
                scanType: [],
                success: (res) => {
                    console.log(res);
                    if (res.result) {
                        this.setData({
                            macid: res.result
                        });
                    }
                },
                fail: function (res) {},
                complete: function (res) {}
            });
        },

        bindSendCode() {
            if (this.sec == 0) {
                this.setData({
                    sec: 60
                });
                this.secTimer = setInterval(() => {
                    if (this.sec > 0) {
                        this.setData({
                            sec: this.sec - 1
                        });
                    } else {
                        clearInterval(this.secTimer);
                    }
                }, 1000);
                http.postApi(
                    config.API_USER_VERIFY_CODE,
                    {
                        phone: this.username
                    },
                    (resp) => {
                        if (resp.data.code === 200) {
                        } else {
                            common.simpleToast(resp.data.msg);
                        }
                    }
                );
            }
        },

        bindContractInfo(e) {
            if (this.contract_id == 1) {
                this.setData({
                    contract_id: 0
                });
            } else {
                this.setData({
                    contract_id: 1
                });
            }
        },

        bindRegisterSubmit(e) {
            if (this.contract_id === 0) {
                common.simpleToast('请查阅隐私和协议');
                return;
            }
            console.log(e.detail.value);
            const macid = e.detail.value.macid;
            const username = e.detail.value.username;
            const code = e.detail.value.code;
            const password = e.detail.value.password;
            const password2 = e.detail.value.password2;
            if (common.isEmpty(macid)) {
                common.simpleToast('请输入设备编号');
                return;
            }
            if (common.isEmpty(username)) {
                common.simpleToast('请输入手机号');
                return;
            }
            if (common.isEmpty(code)) {
                common.simpleToast('请输入验证码');
                return;
            }
            if (common.isEmpty(password)) {
                common.simpleToast('请输入密码');
                return;
            }
            if (password != password2) {
                common.simpleToast('两次输入密码不一致');
                return;
            }
            http.postApi(
                config.API_USER_REGISTER,
                {
                    macid: macid,
                    phone: username,
                    code: code,
                    password: password
                },
                (resp) => {
                    if (resp.data.code === 200) {
                        common.simpleToast('注册成功');
                        setTimeout(function () {
                            uni.navigateBack({
                                delta: 1
                            });
                        }, 1500);
                    } else {
                        common.simpleToast(resp.data.msg);
                    }
                }
            );
        }
    }
};
</script>
<style>
@import './register.css';
</style>
