<template>
  <div class="input-item" @click="focusInout">
    <div class="input-icon" v-if="$slots.icon">
      <slot name="icon"></slot>
    </div>
    <div class="input-prefix" v-if="title">{{ title }}</div>
    <div class="input-element">
      <input
        :value="modelValue"
        v-bind="$attrs"
        @input="$emit('update:modelValue', $event.target.value)"
        @focus="setFocus"
        @blur="setBlur"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyInputItem',
  props: {
    modelValue: {
      type: String,
      default: '',
    },
    title: {
      type: String,
      default: '',
    },
  },
  emits: ['update:modelValue'],
  setup(_props, { slots }) {
    console.log(slots);
    const focusInout = e => {
      try {
        e.currentTarget.getElementsByTagName('input')[0].focus();
      } catch (e) {
        console.log(e);
      }
    };
    const setFocus = e => {
      e.target.parentNode.parentNode.className = e.target.parentNode.parentNode.className.replace(
        'input-item',
        'input-item input-item-focus',
      );
    };
    const setBlur = e => {
      e.target.parentNode.parentNode.className = e.target.parentNode.parentNode.className.replace(
        'input-item input-item-focus',
        'input-item',
      );
    };
    return {
      setFocus,
      setBlur,
      focusInout,
    };
  },
});
</script>
<style scoped lang="less">
/* 表单 */
.input-item-focus {
  border: 1px solid #1473e1 !important;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2) !important;
}

.input-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  background-color: white;
  border: 1px solid #dedede;
  border-radius: 1px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0);
  transition: all 0.3s;

  &:hover {
    border: 1px solid #2282b9;
  }

  .input-icon {
    width: 16px;
    height: 16px;
    margin: 0 10px;

    img {
      display: block;
      width: 100%;
    }
  }

  .input-icon__pointer {
    cursor: pointer;
  }

  .input-prefix {
    padding-right: 10px;
  }

  .input-element {
    flex: 1;

    input {
      width: 100%;
      line-height: 1;
      background-color: transparent;
      border: none;
      outline: none;
    }
  }
}
</style>
