<template>
    <div class="login">
        <div class="phone" v-if="step === 0">
            <div class="text1">{{ phone }}</div>
            <div class="text2">修改密码需先验证当前手机号</div>
        </div>
        <van-form ref="form" @submit="submit">
            <van-field
                type="digit"
                name="验证码"
                v-if="step === 0"
                placeholder="请输入验证码"
                v-model="form.code"
                :maxlength="4"
                :rules="[{ required: true, message: '请输入验证码' }]"
            >
                <template #left-icon>
                    <img :src="require('@assets/svgs/login_icon_code.svg')" class="icon" />
                </template>
                <template #button>
                    <van-button
                        @click="sendPhone"
                        class="sub-code"
                        size="small"
                        plain
                        type="warning"
                        :disabled="isSend"
                    >
                        {{ isSend ? `已发送(${sendNum})S` : '发送验证码' }}
                    </van-button>
                </template>
            </van-field>

            <template v-else>
                <van-field
                    type="password"
                    name="密码"
                    placeholder="请输入密码"
                    v-model="form.password"
                    :rules="[{ required: true, message: '请填写密码' }]"
                >
                    <template #left-icon>
                        <img :src="require('@assets/svgs/login_icon_mima.svg')" class="icon" />
                    </template>
                </van-field>

                <van-field
                    type="password"
                    name="密码"
                    placeholder="请再次输入密码"
                    v-model="form.password2"
                    :rules="[
                        { required: true, message: '请再次填写密码' },
                        {
                            validator: val => {
                                if (val == form.password) {
                                    return true;
                                } else {
                                    return false;
                                }
                            },
                            message: '两次密码输入不一致'
                        }
                    ]"
                >
                    <template #left-icon>
                        <img :src="require('@assets/svgs/login_icon_mima.svg')" class="icon" />
                    </template>
                </van-field>
            </template>

            <div class="button">
                <van-button round block native-type="submit" type="primary" class="sure">
                    {{ step === 0 ? '下一步' : '确定修改' }}
                </van-button>
                <!-- <van-button
          class="del"
          round
          block
          plain
          @click="$router.replace('/login')"
          >想起密码，立即登陆</van-button
        > -->
            </div>
        </van-form>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import phone from '../../mixins/phone';
export default {
    mixins: [phone],
    data() {
        return {
            active: 'phone',
            form: {
                phone: '',
                password: '',
                password2: '',
                code: ''
            },
            step: 0
        };
    },
    computed: {
        ...mapState(['userInfo']),
        phone() {
            let phone = this.userInfo.phone || '';
            return phone.substr(0, 3) + '****' + phone.substr(-4, 4);
        }
    },
    methods: {
        sendPhone() {
            this.sendMsg(this.userInfo.phone);
        },
        submit() {
            if (this.step === 0) {
                this.step = 1;
                return;
            }
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.$http
                .post('/user/userChangePassword', {
                    password: this.form.password,
                    code: this.form.code
                })
                .then(res => {
                    this.$toast.success('修改成功');
                    setTimeout(() => {
                        this.$router.back();
                    }, 1500);
                })
                .catch(e => {
                    if (e) {
                        this.$toast(e.error);
                    }
                });
        }
    }
};
</script>

<style lang="less" scoped>
.login {
    padding: 40px 50px 100px;
}

.tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .tab {
        font-size: 18px;
        color: #c8c9cc;
        line-height: 25px;

        &.active {
            font-size: 24px;
            font-weight: bold;
            color: @text0;
            line-height: 33px;
        }
    }
}

.icon {
    display: block;
    margin-top: 10px;
    width: 24px;
    height: 24px;
}
/deep/ .van-form {
    margin-top: 28px;
    .van-cell {
        padding: 0px 0;

        .van-field__left-icon {
            margin-right: 8px;
        }
    }

    .van-cell + .van-cell {
        margin-top: 20px;
    }
    .van-field__body {
        height: 44px;
        align-items: center;
    }
}
.button {
    margin-top: 60px;

    .del {
        margin-top: 20px;
        border-color: @text0;
    }

    .sure {
        color: @bg !important;
    }

    .van-button {
        font-weight: bold;
    }
}

.sub-code {
    padding-right: 0;
    border-width: 0;
}

.phone {
    .flex-col();
    align-items: center;
    .text1 {
        font-size: 24px;
        font-weight: bold;
        color: #ffffff;
        line-height: 34px;
    }
    .text2 {
        font-size: 14px;
        color: #6a6d83;
        margin-top: 10px;
    }
}
</style>
