<template>
  <div class="mixin-components-container" >
    <el-row v-for="item in indexList" :value="item.moduleName" :key="item.moduleName" style="margin-bottom:5px;">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span style="font-size: 20px;">{{ item.moduleName }}</span>
        </div>
        <el-button v-for="data in item.list" :key="data.id" :type="item.type" style="padding:10px;margin:5px" @click="openNewWindow(data.url)">{{ data.name }}</el-button>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { getNavigateIndex } from '@/api/navigate'
export default {
  data() {
    return {
      indexList: []
    }
  },
  created() {
    this.getNavigateIndex()
  },
  methods: {
    // 获取导航列表
    getNavigateIndex() {
      getNavigateIndex({}).then(resp => {
        this.indexList = resp.data.data
      })
    },
    // 打开链接
    openNewWindow(url) {
      window.open(url)
    }
  }
}
</script>

<style lang="less" scoped>
.mixin-components-container {
  background-color: #f0f2f5;
  padding: 10px;
  min-height: calc(100vh - 84px);
}
.component-item{
  min-height: 100px;
}
</style>
