<template>
  <div class="toolbar q-pa-xs" :class="isMore?'more':''">
    <div class="con">
      <template v-for="(item,index) in itemsInner">
        <slot :name="item.slotExt" v-bind="{item,isVisble:stopIndex===-1||index<stopIndex}">
          <component
            class="text-no-wrap"
            :ref="'item_'+index"
            :style="{visibility:stopIndex===-1||index<stopIndex?'visible':'hidden', ...item.style}"
            :is="item.$type"
            v-show="!item.hide"
            :label="item.type==='icon'?'':(typeof (item.name) === 'function'?item.name():item.name)"
            :flat="item.flat?item.flat:true"
            :dense="item.dense?item.dense:true"
            :icon="item.icon"
            :name="item.icon"
            :class="item.class"
            :disabled="item.disabled"
            :size="item.size?item.size:'1em'"
            :key="index"
            :type="item.btnType"
            :target="item.target"
            :href="item.href"
            :color="item.color"
            @click="selectItem(item)"
          >
            <q-icon
              v-if="item.type==='text'&&item.icon"
              :name="item.icon"
              :color="item.iconColor"
              :size="item.iconSize?item.iconSize:'1.6em'"
            ></q-icon>
            <span
              v-if="item.type==='text'"
              :color="item.color"
              v-text="typeof (item.name) === 'function'?item.name():item.name"
              :class="item.class?item.class:''"
              class="q-pa-xs"
            ></span>
            <q-tooltip v-if="item.type==='icon'&&item.name">{{item.name}}</q-tooltip>
            <q-tooltip v-if="item.type==='btn'&&item.title">{{item.title}}</q-tooltip>
            <q-list
              dense
              v-if="item.type==='btnMenu'&&item.items"
              style="min-width: 100px"
              separator
            >
              <q-item
                clickable
                v-close-popup="!v.disabled&&!v.items"
                v-for="(v,index) in item.items"
                v-show="!v.hide"
                :class="v.disabled?'cursor-not-allowed text-grey-6':(v.class)"
                :key="index"
                :to="v.to"
                @click="selectItem(v,item)"
              >
                <q-item-section avatar>
                  <q-icon :name="v.icon" color="grey-8" />
                </q-item-section>
                <q-item-section v-text="v.name"></q-item-section>
                <q-item-section side v-if="v.items">
                  <q-icon name="keyboard_arrow_right" />
                </q-item-section>
                <kyb-toolbar-list
                  v-if="v.items&&v.items.length&&!v.disabled"
                  is-child
                  :items="v.items"
                  @select-item="selectItem($event)"
                />
              </q-item>
            </q-list>
          </component>
        </slot>
      </template>
      <!-- <slot name="default"></slot> -->
    </div>

    <q-resize-observer @resize="onResize" />
    <div
      v-if="isMore"
      class="more-con row items-center justify-center cursor-pointer"
      @click="showMenu=!showMenu;reSize()"
    >
      <q-icon
        class="icon"
        :class="showMenu?'show':''"
        name="play_arrow"
        size="1.5em"
        color="grey-5"
      ></q-icon>
      <kyb-toolbar-list
        ref="list"
        v-show="showMenu"
        :items="moreList"
        @select-item="selectItem($event)"
      />
    </div>
  </div>
</template>
<style lang="stylus">
.toolbar {
  border-bottom: 1px solid $grey-4;
  height: 40px;
  position: relative;
  overflow: hidden;
}

.toolbar>.con {
  position: absolute;
  top: 0;
  left: 4px;
  bottom: 0;
  width: 30000px;
  visibility: hidden;
  display: flex;
  align-items: center;
}

.toolbar.more {
  padding-right: 32px;
}

.toolbar.more>.more-con {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 32px;
  border-left: 1px solid $grey-3;
  transition: all 0.5s;
  background-color: white;
}

.toolbar.more>.more-con:hover {
  background-color: $grey-2;
}

.toolbar.more>.more-con>.icon {
  transition: all 0.5s;
}

.toolbar.more>.more-con>.icon.show {
  transform: rotate(90deg);
}
</style>

<script>
let typeMap = {
  btn: 'q-btn',
  text: 'span',
  btnMenu: 'q-btn-dropdown',
  icon: 'q-icon'
}
export default {
  name: 'k-toolbar',
  props: {
    type: { type: String, default: 'h' }, // h 为横向，v为纵向
    items: {
      type: Array,
      default: () => []
    }
  },
  data: function() {
    return {
      isMore: false,
      showMenu: false,
      stopIndex: -1,
      moreList: [],
      itemsInner: []
    }
  },
  watch: {
    items(old) {
      old || (old = [])
      this.itemsInner = [...old]
      this.fixData()
    }
  },
  created() {
    this.itemsInner = [...this.items]
    this.fixData()
  },
  mounted() {
    this.reSize()
  },
  methods: {
    fixData() {
      this.itemsInner.map(item => {
        item.type || (item.type = 'btn')
        item.$type = typeMap[item.type]
        item.$pros = {}
        if (item.$type === 'q-btn') {
          item.$pros.label = item.name
        }
      })
    },
    selectItem(item, parent) {
      let $event = { item, target: this }
      if (item && item.click) {
        item.click($event)
      }
      this.$emit('select-item', $event)
    },
    onResize(size) {
      this.reSize()
    },
    reSize() {
      // console.log('all:', this.$el.offsetWidth, this.$el.offsetHeight)
      let allSize = this.$el.offsetWidth
      this.stopIndex = -1
      let lastCha = 0,
        lastJi = 0
      this.$el.childNodes[0].childNodes.forEach((el, index) => {
        // console.log('offset:', el, el.offsetWidth, el.offsetHeight)
        if (el.offsetWidth) {
          lastCha = allSize
          allSize -= el.offsetWidth
        } else {
          return
        }
        if (allSize < 0 && this.stopIndex === -1) {
          lastJi = lastCha
          this.stopIndex = index
        }
        this.isMore = allSize < 0
        // console.log('isMore:', this.isMore)
      })
      if (this.stopIndex > -1) {
        if (lastJi < 32 && this.stopIndex > 0) {
          this.stopIndex--
        }
        //  console.log('lastJi:', lastJi, this.stopIndex)
        this.moreList = this.itemsInner.slice(this.stopIndex)
      }
    }
  }
}
</script>
