<template>
	<view>
		<uni-segmented-control :current="current" @clickItem="changeNav"  activeColor="#AD181F" styleType="text" :values="items"></uni-segmented-control>
		
		<view v-if="current==0" class="mainbox">
			<uni-forms label-width="80">
				<uni-forms-item label="用户昵称" required>
					<uni-easyinput  v-model="user.nickName" :disabled="!edit" />
				</uni-forms-item>
				<uni-forms-item label="手机号码" required>
					<uni-easyinput  v-model="user.phonenumber" :disabled="!edit" />
				</uni-forms-item>
				<uni-forms-item label="邮箱" required> 
					<uni-easyinput  v-model="user.email" :disabled="!edit" />
				</uni-forms-item>
				<uni-forms-item label="性别" required>
					<uni-data-checkbox :disabled="!edit" v-model="user.sex" @change="changeSex" :localdata="sexs" />
				</uni-forms-item>
			</uni-forms>
			
			
			<view class="fixedBottom" v-if="edit">
				<button class="btn-red-kx" @click="cancel">取消</button>
				<button class="btn-red" style="width: 50%;" @click="submit">保存</button>
			</view>
			<view class="fixedBottom" v-else>
				<button class="btn-red" @click="editForm">编辑</button>
			</view>
		</view>
		<view v-if="current==1" class="mainbox">
			<uni-forms  label-width="80">
				<uni-forms-item label="旧密码" name="oldPassword" required>
					<uni-easyinput type="password" v-model="form.oldPassword" placeholder="请输入旧密码" />
				</uni-forms-item>
				<uni-forms-item label="新密码" name="newPassword" required>
					<uni-easyinput type="password" v-model="form.newPassword" placeholder="请输入新密码" />
					<view class="text-danger"  v-show="form.newPassword?.length<8">不足8位</view>
					<text class="text-warning">*注： 8~18位大小写字母加数字加特殊符号组合(!@#$%^&*()_+)</text>
				</uni-forms-item>
				<uni-forms-item label="确认密码" name="confirmPassword" required>
					<uni-easyinput type="password" v-model="form.confirmPassword" placeholder="请确认新密码" />
					<text class="text-danger" v-show="form.newPassword!==form.confirmPassword">与新密码不一致</text>
				</uni-forms-item>
				
			</uni-forms>
			
			<view class="fixedBottom">
				<button class="btn-red" @click="handleClick">修改密码</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import * as api from '@/common/api.js';
const items = ref(['基本资料','修改密码'])
const user = ref({
	sex:'0'
})
const current = ref(0)
const form = ref({})
const edit = ref(false)
const sexs = ref([
	{text:'男',value: '0'},{text:'女',value: '1'}
])
onLoad((option)=>{
	if(option.current){
		current.value = 1
	}
	getUser()
})
function changeNav(e){
		if (current.value != e.currentIndex) {
			current.value = e.currentIndex
		}
}
function getUser() {
  api.getUserProfile().then((response) => {
    user.value = response.data.user
	if(!user.value.sex){
		user.value.sex = '0'
	}
  })
}
function editForm(){
	edit.value = true
}
function submit(){
	if(!user.value.email){
		uni.showToast({
			icon:'none',
			title:`请输入邮箱`
		})
		return
	}
	if(!user.value.nickName){
		uni.showToast({
			icon:'none',title:`请输入昵称`
		})
		return
	}
	if(!user.value.phonenumber){
		uni.showToast({
			icon:'none',title:`请输入手机号码`
		})
		return
	}
	if(!user.value.sex){
		uni.showToast({
			icon:'none',title:`请选择性别`
		})
		return
	}
	api.updateUserProfile(user.value).then(res=>{
		uni.showToast({
			icon:'none',title:`修改成功`
		})
		edit.value = false
	})
}
function changeSex(e){
	console.log(e)
}
function cancel(){
	edit.value = false
	getUser()
}
function validPassword(pwd) {
  if (!pwd || pwd.length < 8 || pwd.length > 18) {
    return false
  }
  const lowerRegex = /[a-z]+/
  const upperRegex = /[A-Z]+/
  const digitRegex = /[0-9]+/
  const symbolRegex = /[\W_]+/
  const specific = /.*[~!@#$%^&*()_+`\-={}:";'<>?,.\/].*/
  return (lowerRegex.test(pwd) && upperRegex.test(pwd) && digitRegex.test(pwd) && symbolRegex.test(pwd) && specific.test(pwd))
}

function handleClick() {
	if(!form.value.oldPassword){
		uni.showToast({
			icon:'none',title:`请输入旧密码`
		})
		return
	}
	if(!form.value.newPassword){
		uni.showToast({
			icon:'none',title:`请输入新密码`
		})
		return
	}
	if(form.value.newPassword!==form.value.confirmPassword){
		uni.showToast({
			icon:'none',title:`新密码需与确认密码一致`
		})
		return
	}
	
	if (!validPassword(form.value.newPassword)) {
	    uni.showModal({
	    	content:`密码需满足8~18位大小写字母加数字加特殊符号组合(!@#$%^&*()_+)`,
			success:function(res){
				
			}
	    })
		return
	}
	api.updateUserPwd({oldPassword:form.value.oldPassword, newPassword:form.value.newPassword}).then(res=>{
		uni.showModal({
			title:"提示",
			content:`修改成功，重新登录生效`,
			success: function(res) {
				if (res.confirm) {
					//确定
				}
			}
		})
	})
}
</script>

<style scoped lang="scss">
	.mainbox{background: #fff;padding: 30rpx;margin: 30rpx;}
</style>