<template>
    <div class="container center-content">
        <div class="title">修改交易密码</div>
        <div class="box">
            <div class="name">
                <div class="name1">修改交易密码</div>
                <div class="name2">修改交易密码后立即生效，下次交易请使用新密码</div>
            </div>
            <div class="border"></div>
            <div class="content" v-if="flag">
                <el-steps :space="180" :active="1" align-center>
                    <el-step title="验证当前手机号"></el-step>
                    <el-step title="修改交易密码"></el-step>
                    <el-step title="完成"></el-step>
                </el-steps>
                <el-form
                    :label-position="labelPosition"
                    ref="form"
                    label-width="290px"
                    :model="ruleForm"
                    :rules="rules"
                >
                    <el-form-item label="当前手机号" prop="phone">
                        <div class="phone">{{ Phone }}</div>
                    </el-form-item>
                    <el-form-item label="验证码" prop="code">
                        <el-input style="width: 300px" v-model="ruleForm.code" placeholder="请输入4位验证码">
                            <span
                                @click="send"
                                style="color: #fdfb60; cursor: pointer; font-size: 13px"
                                slot="suffix"
                                >{{ time === 0 ? '发送验证码' : `重新发送${time}s` }}</span
                            >
                        </el-input>
                    </el-form-item>
                </el-form>
                <div class="btn1">
                    <div class="btn2">
                        <el-button type="primary" @click="codeSend">确认</el-button>
                        <div class="btn3" @click="Jump2">返回</div>
                    </div>
                </div>
            </div>
            <div v-else>
                <transaction-phone :code="token" @Jump="Jump"></transaction-phone>
            </div>
        </div>
    </div>
</template>

<script>
import TransactionPhone from '../../components/TransactionPhone.vue';
import phone from '../../mixins/phone';
import { mapState } from 'vuex';
export default {
    components: { TransactionPhone },
    mixins: [phone],
    data() {
        return {
            flag: true,
            token: '',
            labelPosition: 'right',
            ruleForm: {
                phone: '',
                code: ''
            },
            time: 0,
            rules: {}
        };
    },
    computed: {
        ...mapState(['userInfo']),
        Phone() {
            return this.userInfo.phone.slice(0, 3) + ' **** ' + this.userInfo.phone.slice(7, 11);
        }
    },
    methods: {
        send() {
            if (this.time === 0) {
                this.sendMsg(this.userInfo.phone);
            }
        },
        Jump2() {
            this.$router.go(-1);
        },
        codeSend() {
            // this.flag = false;
            this.$http
                .get('/sms/verify', {
                    phone: this.userInfo.phone,
                    code: this.ruleForm.code
                })
                .then(res => {
                    this.token = res;
                    this.flag = false;
                })
                .catch(e => {
                    this.$message.error(e.error);
                });
        },
        Jump() {
            this.flag = true;
            this.ruleForm.phone = this.userInfo.phone;
        }
    }
};
</script>

<style lang="less" scoped>
/deep/ .el-steps {
    margin-left: 329px;
}
/deep/.el-step:nth-child(1) {
    .el-step__icon {
        background: linear-gradient(143deg, @prim 0%, @warn 100%, @warn 100%);
        color: #ffffff;
        border: 0;
    }
}
/deep/.el-step:nth-child(2) {
    .el-step__icon {
        background: #c8c9cc;
        color: #ffffff;
        border: 0;
    }
}
/deep/.el-step:nth-child(3) {
    .el-step__icon {
        background: #c8c9cc;
        color: #ffffff;
        border: 0;
    }
}
/deep/ .el-step__title.is-process {
    font-weight: 400;
    color: #939599;
}
/deep/ .el-step__title.is-wait {
    color: #939599;
}
/deep/ .el-step__title.is-finish {
    color: #fdfb60;
}
/deep/ .el-step__head.is-finish {
    border-color: #fdfb60;
}
.container {
    .btn1 {
        margin-left: 10px;
        .btn2 {
            display: flex;
            justify-content: center;
            margin-top: 80px;
            .btn3 {
                width: 130px;
                height: 36px;
                background: #c4c7cc;
                border-radius: 4px;
                cursor: pointer;
                color: #ffffff;
                font-size: 13px;
                text-align: center;
                line-height: 38px;
                margin-left: 20px;
            }
        }
    }
    /deep/ .el-button {
        width: 130px;
        height: 36px;
        background: linear-gradient(133deg, @prim 0%, @warn 100%);
        border-radius: 4px;
        line-height: 6px;
        border: 0;
    }
    /deep/ .el-step__title {
        font-size: 13px;
    }
    /deep/ .el-form-item__label {
        color: #ffffff;
        margin-left: 175px;
    }
    /deep/ .el-form {
        margin-top: 66px;
    }
    /deep/ .el-input__inner {
        border: 1px solid #494a4d;
        background: #1c1e26;
        color: #ffffff;
    }
    .title {
        height: 42px;
        font-size: 32px;
        font-weight: 400;
        color: #ffffff;
        line-height: 42px;
        font-family: ZhenyanGB-Regular, ZhenyanGB;
        padding: 60px 0;
    }
    .box {
        height: 539px;
        background: #1c1e26;
    }
    .name {
        .flex();
        padding: 17px 16px;
        .name1 {
            font-size: 16px;
            font-weight: bold;
            color: #ffffff;
            line-height: 26px;
        }
        .name2 {
            font-size: 12px;
            font-weight: 400;
            color: #939599;
            margin-left: 10px;
        }
    }
    .phone {
        color: #ffffff;
        font-size: 18px;
    }
    .border {
        height: 1px;
        background: #494a4d;
        margin: 0 16px 40px;
    }
}
</style>
