<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;
}
// 自定义el-button样式
// goon
.el-button--goon.is-active,
.el-button--goon:active {
  background: #20B2AA;
  border-color: #20B2AA;
  color: #fff;
}

.el-button--goon:focus,
.el-button--goon:hover {
  background: #48D1CC ;
  border-color: #48D1CC;
  color: #fff;
}

.el-button--goon {
  color: #FFF;
  background-color: #20B2AA;
  border-color: #20B2AA;
}
// blue
.el-button--blue.is-active,
.el-button--blue:active {
  background: #324157;
  border-color: #324157;
  color: #fff;
}

.el-button--blue:focus,
.el-button--blue:hover {
  background: #324157 ;
  border-color: #324157;
  color: #fff;
}

.el-button--blue {
  color: #FFF;
  background-color: #324157;
  border-color: #324157;
}
// light-blue
.el-button--light-blue.is-active,
.el-button--light-blue:active {
  background: #3A71A8;
  border-color: #3A71A8;
  color: #fff;
}

.el-button--light-blue:focus,
.el-button--light-blue:hover {
  background: #3A71A8 ;
  border-color: #3A71A8;
  color: #fff;
}

.el-button--light-blue {
  color: #FFF;
  background-color: #3A71A8;
  border-color: #3A71A8;
}
// red
.el-button--red.is-active,
.el-button--red:active {
  background: #C03639;
  border-color: #C03639;
  color: #fff;
}

.el-button--red:focus,
.el-button--red:hover {
  background: #C03639 ;
  border-color: #C03639;
  color: #fff;
}

.el-button--red {
  color: #FFF;
  background-color: #C03639;
  border-color: #C03639;
}
// pink
.el-button--pink.is-active,
.el-button--pink:active {
  background: #E65D6E;
  border-color: #E65D6E;
  color: #fff;
}

.el-button--pink:focus,
.el-button--pink:hover {
  background: #E65D6E ;
  border-color: #E65D6E;
  color: #fff;
}

.el-button--pink {
  color: #FFF;
  background-color: #E65D6E;
  border-color: #E65D6E;
}
// green
.el-button--green.is-active,
.el-button--green:active {
  background: #30B08F;
  border-color: #30B08F;
  color: #fff;
}

.el-button--green:focus,
.el-button--green:hover {
  background: #30B08F ;
  border-color: #30B08F;
  color: #fff;
}

.el-button--green {
  color: #FFF;
  background-color: #30B08F;
  border-color: #30B08F;
}
// yellow
.el-button--yellow.is-active,
.el-button--yellow:active {
  background: #FEC171;
  border-color: #FEC171;
  color: #fff;
}

.el-button--yellow:focus,
.el-button--yellow:hover {
  background: #FEC171 ;
  border-color: #FEC171;
  color: #fff;
}

.el-button--yellow {
  color: #FFF;
  background-color: #FEC171;
  border-color: #FEC171;
}
</style>
