<template>
  <view class="pwd-from-root">
    <jx-input>
      <template #left>
        <jx-icon icon="shoujihao" color="#aaa" :size="36"></jx-icon>
      </template>
      <template #middle>
        <uni-easyinput
          primaryColor="#aaa"
          :inputBorder="false"
          class="input"
          type="text"
          v-model="phone"
          placeholder="请输入用户名"
        />
      </template>
    </jx-input>
  </view>

  <view class="pwd-from-root">
    <jx-input>
      <template #left>
        <jx-icon icon="mima" color="#aaa"></jx-icon>
      </template>
      <template #middle>
        <uni-easyinput
          primaryColor="#aaa"
          :inputBorder="false"
          class="input"
          type="password"
          v-model="pwd"
          placeholder="请输入密码"
        />
      </template>
    </jx-input>
  </view>

  <view class="pwd-login-btn" @tap="pwdLogin">登录</view>
</template>
  
  <script lang="ts" setup>
import jxIcon from '@/components/jx-icon/jx-icon.vue'
import jxInput from '@/components/jx-input/jx-input.vue'
import toast from '@/utils/toast'
import login from '@/api/https/login'
import md5 from 'js-md5'
import { Ref, ref } from 'vue'
import { store } from '@/store'

const phone: Ref<string> = ref('')
const pwd: Ref<string> = ref('')

const emit = defineEmits<{
  (e: 'pwdLogin', data: AnyObject): void
}>()

async function pwdLogin() {
  if (!store.state.serveInfo.isAgreement) {
    // 提示用户未勾选
    let time: any = null
    store.commit('serveInfo/setIsAgreementIf', false)
    clearTimeout(time)
    uni.vibrateShort({})
    time = setTimeout(() => {
      store.commit('serveInfo/setIsAgreementIf', true)
    }, 200)
    return false
  }
  if (phone.value == '') return toast('用户名不规范')
  if (pwd.value.length < 4) return toast('密码不规范')
  let data = {
    authType: 'localpass',
    authIDType: 'userID2',
    authID: phone.value,
    authSecret: md5(pwd.value),
  }
  let res = await login.applets_login(data)
  if (res.code == 0) {
    emit('pwdLogin', res.data)
  } else {
    toast(res.desc)
  }
}
</script>
  
  <style lang="scss" scoped>
.pwd-from-root {
  border-bottom: 2rpx solid rgb(234, 234, 234);
  line-height: 70rpx;
  margin-bottom: 30rpx;

  .input {
    width: 100%;
    line-height: 80rpx !important;
  }
}

.pwd-login-btn {
  padding: 25rpx 0;
  text-align: center;
  border-radius: 100rpx;
  margin-top: 60rpx;
  color: rgb(255, 255, 255);
  background-color: $jx-login;
}
</style>