<template>
  <div class="lofty-keyword">
    <im-input class="lofty-keyword-input" v-model:value="keyword">
      <template #append>
        <button class="lofty-btn h-100" style="width: 60px;height: 38px" @click="addTag">Add</button>
      </template>
    </im-input>
    <div class="keywords-tag-list">
      <span v-for="(tag,index) in model" class="lofty-suggestion-tag">
        <span class="lofty-tag-text">{{ tag }}</span>
        <i class="lofty_iconfont lofty-icon-close" @click.stop="removeTag(index)" ></i>
      </span>
    </div>
  </div>
</template>

<script setup>
import ImInput from "@/components/input/index.vue";
const model = defineModel({default: []})
const props = defineProps({
  config: Object,
})
model.value = props.modelValue || []

const keyword = ref('')
function addTag() {
  if(keyword.value && model.value.indexOf(keyword.value) === -1) {
    model.value.push(keyword.value)
    model.value = [...model.value]
    keyword.value = ''
  }
}

function removeTag(index) {
  model.value.splice(index, 1)
  model.value = [...model.value]
}
</script>
<style lang="scss">
.lofty-keyword {
  display: flex;
  width: 100%;
  .lofty-keyword-input {
    height: 40px;
  }
  @include media-600 {
    flex-wrap: wrap;
  }
  .lofty-keyword-input {
    margin-right: 10px;
    width: calc((100% - 20px) / 2);
    @include media-600 {
      width: 100%;
    }
  }
  .keywords-tag-list {
    flex: 1;
    font-size: 14px;
    margin-right: 20px;
    @include media-600 {
      width: 100%;
      margin-top: 10px;
    }
  }
}
</style>