

<template>
  <el-popover placement="bottom-start" trigger="click" :width="props.width" >
    <template #reference>
      <el-input v-model="input" :style="{'width': props.width+'px'}" clearable></el-input>
    </template>
    <div class="code-popo" v-if="props.list.length > 0">
      <div class="code-item" v-for="item in props.list" >
          <div class="code-item-name" v-for="subItem in item" @click="inputStr(subItem)">
            {{subItem}}
          </div>
      </div>
    </div>
  </el-popover>
</template>
<script setup lang="ts">
import {ref} from "vue";
const input = defineModel<string | null>();
const props = defineProps({
  list: {
    type: Array,
    default: []
  },
  width: {
    type: Number,
    default: 1000
  }
})

const inputStr = (str: string) => {
  let strList = input.value?input.value.split(","):[];
  strList.push(str);
  input.value = strList.join(",");
}

</script>
<style scoped lang="scss">
.code-popo{
  width: 100%;
  .code-item{
    display: flex;
    flex-wrap: wrap;
    padding: 5px 0;
    border-bottom: 1px solid #fffeee;
    .code-item-name{
      flex: 0 0 calc(100% / 12);
      font-size: 16px;
      box-sizing: border-box;
      padding: 5px;
      text-align: center;
      cursor: pointer;
      &:hover{
        color: #000;
      }
    }
  }
}
</style>