<script setup lang="ts">
import { ref, reactive, computed, onUnmounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { changePasswordSourceApp } from '@/api/user.js'
import useUserStore from '../store/modules/user'

const userStore = useUserStore()
console.log('userStore.userInfo',userStore.userInfo)


const form = reactive<{
  userId: string | number
  password: string
}>({
  userId: userStore.userInfo.userId,
  password: ''
})

const show = reactive({
  password: false,
  passwordConfirm: false
})

const regex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])')
const passwordConfirm = ref('')
const loading = ref(false)

function validConfirmPassword() {
  return form.password === passwordConfirm.value
}

function onSubmit() {
  if (!form.password) {
    uni.showToast({ title: '请输入新密码', icon: 'none' })
    return
  }
  if (!regex.test(form.password)) {
    uni.showToast({ title: '密码需6至20位，由特殊字符、字母及数字组成', icon: 'none' })
    return
  }
  if (!validConfirmPassword()) {
    uni.showToast({ title: '请输入相同的新密码', icon: 'none' })
    return
  }

  loading.value = true
  uni.showLoading({ title: '提交中...', mask: true })
  
  changePasswordSourceApp(form).then(res => {
    uni.showToast({ title: res.msg, icon: 'success' })
    setTimeout(() => {
      userStore.getInfo(true).then(() => {
        uni.switchTab({
          url:'/pages/mine/index',
        })
      })
    }, 500)
  }).catch(() => {
    loading.value = false
  }).finally(() => {
    uni.hideLoading()
  })
}

// 切换账号
function onClickLogin() {
  // userStore.logout().then(() => {
  //   uni.switchTab({
  //     url:'/pages/stage/index',
  //   })
  // })
  uni.showModal({
    title: '退出登录',
    content: '确定退出登录',
    success: (res) => {
      if (res.confirm) {
        userStore.logout().then(() => {
          uni.switchTab({ url: '/pages/stage/index' })
        })
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    }
  })
}

function onClickSave() {
  onSubmit()
}
</script>

<template>
  <view class="container full">
    <view class="container__body">
      <view class="container__card flex">
        <uv-form  labelWidth="140" label-position="top">
          <uv-form-item label="新密码" label-position="top">
            <uv-input
              v-model="form.password"
              :password="!show.password"
              placeholder="请输入新密码(6至20位数字或字母)"
              border="none"
            >
              <template #suffix>
                <uv-icon
                  :name="show.password ? 'eye-off' : 'eye'"
                  @click="show.password = !show.password"
                />
              </template>
            </uv-input>
          </uv-form-item>
          
          <uv-form-item label="确认密码" label-position="top">
            <uv-input
              v-model="passwordConfirm"
              :password="!show.passwordConfirm"
              placeholder="请再次输入新密码"
              border="none"
            >
              <template #suffix>
                <uv-icon
                  :name="show.passwordConfirm ? 'eye-off' : 'eye'"
                  @click="show.passwordConfirm = !show.passwordConfirm"
                />
              </template>
            </uv-input>
          </uv-form-item>
        </uv-form>
      </view>
    </view>
    <div class="buttons float-bottom">
      <div class="button-submit" @click="onClickLogin">退出登录</div>
      <div class="button-submit" @click="onClickSave">保存密码</div>
    </div>
  </view>
</template>

<style lang="scss" scoped>
.container {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #f8f8f8;
  padding: 20rpx;
  box-sizing: border-box;
  
  &__body {
    flex: 1;
  }
  
  &__card {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
  }
}

.buttons {
  display: flex;
  gap: 20rpx;
  margin-top: 40rpx;
  padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
  
  .uv-button {
    flex: 1;
  }
}

.uv-form-item {
  margin-bottom: 30rpx;
}

.uv-input {
  background: #f7f7f7;
  border-radius: 8rpx;
  padding: 20rpx;
}
.button-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rpx;
  font-weight: 500;
  color: #ffffff;
}
</style>