<template>
  <div class="custom-input-global">
    <div
      class="custom-input-box"
      :class="{ 'custom-input-error': ruleError.status }"
    >
      <slot name="leftIcon">
        <span class="left-input-icon"></span>
      </slot>
      <input
        :type="input_type"
        v-model="input_value"
        class="cust-input"
        :disabled="disabled"
        :placeholder="placeholder"
        @focus="onInputFocus"
        @blur="onInputBlur"
        @input="numberInput(input_value)"
      />
      <slot name="rightIcon">
        <span v-if="type === 'password'" class="custom-pwd-hide-button">
          <PrivatePwdSvg
            v-if="Cur_pwd_type === 'private'"
            @click="changePwd('text')"
          ></PrivatePwdSvg>
          <PublicPwdSvg v-else @click="changePwd('password')"></PublicPwdSvg>
        </span>
      </slot>
      <!-- remember -->
      <transition name="remember-fade">
        <div
          class="remember-select-box"
          v-if="needSelect && input_focus && selectList.length"
        >
          <div
            v-for="item in selectList"
            :key="item.account"
            class="line"
            @click="QuickInputAccount(item)"
          >
            <div class="account">{{ item.account }}</div>
            <div class="password">********</div>
          </div>
        </div>
      </transition>
    </div>
    <div class="custom-input-rule" v-if="rules && rules.length">
      {{ ruleError.message }}
    </div>
  </div>
</template>

<script lang="ts" setup>
import PrivatePwdSvg from '@/assets/svg/login/privatePwd.svg?component';
import PublicPwdSvg from '@/assets/svg/login/publicPwd.svg?component';
import { reactive, ref } from '@vue/reactivity';
import { watch } from '@vue/runtime-core';
import { RulesType } from './Interfase';
import { emailReg } from '@/constants/token';
const input_value = ref<string>('');
const props = withDefaults(
  defineProps<{
    type?: string;
    placeholder?: string;
    num?: number;
    rules?: Array<RulesType>;
    modelValue: string;
    disabled?: boolean;
    needSelect?: boolean;
    selectList?: any;
  }>(),
  {
    // 输入框类型
    type: 'text',
    placeholder: '',
    needSelect: false,
    selectList: [],
    // rules: [],
    disabled: false,
  }
);
const emit = defineEmits([
  'update:modelValue',
  'submitType',
  'submitAccount',
  'inputChange',
]);
// 是否聚焦
const input_focus = ref(false);
// 校验显示的错误
const ruleError = reactive({
  status: false,
  message: '',
});
const input_type = ref<string>('text');
// 当输入框类型为password时，展示私有密码svg
const Cur_pwd_type = ref<string>('private');
// 输入框校验
const numberInput = (e: string) => {
  const { type } = props;
  if (type == 'number') {
    input_value.value = e.replace(/[^\d.]/g, '');
  }
  // 提交输入事件
  emit('inputChange', input_value.value);
};
// 聚焦事件
const onInputFocus = () => {
  if (props.needSelect) {
    input_focus.value = true;
  }
};
// 失去焦点
const onInputBlur = () => {
  if (props.needSelect) {
    input_focus.value = false;
  }
};
// 错误状态
const errorinput = (rule: any) => {
  ruleError.status = true;
  ruleError.message = rule.message;
  // 提交失败信息
  emit('submitType', false);
};
// 提交用户的账号密码
const QuickInputAccount = (item: any) => {
  emit('submitAccount', item);
};
// 重置输入框状态
const ResetInput = () => {
  ruleError.status = false;
  ruleError.message = '';
  // 提交通过信息
  emit('submitType', true);
};
if (props.type == 'password') {
  input_type.value = props.type;
}

//
const changePwd = (value: string) => {
  if (value === 'text') {
    Cur_pwd_type.value = 'public';
  } else {
    Cur_pwd_type.value = 'private';
  }
  input_type.value = value;
};
// 表单校验
const FormValidation = () => {
  const { rules } = props;
  let v = input_value.value;
  if (rules) {
    for (let i in rules) {
      let rule: any = rules[i];
      if (rule.required && !v) {
        // 校验空input
        errorinput(rule);
        return;
      } else {
        ResetInput();
      }
      // 自定义校验逻辑
      if (rule.validator) {
        let res = rule.validator(v);
        if (!res.status) {
          errorinput(res);
          return;
        } else {
          ResetInput();
        }
      }
      // 邮箱验证模块
      if (rule.type == 'email') {
        if (!emailReg.test(v)) {
          // 邮箱校验不通过
          errorinput(rule);
          return;
        } else {
          ResetInput();
        }
      }
      // 输入框最小长度校验
      if (rule.min && v.length < rule.min) {
        errorinput(rule);
        return;
      } else {
        ResetInput();
      }
    }
  }
};

watch(
  () => input_value.value,
  (v) => {
    emit('update:modelValue', v);
    // 判断输入的内容是否符合校验规则
    // 校验
    FormValidation();
  }
);
//
watch(
  () => props.num,
  (v) => {
    // 校验
    FormValidation();
  }
);
watch(
  () => props.modelValue,
  (v) => {
    input_value.value = v;
  }
);
</script>

<style lang="less">
@import '@/style/flex.less';
.custom-input-global {
  height: 100%;
  .custom-input-box {
    height: 48px;
    background: var(--theme-color-15);
    /* 背景线条 */
    border: 1px solid var(--theme-color-19);
    border-radius: 8px;
    transition: all 0.3s;
    position: relative;
    .da();
    .cust-input {
      height: 100%;
      width: 0;
      flex: 1;
      outline: none;
      border: none;
      border-radius: 8px;
      padding-left: 12px;
      background: transparent;
      color: var(--theme-color-4);
    }
    .left-input-icon {
      .da();
    }
    .custom-pwd-hide-button {
      .da();
      padding: 0 8px;
    }
    .remember-select-box {
      z-index: 200;
      position: absolute;
      top: 46px;
      width: 100%;
      box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.05),
        0 8px 10px 1px rgba(0, 0, 0, 6%), 0 5px 5px -3px rgba(0, 0, 0, 10%);
      background: var(--theme-color-34);
      border-radius: 4px;
      max-height: 200px;
      overflow-y: auto;
      .line {
        padding: 6px 12px;
        font-weight: bold;
        .account {
          color: var(--theme-color-35);
        }
        .password {
          color: var(--theme-color-4);
        }
      }
    }
  }
  .custom-input-error {
    border-color: #f05451 !important;
    transition: all 0.3s;
  }
  .custom-input-rule {
    color: #f05451;
    font-weight: 400;
    font-size: 12px;
    line-height: 26px;
    padding-left: 4px;
    min-height: 26px;
  }
}

//内容打开动画
.remember-fade-enter-active {
  transition: all 0.15s ease-out;
}
.remember-fade-leave-active {
  transition: all 0.15s cubic-bezier(1, 0.5, 0.8, 1);
}
.remember-fade-enter-from,
.remember-fade-leave-to {
  transform: translateY(-6px);
  opacity: 0;
}
</style>
