<template>
  <div class="vue-element-input-wrap">
    <el-input ref="customInputRef" v-model="currentParams" :placeholder="placeholder" :clearable="clearable"
      @keydown.enter.prevent="keyUpEnter" :class="!params ? 'customInput' : 'showInput'" />
    <label class="input-label">{{ placeholder }}</label>
  </div>
</template>

<script setup lang="ts">

import { computed, reactive, ref, toRefs } from 'vue';

const props = defineProps({
  params: {
    type: String
  },
  placeholder: {
    type: String
  },
  clearable: {
    type: Boolean,
    default: false
  }
});
const emit = defineEmits(['update:params', 'keyUpEvent']);
const customInputRef = ref();
const currentParams = computed({
  get: () => props.params,
  set: value => {
    emit('update:params', value);
  }
});

function keyUpEnter() {
  emit('keyUpEvent', { params: currentParams });
}

</script>

<style scoped lang="scss">
@import '@/styles/variables.module';

.vue-element-input-wrap {
  width: 100%;
  position: relative;

  :deep(.el-input__wrapper) {
    .el-input__inner {
      &::placeholder {
        color: #333333;
      }
    }
  }

  :deep(.el-input__wrapper.is-focus) {
    .el-input__inner {
      &::placeholder {
        color: transparent;
      }
    }
  }

  .customInput+.input-label {
    // input框没值
    position: absolute;
    left: 7px;
    top: 1px;
    height: 16px;
    color: transparent;
  }

  .customInput:has(>.el-input__wrapper.is-focus)+.input-label {
    position: absolute;
    left: 6px;
    top: -10px;
    color: $primaryColor;
    transform: scale(0.8);
    background: #ffffff;
    height: 16px;
    transition: top 0.2s;
  }

  .showInput+.input-label {
    // input框有值
    position: absolute;
    left: 6px;
    top: -10px;
    color: #333333;
    transform: scale(0.8);
    background: #ffffff;
    height: 16px;
  }

  .showInput:has(>.el-input__wrapper.is-focus)+.input-label {
    color: $primaryColor;
  }
}
</style>
