<template>
  <div class="intro-container">
    <template v-for="(item, index) in data">
      <div v-if="index !== 0" :key="item.key" class="split">
        --------------->
      </div>
      <div :key="item.name" class="item" @click="jump(item.key)">
        <i :class="item.icon"></i>
        <div style="font-size: 12px">{{ item.name }}</div>
      </div>
    </template>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import utils from '@/hotent-ui-util.js'

export default {
  name: 'DesignIntro',
  props: {
    data: Array,
    default: () => {
      return []
    },
  },
  computed: mapState({
    menus: (state) => {
      return utils.nest2tile(state.menu.menus || [])
    },
  }),
  data() {
    return {}
  },
  methods: {
    jump(key) {
      let jumpMenu = this.menus.find((menu) => menu.alias === key)
      if (!jumpMenu) {
        this.$message.error('无该菜单操作权限')
        return
      }
      window.open(window.context.manage + '/' + key, '_blank')
    },
  },
}
</script>

<style lang="scss" scoped>
.intro-container {
  display: flex;
  background: #f9f9f9;
  padding: 16px 48px;
  margin-top: 10px;
  .split {
    color: #dedede;
  }
  .item {
    display: flex;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
    color: #2f2f2f;

    &:hover {
      color: #409eff;
    }

    i {
      font-size: 24px;
    }
  }
}
</style>
