<template>
    <view class="content">
        <form report-submit="true" @submit="findPassword">
            <view class="m-cells m-cells-form">
                <view class="m-cell">
                    <view class="m-cell-hd"><label class="u-label">{{__('手机号码')}}</label></view>
                    <view class="m-cell-bd">
                        <input class="u-input" type="number" v-model="user_mobile" name="user_mobile"  :placeholder="__('请输入手机号码')" maxlength="11" @input="onInputMobile"/>
                    </view>
                    <view v-if="(!isUserMobile)" class="m-cell-ft">
                        <view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
                    </view>
                </view>
                <view class="m-cell">
                    <view class="m-cell-hd"><label class="u-label">{{__('验 证 码')}}</label></view>
                    <view class="m-cell-bd">
                        <input class="u-input" type="number" name="channel_verify_code" v-model="channel_verify_code"  :placeholder="__('请输入手机验证码')"/>
                    </view>
                </view>
                <view class="m-cell">
                    <view class="m-cell-hd"><label class="u-label">{{__('新 密 码')}}</label></view>
                    <view class="m-cell-bd">
                        <input class="u-input" type="text" name="user_password" :placeholder="__('新密码')"  :value="user_password" @input="onInputNewPassword"/>
                    </view>
                    <view v-if="(!isNewPassword)" class="m-cell-ft">
                        <view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
                    </view>
                </view>
                <view class="m-cell m-cell-vcode hide">
                    <view class="m-cell-hd">
                        <label class="u-label">{{__('验证码')}}</label>
                    </view>
                    <view class="m-cell-bd">
                        <input class="u-input"  :placeholder="__('请输入验证码')" maxlength="6" @input="onInputImgCode"/>
                    </view>
                    <view v-if="(!isImgCode)" class="m-cell-ft">
                        <view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
                    </view>
                    <view class="m-vcode-btn" @click="refresh">
                        <imgcode ref="imgcode"></imgcode>
                    </view>
                </view>
            </view>
            <view class="btn-row">
                <button type="primary" class="primary" formType="submit">{{__('提交')}}</button>
            </view>
        </form>
        <verifycode-dialog :show="showCodeDialog" :len="4" :autoCountdown="true" :phone="user_mobile" v-on:change="change"></verifycode-dialog>
    </view>
</template>
<script>
    import verifycodeDialog from '@/components/verifycode-dialog/verifycode-dialog.vue';
    import imgcode from '@/components/verify-code/imgcode.vue';

	import {
		mapState,
		mapMutations
	} from 'vuex'

    export default {
        data() {
            return {
                user_mobile: '',
                user_password: '',
                isNewPassword: true,
                isUserMobile: true,
                isImgCode: true,

                showCodeDialog: false,
                channel_verify_code:''
            }
        },
		components: {
			verifycodeDialog,
            imgcode
		},
		computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
        onLoad() {
            uni.setNavigationBarTitle({
                title:this.__('忘记密码')
            });
            this.show();
        },
        methods: {
            ...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),

            /* start 图形验证码 */
            refresh:function(){
                this.$refs.imgcode.refresh();
            },
            show:function(){
                var _self=this;
                setTimeout(function(){
                    _self.refresh();
                },500);
            },
            onInputImgCode:function(e){
                if (e.detail.value.toLocaleLowerCase() == uni.getStorageSync('imgcode').toLocaleLowerCase())
                {
                    this.setData({isImgCode: true})
                }
                else
                {
                    this.setData({isImgCode: false})
                }
            },
            /* end 图形验证码 */

            change:function(res){
				if(res.type == 1){
					this.channel_verify_code = res.code;
					this.showCodeDialog = false;
				}else if(res.type == -1){
					this.channel_verify_code ="请输入验证码";
					this.showCodeDialog = false;
				}else{
                    res.resendCall();
                    /*
					setTimeout(function(){
						res.resendCall()
					},3000)
                    */
				}
			},
			openCodeDialog:function(){
				this.showCodeDialog = true;
			},
            onInputMobile:function(e){
                this.setData({user_mobile: e.detail.value})

                if (!/^1[0123456789]\d{9}$/.test(this.user_mobile)) {
                    /*
                    uni.showToast({
                        icon: 'none',
                        title: '手机号码不合法',
                    });
                    */
                   this.setData({isUserMobile:false});

                   return;
                }
                else
                {
                   this.setData({isUserMobile:true});

                   this.openCodeDialog();
                }
            },
            onInputNewPassword:function(e){
                this.setData({user_password: e.detail.value})

                if (e.detail.value)
                {
                    this.setData({isNewPassword:true});
                }
                else
                {
                    this.setData({isNewPassword:false});
                }
            },
            findPassword() {
                /**
                 * 仅做示例
                 */
                if (!/^1[0123456789]\d{9}$/.test(this.user_mobile)) {
                    uni.showToast({
                        icon: 'none',
                        title: '手机号码不合法',
                    });
                    return;
                }


                var that = this;
                var params = {
                    mobile: that.user_mobile,
                    channel: 'mobile',
                    channel_verify_key: that.user_mobile,
                    channel_verify_code: that.channel_verify_code,
                    pwd: that.user_password,
                    client: 'wap'
                };
                    that.$.request({
                        url: this.Config.URL.set_pwd,
                        data: params,
                        success: function (data, status, msg, code) {
                            if (status == 200)
                            {
                                that.$.showToast({
                                    title: "修改密码成功!",
                                    icon: "success",
                                    duration: 2000, success: function () {
                                        that.$.gotopage('/pages/login/login');
                                    }
                                })
                            }
                            else
                            {
                                that.$.confirm(msg);
                            }
                        }
                    });
            }
        }
    }
</script>

<style lang="scss">
	@import "../../styles/_variables.scss";
	@import '../../styles/login.scss';

    .m-cell-bd{width: 86%}
    .m-cell-hd{
        width: 24%;
    }

    .m-cell, m-cell-vcode{

        height:60rpx;
        min-height:60rpx;
        padding:20rpx 0;
        padding-left:60rpx;
        line-height:60rpx;
    }


    .m-cell-vcode .m-icon-warn{
        position: relative;
        margin-top: 0px;
    }

    .m-vcode-img {
        width: 216rpx;
        height: 88rpx;
    }

    .btn_box {
        padding: 20rpx;
    }

    .m-code {
        right: 210rpx;
    }

    .m-vcode-btn {
        width: 150rpx;
        padding: 0;
        text-align: center;
    }

</style>
