<template>
	<div class="main">
		<div class="content">
			<div class="h01">充电宝OQC系统</div>
			<div class="c_in">
        <el-input
          placeholder="账户"
          prefix-icon="el-icon-user"
          v-model="username"
          class="inp">
        </el-input>
			</div>
			<div class="c_in">
        <el-input
          placeholder="密码"
          prefix-icon="el-icon-lock"
          v-model="password"
          show-password
          class="inp">
        </el-input>
			</div>
			<el-button class="btn" :loading="loading" @click.native.prevent="signIn">登陆</el-button>
      <!--      <el-button @click.native.prevent="signInTest">测试登陆</el-button>-->
		</div>
	</div>
</template>
<script>
	import request from '@/utils/request'
	export default {
		created() {
      console.log('login')
      this.$parent.showNav = true
			let _this = this
			this.setFontSize()
			window.onresize = function() {
				_this.setFontSize()
			}
		},
		mounted() {
      localStorage.userInfo = ''
      localStorage.pdaId = ''
      this.showNav = false
    },
		data() {
			return {
				pda: '',
				pdaId: 'PDA_5X_CK2_KK',
				loading: false,
				username: '',
				password: '',
				pickerShow: false,
				columns: [
					// {
					//   label: 'GF9机加车间',
					//   id: 'PDA_5X_GF9_JJ'
					// },
					// {
					//   label: '493机加车间',
					//   id: 'PDA_5X_493_JJ'
					// },
					// {
					//   label: '375装配车间',
					//   id: 'PDA_5X_375_ZP'
					// },
					// {
					//   label: '375机加车间',
					//   id: 'PDA_5X_375_JJ'
					// },
					// {
					//   label: 'GF9装配车间',
					//   id: 'PDA_5X_GF9_ZP'
					// },
					// {
					//   label: '机油泵车间',
					//   id: 'PDA_5X_OilPump'
					// },
					// {
					//   label: '电子泵车间',
					//   id: 'PDA_5X_ElectronicPump'
					// }
					{
						label: '仓库1',
						id:'PDA_5X_CK1_KK'
					},
					{
						label: '仓库2',
						id:'PDA_5X_CK2_KK'
					}
				]
			}
		},
		methods: {
			setFontSize() {
				document.documentElement.style.fontSize = document.documentElement.clientWidth * 8 / 320 + 'px'
			},
      signInTest() {
        this.username = '0000'
        this.password = 'admin'
        this.signIn()
      },
			signIn() {
				if (this.username === '' || this.password === '' || this.pdaId === '') {
					this.$message.warning('用户名,密码为空')
				} else {
					this.loading = true
					const param = {
						method: 'post',
						data: {
							type: '1',
							name: '菜单模块系统_用户名密码_查询数据_改造新增',
							param: `用户名=${this.username}&密码=${this.password}`
						}
					}
					request(param).then(res => {
						this.loading = false
						if (res.data.length === 0 || res.data[0].result === '0') {
							this.$message.error('用户名或密码错误')
						} else {
              this.$store.dispatch('saveUserInfo', res.data[0])
              this.getRole(res.data[0]['人员编号'])
              localStorage.userInfo = JSON.stringify(res.data[0])
							localStorage.pdaId = JSON.stringify(this.pdaId)
							this.$router.push({
								path: '/main'
							})
            }
					}).catch(err => {
            console.log(err)
						this.loading = false
						this.$message.error(err)
					})
				}
			},
      getRole(id) {
        localStorage.tokenCode = 3
        const param = {
          method: 'post',
          data: {
            type: '1',
            name: 'CATL_三级权限_查询节点',
            param: `人员编号=${id}`
          }
        }
        request(param).then(response => {
          if(response.data.length > 0) {
            let TokenCode = 3
            if (response.data.length > 0) {
              TokenCode = response.data[0]['当前权限']
            }
            localStorage.tokenCode = TokenCode
          }
        }).catch(err => {
          console.log(err)
        })
      }
		},
		computed: {},
		components: {},
		watch: {},
		props: {}
	}
</script>
<style lang="less" scoped>
	.main {
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: center;
		background-size: cover;
		background-position: center;
		background-attachment: fixed;
		background-repeat: no-repeat;
		padding-top: 12rem;
		overflow: auto;
		box-sizing: border-box;
	}

	.content {
		display: flex;
		align-items: center;
		flex-direction: column;
		//overflow: hidden;

		/deep/.el-range-editor.is-active,
		/deep/.el-range-editor.is-active:hover,
		/deep/.el-select .el-input.is-focus .el-input__inner {
			border-color: #000;
		}

		/deep/.el-select .el-input__inner:focus {
			border-color: #000;
		}

		.eSelect {
			width: 26rem;
			margin-top: 2rem;
		}

		/deep/.el-input__inner {
			background-color: transparent;
			border-top: 0;
			border-left: 0;
			border-right: 0;
			border-radius: 0;
      border: none;
			color: #000;
			font-size: 2.5rem;
      height: 2.5rem;
      line-height: 2.5rem;
      /deep/.el-input__icon {
        line-height: 1;
        font-size: 1.5rem;

      }
		}
    /deep/.el-input .el-input__clear{
      font-size: 1.5rem;
    }
	}

	input::input-placeholder {
		color: #000;
	}

	input::-webkit-input-placeholder {
		color: #000;
	}

	input::-moz-placeholder {
		/* Mozilla Firefox 19+ */
		color:#000;
	}

	input:-moz-placeholder {
		/* Mozilla Firefox 4 to 18 */
		color:#000;
	}

	input:-ms-input-placeholder {
		/* Internet Explorer 10-11 */
		color:#000;
	}

	.c_in {
		display: flex;
		justify-content: center;

		img {
			//position: absolute;
			left: 7rem;
			margin-top: 3rem;
			height: 3rem;
			width: 3rem;
		}
	}

	.content .inp {
    //margin-left: -70px;
		border-style: none;
		outline: none;
		background: none;
		border-bottom: 1px solid #000 !important;
		color: #000;
		font-size: 2.5rem;
		margin-top: 3rem;
		width: 22rem;
		padding-left: 2.5rem;
	}

	.content .btn {
		width: 26rem;
		margin-top: 3rem;
		border-style: none;
		outline: none;
		border-radius: 3rem;
		font-size: 2rem;
		background-color: #0128a9;
		cursor: pointer;
		color: #fff;
	}

	.content .h01 {
		color: #0128a9;
		font-weight: bold;
		font-size: 3.2rem;
	}

	.content .h02 {
		color: #000;
		font-size: 1.4rem;
		padding-bottom: 2rem;
	}
</style>
