<template>
  <div class="login-container">
    <div class="signin_left">
      <div class="signin_content">
        <!-- <img class="signin_logo" src="../../assets/imgs/signin_logo.png" alt="logo"> -->
        <!-- <h1 class="signin_title">足力健老人鞋</h1>
        <div class="signin_des">
          <h3 class="signin_subtitle">欢迎开启智能化沟通之旅！</h3>
          <p>足力健老人鞋是在国家卫健委关心支持和重视推动下，由中国医学科学院阜外医院、国家心血管病中心与河南省人民政府合作共建。</p>
          <p>依托河南省人民医院，按照国家三级甲等心血管病医院标准和现代医院管理制度要求建设的非营利性公立医院，是国家心血管病中心在全国布局的唯一分中心国家心血管病中心华中分中心所在地。</p>
        </div> -->
      </div>
    </div>
    <div class="signin_right">
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
		<div class="logo_setting">
			<img src="../../assets/imgs/zlj_logo.png" alt="" srcset="">
        	<h2 class="title">电视购物中心客服系统</h2>
		</div>
        <!-- <h3 class="subtitle">标准版 在线演示系统</h3> -->
        <el-select v-model="userRole" placeholder="请选择您的角色" @change="toggle">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <el-form-item prop="username">
          <span class="svg-container svg-container_login">
            <svg-icon icon-class="guanliyuan" />
          </span>
          <el-input v-model="loginForm.username" name="username" type="text" auto-complete="off" placeholder="请输入管理账号" />
        </el-form-item>
        <transition name="el-fade-in-linear">
          <el-form-item v-show="isShow" prop="extension">
            <span class="svg-container svg-container_login">
              <svg-icon icon-class="fenji" />
            </span>
            <el-input v-model="loginForm.extension" name="extension" type="text" auto-complete="off" placeholder="请输入分机号" />
          </el-form-item>
        </transition>
        <el-form-item prop="password">
          <span class="svg-container">
            <svg-icon icon-class="password"/>
          </span>
          <el-input :type="pwdType" v-model="loginForm.password" name="password" auto-complete="new-password" placeholder="请输入密码" @keyup.enter.native="handleLogin"/>
          <span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" /></span>
        </el-form-item>
        <el-form-item class="btn_login">
          <el-button v-waves :loading="loading" type="primary" size="middle" style="width:100%;" @click.native.prevent="handleLogin">
            立即登录
          </el-button>
        </el-form-item>
      </el-form>
      <p class="copyright">
        <!-- 河南加一网络科技有限公司 &copy; -->
      </p>
    </div>
  </div>
</template>

<script>
import { validUsername, validPassword, validExtension } from '@/utils/validate'

