<template>
  <view class="Mall4j page-edit-page">
    <!-- 修改昵称 -->
    <view
      v-if="pageType === 'nickName'"
      class="modify-name"
    >
      <view class="input-box">
        <input
          v-model="nickName"
          maxlength="15"
          minlength="1"
          type="text"
          class="input"
          placeholder="输入新的用户昵称"
        >
        <view
          v-if="nickName"
          class="cancel"
          @tap="onClearInputValue"
        >
          <image src="/static/images/close-w.png" />
        </view>
      </view>
      <view class="des">
        用户昵称在15个字符以内
      </view>
      <view
        class="btn"
        @tap="onValidationUserInfo()"
      >
        确认修改
      </view>
    </view>

    <!-- 修改手机 -->
    <view
      v-if="pageType === 'phone'"
      class="modify-phone"
    >
      <view>
        <view class="phone-item">
          <input
            v-model="userMobile"
            type="text"
            class="phone"
            placeholder="新的手机号"
            maxlength="11"
          >
          <view
            v-if="showGetCodeBtn"
            class="get-code"
            @tap="onGetCodeOfModifyPhone(userMobile)"
          >
            获取验证码
          </view>
          <view
            v-if="!showGetCodeBtn"
            class="txt-r"
          >
            {{ count }} s
          </view>
        </view>
        <view class="phone-item">
          <input
            v-model="userMobileValidCode"
            type="text"
            class="input"
            placeholder="短信验证码"
          >
        </view>
      </view>
      <view
        class="btn"
        @tap="onValidCodeOfModifyPhone(userMobile, userMobileValidCode)"
      >
        确认修改
      </view>
    </view>
  </view>
</template>

<script setup>

const pageType = ref('nickName')

const nickName = ref('') // 昵称

const oldUserMobile = ref('') // 原手机号
const privacyNumber = ref('') // 隐私号码
const userMobile = ref('') // 新手机号
const userMobileValidCode = ref('') // 新手机号验证码
const checkUpdatePhoneSmsFlag = ref('') // 校验验证码凭证

const showGetCodeBtn = ref(true) // 获取验证码按钮显隐
const count = ref(0) // 验证码倒计时
let timer = ''

// 正在请求验证码
let birthDate = ''
onLoad((options) => {
  pageType.value = options.type
  nickName.value = decodeURIComponent(options.nickName) || '' // 昵称
  oldUserMobile.value = options.userMobile || '' // 原手机号
  if (options.type === 'nickName') {
    uni.setNavigationBarTitle({
      title: '修改用户昵称'
    })
  } else if (options.type === 'phone') {
    uni.setNavigationBarTitle({
      title: '修改手机号'
    })
    if (oldUserMobile.value) {
      const pre = oldUserMobile.value.substr(0, 3)
      const next = oldUserMobile.value.substr(7, 4)
      privacyNumber.value = pre + '****' + next
    }
  } else if (options.type === 'password') {
    uni.setNavigationBarTitle({
      title: '修改密码'
    })
  }
  birthDate = uni.getStorageSync('cloudUserDetails').birthDate
})

/**
 * 校验用户昵称
 */
const onValidationUserInfo = () => {
  // const nickNameValid = util.containsSymbols(nickName)
  const userData = {}
  let tips = ''
  if (!nickName.value || !nickName.value.trim()) {
    nickName.value = nickName.value.trim()
    uni.showToast({
      title: '用户昵称不能为空',
      icon: 'none'
    })
    return
  }
  if (nickName.value.length < 1 || nickName.value.length > 30) {
    uni.showToast({
      title: '用户昵称格式不正确，请重新输入',
      icon: 'none'
    })
    return
  }
  userData.nickName = nickName.value
  tips = '昵称修改成功'
  onIpdateUserInfo(userData, tips)
}
/**
 * 修改用户信息
 */
const onIpdateUserInfo = (userData, tips) => {
  userData.birthDate = birthDate
  const params = {
    url: '/tmerclub_user/user/set_user_info',
    method: 'PUT',
    data: userData
  }
  http.request(params).then(() => {
    uni.showToast({
      title: tips,
      icon: 'none',
      duration: 1000,
      mask: true
    })
    setTimeout(() => {
      uni.navigateBack(1)
    }, 1000)
  })
}

// 清空
const onClearInputValue = () => {
  nickName.value = ''
}

/**
 * 换绑手机号-获取验证码
 */
const onGetCodeOfModifyPhone = (phoneNumber) => {
  if (!phoneNumber) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none'
    })
    return
  }
  if (!util.checkPhoneNumber(phoneNumber)) {
    uni.showToast({
      title: '输入的手机号有误',
      icon: 'none'
    })
    return
  }
  if (oldUserMobile.value == phoneNumber) {
    uni.showToast({
      title: '与原手机号相同',
      icon: 'none'
    })
    return
  }
  const params = {
    url: '/tmerclub_biz/ua/sms/verification_code/valid',
    method: 'PUT',
    data: {
      mobile: phoneNumber,
      shopAccount: 0
    }
  }
  http.request(params).then(() => {
    const timeCount = 60
    if (!timer) {
      count.value = timeCount
      showGetCodeBtn.value = false
      timer = setInterval(() => {
        if (count.value > 0 && count.value <= timeCount) {
          count.value--
        } else {
          clearInterval(timer)
          timer = null
          showGetCodeBtn.value = true
        }
      }, 1000)
    }
  })
}
/**
 * 换绑手机号-校验验证码
 */
const onValidCodeOfModifyPhone = (phoneNumber, validCode) => {
  if (!phoneNumber) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none'
    })
    return
  }
  if (!util.checkPhoneNumber(phoneNumber)) {
    uni.showToast({
      title: '输入的手机号有误',
      icon: 'none'
    })
    return
  }
  if (!validCode) {
    uni.showToast({
      title: '请输入验证码',
      icon: 'none'
    })
    return
  }
  const params = {
    url: '/tmerclub_biz/ua/sms/verification_code/checkUpdatePhoneSms',
    method: 'PUT',
    data: {
      mobile: phoneNumber,
      shopAccount: 0, // 是否店铺账号，1是
      validCode
    }
  }
  http.request(params).then(res => {
    checkUpdatePhoneSmsFlag.value = res
    updateMobile()
  })
}
/**
 * 换绑手机号
 */
const updateMobile = () => {
  const params = {
    url: '/tmerclub_user/user/update_mobile',
    method: 'PUT',
    data: {
      checkUpdatePhoneSmsFlag: checkUpdatePhoneSmsFlag.value,
      mobile: userMobile.value
    }
  }
  http.request(params).then(() => {
    uni.showToast({
      title: '手机号修改成功！',
      icon: 'none'
    })
    setTimeout(() => {
      uni.navigateTo({
        url: '/package-user/pages/user-settings/user-settings'
      })
    }, 800)
  })
}

</script>

<style lang="scss" scoped>
@use "./edit-page.scss";
@use "@/popup.scss";
</style>
