<template>
    <div class="login-container" v-loading="isLoading">
        <div class="login" v-if="layoutLogin">
            <h1>大数据审核后台管理系统 | 登录</h1>
            <ul>
                <li>
                    <p>账号：</p>
                    <input
                        v-model="loginData.username"
                        placeholder="请输入账号"
                    />
                </li>
                <li>
                    <p>密码：</p>
                    <input
                        v-model="loginData.password"
                        type="password"
                        placeholder="请输入密码"
                    />
                </li>
                <li>
                    <p>验证码：</p>
                    <input
                        v-model="loginData.code"
                        type="text"
                        placeholder="请输入图片中的内容"
                        class="captcha_input"
                        @keyup.enter="goLogin()"
                    />
                    <img
                        class="captcha_img"
                        :src="this.captchaImg"
                        alt=""
                        @click="getCaptchaImg"
                    />
                    <i class="el-icon-refresh-right" @click="getCaptchaImg"></i>
                </li>
            </ul>

            <button class="login-btn" @click="getInfo">登录</button>
            <!-- <div style="color: #3c90fe;font-size: 14px;margin-top: 10px" @click="goChangePsw">修改密码</div> -->
        </div>
        <div class="login main" v-else>
            <h1>后台管理系统 | 修改密码</h1>
            <ul>
                <li>
                    <p>账号</p>
                    <input
                        v-model="pswData.userName"
                        placeholder="请输入账号"
                    />
                </li>
                <li>
                    <p>验证码</p>
                    <input
                        v-model="pswData.smsCode"
                        placeholder="请输入验证码"
                    />
                    <el-button
                        size="small"
                        type="primary"
                        style="width: 100px"
                        :loading="pswData.btnLoading"
                        v-text="pswData.hintTxt"
                        @click="getUserPhone"
                    ></el-button>
                </li>
                <li>
                    <p>密码</p>
                    <input
                        v-model="pswData.psw"
                        placeholder="请设置密码"
                        type="password"
                    />
                </li>
            </ul>
            <button class="login-btn" @click="changePsw">提交</button>
            <div
                style="color: #3c90fe; font-size: 14px; margin-top: 10px"
                @click="goToLogin"
            >
                登录
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import { mapGetters, mapMutations } from 'vuex';
export default {
    name: 'login',
    data() {
        return {
            captchaImg: '', // 图片验证码地址
            captchaId: '', // 图片验证码id
            inputSize: 'small',
            isLoading: false,
            btnTxt: '获取',
            layoutLogin: true,
            loginData: {
                username: '',
                password: '' // 密码
                // code: "", //图片验证码
            },
            pswData: {
                intervalId: '',
                userName: '',
                smsCode: '',
                hintTxt: '获取验证码',
                btnLoading: false,
                phone: '',
                psw: ''
            }
        };
    },
    created() {
        this.getCaptchaImg();
        console.log('token', this.token);
        // if (this.token) {
        //     this.setMenu('1');
        //     this.$router.push({
        //         name: 'welcome'
        //     });
        // }
    },
    computed: {
        ...mapGetters(['token', 'userInfo'])
    },
    methods: {
        ...mapMutations(['setToken', 'setUser', 'setMenu', 'setBaseInfo']),

        // 登录
        goLogin() {
            if (this.loginData.username === '') {
                this.$message.error('请输入用户名');
                return false;
            }
            if (this.loginData.password === '') {
                this.$message.error('请输入密码');
                return false;
            }
            if (this.loginData.code === '') {
                this.$message.error('请输入图片验证码');
                return false;
            } else {
                let data = {
                    ...this.loginData,
                    captcha_id: this.captchaId
                };
                this.httpPost(this.$root.manageLogin, data).then(
                    (res) => {
                        // token存本地
                        console.log('2222222', res);
                        this.setToken(res.token);
                        this.setUser(res.info);
                        this.setMenu('1');
                        this.getInfo();
                    },
                    (err) => {
                        this.getCaptchaImg();
                        this.$message.error(err);
                        // if (err == '验证码错误' || err == '参数有误' ) {
                        //     this.$message.error('登录失败，验证码错误！')
                        // } else {
                        //     this.$message.error('登录失败，您输入的账号密码不正确！')
                        // }
                    }
                );
            }
        },
        // 获取图片验证码
        getCaptchaImg() {
            this.httpGet(this.$root.getCaptchaImg).then((res) => {
                this.captchaImg = res.data;
                this.captchaId = res.id;
            });
        },
        getInfo() {
            // 获取商城基础信息
            this.$router.push({
                name: 'welcome'
            });
            // this.httpPost(this.$root.baseInfo).then(res => {
            //     // 存本地
            //     this.setBaseInfo(res.base_info);
            //     this.$router.push({
            //         name: 'welcome'
            //     });
            // }, () => {
            // });
        },
        // 修改密码
        // goChangePsw() {
        //     this.layoutLogin = false;
        // },
        // 获取手机号
        getUserPhone() {
            // 登录
            this.pswData.btnLoading = true;
            this.httpPost(this.$root.getUserPhone, {
                uname: this.pswData.userName
            }).then(
                (res) => {
                    this.pswData.btnLoading = false;
                    this.pswData.phone = res.phone;
                    if (res.phone === null) {
                        this.$message.error('手机号不存在');
                    } else {
                        this.getSmsCode();
                    }
                },
                () => {
                    this.pswData.btnLoading = false;
                }
            );
        },
        // 获取手机验证码
        getSmsCode() {
            this.pswData.btnLoading = true;
            this.httpPost(this.$root.getSmsCode, {
                phone: this.pswData.phone,
                type: 12
            }).then(
                (res) => {
                    this.pswData.btnLoading = false;
                    this.countDown(60);
                },
                () => {
                    this.pswData.btnLoading = false;
                }
            );
        },
        // 修改密码
        changePsw() {
            if (!this.verifyData()) {
                return;
            }

            this.isLoading = true;
            this.httpPost(this.$root.changePsw, {
                phone: this.pswData.phone,
                type: 12,
                code: this.pswData.smsCode,
                uname: this.pswData.userName,
                password: this.pswData.psw
            }).then(
                (res) => {
                    this.isLoading = false;
                    this.$message({
                        message: '设置成功',
                        type: 'success'
                    });
                    this.goToLogin();
                },
                () => {
                    this.isLoading = false;
                }
            );
        },
        // 短信验证码倒计时
        countDown(sec) {
            console.log('start');
            let secNum = sec;
            this.pswData.intervalId = setInterval(() => {
                secNum--;
                if (secNum <= 0) {
                    clearInterval(this.pswData.intervalId);
                    this.pswData.btnLoading = false;
                    this.pswData.hintTxt = '获取验证码';
                    console.log('finish');
                } else {
                    this.pswData.btnLoading = true;
                    this.pswData.hintTxt = secNum + 's';
                    console.log('' + secNum);
                }
            }, 1000);
        },
        goToLogin() {
            this.layoutLogin = true;
        },
        // 修改密码校验表单输入
        verifyData() {
            if (this.pswData.userName === '') {
                this.$message.error('请输入用户名');
                return false;
            }
            if (this.pswData.smsCode === '') {
                this.$message.error('请输入验证码');
                return false;
            }
            if (this.pswData.psw === '') {
                this.$message.error('请输入密码');
                return false;
            }
            return true;
        }
    }
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '~assets/main.styl';

::-webkit-input-placeholder {
    color: gray9;
}

.el-icon-refresh-right {
    font-size: 20px;

    &:hover {
        cursor: pointer;
    }
}

.captcha_input {
    width: 175px;
    font-size: word16;
    line-height: 40px;
    height: 40px;
    outline: none;
}

.captcha_img {
    width: 102px;
    height: 41px;
}

.login-container {
    flex-y(flex-start);
    width: 100%;
    height: 100%;
    background: white;
}

.login {
    width: 400px;
    margin-top: 200px;
    flex-y();

    .el-checkbox__label {
        font-size: 14px;
    }

    ul {
        width: 100%;
    }

    h1 {
        font-size: 24px;
        margin-bottom: 20px;
    }

    li {
        height: 40px;
        line-height: 40px;
        margin-top: 30px;
        bor-bottom();
        flex-x(flex-start);

        p {
            width: 100px;
            font-size: word18;
        }

        span {
            margin-right: 10px;
        }

        input {
            font-size: word16;
            line-height: 40px;
            height: 40px;
            outline: none;
        }
    }

    .forget {
        width: 100%;
        height: 50px;
        line-height: 50px;
        flex-x();

        .el-checkbox__inner {
            width: 16px;
            height: 16px;
            border(gray3);
        }
    }

    .login-btn {
        login-btn();
        font-size: word18;
        width: 350px;
        margin-top: 30px;
    }

    .bot-btn {
        margin-top: 10px;
        color: gray3;
        font-size: 16px;

        a {
            color: blue;
        }
    }
}

.el-button--primary {
    width: 100%;
    margin: 20px 0;
}

#app .el-input__inner {
    border: none;
}

.el-input {
    border: none;
}
</style>
