<template>
    <div class="login">
        <div class="tabs">修改登录密码</div>
        <van-form ref="form" @submit="submit">
            <div class="login_information">
                <img :src="require('@assets/login_icon_zhanghao.png')" alt="" class="login_information_img" />
                <van-field
                    v-model="form.phone"
                    :maxlength="11"
                    type="tel"
                    placeholder="请输入手机号"
                    class="login_information_con"
                    :rules="[
                        { required: true, message: '请输入手机号码' },
                        {
                            pattern: phonePattern,
                            message: '手机号码格式错误'
                        }
                    ]"
                />
            </div>
            <van-divider class="login_divider" />
            <div class="login_information">
                <img
                    :src="require('@assets/verification_code.png')"
                    alt=""
                    class="login_information_img login_information_img_con"
                />
                <van-field
                    v-model="form.code"
                    :maxlength="4"
                    type="tel"
                    placeholder="请输入验证码"
                    :rules="[{ required: true, message: '请输入验证码' }]"
                    class="login_information_con"
                >
                    <template #button>
                        <van-button
                            @click="sendPhone"
                            class="send_verification"
                            size="small"
                            plain
                            :disabled="isSend"
                            type="primary"
                        >
                            {{ isSend ? `${sendNum}S后重新发送` : '发送验证码' }}
                        </van-button>
                    </template>
                    <!-- <template #button>
                            <div v-if="verifyDisplay == true" class="login_information_verification">
                                <van-count-down
                                    :time="timeOne"
                                    format="ss"
                                    :auto-start="countDownOne"
                                    @finish="onFinish"
                                />
                                <div>S后重新发送</div>
                            </div>
                            <van-button size="small" class="send_verification" @click="sendPhone" v-else
                                >发送验证码</van-button
                            >
                        </template> -->
                </van-field>
            </div>
            <van-divider class="login_divider" />
            <div class="login_information">
                <img :src="require('@assets/login_icon_mima.png')" alt="" class="login_information_img" />
                <van-field
                    v-model="form.password"
                    type="password"
                    placeholder="建议8-16位，数字、大小写字母组合"
                    :rules="[{ required: true, message: '请填写密码' }]"
                    class="login_information_con"
                />
            </div>
            <van-divider class="login_divider" />
            <div class="login_information">
                <img :src="require('@assets/login_icon_mima.png')" alt="" class="login_information_img" />
                <van-field
                    v-model="form.password2"
                    type="password"
                    placeholder="请再次输入密码"
                    :rules="[
                    { required: true, message: '请再次填写密码' },
                    {
                        validator: val => {
                            if (val == form.password) {
                                return true;
                            } else {
                                return false;
                            }
                        },
                        message: '两次密码输入不一致'
                    }
                    ]"
                    class="login_information_con"
                />
            </div>
            <van-divider class="login_divider" />
            <div class="button">
                <van-button
                    native-type="submit"
                    color="#28B6FF"
                    class="sure"
                    >确定修改</van-button
                >
                <!-- <van-button
          class="del"
          round
          block
          plain
          @click="$router.replace('/login')"
          >想起密码，立即登陆</van-button
        > -->
            </div>
        </van-form>
    </div>
</template>

<script>
import phone from '../../mixins/phone';
import { Toast } from 'vant';
export default {
    mixins: [phone],
    data() {
        return {
            active: 'phone',
            form: {
                phone: '',
                password: '',
                password2: '',
                code: ''
            }
        };
    },
    methods: {
        sendPhone() {
            if (this.form.phone == '') {
                Toast('手机号码格式错误');
            } else {
                this.sendMsg(this.form.phone);
            }
        },
        submit() {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.$http
                .post(`/user/changePassword?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>
/deep/ .van-field__control::placeholder {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #5f646f;
}
/deep/ .van-divider::before {
    height: 1px;
    background: #5f646f;
    opacity: 0.2;
}
/deep/ .van-field__control {
    color: #ffffff;
    background: @bg;
}
.login {
    padding: 60px 48px 0px;
    background: @bg;
}
.tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
    font-size: 28px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 34px;
}
.login_information {
    display: flex;
    // margin-left: 45px;
    .login_information_img {
        width: 24px;
        height: 24px;
        margin-right: 8px;
    }
    .login_information_img_con {
        padding-top: 5px;
    }
    .van-cell {
        padding: 0;
    }
    .login_information_con {
        width: 250px;
        // height: 24px;
        background: @bg;
        overflow: visible;
    }
    .send_verification {
        background-color: @bg;
        border: none;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #28b6ff;
        margin-right: -20px;
    }
}
.login_information:last-child {
    margin-top: 20px;
}
.login_divider {
    padding: 7px 0px 30px 29px;
    box-sizing: border-box;
    // background: #5F646F;
    // opacity: 0.2;
}
.sure{
    width: 100%;
    margin-top: 30px;
    height: 40px;
    border-radius: 8px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
}
// .icon {
//     display: block;
//     margin-top: 12px;
// }
// /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;
// }
</style>
