<template>
  <div class="ta-page-tool" :style="menuStyle" @mouseenter="showMenu = true" @mouseleave="showMenu = false">
    <div ref="pageToolMenu" class="ta-page-tool-menu">
      <div v-for="(item, index) in toolMenu" :key="index" class="ta-page-tool-item" @click="item.onClick">
        <span>{{ item.name || '功能' }}</span>
        <ta-icon :type="item.icon || 'setting'" />
      </div>
      <div v-if="isRefresh" class="ta-page-tool-item" @click="fnRefresh">
        <span>刷新</span>
        <ta-icon type="sync" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'TaPageTool',
  props: {
    toolMenu: {
      type: Array,
      default () {
        return []
      },
    },
    isRefresh: {
      type: Boolean,
      default: true,
    },
  },
  data () {
    return {
      showMenu: false,
      menuWidth: '',
    }
  },
  computed: {
    menuStyle () {
      const menuNum = this.isRefresh ? this.toolMenu.length + 1 : this.toolMenu.length
      return {
        width: this.showMenu ? this.menuWidth - 1 + 'px' : '32px',
        height: menuNum * 32 + 'px',
      }
    },
  },
  mounted () {
    this.menuWidth = this.$refs.pageToolMenu.offsetWidth
  },
  methods: {
    fnRefresh () {
      if (top.indexTool) {
        top.indexTool.reload()
      }
    },
  },
}
</script>
