<script setup>
import { ref, reactive, nextTick } from "vue";
import { useLogin,useForm } from "@/hooks/login/use-login";

const { isMobile } = useLogin();

const { modelForm,validate,restValidate } = useForm();

const hintMessage= ref('')
const form = reactive({
  account: "",
  checkPass: "",
  checked: true,
});
const rules = {
  account: [
    { required: true, message: "请输入账号", trigger: "blur" },
  ],
  checkPass: [
    { required: true, message: "请输入密码", trigger: "blur" },
  ],
};

function changeModel() {

}

defineExpose({
  form,
  validate,
  restValidate,
  hintMessage
})
</script>
<template>
  <div class="ordinary-model-wrap model-wrap">
    <el-form
      ref="modelForm"
      label-position="right"
      label-width="0px"
      :model="form"
      :rules="rules"
    >
      <el-form-item prop="account">
        <el-input
          type="primary"
          link
          v-model="form.account"
          auto-complete="off"
          placeholder="请输入用户名"
        />
        <span
          class="inline-message el-form-item__error"
          v-show="hintMessage"
        >
          {{ hintMessage }}
        </span>
      </el-form-item>
      <el-form-item prop="checkPass">
        <el-input
          type="password"
          :show-password="isMobile ? false : true"
          v-model="form.checkPass"
          auto-complete="off"
          placeholder="请输入密码"
          @copy.capture.prevent="
            () => {
              return false;
            }
          "
          @cut.capture.prevent="
            () => {
              return false;
            }
          "
          @paste.capture.prevent="
            () => {
              return false;
            }
          "
        >
          <template #append v-if="isMobile">
            <span @click="changeModel">忘记密码？</span>
          </template>
        </el-input>
        <span
          class="inline-message el-form-item__error"
          v-show="hintMessage"
        >
          {{ hintMessage }}</span
        >
      </el-form-item>
      <el-form-item class="remember-cont" prop="checked">
        <el-checkbox v-model="form.checked" class="remember">
          记住账号密码
          <el-tooltip effect="dark" content="有效期60天" placement="top">
            <span class="hint-text">
              <i class="el-icon-question"></i>
            </span>
          </el-tooltip>
        </el-checkbox>
        <el-button type="primary" link style="font-size: 16px" @click="changeModel"
          >忘记密码</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<style scoped lang="scss">
@import "./css/formStyle.scss";
</style>
