<template>
	<div class="contain-area">
		<div class="login-container df">
			<div class="content-left">
				<div class="company-name f20 wh">欢迎来到智链互联跨境电商ERP</div>
				<div class="f12 wh ml30 mr30 lh22">【智链互联跨境电商ERP】是杭州智链互联网络科技有限公司旗下的跨境电商ERP系统。支持Wish、AliExpress、Joom、Shopee、Lazada等平台；提供同步产品、创建产品、同步订单、处理订单、WMS系统等整个流程主要功能，以及更多其他辅助功能。</div>
				<img :src="loginIcon" class="login-icon"/>
			</div>
			<el-form
				:model="ruleForm2"
				:rules="rules2"
				ref="ruleForm2"
				label-position="left"
				label-width="0px"
				class="demo-ruleForm tc"
			>
				<div class="title">登录LOGIN</div>
				<div class="f14 font-color mb40">专业一站式跨境ERP</div>
				<el-form-item prop="account">
					<el-input type="text" v-model="ruleForm2.account" placeholder="请输入账号" @change="acountChange"  @keyup.enter.native="handleSubmit2"  prefix-icon="el-icon-user"></el-input>
				</el-form-item>
				<el-form-item prop="checkPass">
					<el-input type="password" v-model="ruleForm2.checkPass" placeholder="请输入密码" prefix-icon="el-icon-lock" @keyup.enter.native="handleSubmit2"></el-input>
				</el-form-item>
				<el-form-item prop="roleId"  v-if="roleList.length>0">
					<el-select v-model="ruleForm2.roleId" placeholder="请选择角色" class="wpt100">
						<el-option :label="item.name" :value="item.id" v-for="(item,index) in roleList" :key="index"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						class="mt15 wpt100 bg-blue"
						@click.native.prevent="handleSubmit2"
						:loading="logining"
					>登   录</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="footer-style">
			<div class="footer-bottom">
				<div>版权所有：杭州{{jieziman?'智链互联网络':'红茄'}}科技有限公司</div>
				<!-- <span>Copyright2016-2019</span>
				<span>公安备案号：沪ICP备16032655号-4</span> -->
			</div>
		</div>
	</div>
</template>

<script>
import loginIcon from '@/assets/img/loginIcon.png';
export default {
  data() {
    return {
			loginIcon,
      logining: false,
      ruleForm2: {
        account: "",
				checkPass: "",
				roleId:""
      },
      rules2: {
        account: [
          { required: true, message: "请输入账号", trigger: "blur" }
        ],
        checkPass: [
          { required: true, message: "请输入密码", trigger: "blur" }
        ]
      },
			checked: true,
			roleList:[],
			jieziman:true
    };
	},
	mounted(){
		if(window.location.host.indexOf('printwe.net')>0){
			this.jieziman=false
		}else{
			this.jieziman=true
		}
	},
  methods: {
		acountChange(val){
			// this.roleList=[]
			this.ruleForm2.roleId=''
		},
    handleSubmit2(ev) {
      var _this = this;
      this.$refs.ruleForm2.validate(valid => {
        if (valid) {
					this.logining = true;
					const{ruleForm2}=this
          this.axios({
            url: "assistant/login",
            data: {
              account: ruleForm2.account,
							password: ruleForm2.checkPass,
							roleId:ruleForm2.roleId
            },
            method: "post"
          }).then(res => {
              if (!res.success) {
								this.roleList=res.module.roleList
								this.logining = false;
								return false;
							}
              let user = {
                name: res.module.account,
                id: res.module.id,
							};
							localStorage.setItem("user", JSON.stringify(user));
							this.$router.push({path:'product/productList'});
							this.logining = false;
            }).catch(() => {
 							this.logining = false;
						});
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.contain-area{
	background: #F6F8FB;
	position: absolute;
	height: 100%;
	width: 100%;
}
.login-container {
  /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-clip: padding-box;
  margin: 140px auto;
  width: 860px;
  // padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
	.content-left{
		width: 400px;
		height: 500px;
		background: #367EE2;
		.company-name{margin: 64px 55px 20px}
		.login-icon{margin: 40px 0 0 70px;}
	}
	.demo-ruleForm{
		width: 460px;
		padding: 60px
	}
	.mt15{margin-top: 15px}
  .title {
    margin: 4px 0 0;
		font-size: 28px;
    color: #367EE2;
  }
}
.footer-style{
	text-align: center;
	color: #999999;
	position: absolute;
	bottom: 15px;
	font-size: 12px;
	width: 100%;
	.footer-bottom{
		position: relative;
		margin: 10px auto 0 auto;
		span{
			padding-right: 20px
		}
	}
}
</style>
