<template>
  <div
    class="dialog_input"
    :class="[
      !noBoxShadowWhenFocused
        ? 'showBoxShadowWhenFocused'
        : 'notShowBoxShadowWhenFocused',
      showPwd && 'showPwd',
    ]"
  >
    <ElInput
      :modelValue="value"
      class="input"
      :type="theType"
      :class="{
        'js-input_error':
          errorShowing &&
          ((typeof value === 'string' && value.length === 0) || !value),
      }"
      @input="handleInput"
      @blur="
        (e) => {
          $emit('blur', e);
          formItem.formItem?.validate('blur');
        }
      "
      v-bind="$attrs"
    >
      <template #suffix>
        <slot name="suffix" v-if="!showPwd"></slot>
        <slot name="suffix" v-if="showPwd">
          <i
            class="iconfont iconYJ cursor-pointer"
            v-if="theType !== 'password'"
            @click="toggle"
          ></i>
          <i class="iconfont iconYC cursor-pointer" v-else @click="toggle"></i>
        </slot>
      </template>
    </ElInput>
    <slot></slot>
  </div>
</template>
<script lang="ts" setup>
import { ElInput, useFormItem } from "element-plus";
import { ref } from "vue";
const props = withDefaults(
  defineProps<{
    value: any;
    errorShowing?: boolean;
    noBoxShadowWhenFocused?: boolean;
    type?: string;
    showPwd?: boolean;
  }>(),
  {
    errorShowing: false,
    noBoxShadowWhenFocused: false,
    type: "text",
  }
);

const theType = ref(props.type);
const toggle = () => {
  theType.value = theType.value === "text" ? "password" : "text";
};
const formItem = useFormItem();
const $emit = defineEmits(["input", "update:value", "change", "blur", "input"]);

const handleInput = (str) => {
  $emit("update:value", str);
  $emit("input", str);
  $emit("change", str);
  formItem.formItem?.validate("change");
};
</script>
<style lang="scss">
.el-form-item.is-error .dialog_input .el-input__inner,
.el-form-item.is-error .dialog_input .el-input__inner:focus {
  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
}

.dialog_input {
  .input {
    box-sizing: border-box;
    width: 100%;
    height: 36px !important;
    outline: none;
    font-size: 14px;
    color: #353535;
  }
  .input.el-textarea {
    height: unset !important;
  }
  .el-input__inner {
    border-radius: var(--sy-border-radius);
    height: 36px !important;
    padding: 0 18px !important;
  }

  .el-input__inner:hover {
    box-shadow: 0 0 0 1px #c4c4c4 inset;
  }

  .el-input__inner:focus {
    box-shadow: 0 0 0 1px #3f79fe inset;
  }

  .el-input__inner::placeholder {
    color: #a3a7aa;
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }

  .js-input_error {
    .el-input__inner {
      box-shadow: 0 0 0 1px rgba(208, 2, 27, 0.5) inset !important;
    }
  }
}
.showPwd {
  .el-input__inner {
    padding-right: 34px !important;
  }
}
.notShowBoxShadowWhenFocused {
  .el-input__inner:focus {
    box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
      inset;
  }
  .el-input__inner:hover {
    box-shadow: 0 0 0 1px #c4c4c4 inset;
  }
}
</style>
