<template>
  <div class="item-box">
    <div class="emot_null"></div>
    <div class="my_add_set">
      <el-input
        v-model="newValue"
        :placeholder="placeholder"
        size="small"
      ></el-input>
      <div class="add_item" @click="addItem">
        <i class="el-icon-plus"></i>
        {{ $t('ht.common.add') }}
      </div>
    </div>
  </div>
</template>
<script>
  import { t } from '@/locale'
  export default {
    name: 'AddItem',
    props: {
      placeholder: {
        type: String,
        default() {
          return t('ht.common.enter')
        },
      },
    },
    data() {
      return {
        newValue: '',
      }
    },
    methods: {
      addItem() {
        this.$emit('addItem', this.newValue)
        this.newValue = ''
      },
    },
  }
</script>
<style lang="scss" scoped>
  .item-box {
    width: calc(100% - 40px);
  }
  .emot_null {
    height: 50px;
    width: 100%;
  }
  .my_add_set {
    padding: 10px;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    position: absolute;
    width: calc(100% - 20px);
    bottom: 0;
    left: 0;
    cursor: pointer;
    .el-input {
      width: calc(100% - 100px);
    }
    .add_item {
      width: 80px;
      margin-left: 20px;
    }
  }
</style>
