<script setup lang="ts">
import {defineModel, ref} from "vue";
import usageObj from "@/assets/config/directory/drugMedcWayCode.json"

const isVisible = ref<any>(false)
const usage = defineModel()
const emit = defineEmits(['clickItem'])
const clickItem = (item: any) => {
  usage.value = item[1]

}
const focus = () => {
  isVisible.value = true
}
const handlerBlur = () => {
  isVisible.value = false
}
</script>

<template>
  <el-popover
      :visible="isVisible"
      placement="bottom"
      title=""
      :width="200"
      trigger="click"
  >
    <template #reference>
      <el-input v-model="usage" placeholder="使用方法" @focus="focus" @blur="handlerBlur"></el-input>
    </template>
    <div class="box">
      <div class="item-list">
        <div class="item" v-for="(item, index) in Object.entries(usageObj)" :key="index" @click="clickItem(item)">
          {{ item[1] }}
        </div>
      </div>
    </div>
  </el-popover>

</template>

<style scoped lang="scss">
.box {
  margin: 0;
  padding: 0;
  position: absolute;
  background: #fff;
  top: 0;
  left: 0;
  width: 482px;
  height: auto;
  border: 1px solid #ddd;
  z-index: 999;
}

.item-list {
  display: flex;
  flex-wrap: wrap;
}

.item {
  display: flex;
  width: 160px;
  height: 36px;
  background: #fff;
  color: #000;
  border: 1px solid #ededed;
  align-items: center;
  justify-content: center;

  &:hover {
    color: #fff;
    background: #4d6de4;
  }

  &.last-item {
    margin-right: 0; /* 最后一个元素不加右边距 */
  }

}

.active {
  background: #4d6de4 !important;
  color: #fff !important;
}

</style>