<template>
    <div class="login">
        <div class="tabs">设置交易密码</div>
        <van-form v-if="step === 0" @submit="next">
            <div class="transaction_tips">
                <div class="transaction_tips_phone">{{ phone }}</div>
                <div class="transaction_tips_con">设置交易密码需先验证当前手机号</div>
            </div>
            <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="sendBefPhone"
                            class="send_verification"
                            size="small"
                            plain
                            :disabled="isSend"
                            type="primary"
                        >
                            {{ isSend ? `${sendNum}S后重新发送` : '发送验证码' }}
                        </van-button>
                    </template>
                </van-field>
            </div>
            <van-divider class="login_divider" />
            <div>
                <van-button native-type="submit" class="sure" type="primary">确认</van-button>
            </div>
        </van-form>
        <van-form v-else ref="form" @submit="submit">
            <div class="modification_tips">设置支付密码后立即生效，下次交易请使用新密码</div>
            <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>
                <van-button native-type="submit" class="suretwo" type="primary">确定修改</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>
/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;
}
/deep/ .van-key{
    color: #333333;
}
.login {
    padding: 60px 48px 0px;
    background: @bg;
}
.tabs {
    font-size: 28px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 34px;
}
.transaction_tips {
    margin-top: 50px;
    margin-bottom: 30px;
    .transaction_tips_phone {
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 28px;
        margin-bottom: 2px;
    }
    .transaction_tips_con {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #939599;
        line-height: 24px;
    }
}
.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;
    }
}
.login_divider {
    padding: 7px 0px 30px 0;
    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;
}
.suretwo {
    width: 100%;
    margin-top: 60px;
    height: 40px;
    border-radius: 8px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
}
.modification_tips {
    margin-top: 6px;
    margin-bottom: 10px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #939599;
    line-height: 17px;
}
.input {
    margin-top: 20px;
    .text1 {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 24px;
        margin-bottom: 6px;
    }
}
/deep/ .van-password-input {
    margin: 0;
}
/deep/ .van-password-input__security li {
    width: 44px;
    height: 44px;
    background: #29293f;
    border-radius: 2px;
    margin-right: 2px;
    font-size: 24px;
    color: #ffffff;
    flex: 1;
    border: none;
}
/deep/ .van-password-input__security li:last-child {
    margin-right: 0;
}
/deep/ [class*='van-hairline']:after {
    border: none;
}
/deep/ .van-password-input__security i {
    background-color: #fff !important;
}
</style>
