<template>
	<view class="login">
		<NavBar :title="$t('希迈条码系统')" left=""></NavBar>
		<u-form ref="loginForm" :modelValue="loginForm" :rules="loginRules" class="login-form">
			<u-form-item prop="username">
				<zxz-uni-data-select :clear='false' class="item-select" filterable v-model="loginForm.company"
				dataKey="label" dataValue="value" :localdata="factoryData"/>
		  </u-form-item>
		  <u-form-item prop="username" class="under">
		    <input
		      v-model="loginForm.username"
		      type="text"
		      auto-complete="off"
		      :placeholder="$t('用户名')"
		    >
		      <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
		    </input>
		  </u-form-item>
		  <u-form-item prop="password" class="under">
		    <input
		      v-model="loginForm.password"
		      type="password"
		      :placeholder="$t('密码')"
		      @keyup.enter="submit"
		    >
		      <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
		    </input>
		  </u-form-item>
		  <u-form-item style="width:100%;">
		    <button
		      :loading="loading"
		      size="medium"
		      type="primary"
			  :disabled="!loginForm.username || !loginForm.password"
		      style="margin-top: 50rpx"
		      @click="submit()"
		    >
		      <span>{{$t('登录')}}</span>
		    </button>
		  </u-form-item>
		</u-form>
	</view>
</template>

<script>
import i18n from '../../../lang/index'

import {setLocal} from '@/lang'
  import config from "../../../common/staticConfig";
	export default {
		data() {
			return {
				loading: false,
				loginForm: {
					username: "",
					password: "", 
					company: config.factoryData[0].value
				},
				loginRules: {
					username: {
						rules: [
						  { required: true, trigger: "blur", errorMessage: i18n.t('请输入您的账号') }
						],
					},

					password: {
						rules: [
							  { required: true, trigger: "blur", errorMessage: i18n.t('请输入您的密码') }
							]
					}
				},
				factoryData: config.factoryData,
			}
		},
		methods: {
			submit(){
				this.$refs.loginForm.validate().then(valid => {
					if (valid) {
					  this.loading = true;
					  this.$u.api.login({
					  	username: this.loginForm.username,
					  	password: this.loginForm.password,
					  	company: this.loginForm.company
					  })
					  .then(res => {
						this.loading = false;
						this.$u.vuex('vuex_token', res.data.token)
						this.$u.api.getInfo().then(res1 => {
							if(!res1.user) this.$u.toast( i18n.t('获取用户语言失败'))
							res1.user.locale ? setLocal(res1.user.locale.substring(0, 2)) : setLocal('zh')
						}).catch(e => {
							console.log('getInfo', e)
						})
						this.$u.vuex('vuex_user', res.data)
					  	if (res.success) {
					  		setTimeout(() => {
					  			uni.reLaunch({
					  				url: '/pages/index/index'
					  			});
					  		}, 500);
					  	} else {
							this.$u.toast(res.errorMessage);
						}
					  });
					}
				});
			}
		}
	}
</script>

<style lang="scss">
page {
    background-color: #ffffff;
    background-size: 100% 100%;
    width: 100%;  height: 100%;
}

.login {
  height: 100%;
  width: 100%;
  position: relative;
}
.item-select {
	/deep/ .uni-select {
		border: none;
		padding-left: 0px;
	}
}
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-form {
	position: absolute;
  border-radius: 6px;
  background: #ffffff;
  width: 80%;
  left: 50%;
  margin-top: 70rpx;
  transform: translateX(-50%);
  padding: 25px 25px 5px 25px;
}
</style>
