<template>
  <div class="white content">
    <template v-if="tabItems.length">
      <scroll-tabs ref="tabs" class="mx-3" :items="tabItems" @handleClick="handleToHref"></scroll-tabs>
      <v-divider></v-divider>
    </template>
    <div ref="scrollBox" style=" overflow-x: hidden; overflow-y: auto;">
      <m-empty v-if="isEmpty"></m-empty>
      <feature-module :roles="list" @finish="handleTabItems"/>
    </div>
  </div>
</template>

<script>
import ScrollTabs from '@/components/ScrollTabs'
import FeatureModule from './components/featureModule.vue'
import MEmpty from '@/components/Common/empty'
// import { getWorkbenchList } from '@/api/menu'

export default {
  name: 'home-index',
  components: { FeatureModule, ScrollTabs, MEmpty },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      isMini: true,
      isEmpty: true,
      list: [],
      tabItems: []
    }
  },
  mounted () {
    // this.init()
    this.$parent.$on('$HANDLE_EDIT_MODULES', this.handleClick)
    this.$nextTick(() => {
      this.$refs.scrollBox.scrollTo({ top: 0, behavior: 'instant' })
    })
  },
  beforeDestroy () {
    // 注销事件监听器
    this.$parent.$off('$HANDLE_EDIT_MODULES', this.handleClick)
  },
  methods: {
    // async init () {
    //   try {
    //     const { data } = await getWorkbenchList()
    //     // console.log(data)
    //     this.isEmpty = data.every(_e => _e.entity.active === '0')
    //     this.list = data.map(e => {
    //       return Object.assign(e.entity, { efficacy: e.efficacy })
    //     })
    //   } catch (error) {
    //     this.$snackbar.error(error)
    //   }
    // },
    handleTabItems (val) {
      this.tabItems = val
    },
    handleClick () {
      this.$router.push('/home/edit')
    },
    handleToHref (item) {
      const id = item.name + item.id
      const selector = document.getElementById(id)
      if (!selector) return
      this.$refs.scrollBox.scrollTo({
        top: selector.offsetTop - this.$refs.scrollBox.offsetTop - 12,
        behavior: 'smooth'
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
