<template>
    <div class="login-content">
        <div class="login-container dis-flex">
            <div class="login-left">
                <div class="f32 g47 b company-title mt65">{{jieziman?'智链互联':'红茄'}}</div>
                <div class="f32 g47 b company-title mt20">物流配置中心</div>
                <!-- <div class="sys-remark company-title">整合数据让企业成本清晰可见 ！</div> -->
            </div>
            <div class="login-right">
                <div class="f24 wh login-text"><img :src="logo"/>登录</div>
                <el-form
                    :model="financeForm"
                    :rules="financeRules"
                    ref="financeForm"
                    class="mt40"
                >
                    <el-form-item prop="account">
                        <el-input type="text" v-model="financeForm.account" auto-complete="off" placeholder="请输入用户名"
                                  autocomplete="off"
                                  @keyup.enter.native="financeLogin()"
                                  @input="checkAccount"/>
                    </el-form-item>
                    <el-form-item prop="checkPass">
                        <el-input :type="financeForm.checkPass?'password':'text'" v-model="financeForm.checkPass"
                                  auto-complete="off" placeholder="请输入密码"
                                  autocomplete="off"
                                  @keyup.enter.native="financeLogin()"
                                  @input="checkAccount"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="login-button" @click.native.prevent="financeLogin" :loading="logining">登录
                        </el-button>
                    </el-form-item>
                </el-form>
                <img :src="login" class="w26 mt30"/>
                <div class="wh f12 mt5">杭州{{jieziman?'智链互联网络':'红茄'}}科技有限公司</div>
            </div>
        </div>
        <el-dialog title="选择角色" :visible.sync="dialogVisibleRole" width="35%" @close="dialogVisibleRole = false"
                   top="250px" :close-on-click-modal='false'>
            <div class="mt20 tc">
                <div v-if="chooseRole">
                    <el-select v-model="roleId" placeholder="请选择角色" auto-complete="off" size="small"
                               @keyup.enter.native="roleLogin()">
                        <el-option v-for="role in roleList" :key="role.id" :label="role.name"
                                   :value="role.id"></el-option>
                    </el-select>
                </div>
                <div v-if="chooseOrg">
                    <el-select v-model="roleId" placeholder="请选择角色" auto-complete="off" size="small"
                               @keyup.enter.native="roleLogin()">
                        <el-option v-for="org in orgList" :key="org.ids" :label="org.name"
                                   :value="org.ids"></el-option>
                    </el-select>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="roleLogin">确 定</el-button>
			</span>
        </el-dialog>
    </div>
</template>

<script>
import logo from '@/assets/img/logo1.png'
import login from '@/assets/img/login.png'

