<template>
    <div id="Login" class="flex">
        <div class="flex1 flex-column-center shade-panel">
            <div class="ta-c">
                <!-- <svg-icon class-name="logo" icon-class="pifu" /> -->
                <h2 class="fw400">榕数助理开放平台-销售管理系统</h2>
                <p class="ft16 fw400 letter-spacing1 ">泛华榕数，您身边的金融保险服务管家</p>
            </div>
        </div>
        <div class="login-box flex-center-vertical">
            <div class="login-panel">
                <el-form ref="loginForm" :model="loginFields" :rules="rules" label-position="top">
                    <h3 class="ft24 line-height24 mb16 c-233 fw-500">
                        您好！
                    </h3>
                    <p class="ft16 c-233 line-height16 fw400">欢迎登录泛华榕数开放平台</p>
                    <el-form-item label="用户名：" prop="username">
                        <el-input v-model="loginFields.username" class="login-input" type="tel" auto-complete="off" maxlength="11" placeholder="请输入手机号" />
                    </el-form-item>
                    <el-form-item label="密码：" prop="password">
                        <el-input v-model="loginFields.password" show-password class="login-input" type="password" auto-complete="off" placeholder="请输入密码" />
                    </el-form-item>
                    <div class="full-width">
                        <el-button class="login-btn full-width" type="primary" :loading="inLoading" @click.native.prevent="submitHandler">
                            登录
                        </el-button>
                    </div>
                    <div class="full-width flex-between-center mt30">
                        <el-checkbox v-model="isRember" class="ft12 height12 c-233">记住密码</el-checkbox>
                        <span class="c-233 pointer" size="mini" @click="handleForget">
                            忘记密码？
                        </span>
                    </div>
                </el-form>
                <ResetPwd v-if="visible" :visible.sync="visible" />
            </div>
        </div>
    </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
import { setStorage, getStorage } from '@/tool/storage';
import ResetPwd from './resetPwd';
import appInfo from '@/tool/appInfo';

export default {
    name: 'Login',
    components: {
        ResetPwd
    },
    props: {},
    data() {
        return {
            loginFields: {
                username: process.env.VUE_APP_ENV_CONFIG === 'uat' ? '18164025093' : 'zhuxy07', // uat账号 18164025093
                password: process.env.VUE_APP_ENV_CONFIG === 'uat' ? '123qwe@@@' : '123456' // uat密码123qwe@@
            },
            rules: {
                username: [
                    {
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur'
                    }
                ],
                password: [
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }
                ]
            },
            isRember: false,
            visible: false
        };
    },
    computed: {
        ...mapState({
            inLoading: state => state.user.inLoading,
            isLogin: state => state.user.isLogin
        })
    },
    watch: {
        // 监听登录状态
        isLogin(val) {
            if (val) {
                this.$router.push('/main');
            }
        }
    },
    mounted() {
        if (getStorage({ name: 'loginCredential' })) {
            this.$store.commit('user/setLoginForm', getStorage({ name: 'loginCredential' }));
        }
    },
    methods: {
        ...mapActions('user', ['login']),

        handleForget() {
            this.visible = true;
        },

        submitHandler(e) {
            e.preventDefault();
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    // 请求登录接口
                    const parmas = {
                        loginCode: String(this.loginFields.username),
                        imeiType: '1',
                        password: this.loginFields.password,
                        platformCode: appInfo.app.platformCode,
                        saasId: appInfo.app.saasId,
                        userAgent: window.navigator.userAgent.toLowerCase(),
                        terminal: 'WEB'
                    };
                    this.login(parmas);
                    if (this.isRember) {
                        this.rememberCredential();
                    }
                }
            });
        },
        rememberCredential() {
            setStorage({ name: 'loginCredential', content: this.loginFields });
        }
    }
};
</script>

<style lang="less" scoped>
#Login {
	background: #fff;
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	background-image: url('../../assets/img/login_bg.jpg');
	background-size: cover;
	background-position: center;
	.shade-panel {
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		.ta-c {
			img {
				display: block;
				width: 80px;
				height: 80px;
				margin: 0 auto;
			}
			h2 {
				margin: 10px 0;
				font-size: 30px;
				line-height: 42px;
			}
			p {
				position: relative;
				height: 20px;
				line-height: 20px;
				margin-top: 4px;
				padding-left: 48px;
				padding-right: 48px;
				&:before {
					content: '';
					position: absolute;
					width: 40px;
					height: 1px;
					background: #ffffff;
					top: 9px;
					left: 0;
				}
				&:after {
					content: '';
					position: absolute;
					width: 40px;
					height: 1px;
					background: #ffffff;
					top: 9px;
					right: 0;
				}
			}
		}
	}
	.login-box {
		width: 466px;
		height: 100%;
		box-sizing: border-box;
		background-color: #fff;
		padding-left: 80px;
		padding-right: 80px;
		margin-left: auto;
		.login-panel {
			width: 100%;
			p {
				margin-bottom: 72px;
			}
			.login-btn {
				background-image: linear-gradient(-45deg, #2081FF 0%, #2279FF 100%);
				background-image: -webkit-linear-gradient(-45deg, #2081FF 0%, #2279FF 100%);
				border-color: #2081FF;
			}
		}
	}
}
</style>