export default {
  name: 'Login',
  data() {
    const validateUser = (rule, value, callback) => {
      if (!validUsername(value)) {
        callback(new Error('管理员账号格式(4-20个字符只能是字母、下划线、数字)！'))
      } else {
        callback()
      }
    }
    const validatePass = (rule, value, callback) => {
      if (!validPassword(value)) {
        callback(new Error('密码格式(6-32个字符只能是字母、下划线、数字)！'))
      } else {
        callback()
      }
    }
    return {
      userRole: '1',
      isShow: false,
      loginForm: {
        username: '',
        extension: '',
        password: ''
      },
      options: [
        {
          value: '0',
          label: '管理员'
        }, {
          value: '1',
          label: '坐席'
        }
      ],
      loginRules: {
        username: [{
          required: true,
          trigger: 'blur',
          validator: validateUser
        }],
        password: [{
          required: true,
          trigger: 'blur',
          validator: validatePass
        }]
      },
      loading: false,
      pwdType: 'password'
    }
	},
	created() {
		this.toggle()
	},
  methods: {
    showPwd() {
      if (this.pwdType === 'password') {
        this.pwdType = ''
      } else {
        this.pwdType = 'password'
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('Login', this.loginForm).then(() => {
            this.loading = false
            this.$router.push({
              path: '/'
            })
          }).catch(() => {
            this.loading = false
          })
        } else {
          this.$message.error('请输入有效的必填项信息!')
          return false
        }
      })
    },
    toggle() {
      const validateExt = (rule, value, callback) => {
        if (!validExtension(value)) {
          callback(new Error('分机号格式(4-20个字符只能是数字)！'))
        } else {
          callback()
        }
      }
			this.isShow = !this.isShow
      if (this.isShow) {
				this.loginRules.extension = [{
					required: true,
          trigger: 'blur',
          validator: validateExt
        }]
      } else {
				this.loginRules.extension = []
			}
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
	$bg:rgba(1, 0, 0, 0.4);
	$light_gray:#808080;
	/* reset element-ui css */
	.login-container {
		font-family: "microsoft yahei", 微软雅黑;
		.el-input {
			display: inline-block;
			height: 42px;
			width: 85%;
			input {
				background: transparent;
				border: 0px;
				-webkit-appearance: none;
				border-radius: 0px;
				padding: 12px 5px 12px 15px;
				color: $light_gray;
				height: 42px;
				&:-webkit-autofill {
					-webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
					box-shadow: 0 0 0px 1000px $bg inset !important;
					-webkit-text-fill-color: #fff !important;
				}
			}
		}
		.el-select,
		.el-form-item {
			border: 1px solid #e1e6eb;
			background: #ffffff;
			border-radius: 2px;
			color: $light_gray;
		}
		.el-select {
			margin-bottom: 18px;
			width: 100%;
			.el-input{
				width: 100%;
			}
		}
		.signin_btn{
			.el-button--primary{
				border-color: transparent;
			}
			.el-button--primary:focus,
			.el-button--primary:active,
			.el-button--primary:hover{
				border-color: transparent;
			}
			.signin_btn_home:hover{
				background-color: #8ce0e9!important;
			}
			.signin_btn_download:hover{
				background-color: #66b1ff!important;
			}
			.signin_btn_service:hover{
				background-color: #7fc0ba!important;
			}

		}
	}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
	$bg:rgba(1, 0, 0, 0.4);
	$dark_gray:#889aa4;
	.el-scrollbar__wrap{
		overflow: scroll;
	}
	.login-container {
		position: fixed;
		height: 100%;
		width: 100%;
		overflow: hidden;
		.signin_left:before{
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			width: 100%;
			height: 100%;
			content: "";
			-webkit-background-size: 100% 100%;
			background-size: 100% 100%;
			background: url('../../assets/imgs/signin_bg.png') no-repeat left top;
		}
		.signin_left{
			width: calc(100% - 470px);
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			// background: $bg;
			transition: all 1s;
			-webkit-transition: all 1s;
			.signin_content{
				color: #fff;
				position: absolute;
				padding-left: 80px;
				padding-right: 80px;
				top: 26%;
				transition: all 1s;
				-webkit-transition: all 1s;
				.signin_logo{
					width: 24px;
					height: 28px;
					display: inline-block;
					vertical-align: middle;
				}
				.signin_title{
					display: inline-block;
					font-size: 28px;
					padding-left: 5px;
					margin-top: 0;
					margin-bottom: 0;
					vertical-align: middle;
				}
				.signin_des{
					transition: all 1s;
					-webkit-transition: all 1s;
				}
				.signin_des p{
					line-height: 30px
				}
				.signin_subtitle{
					margin-top: 26px;
					margin-bottom: 34px;
					font-size: 20px;
				}
				p{
					margin-top: 0;
					margin-bottom: 13px;
					font-size: 14px;
				}
				.signin_btn{
					margin-top: 30px;
					font-size: 14px;
					.signin_btn_home{
						background-color: #57c7d4;
					}
					.signin_btn_download{
						background-color: #409eff;
					}
					.signin_btn_service{
						background-color: #3aa99e;
					}
					.svg-icon{
						width: 1.8em;
					}
				}
			}
		}
		.signin_right{
			position: absolute;
			top: 0;
			right: 10%;
			width: 470px;
			background-color: #fff;
			height: 100%;
			transition: all 1s;
			-webkit-transition: all 1s;
			.login-form {
				width: 350px;
				position: absolute;
				top: 26%;
				left: 50%;
				margin-left: -175px;
				transition: all 1s;
				-webkit-transition: all 1s;
			}
			.title {
				font-size: 18px;
				margin: 0;
				color: #666666;
				transition: all 1s;
				-webkit-transition: all 1s;
				margin-bottom: 40px;
			}
			.subtitle{
				font-size: 14px;
				margin-top: 18px;
				margin-bottom: 50px;
				color: #cccccc;
				transition: all 1s;
				-webkit-transition: all 1s;
			}
			.svg-container {
				padding: 6px 5px 6px 15px;
				color: $dark_gray;
				vertical-align: middle;
				width: 30px;
				display: inline-block;
				&_login {
					font-size: 20px;
				}
			}
			.show-pwd {
				position: absolute;
				right: 10px;
				top: 7px;
				font-size: 16px;
				color: $dark_gray;
				cursor: pointer;
				user-select: none;
			}
			.copyright{
				font-size: 12px;
				color: #666666;
				text-align: center;
				width: 100%;
				position: absolute;
				bottom: 7.4%;
				margin: 0 auto;
				transition: all 1s;
				-webkit-transition: all 1s;
			}
		}
	}
	.logo_setting{
		vertical-align: middle;
		.title{
			vertical-align: middle;
			display: inline-block;
		}
	}
	.el-button--primary{
		background-color: #e60012 !important;
		border-color: #e60012 !important;
		border-radius: 20px;
	}
	.btn_login{
		border-radius: 20px;
		border: none !important;
	}
	@media only screen and (max-width: 984px) {
		.login-container {
			.signin_left{
				.signin_content{
					text-align: center;
					top: 50%;
					margin-top: -22px;
				}
				.signin_des{
					display: none;
				}
			}
		}
	}
	@media only screen and (max-width: 805px) {
		.login-container {
			.signin_left{
				display: none;
			}
			.signin_right{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				.login-form{
					width: 100%;
					padding-left: 25px;
					padding-right: 25px;
					text-align: center;
					left: auto;
					margin: auto;
					top: auto;
				}

			}
		}
	}
	@media only screen and (max-height: 768px) {
		.login-container {
			.signin_right{
				.copyright{
					bottom: 3.5%;
				}
			}
		}
	}
	@media only screen and (max-height: 660px) {
		.login-container {
			.signin_right{
				.copyright{
					display: none;
				}
			}
		}
	}
</style>
