<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>

  <button class="pwd-login-btn" @tap="pwdLogin">登录</button>
</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 { md5 } from 'js-md5'
import { Ref, ref } from 'vue'
import { store } from '@/store'
import useGlobalFunc from '@/composables/useGlobalFunc'
import login from '@/api/https/login'
const { isUserAgreementFn } = useGlobalFunc()

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) {
    isUserAgreementFn()
    return false
  }
  if (phone.value == '') return toast('请输入用户名')
  if (pwd.value.length == 0) return toast('密码不规范')
  let data = {
    authType: 'pwd',
    authIDType: 'user_id2',
    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%;
  }
}

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