<template>
	<view class="user-bind-erp column items-center">
		<view class="row items-center" style="margin-top: 5vh;"  v-if="!user.erpBaseInfo">
			<image class="logo" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638766970838521511.jpeg" mode="widthFix"></image>
			<u-icon class="q-ml-md q-mr-md"  name="wangfan1" custom-prefix="tffont" color="#00000066" size="36"></u-icon>
			<image class="logo" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638766970838511899.png" mode="widthFix"></image>
		</view>
		<view class="login-form" v-if="!user.erpBaseInfo">
			<view class="login-title">绑定员工账号</view>
			<view class="login-item">
				<input type="text" v-model="model.account" placeholder="请输入ERP员工账号" :class="{'focus':currentFocus=='account'}" @blur="changeCurrentFocus('')"
				@focus="changeCurrentFocus('account')">
			</view>
			<view class="login-item">
				<input type="password" v-model="model.password" placeholder="请输入ERP员工密码" :class="{'focus':currentFocus=='pwd'}" @blur="changeCurrentFocus('')"
				@focus="changeCurrentFocus('pwd')">
			</view>
			<view class="login-item">
				<view @click="bindErpAccountHandle" class="login-btn">绑定</view>
			</view>
		</view>
		<view class="login-form" style="margin-top: 5vh;" v-else="user.erpBaseInfo">
			<view class="login-title">当前账号已绑定</view>
			<view class="q-mt-sm card row items-center">
				<image class="avatar" :src="user.erpBaseInfo.icon?user.erpBaseInfo.icon:defaultIcon"></image>
				<view class="q-ml-md">
					<view style="line-height: 1; font-size: 28rpx; font-weight: bold;">
						{{user.erpBaseInfo.emName}}
					</view>
					<view class="q-mt-sm num row items-center">
						<text style="padding: 6rpx;" class="text-center">{{ user.erpBaseInfo.branchName }}</text>
						<text class="text-center" style="padding:6rpx;color:#fff;background-color: #B99846;">{{user.erpBaseInfo.departName}}</text>
					</view>
				</view>
			</view>
			<view class="q-mt-md">
				<u-alert-tips type="error" description="已绑定的账号暂时不支持自行解绑"></u-alert-tips>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model:{
					account:'',
					password:''
				},
				user:{},
				mall:{},
				currentFocus: '',
				defaultIcon:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1695262844000_280.png'
			}
		},
		onLoad() {
			// #ifdef MP-AG
			uni.redirectTo({
				url:'/pages/index/index'
			})
			// #endif
			if(uni.getStorageSync('b2b_user') && uni.getStorageSync('mall_UserInfo')){
				this.user = uni.getStorageSync('b2b_user')
				this.mall = uni.getStorageSync('mall_UserInfo')
			} else {
				uni.redirectTo({
					url:'/pages/index/index'
				})
			}
		},
		methods: {
			changeCurrentFocus(val) {
				this.currentFocus = val
			},
			directUserLoginHandle(){
				let Pid = 0
				if(uni.getStorageSync('direct_user_id')){
					Pid = uni.getStorageSync('direct_user_id')
					if(isNaN(Pid)) Pid = 0
					uni.removeStorageSync('direct_user_id')
				}
				const {OpenId,Unoinid} = this.mall
				const parameters={
					OpenId,
					Unoinid,
					Pid
				}
				this.apipost("HePingGuoLvLogin_post", parameters, r =>{
					const u = r.data
					const user = {
						accountId: u.directCustomerId,
						customerId: u.directCustomerId,
						customerInfoChildrenId: u.directCustomerId,
						realNameAuthentication: 0,
						account: "",
						name:u.name,
						customerName: this.user.name,
						photo: u.photo,
						secretKey: "",
						token: u.token,
						groupId: 0,
						isMember: 0,
						createBy: u.pid,
						EmLoginMobile: u.moblie,
						contactNumber: u.moblie,
						salesBaseInfo: u.erpBaseInfo?u.erpBaseInfo:u.salesBaseInfo,
						pid:u.erpBaseInfo?u.erpBaseInfo.employeeId:u.pid,
						erpBaseInfo: u.erpBaseInfo,
						count: 0,
						isVip:u.isVip,
						customerType: 1, //直客，2-同行  
						directCustomerId: u.directCustomerId //直客Id
					}
					uni.setStorageSync('b2b_user', user)
					this.user = user
					uni.setStorageSync("lastLogin",new Date().getTime())
					this.$utils.setAttatchParameter(this)
					uni.hideLoading()
				},e=>{
					uni.hideLoading()
					uni.showToast({
						icon:'none',
						title: e.message || '绑定员工账号失败'
					})
				})
			},
			bindErpAccountHandle(){
				if(this.model.account=='' || this.model.password==''){
					uni.showToast({
						icon:'none',
						title:'请完善登录信息'
					})
					return
				}
				uni.showLoading({
					title:'正在验证用户信息'
				})
				const mall = uni.getStorageSync('mall_UserInfo')
				const parameters = {
					EmAccount:this.model.account,
					EmPassword:this.model.password,
					Unoinid:this.mall.Unoinid
				}
				this.apipost("HPSLBindEmp_post", parameters, r =>{
					if(r.resultCode == 1){
						this.directUserLoginHandle()
						return
					}
					uni.hideLoading()
					uni.showToast({
						icon:'none',
						title: r.message || '账号或密码错误'
					})
				},e=>{
					uni.showToast({
						icon:'none',
						title:e.message
					})
				})
			}
		}
	}
</script>

<style>
@import url('../../asset/css/flex.css');

.user-bind-erp {
	height: 100vh;
}
.user-bind-erp .bind-title{
	font-size: 36rpx;
	font-weight: bold;
	color: #180000;
}
.user-bind-erp .logo{
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
}
.user-bind-erp .login-form {
	margin-top: 50px;
	padding: 20px;
	width: 80vw;
}

.user-bind-erp .card{
	background-color: #FFF;
	box-shadow: 0 0 20rpx #00000014;
	padding: 30rpx;
	border-radius: 16rpx;
}
.user-bind-erp .card .num{
	border-radius: 7rpx;
	background-color: #100000;
	font-size: 22rpx;
	font-weight: 400;
	color: #f1f2f4;
	overflow: hidden;
	padding: 0;
	line-height: 1;
}
.user-bind-erp .card .avatar{
	width: 80rpx;
	height: 80rpx;
	border-radius: 16rpx;
}

.user-bind-erp .login-form .login-title {
	font-size: 20px;
	font-weight: 700;
	font-family: logo-font;
	margin-bottom: 30px;
	text-align: center;
}

.user-bind-erp .login-form .login-item {
	margin-top: 30px;
}

.user-bind-erp .login-form .login-item input {
	background-color: rgba(0, 0, 0, .05);
	padding: 0 12px;
	height: 46px;
	line-height: 46px;
	border-radius: 8px;
	color: #1d1d1d;
	font-family: nav-font;
}

.user-bind-erp .login-form .login-item input.focus {
	background: #1d1d1d;
	color: #FFF;
}

.user-bind-erp .login-form .login-btn {
	height: 80rpx;
	background-color: #111111;
	text-align: center;
	line-height: 80rpx;
	color: #fff;
	/* font-weight: 600; */
	font-size: 28rpx;
	border-radius: 16rpx;
	font-family: logo-font;
	font-size: 16px;
}

.user-bind-erp .login-form .login-btn.disable {
	opacity: 0.5;
}
</style>
