<template>
  <el-input
      v-bind="$attrs"
      v-model="paramVal"
      :type="type"
      clearable
      :placeholder="$attrs.placeholder ? $attrs.placeholder : `请输入${label}`"
      @keyup.enter.native="$emit('emitEnter')"
      :disabled="$util.isValue($attrs.disabled) ? $attrs.disabled : formView"
  >
    <template v-if="$slots.prefix" #prefix>
      <slot name="prefix"/>
    </template>
    <template v-if="$slots.suffix" #suffix>
      <slot name="suffix"/>
    </template>
    <template v-if="$slots.prepend" #prepend>
      <slot name="prepend"/>
    </template>
    <template v-if="$slots.append" #append>
      <slot name="append"/>
    </template>
  </el-input>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick,
  inject
} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'

export default defineComponent({
  name: '',
  components: {},
  props: {
    param: {},
    label: {},
    type: {
      type: String,
      default: 'text',
      validator(val: string) {
        return ['text', 'textarea', 'password'].includes(val)
      }
    }
  },
  setup(props, { emit }) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({
      paramVal: props.param,
      formView: inject('form-view', false),
    })
    watch(() => state.paramVal, (n) => {
      emit('emitParam', n)
    })
    watch(() => props.param, (n) => {
      state.paramVal = n
    })
    return {
      ...toRefs(state),
    }
  },
})
</script>

<style scoped lang="scss">
</style>
