<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 { getDataIndex } from '@/api/getConfluence'
export default {
  data() {
    return {
      indexList: []
    }
  },
  created() {
    this.getDataIndex()
  },
  methods: {
    getDataIndex() {
      getDataIndex().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>
