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

let fromZlb = localStorage.getItem('fromZlb') === '1'
let fromData = $ref({
  user_name: '',
  user_realname: ''
})
const router = useRouter();

const onClickLeft = () => {
  router.push('/login');
}
let hintShow = $ref(false)
let hintText = $ref('')
const confirm = () => {
  if (!fromData.user_name || !fromData.user_realname) {
    hintText = '请输入用户名/身份证和真实姓名'
    hintShow = true
    return
  } else {
    hintText = ''
    hintShow = false
  }
  const submitData = {
    user_name: fromData.user_name,
    user_realname: fromData.user_realname
  }
  request({
    url: '/user/main/check_userinfo_txwx',
    data: {
      token: '',
      client: 'pc',
      user_main: submitData
    }
  }).then(res => {
    if (res.code === '1') {
      router.push({
        path: '/login/pwdReset', query: {
          user_name: submitData.user_name,
          user_realname: submitData.user_realname
        }
      });
    }
  })
}
</script>
<template>
  <div>
    <van-nav-bar title="身份认证" left-text="" :left-arrow="!fromZlb" fixed placeholder @click-left="onClickLeft" />
    <div style="padding-top: 10vh;">
      <div class="inputDiv">
        <div class="inputHeight"><img :src="getAssetsImages('identity.png')" class="inputIcon" /></div>
        <div class="inputHeight paddingLeft">
          <input v-model="fromData.user_name" placeholder="请输入用户名/身份证" />
        </div>
      </div>
      <div class="inputDiv">
        <div class="inputHeight"><img :src="getAssetsImages('realname.png')" class="inputIcon" /></div>
        <div class="inputHeight paddingLeft">
          <input v-model="fromData.user_realname" placeholder="请输入真实姓名" />
        </div>
      </div>
    </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>
</template>

<style lang="scss" scoped>
.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;
}

.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: 24px;
  }

}
</style>
