<template>
    <view class="box" hover-class="none" :hover-stop-propagation="false">
        <view :class="'ui-poptips ' + (pop == 1 ? 'ui-poptipsTop' : '')">
            <view class="ui-poptips-cnt">{{ popErrorMsg }}</view>
        </view>
        <!-- 找回密码页面 -->
        <view class="mt16" v-if="type == 1" hover-class="none" :hover-stop-propagation="false">
            <form @submit="beforeFormSubmit" data-type="1">
                <view class="container" hover-class="none" :hover-stop-propagation="false">
                    <view class="fsa sub bb1" hover-class="none" :hover-stop-propagation="false">
                        <view class hover-class="none" :hover-stop-propagation="false">手机号</view>
                        <view class="c9" hover-class="none" :hover-stop-propagation="false">
                            {{ tel }}
                            <!-- <input type="number" bindinput="changeBtn" class="phoneInput" bindblur="changeBtn" data-num="5" data-tel="1" maxlength="11" placeholder-class="pce" placeholder="输入手机号码" name="tel" placeholder-style="color:#999" /> -->
                        </view>
                    </view>
                    <view class="fsa sub" hover-class="none" :hover-stop-propagation="false">
                        <view class hover-class="none" style="min-width: 80px" :hover-stop-propagation="false">验证码</view>
                        <view class="fsa br_8" style>
                            <view class="mr8">
                                <input
                                    type="number"
                                    class="f16 phoneInput"
                                    data-num="6"
                                    placeholder-class
                                    maxlength="4"
                                    placeholder="输入验证码"
                                    name="code"
                                    placeholder-style="color:#999"
                                />
                            </view>
                            <view
                                hover-class="thover"
                                :style="'color:' + (btnColor ? '#576b95' : '#999') + ';min-width:96px'"
                                :class="'sendCode f14 code ' + (disabled == 1 ? '' : 'disabled') + ' pl8'"
                                @tap="sendMsg"
                            >
                                {{ getmsg }}
                            </view>
                        </view>
                    </view>
                </view>
                <view class="container mt16">
                    <view class="sub fsa bb1" hover-class="none" :hover-stop-propagation="false">
                        <view class hover-class="none" :hover-stop-propagation="false">新密码</view>
                        <view class hover-class="none" :hover-stop-propagation="false">
                            <input
                                type="password"
                                @input="showCha"
                                class="phoneInput"
                                maxlength="11"
                                placeholder-class="pce"
                                placeholder="请输入新密码"
                                name="newPsw"
                                :value="newPsw"
                                placeholder-style="color:#999"
                            />
                        </view>
                    </view>
                    <view class="sub fsa" hover-class="none" :hover-stop-propagation="false">
                        <view class hover-class="none" :hover-stop-propagation="false">确认密码</view>
                        <view class hover-class="none" :hover-stop-propagation="false">
                            <input
                                type="password"
                                @input="showCha"
                                class="phoneInput"
                                maxlength="11"
                                placeholder-class="pce"
                                placeholder="再次输入新密码"
                                name="rePsw"
                                :value="rePsw"
                                placeholder-style="color:#999"
                            />
                        </view>
                    </view>
                </view>
                <button class="normalBtn loginOut" hover-class="thover" data-type="1" style="margin-top: 120px" formType="submit">确定</button>
            </form>
        </view>
        <!-- 修改密码页面 -->

        <view class="mt16" v-if="type == 2" hover-class="none" :hover-stop-propagation="false">
            <form action @submit="beforeFormSubmit" data-type="2">
                <view class="container" hover-class="none" :hover-stop-propagation="false">
                    <view class="fsa sub" hover-class="none" :hover-stop-propagation="false">
                        <view class hover-class="none" :hover-stop-propagation="false">原密码</view>
                        <view class hover-class="none" :hover-stop-propagation="false">
                            <input
                                type="password"
                                class="phoneInput"
                                data-num="5"
                                data-tel="1"
                                maxlength="11"
                                placeholder-class="pce"
                                placeholder="请输入原密码"
                                name="oldPsw"
                                :value="tel"
                                placeholder-style="color:#999"
                            />
                        </view>
                    </view>
                </view>
                <view class="tar pr10 f14 fw500" style="margin: 8px 0 16px 0; color: #576b95" @tap="changeType" hover-class="thover">忘记原密码</view>
                <view class="container" hover-class="none" :hover-stop-propagation="false">
                    <view class="fsa sub bb1" hover-class="none" :hover-stop-propagation="false">
                        <view class hover-class="none" :hover-stop-propagation="false">新密码</view>
                        <view class hover-class="none" :hover-stop-propagation="false">
                            <input
                                type="password"
                                class="phoneInput"
                                data-num="5"
                                data-tel="1"
                                maxlength="11"
                                placeholder-class="pce"
                                placeholder="请输入新密码"
                                name="newPsw"
                                :value="newPsw"
                                placeholder-style="color:#999"
                            />
                        </view>
                    </view>
                    <view class="fsa sub" hover-class="none" :hover-stop-propagation="false">
                        <view class hover-class="none" :hover-stop-propagation="false">确认密码</view>
                        <view class hover-class="none" :hover-stop-propagation="false">
                            <input
                                type="password"
                                class="phoneInput"
                                data-num="5"
                                data-tel="1"
                                maxlength="11"
                                placeholder-class="pce"
                                placeholder="再次输入新密码"
                                name="rePsw"
                                :value="rePsw"
                                placeholder-style="color:#999"
                            />
                        </view>
                    </view>
                </view>
                <button class="normalBtn loginOut" hover-class="thover" data-type="2" style="margin-top: 120px" formType="submit">修改密码</button>
            </form>
        </view>
    </view>
