<template>
    <div class="page">
        <headNav title="密码设置"></headNav>

        <div class="content">
            <van-cell-group>
                <van-field v-model="oldPwd" label="旧密码" placeholder="请输入原来的密码" />
                <van-field v-model="pwd" label="新密码" placeholder="6-16位字母数字，区分大小写" />
                <van-field v-model="rePwd" label="确认密码" placeholder="请再次确认新密码" />
            </van-cell-group>
            <div class="tips">温馨提示：修改后新的密码即时生效，请牢记新密码。</div>
            <div style="margin: 16px;">
                <van-button round block type="info" @click="commit">保存</van-button>
            </div>
        </div>

        <v-mask :showOverLay="showOverLay" tipMsg="保存中..."></v-mask>
    </div>
</template>

<script>
import headNav from '@/components/headNav.vue'
import mask_overLay from "@/components/overLay_xy.vue";
import { Notify } from 'vant';

import { post } from '@/utils/http.js';
import { isEmpty } from '@/utils/tool';

export default {
    components: {
        "v-mask": mask_overLay,
        headNav,
    },
    data () {
        return {
            oldPwd: '',
            pwd: '',
            rePwd: '',
            showOverLay: false,
        }
    },
    methods: {
        commit() {
            if (isEmpty(this.oldPwd)) {
                Notify({ type: 'warning', message: '请输入旧密码' });
                return
            }
            if (isEmpty(this.pwd)) {
                Notify({ type: 'warning', message: '请输入密码' });
                return
            }
            if (isEmpty(this.rePwd)) {
                Notify({ type: 'warning', message: '请确认密码' });
                return
            }
            if (this.pwd != this.rePwd) {
                Notify({ type: 'danger', message: '两次密码输入不一致，请重新输入' });
                return
            }
            this.showOverLay = true;
            post('/v1/api/user_user/editPassword', {
                oldPassword: this.oldPwd,
                newPassword: this.pwd,
            }).then(res => {
                this.showOverLay = false;
                this.$toast.success('保存成功');
                setTimeout(() => {
                    this.$router.back();
                }, 1500);
            }).catch(err => {
                this.showOverLay = false;
            })
        }
    }
}
</script>

<style lang="scss">
.tips {
    padding: 10px;
    color: #888888;
    font-size: 14px;
}
</style>