<template>
  <div class="uif-drop-menu-items" v-if="items.length">
    <template v-for="(item, index) in items">
      <div :key="index" :class="getClasses(item)">
        <template v-if="item.slot">
          <base-slot :slot-name="item.slot" :params="{ item, value }"></base-slot>
        </template>
        <template v-else>
          <div class="uif-drop-menu-items-text" @click="handleClick($event, item)">{{item.label}}</div>
        </template>
        <template v-if="item.items && item.items.length">
          <drop-menu-items :items="item.items" @click="handleClick"></drop-menu-items>
        </template>
      </div>
    </template>
  </div>
</template>
<script>
import BaseSlot from '@uif/hq/src/components/base-slot'
import {toString} from '@uif/hq/src/utils/format'

export default {
  name: 'drop-menu-items',
  components: {
    BaseSlot
  },
  props: {
    items: {
      type: Array,
      default () {
        return []
      }
    },
    value: {
      type: [String, Number],
      default: ''
    }
  },
  data () {
    return {
    }
  },
  watch: {
  },
  created () {
  },
  mounted () {
  },
  methods: {
    getClasses (item) {
      return [
        'uif-dm-item',
        {
          'available': !item.disabled,
          'disabled': item.disabled,
          'active': item.active || this.isActive(item.value)
        },
        item.className
      ]
    },
    isActive (value) {
      return this.value && toString(this.value) === toString(value)
    },
    // 事件传递
    handleClick (...arg) {
      this.$emit('click', ...arg)
    }
  }
}
</script>
