<template>
	<view class="addGasStation">
		<view class="addGasStationForm">
			<view class="formItem">
				<view class="formItemTitle">
					<text>*</text>
					<text class="title">
						员工姓名
					</text>
				</view>

				<view class="formItemValue">
					<u--input class="ipt" border="none" type="text" placeholder="请输入员工姓名"
						v-model="queryInfo.staffName" clearable></u--input>
				</view>
			</view>
			<view class="formItem">
				<view class="formItemTitle">
					<text>*</text>
					<text class="title">
						手机号
					</text>
				</view>

				<view class="formItemValue">
					<u--input border="none" maxlength="11" type="number" placeholder="请输入手机号"
						v-model="queryInfo.staffPhone" clearable></u--input>
				</view>
			</view>
			<view class="formItem">
				<view class="formItemTitle">
					<text>*</text>
					<text class="title">
						密码
					</text>
				</view>

				<view class="formItemValue">
					<u--input border="none"  :type="isEye?'text':'password'" placeholder="请输入密码"
						v-model="queryInfo.staffPassword" clearable>
							<!-- <view slot="suffix" @click="handleEye">
								<u-icon :name="isEye?'eye':'eye-off'"></u-icon>
							</view> -->
						</u--input>
				</view>
			</view>

		</view>

		<view class="saveBtn" @click="saveBtn">
			保存
		</view>


	</view>
</template>

<script>
	const cityRows = require('../../components/map.json')

	export default {
		data() {
			return {
				queryInfo: {
					staffName: '',
					staffPhone: '',
					staffPassword: ''
				},
				isEye:false
			}
		},
		onLoad() {


		},
		methods: {
			handleEye(){
				this.isEye=!this.isEye
			},
			saveBtn() {
				let { staffName, staffPhone, staffPassword } = this.queryInfo
				if (!staffName) {
					uni.showToast({
						title: '请输入员工姓名',
						icon: 'none'
					});
					return
				}
				const phoneR = /^0?1[3|5|6|7|8|9][0-9]\d{8}$/;
				if (!staffPhone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return
				} else if (!phoneR.test(staffPhone)) {
					uni.showToast({
						title: '请先输入正确的手机号',
						icon: 'none'
					});
					return
				}

				if (!staffPassword) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return
				}
				let params={
					...this.queryInfo,
					storeUserId:uni.getStorageSync('storeUserId')
				}
				this.$http.post('/api/store/staff/add',params).then(res => {
					if (res.code == 200) {
						uni.showToast({
						    title: '人员添加成功',
						    icon: 'success',
						    duration: 2000
						});
						setTimeout(()=>{
							uni.navigateTo({
								url: '/pages/ygInfo/ygInfo'
							})
						},1000)
					} else {
						
					}
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #FAFAFA;
	}

	.addGasStation {
		padding: 20rpx 24rpx;
		padding-bottom: 200rpx;

		.addGasStationForm {
			width: 702rpx;
			background: #FFFFFF;
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			box-sizing: border-box;
			padding: 30rpx 20rpx;

			.formItemTitle {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				text {
					color: #FF0000;
					font-size: 28rpx;
					margin-right: 10rpx;
				}

				.title {
					font-size: 28rpx;
					color: #333333;
				}
			}

			.formItemValue {
				background: #FAF7F6;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 2rpx solid #E3CEC6;
				padding: 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				.ipt {
					font-size: 24rpx;
					flex: 1;
				}

				.downIcon {
					width: 22rpx;
					height: 11rpx;
				}
			}

			.addBtn {
				margin-left: 22rpx;
				width: 155rpx;
				height: 63rpx;
				background: #FAF7F6;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 2rpx dashed #FF4502;
				font-size: 24rpx;
				color: #FF4502;
				text-align: center;
				line-height: 63rpx;
				margin-left: auto;
			}
		}

		.formItem {
			margin-bottom: 30rpx;
		}

	}

	.saveBtn {
		position: fixed;
		width: 702rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #FF4502 0%, #FF8903 100%);
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		text-align: center;
		line-height: 100rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		left: 50%;
		bottom: 50rpx;
		transform: translateX(-50%);
		z-index: 999;
	}

	.formItemValueBox {
		display: flex;
		align-items: center;

		.text {
			text-align: right;
			font-size: 28rpx;
			color: #333333;
			width: 120rpx;
			margin-right: 14rpx;
		}
	}
</style>