export default {
    data() {
        return {
            logo,
            login,
            logining: false,
            financeForm: {
                account: '',
                checkPass: ''
            },
            financeRules: {
                account: [
                    {required: true, message: "请输入用户名", trigger: "blur"}
                ],
                checkPass: [
                    {required: true, message: "请输入密码", trigger: "blur"}
                ]
            },
            dialogVisibleRole: false,
            roleList: [],
            orgList: [],
            token: '',
            chooseRole: false,
            chooseOrg: false,
            roleId: '',
						jieziman:true
        };
    },
		mounted() {
			if(window.location.host.indexOf('printwe.net')>0){
				this.jieziman=false
			}else{
				this.jieziman=true
			}
		},
    methods: {
        financeLogin() {
            let that = this;
            that.$refs['financeForm'].validate(valid => {
                if (!valid) {
                    return;
                }
                let loginData = {
                    account: that.financeForm.account,
                    password: that.financeForm.checkPass
                };
                that.axios({
                    url: "finance/login/financeLogin",
                    method: "POST",
                    data: loginData
                }).then(res => {
                    that.logining = false;
                    if (!res.success) {
                        that.$message.error("登录失败!");
                        that.logining = false;
                        return false;
                    }
                    that.roleId = '';
                    that.orgList = [];
                    that.roleList = [];
                    that.dialogVisibleRole = true;
                    that.saveUserInfo(res);
                })
            });
        },
        checkAccount() {
            let that = this;
            that.dialogVisibleRole = false;
            that.chooseRole = false;
            that.chooseOrg = false;
            that.roleId = '';
            that.orgList = [];
            that.roleList = [];
            localStorage.setItem("user", null)
        },
        roleLogin() {
            let that = this;
            let roleData = {
                roleId: that.roleId,
                token: that.token
            };
            that.axios({
                url: "finance/login/roleLogin",
                method: "POST",
                data: roleData
            }).then(res => {
                if (!res.success) {
                    that.$message.error("登录失败!");
                    that.logining = false;
                    return false;
                }
                if(res.module == null){
                    than.$message.warning('该角色未拥有该系统的任何菜单权限!');
                    return false;
                }
                that.saveMenuInfo(res);
            });
        },
        saveUserInfo(userInfo){
            let that = this;
            let info = userInfo.module;
            that.token = info.token;
            let user = {
                name: info.name,
                account: info.account,
                token: that.token
            };
            let roleList = info.roleList;
            let orgList = info.orgList;
            localStorage.setItem("user", JSON.stringify(user));
            if (roleList != null) {
                if(roleList.length === 1){
                    that.roleId = roleList[0].id;
                    that.dialogVisibleRole = false;
                    that.roleLogin();
                    return ;
                }
                that.roleList = roleList;
                that.chooseRole = true;
                return ;
            }
            if(orgList != null){
                if(orgList.length === 1){
                    that.roleId = orgList[0].ids;
                    that.dialogVisibleRole = false;
                    that.roleLogin();
                    return ;
                }
                that.orgList = orgList;
                that.chooseOrg = true;
            }
        },
        saveMenuInfo(menuInfo){
            let that = this;
            let info = menuInfo.module;
            localStorage.setItem("menuTree", JSON.stringify(info));
            that.$router.push({name: "index"});
            let roleId = that.roleId;
            let logInfo = {
                roleIds: '',
                orgId: '',
                name:'',
                code: '',
                isRole: false,
                isMultiRole: false,
                roleList:[],
                orgList:[]
            };
            if (that.chooseRole) {
                that.roleList.forEach(item => {
                    if (roleId !== item.id) {
                        return ;
                    }
                    logInfo.roleIds = roleId;
                    logInfo.name = item.name;
                    logInfo.code = item.code;
                    logInfo.roleList = that.roleList;
                    logInfo.isRole = true;
                });
                if(that.roleList.length > 1){
                    logInfo.isMultiRole = true;
                }
            } else if (that.chooseOrg) {
                that.orgList.forEach(item => {
                    if (roleId !== item.ids) {
                        return;
                    }
                    logInfo.roleIds = roleId;
                    logInfo.orgId = item.id;
                    logInfo.name = item.name;
                    logInfo.code = item.code;
                    logInfo.orgList = that.orgList;
                });
                if(that.orgList.length > 1){
                    logInfo.isMultiRole = true;
                }
            }
            localStorage.setItem("logInfo", JSON.stringify(logInfo));
        }
    }
};
</script>

<style lang="scss" scoped>
.login-content {
    background-image: url('~assets/img/indexbg.png');
    position: absolute;
    bottom: 0px;
    left: 0px;
    top: 0px;
    width: 100%;
    overflow: hidden;
    background-size: 100%;
}

.login-container {
    box-sizing: border-box;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 649px;
    height: 418px;
    // padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;

    .login-left {
        width: 383px;

        .company-title {
            text-align: right;
            margin-right: 44px;
        }

        .mt65 {
            margin-top: 55px;
        }

        .sys-remark {
            color: #AFC1FF;
            font-size: 13px;
            margin-top: 216px;
        }
    }

    .login-right {
        background: #4E74FC;
        width: 286px;
        text-align: center;

        .login-text {
            margin-top: 50px;
            text-align: center;

            img {
                vertical-align: text-bottom;;
                width: 28px;
                height: 28px;
                padding-right: 5px
            }
        }
    }

    .title {
        margin: 0px auto 40px auto;
        text-align: center;
        color: #505458;
    }

    .remember {
        margin: 0px 0px 35px 0px;
    }

    .mt40 {
        margin-top: 40px
    }

    .mt30 {
        margin-top: 30px
    }

    .login-button {
        width: 200px;
        border-radius: 100px;
        margin-top: 25px;
        color: #4E74FC;
    }

    .w26 {
        width: 26px;
    }
}
.el-button{
	border: 1px solid #fff;
}
input::-webkit-input-placeholder {
	/* WebKit browsers */
color: #fff!important;
}
input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #fff!important;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #fff!important;
}
input:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #fff!important;
}
</style>
