<template>
	<view class="container">
		<view class="logo_img">
			<image src="/static/icon/logo.png"></image>
		</view>
		<view class="list">
			<u-form :model="dataForm" ref="uForm">
				<view class="image">
					<!-- <image class="image-logo" src="/static/logo.png"></image> -->
					<view class="image-logo">
						您 好！
					</view>
				</view>
				<view class="list-call">
					<u-icon class="u-icon" size="40" name="file-text" />
					<u-input class="u-input" v-model="dataForm.username" type="text" placeholder="请输入工号"
						@input="loadBranchList" placeholder-style="color:#999999" />
				</view>
				<view class="list-call">
					<u-icon class="u-icon" size="40" name="lock" />
					<u-input class="u-input" v-model="dataForm.password" type="password" :password-icon="true"
						placeholder-style="color:#999999" />
				</view>
				<view class="list-call">
					<u-input v-model="dataForm.wareHouse" type="select" placeholder="请选择仓库" prop="wareHouse"
						class="u-input" placeholder-style="color:#000000" @click="wareShow = true" />
					<u-select :mask-close-able="false" :safe-area-inset-bottom="true" v-model="wareShow"
						mode="single-column" :list="wareHouseList" @confirm="confirm" />
				</view>
			</u-form>
			<view class="button" hover-class="button-hover" @click="submit()">
				<text>登 录</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataForm: {
					wareHouse: "",
					username: "",
					password: "",
					branchId: null
				},
				loadStatus: 'loadmore',
				loading: false,
				wareHouseList: [],
				wareShow: false, // 下拉选择器
			};
		},
		computed: {
			i18n() {
				return this.$t('login')
			}
		},
		onLoad() {
			//已经登录 跳转到首页
			if (this.vuex_token) {
				uni.reLaunch({
					url: "/pages/index/index",
				});
			}
		},
		methods: {
			loadBranchList(val) {
				this.wareHouseList = [];
				this.$u.api
					.getOptionBranchByUserName({
						userName: val,
					})
					.then((res) => {
						// console.log(res);
						let dataArry = res.data.baseBranchs;
						for (var i = 0; i < dataArry.length; i++) {
							var obj = {
								value: dataArry[i].id,
								label: dataArry[i].branchName,
							};
							this.wareHouseList.push(obj);
						}
					})
					.catch((e) => {
						this.$u.toast(e);
					});
			},
			confirm(e) {
				this.dataForm.wareHouse = e[0].label;
				this.dataForm.branchId = e[0].value
			},
			submit() {
				if (this.dataForm.username.length === 0) {
					this.$u.toast("请输入工号");
					return;
				}
				if (this.dataForm.password.length === 0) {
					this.$u.toast("请输入密码");
					return;
				}
				if (this.dataForm.wareHouse.length === 0) {
					this.$u.toast("请选择仓库");
					return;
				}

				// }

				// })
				//登录接口
				this.$u.api
					.login({
						username: this.dataForm.username,
						password: this.dataForm.password,
						branchId: this.dataForm.branchId
					})
					.then((res) => {
						const code = res.code;
						if (code !== 200) {
							this.$u.toast('登录失败');
						} else {
							this.$u.toast("恭喜您，登录成功！");
							// 登陆成功，存token
							this.$u.vuex("vuex_token", res.token);
							//查询用户详细信息并储存
							this.$u.api.getUserInfo().then((res) => {
								this.$u.vuex("vuex_user", res.user);
							});
							//跳转页面
							setTimeout(() => {
								uni.reLaunch({
									url: "/pages/index/index",
								});
							}, 500);
						}
					})
					.catch((e) => {
						this.$u.toast(e);
					});
			},
		},
	}
</script>
<style lang="scss">
	@import "login.scss";
</style>
