<template>
  <div class="input-wrapper">
    <div class="input-left text-tip-1">{{ inputTitle + ':' }}</div>
    <div class="input-right">
      <el-input v-model="inputValue" :placeholder="placeholderName" style="width: 240px" />
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  inputTitle: {
    type: String,
    default: ''
  },
  placeholderName: {
    type: String,
    default: ''
  },
  inputName: {
    type: String,
    default: ''
  },
})

const emit = defineEmits(['update:inputText', 'update:customTime'])

const inputValue = computed({
  get: () => props.inputName,
  set: (value) => emit('update:inputText', value)
})

</script>

<style lang="scss" scoped>
.input-wrapper {
  width: 348px;
  height: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;

  .input-left {
    width: 100px;
    height: 24px;
    color: var(--text-primary-65-color);
  }

  .input-right {
    width: 240px;
    display: flex;
    gap: 8px;
    justify-content: space-between;

    :deep(.el-input__wrapper) {
      border-radius: 4px;
      border: 1px solid var(--bg-black-10);
    }
  }
}

</style>