<template>
  <div class="workbench pa-4">
    <div class="d-flex align-center justify-space-between mb-4">
      <div>
        <div class="text-h5 font-weight-medium">工作台</div>
        <div class="text-body-2 grey--text mt-1">首期提供标准组件，数据接口将在对应业务能力完善后接入。</div>
      </div>
      <v-btn color="primary" outlined @click="handleEdit">
        <v-icon left>mdi-view-dashboard-edit-outline</v-icon>
        编辑布局
      </v-btn>
    </div>

    <v-row v-if="visibleWidgets.length">
      <v-col v-for="widget in visibleWidgets" :key="widget.id" cols="12" md="6" lg="4">
        <v-card outlined height="180" class="workbench-card">
          <v-card-title>
            <v-avatar :color="widget.color" size="38" class="mr-3">
              <v-icon dark>{{ widget.icon }}</v-icon>
            </v-avatar>
            {{ widget.title }}
          </v-card-title>
          <v-card-text>
            <div class="text-body-2">{{ widget.description }}</div>
            <v-chip small outlined class="mt-4">待接入业务数据</v-chip>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>

    <v-alert v-else type="info" outlined>
      当前没有启用的工作台组件，可通过“编辑布局”恢复标准组件。
    </v-alert>
  </div>
</template>

<script>
import { loadWorkbenchLayout, STANDARD_WIDGETS } from './workbench'

export default {
  name: 'home-index',
  data () {
    return {
      layout: []
    }
  },
  computed: {
    username () {
      const info = this.$store.getters.userInfo || {}
      return info.username || (info.user && info.user.username) || 'anonymous'
    },
    visibleWidgets () {
      return this.layout
        .filter(item => item.enabled)
        .map(item => STANDARD_WIDGETS.find(widget => widget.id === item.id))
        .filter(Boolean)
    }
  },
  mounted () {
    this.refreshLayout()
    this.$parent.$on('$HANDLE_EDIT_MODULES', this.handleEdit)
  },
  beforeDestroy () {
    this.$parent.$off('$HANDLE_EDIT_MODULES', this.handleEdit)
  },
  methods: {
    refreshLayout () {
      this.layout = loadWorkbenchLayout(this.username)
    },
    handleEdit () {
      this.$router.push('/home/edit')
    }
  }
}
</script>

<style lang="scss" scoped>
.workbench {
  min-height: 100%;
  background: #f7f9fc;
}

.workbench-card {
  background: #fff;
}
</style>
