<template>
	<view>
		<view class='module'>
			<view class="cu-form-group">
				<view class="title">水牌号</view>
				{{form.brandNumber}}
			</view>
			<view class='common-hr'></view>
		</view>
		<view class='module'>
			<view class="cu-form-group">
				<view class="title">员工名称</view>
				<text v-show="!staffNameShow" @click="staffNameShow=true">
					{{form.staffName}}
				</text>
				<input v-show="staffNameShow" @blur="staffNameShow=false" type="text" v-mobel="form.staffName" />
			</view>
			<view class='common-hr'></view>
		</view>
		<view class='module'>
			<view class="cu-form-group">
				<view class="title">员工手机号</view>
				{{form.mobilePhone}}
			</view>
			<view class='common-hr'></view>
		</view>
		<view class='module'>
			<view class="cu-form-group">
				<view class="title">性别</view>
				<picker @change="PickerChange" v-mobel="form.sex" :range="picker">
					<view class="picker">
						{{form.sex>-1?picker[form.sex]:form.sex == 1 ? '男' : '女'}}
					</view>
				</picker>
			</view>
			<view class='common-hr'></view>
		</view>
		<view class='module' v-show="false">
			<view class="cu-form-group">
				<view class="title">支付密码</view>
				<input type="password" placeholder="请输入您的支付密码" v-show="passwordShow" v-mobel="form.cashPassword" />
				<button class="cu-btn round line-red" @click="passClick()"> <text v-if="!passwordShow">变更</text><text v-else>取消</text></button>
			</view>
			<view class='common-hr'></view>
		</view>
		<view class='module' v-if="passwordShow">
			<view class="cu-form-group">
				<view class="title">新的密码</view>
				<input type="password" placeholder="请输入新的支付密码" v-mobel="form.newCashPassword" />
			</view>
			<view class='common-hr'></view>
		</view>
		<view class='module' v-if="passwordShow">
			<view class="cu-form-group">
				<view class="title">确认密码</view>
				<input type="password" placeholder="请再次输入支付密码" v-mobel="form.confirmpass" />
			</view>
			<view class='common-hr'></view>
		</view>
		<button style="width: 90%;margin: 50upx 5%;" @click="confirm" class="cu-btn bg-red  lg">确认修改</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					memberNum: null,
					staffName: null,
					mobilePhone: null,
					sex: null,
					cashPassword: null,
					newCashPassword: null,
					confirmpass: null,
				},
				staffNameShow: false,
				modalName: null,
				passwordShow: false,
				picker: ["女", "男"]
			}
		},
		methods: {
			passClick() {
				this.passwordShow = !this.passwordShow
			},
			PickerChange(e) {
				this.form.sex = e.detail.value
			},
			confirm() {
				let flag = true
				if (this.passwordShow == true) {
					if (this.form.cashPassword == null) {
						uni.showToast({
							title: '原始支付密码不能为空',
							icon: 'none',
							duration: 2000
						});
					} else if (this.form.newCashPassword == null) {
						uni.showToast({
							title: '新的支付密码不能为空',
							icon: 'none',
							duration: 2000
						});
					} else if (this.form.newCashPassword != this.form.confirmpass) {
						uni.showToast({
							title: '两次输入密码不一致',
							icon: 'none',
							duration: 2000
						});
					} else {
						flag = false
					}
				}
				if (flag == true) {
					if(this.form.mobilePhone == uni.getStorageSync('userInfo').mobilePhone){
						delete this.form.mobilePhone
					}
					this.$api.editmemberCs(this.form).then(res => {
						if (res.code == "000000") {
							uni.showToast({
								title: '修改成功',
								icon: 'none',
								duration: 2000
							});
							uni.switchTab({
								url: '../../../mySet'
							});
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 2000
							});
						}
					})
				}
			},
		},
		onShow:function() {
			this.form = uni.getStorageSync('userInfo')
			delete this.form.cashPassword
			// this.form.cashPassword = null
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 30upx);
	}

	.cu-form-group input {
		text-align: left;
	}

	.common-hr {
		width: 94%;
		margin: 0 3%;
		height: 1upx;
		background-color: #ececec;
	}
</style>
