<template>
	<view class="login">
		<NavBar :title="$t('希迈条码系统')" left=""></NavBar>
		<u-form ref="loginForm" :modelValue="loginForm" :rules="loginRules" class="login-form">
			<u-form-item prop="company">
				<zxz-uni-data-select :clear='false' class="item-select" filterable v-model="loginForm.company"
				dataKey="label" dataValue="value" :localdata="factoryData" @change="handleChange"/>
		  </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 || !loginForm.company"
		      style="margin-top: 50rpx"
		      @click="submit()"
		    >
		      <span>{{$t('登录')}}</span>
		    </button>
		  </u-form-item>
		</u-form>
	</view>
</template>

<script>
import i18n from '../../../lang/index'
import checkappupdate from '@/common/checkappupdate.js'

import {setLocal} from '@/lang'
  import config from "../../../common/staticConfig";
	export default {
		data() {
			return {
				loading: false,
				loginForm: {
					username: "",
					password: "", 
					company: null
				},
				loginRules: {
					username: {
						rules: [
						  { required: true, trigger: "blur", errorMessage: i18n.t('请输入您的账号') }
						],
					},
					password: {
						rules: [
							  { required: true, trigger: "blur", errorMessage: i18n.t('请输入您的密码') }
							]
					}
				},
				factoryData: config.factoryData,
			}
		},
		onLoad() {
			this.getExAccountInfo();
		},
		methods: {
			getExAccountInfo() {
				this.$u.api.getExAccountInfoApi().then(res => {
					this.factoryData = res.data.map((item) => {
						return {
							...item,
							label: item.accountName,
							value: item.id 
						}
					});
				})
			},
			handleChange(val) {
				this.$u.vuex('vuex_mes_url', val.mesUrl);
				this.$u.vuex('vuex_api_url', val.apiUrl);
				// #ifdef APP-PLUS
				checkappupdate.check({
					title: i18n.t('检测到有新版本！'),
					content: i18n.t('请升级app到最新版本！'),
					canceltext: i18n.t('暂不升级'),
					oktext: i18n.t('立即升级')
				})
   				 // #endif
			},
			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)
						console.log('res.data', res.data)
						res.data.locale ? setLocal(res.data.locale.substring(0, 2)) : setLocal('zh')
						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>
