<template>
  <q-item
    v-on="$listeners"
    v-bind="$attrs"
    @mouseenter="isHover = true"
    @mouseleave="isHover = false"
    :clickable="clickable"
    active-class="text-white bg-secondary"
  >
    <slot name="before" />
    <q-item-section>
      <q-item-label>
        <slot />
      </q-item-label>
    </q-item-section>
    <q-item-section v-if="$scopedSlots.menu" side>
      <ui-btn-menu v-if="isShowMenu || isHover" @click.prevent size="sm">
        <ui-menu
          v-model="isShowMenu"
          :offset="[10, 10]"
          self="top left"
          anchor="top right"
        >
          <slot name="menu" v-bind="{ close }" />
        </ui-menu>
      </ui-btn-menu>
    </q-item-section>
    <slot name="after" />
    <q-item-section v-if="sortable" side>
      <q-icon
        class="sortable-handle cursor-pointer text-black"
        name="la la-braille"
        size="xs"
      />
    </q-item-section>
  </q-item>
</template>

<script lang="ts">
import { Component, Inject, Prop, Vue } from 'vue-property-decorator'
import { QItem, QItemLabel, QItemSection, QIcon } from 'quasar'
import UiBtnMenu from './buttons/UiBtnMenu.vue'
import UiMenu from './menu/UiMenu.vue'

@Component({
  inheritAttrs: false,
  components: { UiMenu, UiBtnMenu, QIcon, QItem, QItemSection, QItemLabel },
})
export default class UiListItem extends Vue {
  @Inject('clickable') clickable!: boolean
  @Prop(Boolean) sortable?: boolean

  isHover = false
  isShowMenu = false

  close() {
    this.isShowMenu = false
  }
}
</script>
