<template>
  <el-input :maxLength="DEFAULT_INPUT_PROPS.maxLength" placeholder="请输入">
    <template #suffix v-if="props.isShowSuffix">
      <component @onIsViewChange="onIsViewChange" :is="ComponentObj[props.componentName]"></component
    ></template>
    <template #prefix v-if="props.isShowPrefix">
      <component @onIsViewChange="onIsViewChange" :is="ComponentObj[props.componentName]"></component
    ></template>
    <template #prefix v-if="props.isShowPrefixPhone">
      <div class="text-color">+86</div>
    </template>
  </el-input>
</template>

<script lang="ts" setup>
  import Eye from '@/components/pro-icon/eye.vue'
  const ComponentObj: any = shallowRef({
    eye: Eye
  })
  enum MAX_CHAR_SIZE {
    // 单行
    INPUT = 50,
    // 多行
    TEXTAREA = 300
  }
  // 单行输入的默认配置
  const DEFAULT_INPUT_PROPS = {
    placeholder: '请输入',
    maxLength: MAX_CHAR_SIZE.INPUT,
    allowClear: true
  }
  const props: any = defineProps({
    componentName: String, // 组件名称
    isShowSuffix: {
      type: Boolean,
      default: false
    }, // 是否展示 suffix 插槽
    isShowPrefix: {
      type: Boolean,
      default: false
    }, // 是否展示 suffix 插槽
    // 是否是手机号
    isShowPrefixPhone: {
      type: Boolean,
      default: false
    } // 是否展示 suffix 插槽
  })
  const emit = defineEmits(['onSuffixClick'])
  const onIsViewChange = (v: any) => {
    emit('onSuffixClick', v)
  }
</script>

<style lang="less" scoped>
  .text-color {
    color: #7887ba;
  }
</style>
