<template>
  <div class="uif-dm-items-wrapper" :class="classes" v-if="items.length">
    <template v-for="(item, index) in items">
      <div :key="index" :class="getClasses(item)" :data-code="item.power">
        <template v-if="item.type !== 'line'">
          <u-icon v-if="item.icon" :type="item.icon" scene="none" @click="handleClick($event, item)"></u-icon>
          <div class="uif-dm-item-text" :title="item.disabled ? item.title : ''" @click="handleClick($event, item)">{{item.label}}</div>
          <u-icon v-if="item.rightIcon" :type="item.rightIcon" scene="action" @click="iconClick($event, item)"></u-icon>
          <template v-if="item.items && item.items.length">
            <u-icon type="chevron-right" scene="none"></u-icon>
            <u-drop-menu-items :items="item.items" :invert="invert" @click="handleClick" @iconClick="iconClick"></u-drop-menu-items>
          </template>
        </template>
      </div>
    </template>
  </div>
</template>
<script>
import {toString} from '@uif/core/lib/utils/format'
import UIcon from '@uif/core/lib/components/icon'
import {some} from '@uif/core/lib/utils/array'

export default {
  name: 'u-drop-menu-items',
  components: {
    UIcon
  },
  props: {
    items: {
      type: Array,
      default () {
        return []
      }
    },
    invert: {
      type: Boolean,
      default: false
    },
    value: {
      type: [String, Number],
      default: ''
    }
  },
  data () {
    return {
    }
  },
  computed: {
    classes () {
      return {
        'uif-dm-items-wrapper-invert': this.invert,
        'uif-dm-items-wrapper-icon': some(this.items, item => item.icon)
      }
    }
  },
  watch: {
  },
  created () {
  },
  mounted () {
  },
  methods: {
    // 事件传递
    handleClick (...arg) {
      this.$emit('click', ...arg)
    },
    iconClick (...arg) {
      this.$emit('iconClick', ...arg)
    },
    getClasses (item) {
      if (item.type === 'line') {
        return 'uif-dm-item-line'
      }
      return [
        'uif-dm-item',
        {
          'uif-dm-item-skip': item.skip,
          'uif-dm-item-disabled': item.disabled,
          'uif-dm-item-available': !item.skip && !item.disabled,
          'uif-dm-item-active': item.active || this.isActive(item.value),
          'uif-dm-item-icon': item.icon
        },
        item.className
      ]
    },
    isActive (value) {
      return this.value && toString(this.value) === toString(value)
    }
  }
}
</script>
