<template>
	<view class="pageContent">
		<view class="loginModel">
			<view class="loginTitle" @click="show = true">
				{{user_typename}}登录 <u-icon name="list-dot" color="#000" style="margin-left: 40rpx;" size="28"></u-icon>
			</view>
			<u-line></u-line>
			<view class="loginInput">
				<u--input prefixIcon="account-fill" fontSize="20" v-model="userName"
					prefixIconStyle="font-size: 60rpx;color: #333333" placeholderClass="place-class" placeholder="账号"
					border="bottom" clearable></u--input>
			</view>
			<u-line></u-line>
			<view class="loginInput">
				<u--input prefixIcon="lock-fill" fontSize="20" :password="true" v-model="passWord" type="password"
					prefixIconStyle="font-size: 60rpx;color: #333333" placeholderClass="place-class" placeholder="密码"
					border="bottom" clearable></u--input>
			</view>
			<u-line></u-line>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-picker :show="show" :columns="columns" @cancel="show = false" closeOnClickOverlay="true"
			@confirm="confirm"></u-picker>
		<view @click="userLogin" class="loginBtn">
			登录
		</view>
		<u-popup :show="xyshow" @close="close" :round="10" mode="center" @open="open">
			<view class="xieyi">
				<view class="xyTitle">
					用户使用须知
				</view>
				<view class="xyContant">
					使用前，请您仔细阅读<text style="color: cornflowerblue;" @click="xieyi">《用户服务协议》</text>及<text
						style="color: cornflowerblue;" @click="yinsi">《隐私政策》</text>
				</view>
				<view class="btnList">
					<view class="btnleft">
						<view class="btn" @click="xyshow = false">
							不同意
						</view>
					</view>
					<view class="btnright">
						<view class="btn" @click="xyshow = false">
							同意
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				xyshow: true,
				show: false,
				userName: '',
				passWord: '',
				user_type: 1,
				user_typename: '商家',
				columns: [
					['商家', '核销员', '员工']
				],
			}
		},
		onLoad() {
			console.log("未登录")
		},
		methods: {
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			confirm(e) {
				console.log(e.value)
				if (e.value[0] == '商家') {
					this.user_type = 1
					this.user_typename = '商家'
				} else if (e.value[0] == '核销员') {
					this.user_type = 2
					this.user_typename = '核销员'
				} else if (e.value[0] == '员工') {
					this.user_type = 3
					this.user_typename = '员工'
				}
				this.show = false
			},
			userLogin() {
				this.$request('/account-login', 'POST', {
					username: this.userName,
					password: this.passWord,
					user_type: this.user_type + ''
				}).then(res => {
					console.log('请求成功')
					uni.setStorageSync('token', res.data.Authorization)
					this.getUserInfo()
				}).catch(err => {
					uni.showToast({
						icon: 'error',
						title: '' + err.message
					})
				})

			},
			//获取用户信息
			getUserInfo() {
				this.$request('/merchant-info', 'GET', {}).then(res => {
					console.log('请求成功')
					uni.setStorageSync('userInfo', res.data)
					uni.showToast({
						icon: 'success',
						title: '登录成功',
						complete() {
							if (res.data.role_id == 1) {
								uni.switchTab({
									url: '/pages/index/index'
								})
							} else if (res.data.role_id == 2) {
								uni.reLaunch({
									url: '/pages/writeOffindex/writeOffindex'
								})
							} else if (res.data.role_id == 3) {
								uni.reLaunch({
									url: '/pages/index/index'
								})
							}
						}
					})

				}).catch(err => {
					uni.showToast({
						icon: 'error',
						title: '' + err.message
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.pageContent {
		width: 100vw;
		height: 100vh;
		background: linear-gradient(to bottom, #f3d4d7, #f8f8f8, #f8f8f8);
	}

	.loginModel {
		width: calc(100% - 100rpx);
		margin: 0 50rpx;
		padding-top: 300rpx;
	}

	.loginTitle {
		text-align: center;
		font-size: 56rpx;
		font-weight: 600;
		margin-bottom: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.loginInput {
		margin: 40rpx 0;
	}

	.loginInput .place-class {
		color: #333333 !important;
	}

	::v-deep .loginInput .u-input {
		border: none !important;
	}

	.loginBtn {
		width: calc(100% - 100rpx);
		margin: 0 50rpx;
		position: fixed;
		bottom: 106rpx;
		height: 90rpx;
		color: #ffffff;
		text-align: center;
		letter-spacing: 5rpx;
		line-height: 90rpx;
		font-size: 36rpx;
		background-color: #D3195E;
		border-radius: 90rpx;

	}

	.xieyi {
		width: 600rpx;
		height: 400rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}

	.xyTitle {
		text-align: center;
		font-size: 40rpx;
		font-weight: 600;
		margin-top: 50rpx;
	}

	.xyContant {
		margin: 50rpx 30rpx;
		font-size: 30rpx;
	}

	.btnList {
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		text-align: center;
		line-height: 80rpx;
		// margin-bottom: 50rpx;
	}

	.btnleft {
		width: 260rpx;
		height: 80rpx;
		border-radius: 40rpx;
		color: #D3195E;
		border: 1rpx solid #D3195E;
	}

	.btnright {
		width: 260rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: #D3195E;
		color: #FFFFFF;
	}
</style>