</template>

<script>
// pages/changePsw/index.js
const app = getApp();
// import { customRequest } from '../../utils/request.js';
export default {
    data() {
        return {
            type: 1,
            disabled: 1,
            getmsg: '获取验证码',
            btnColor: true,
            tel: '',
            pop: 0,
            popErrorMsg: '',
            newPsw: '',
            rePsw: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        if (options.type) {
            console.log('app.globalData.loginUserInfo', app.globalData.loginUserInfo);
            this.setData({
                type: options.type,
                tel: app.globalData.loginUserInfo.tel
            });
            if (options.type == 1) {
                uni.setNavigationBarTitle({
                    title: '设置密码'
                });
            } else {
                uni.setNavigationBarTitle({
                    title: '修改登录密码'
                });
            }
        }
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    methods: {
        changeBtn: function (e) {
            console.log(e);
            if (this.verifyTel(e.detail.value)) {
                this.setData({
                    disabled: '1',
                    btnColor: true,
                    tel: e.detail.value
                });
            } else {
                this.setData({
                    btnColor: false,
                    disabled: 0
                });
            }
        },

        /**
         * 手机号合规校验
         *
         *
         */
        verifyTel(value) {
            console.log(value);
            var myreg = /^[1][3456789][0-9]{9}$/;
            if (myreg.test(value)) {
                return true;
            } else {
                return false;
            }
        },

        /**
         * 密码重复校验
         *
         *
         */
        verify(newStr, oldStr) {
            if (newStr != oldStr) {
                return false;
            } else {
                return true;
            }
        },

        /**
         * 表单信息提交校验
         *
         *
         */
        beforeFormSubmit(e) {
            console.log(e);
            console.log(e.currentTarget.dataset.type);
            uni.showLoading({
                title: '提交中',
                mask: true,
                success: (result) => {}
            });
            let that = this;
            let value = e.detail.value;
            if (e.currentTarget.dataset.type == 1) {
                value.tel = that.tel;
                if (value.tel == '' || !this.verifyTel(value.tel)) {
                    app.globalData.hideLoad();
                    app.globalData.showTips(that, '请输入正确手机号');
                    return;
                }
                if (value.code == '') {
                    app.globalData.hideLoad();
                    app.globalData.showTips(that, '验证码不能为空');
                    return;
                }
                if (value.newPsw.trim() == '' || value.rePsw.trim() == '') {
                    app.globalData.hideLoad();
                    if (value.newPsw.trim() == '') {
                        app.globalData.showTips(that, '请输入新密码');
                    } else {
                        app.globalData.showTips(that, '请再次输入密码');
                    }
                    return;
                }
                if (!this.verify(value.newPsw.trim(), value.rePsw.trim())) {
                    app.globalData.hideLoad();
                    app.globalData.showTips(that, '前后密码不一致');
                    return;
                }
                app.globalData.hideLoad();
                this.formSubmit(value, 1);
            } else {
                console.log(app.globalData.user);
                console.log(value);
                if (!value.oldPsw) {
                    app.globalData.hideLoad();
                    console.log(that);
                    app.globalData.showTips(that, '请输入原密码');
                    return;
                }
                if (value.newPsw.trim() == '' || value.rePsw.trim() == '') {
                    app.globalData.hideLoad();
                    if (value.newPsw.trim() == '') {
                        app.globalData.showTips(that, '请输入新密码');
                    } else {
                        app.globalData.showTips(that, '请再次输入密码');
                    }
                    return;
                }
                if (!this.verify(value.newPsw.trim(), value.rePsw.trim())) {
                    app.globalData.hideLoad();
                    app.globalData.showTips(that, '前后密码不一致');
                    return;
                }
                this.formSubmit(value, 2);
            }
        },

        /**
         * 表单信息提交
         *
         *
         */
        formSubmit(value, type) {
            let that = this;
            if (type == 1) {
                console.log(value);
                uni.request({
                    url: app.globalData.ip + '/yishoudan/updatePassword',
                    data: {
                        tel: value.tel,
                        code: value.code,
                        password: value.newPsw
                    },
                    header: app.globalData.headers,
                    success: function ({ data }) {
                        console.log(data);
                        if (data.status == 200) {
                            app.globalData.showTips(that, '修改成功');
                            setTimeout(() => {
                                if (app.globalData.isLogin) {
                                    uni.navigateBack({
                                        target: 1,
                                        success: (result) => {}
                                    });
                                } else {
                                    uni.reLaunch({
                                        url: '/pages/login/index?type=psw',
                                        success: (result) => {}
                                    });
                                }
                            }, 2000);
                        } else {
                            app.globalData.showTips(that, data.msg);
                        }
                    }
                });
            } else {
                uni.request({
                    url: app.globalData.ip + '/yishoudan/updatePasswordByPwd',
                    data: {
                        tel: app.globalData.user.tel,
                        oldPassword: value.oldPsw,
                        password: value.newPsw
                    },
                    method: 'post',
                    header: app.globalData.headers,
                    success: function ({ data }) {
                        console.log(data);
                        if (data.status == 200) {
                            app.globalData.showTips(that, '修改成功');
                            setTimeout(() => {
                                // if (app.globalData.isLogin) {
                                // 	wx.navigateBack({
                                // 		target: 1,
                                // 		success: (result) => {},
                                // 	});
                                // } else {
                                // 	wx.reLaunch({
                                // 		url: "/pages/login/index?type=psw",
                                // 		success: (result) => {},
                                // 	});
                                // }
                                uni.reLaunch({
                                    url: '/pages/login/index?type=psw',
                                    success: (result) => {}
                                });
                            }, 2000);
                        } else {
                            app.globalData.hideLoad();
                            app.globalData.showTips(that, data.msg);
                        }
                    }
                });
            }
        },

        /**
         * 改变修改密码类型
         *
         *
         */
        changeType() {
            this.setData({
                type: 1
            });
            uni.setNavigationBarTitle({
                title: '找回密码'
            });
        },

        /**
         * 获取验证码
         *
         *
         */
        sendMsg: function () {
            console.log(this.tel);
            var that = this;
            that.setData({
                btnColor: false,
                disabled: 0
            });
            that.getCode();
            var timer = 1;
            if (timer == 1) {
                timer = 0;
                var time = 60;
                var inter = setInterval(function () {
                    that.setData({
                        getmsg: time + 's',
                        btnColor: false,
                        disabled: 0
                    });
                    time--;
                    if (time < 0) {
                        timer = 1;
                        clearInterval(inter);
                        that.setData({
                            getmsg: '重新获取',
                            btnColor: true,
                            disabled: 1
                        });
                    }
                }, 1000);
            }
        },

        getCode: function () {
            var that = this;
            uni.request({
                url: app.globalData.ip + '/commons/sendMsgCode',
                data: {
                    tel: that.tel
                },
                header: app.globalData.headers,
                method: 'GET',
                success: function (res) {
                    console.log('发送短信验证码');
                    console.log(res);
                    if (res.data.status == 200) {
                        app.globalData.showTips(that, '验证码发送成功');
                    } else if (res.data.status == 9999) {
                        app.globalData.dialogNotLogin();
                    } else {
                    }
                }
            });
        },

        /**
         * 用户点击右上角分享
         */
        onShareAppMessage1() {},

        showCha() {
            console.log('占位：函数 showCha 未声明');
        }
    }
};
</script>
<style>
@import './index.css';
</style>
