<script setup>
import { getAssetsImages } from "~/utils/getAssets"

const { currentRoute } = useRouter();
const route = currentRoute.value;
let fromData = $ref({
  user_name: route.query.user_name,
  user_realname: route.query.user_realname,
  user_password: ''
})

const router = useRouter()
const onClickLeft = () => {
  router.push('/login/identityConfirm');
}
let pswVisile = $ref(false)
let pswVisile1 = $ref(false)

let user_password = $ref('')
let user_password1 = $ref('')

let hintShow = $ref(false)
let hintText = $ref('')


let popupShow = $ref(false)
function confirm() {
  if (!user_password || !user_password1) {
    hintText = '请输入新密码'
    hintShow = true
    return
  } else if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,20}$/.test(user_password)) {
    hintText = '密码必须包含大小写字母和数字'
    hintShow = true
    return
  } else if (user_password != user_password1) {
    hintText = '两次输入密码不一致'
    hintShow = true
    return
  } else {
    hintText = ''
    hintShow = false
  }
  fromData.user_password = user_password
  request({
    url: '/user/main/reset_user_password_txwx',
    data: {
      token: '',
      user_main: fromData,
      client: 'pc'
    }
  }).then(res => {
    if (res.code === '1') {
      popupShow = true
    }
  })

}
function clickConfirmButton() {
  router.push('/login');
}
</script>
<template>
  <div>
    <van-nav-bar title="用户密码重置" left-text="" left-arrow fixed placeholder @click-left="onClickLeft" />
    <div style="padding-top: 10vh;">
      <div class="inputDiv">
        <div class="inputHeight paddingLeft">
          <input v-model="user_password" placeholder="请输入新密码" :style="pswVisile ? '' : '-webkit-text-security:disc;'" />
        </div>
        <div class="inputHeight paddingLefteye" @click="pswVisile = !pswVisile"><img
            :src="pswVisile ? getAssetsImages('eyeopen.png') : getAssetsImages('eyeclose.png')" class="eyeIcon" /></div>
      </div>
      <div class="inputDiv">
        <div class="inputHeight paddingLeft">
          <input v-model="user_password1" placeholder="再次确认新密码"
            :style="pswVisile1 ? '' : '-webkit-text-security:disc;'" />
        </div>
        <div class="inputHeight paddingLefteye" @click="pswVisile1 = !pswVisile1"><img
            :src="pswVisile1 ? getAssetsImages('eyeopen.png') : getAssetsImages('eyeclose.png')" class="eyeIcon" /></div>
      </div>
      <div class="ruleDiv">
        <span class="requireRule">密码要求：字母数字结合，最少设置8个字符，包含字母大小写或数字特殊符号</span>
      </div>
      <div style="text-align: center;width: 100%;height: 10vw;">
        <span v-show="hintShow" class="hint">提示:{{ hintText }}</span>
      </div>
      <div class="loginButton" @click="confirm()">
        提交
      </div>
    </div>
    <van-popup style="border-radius: 16px;" :close-on-click-overlay="false" v-model:show="popupShow">
      <div class="popupDiv">
        <div style="display: flex;justify-content: center;"><img :src="getAssetsImages('success.png')" /></div>
        <div style="text-align: center;">
          <span>密码重置成功，<br />请返回重新登录！</span>
        </div>
        <div class="conifrmButton" @click="clickConfirmButton()">
          确认
        </div>
      </div>
    </van-popup>
  </div>
</template>
<style lang="scss" scoped>
.popupDiv {
  width: 311px;
  height: 388px;
  background: #ffffff;
  border-radius: 16px;

  img {
    margin-top: 81.5px;
    width: 88.1px;
    height: 84px;
  }

  span {
    font-size: 14px;
    line-height: 20px;
  }

  .conifrmButton {
    margin: auto;
    margin-top: 40px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    color: white;
    width: 80px;
    height: 30px;
    background: #154a9a;
    border-radius: 3px;
  }
}

.hint {
  color: #E63333;
  font-size: 12px;
}

.loginButton {
  margin: auto;
  margin-top: 50px;
  width: 290px;
  height: 46px;
  line-height: 46px;
  background-color: #154A9A;
  color: white;
  font-size: 18px;
  text-align: center;
  border-radius: 4px;
}

.ruleDiv {
  width: 264px;
  margin: auto;
  line-height: 10px;
}

.requireRule {
  font-size: 10px;
  color: #616161;
}

.inputDiv {
  margin: auto;
  width: 264px;
  display: flex;
  padding-top: 20px;
  border-bottom: 1px solid #999999;

  .inputHeight {
    height: 30px;
    display: flex;
    align-items: center;
  }

  .paddingLeft {
    padding-left: 10px;
  }

  .inputIcon {
    width: 18.5px;
    height: 19.5px;
  }

  .eyeIcon {
    width: 18.5px;
  }

  .paddingLefteye {
    padding-left: 30px;
  }
}
</style>
