<template>
  <view>
    <uni-segmented-control
      :current="current"
      :values="items"
      activeColor="#AD181F"
      styleType="text"
      @clickItem="changeNav"/>
    
    <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 v-model="user.sex" :disabled="!edit" :localdata="sexs" @change="changeSex"/>
        </uni-forms-item>
      </uni-forms>
      
      
      <view v-if="edit" class="fixedBottom">
        <button class="btn-red-kx" @click="cancel">取消</button>
        <button class="btn-red" style="width: 50%;" @click="submit">保存</button>
      </view>
      <view v-else class="fixedBottom">
        <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 v-model="form.oldPassword" placeholder="请输入旧密码" type="password"/>
        </uni-forms-item>
        <uni-forms-item label="新密码" name="newPassword" required>
          <uni-easyinput v-model="form.newPassword" placeholder="请输入新密码" type="password"/>
          <view v-show="form.newPassword?.length<8" class="text-danger">不足8位</view>
          <text class="text-warning">*注： 8~18位大小写字母加数字加特殊符号组合(!@#$%^&*()_+)</text>
        </uni-forms-item>
        <uni-forms-item label="确认密码" name="confirmPassword" required>
          <uni-easyinput v-model="form.confirmPassword" placeholder="请确认新密码" type="password"/>
          <text v-show="form.newPassword!==form.confirmPassword" class="text-danger">与新密码不一致</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 lang="scss" scoped>
.mainbox {
  background: #fff;
  padding: 30rpx;
  margin: 30rpx;
}
</style>