<template>
    <div class="login">
        <div class="tabs">
            <div class="tab active">修改交易密码</div>
            <div class="text">修改验证当前账号的手机号码才可以修改</div>
        </div>

        <van-form v-if="step === 0" @submit="next">
            <van-cell class="phone" :title="phone" label="修改交易密码需先验证当前手机号" />
            <van-field
                type="digit"
                name="验证码"
                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="sendBefPhone"
                        class="sub-code"
                        size="small"
                        plain
                        type="primary"
                        :disabled="isSend"
                    >
                        {{ isSend ? `已发送(${sendNum})S` : '发送验证码' }}
                    </van-button>
                </template>
            </van-field>

            <div class="button">
                <van-button
                    round
                    block
                    native-type="submit"
                    :color="`linear-gradient(to right, ${$colors.prim}, ${$colors.warn})`"
                    class="sure"
                    >下一步</van-button
                >
            </div>
        </van-form>

        <van-form v-else ref="form" @submit="submit">
            <div class="input">
                <div class="text1">请输入交易密码</div>
                <van-password-input :value="password" :focused="showKeyboard" @focus="showKeyboard = true" />
                <!-- 数字键盘 -->
                <van-number-keyboard
                    v-model="password"
                    :show="showKeyboard"
                    @blur="showKeyboard = false"
                    maxlength="6"
                    theme="custom"
                    close-button-text="完成"
                />
            </div>

            <div class="input">
                <div class="text1">请再次输入交易密码</div>
                <van-password-input :value="password2" :focused="showKeyboard2" @focus="showKeyboard2 = true" />
                <!-- 数字键盘 -->
                <van-number-keyboard
                    v-model="password2"
                    :show="showKeyboard2"
                    @blur="showKeyboard2 = false"
                    maxlength="6"
                    theme="custom"
                    close-button-text="完成"
                />
            </div>

            <div class="button">
                <van-button
                    round
                    block
                    native-type="submit"
                    :color="`linear-gradient(to right, ${$colors.prim}, ${$colors.warn})`"
                    class="sure"
                    >确定修改</van-button
                >
            </div>
        </van-form>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import phone from '../../mixins/phone';
import { ref } from 'vue';
export default {
    mixins: [phone],
    data() {
        return {
            step: 0,
            form: {
                phone: '',
                code: ''
            },
            password: '',
            password2: '',
            showKeyboard: false,
            showKeyboard2: false
        };
    },
    computed: {
        ...mapState(['userInfo']),
        phone() {
            let phone = this.userInfo.phone || '';
            return phone.substr(0, 3) + '****' + phone.substr(7, 6);
        }
    },
    methods: {
        sendBefPhone() {
            this.sendMsg(this.userInfo.phone);
        },
        sendPhone() {
            this.$refs.form.validate('手机号码').then(() => {
                this.sendMsg(this.form.phone);
            });
        },
        submit() {
            if (!this.password || !this.password2) {
                this.$toast('密码不能为空');
                return;
            }
            if (this.password2 !== this.password) {
                this.$toast('两次密码不一致');
                return;
            }
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.$http
                .get('/sms/verify', {
                    phone: this.userInfo.phone,
                    code: this.form.code
                })
                .then(res => {
                    this.$http
                        .post('/user/setTradeCode?token=' + res + '&tradeCode=' + this.password)
                        .then(() => {
                            this.$toast.success('设置成功');
                            setTimeout(() => {
                                this.$router.back();
                            }, 1500);
                        })
                        .catch(e => {
                            if (e) {
                                this.$toast(e.error);
                            }
                        });
                })
                .catch(e => {
                    this.$toast.error(e.error);
                });
        },
        next() {
            this.step = 1;
        }
    }
};
</script>

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

.van-form {
    padding: 0 30px;
}

.tabs {
    .tab {
        font-size: 18px;
        color: #c8c9cc;
        line-height: 25px;

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

    .text {
        font-size: 12px;
        color: @text3;
        line-height: 22px;
        margin-top: 4px;
    }
}

.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: 120px;

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

    .sure {
        color: @bg !important;
    }

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

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

/deep/.phone {
    .van-cell__title > span {
        font-size: 20px;
        font-weight: bold;
    }

    .van-cell__label {
        color: @text3;
    }
}

/deep/ .van-password-input {
    margin: 0 0;
    .van-password-input__security {
        border: 1px solid @text3;
        height: 42px;
        border-radius: 2px;
        li {
            background-color: transparent;
            &:not(:last-child) {
                border-right: 1px solid @text3;
            }
            i {
                background-color: @text0;
                //background-color: #fff;
            }
        }
    }
}
/deep/.van-number-keyboard__body {
    //background-color: #4a4a4a;
    .van-key {
        //background-color: @bg;
        &:active {
            //background-color: @bg3;
        }
    }
}

.input {
    margin-top: 20px;
    .text1 {
        font-size: 14px;
        color: @text0;
        line-height: 24px;
        margin-bottom: 6px;
    }
}
</style>
