<template>
  <div class="mixin-components-container" >
    <el-row v-for="item in indexList" :value="item.name" :key="item.name" style="margin-bottom:5px;">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ item.name }}</span>
        </div>
        <Button v-for="data in item.data" :key="data.remark" :class="`pan-btn ${item.color}-btn`" style="padding:10px;margin:5px" @click="openNewWindow(data.url)">{{ data.remark }}</Button>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { getIndexUrl } from '@/api/indexurl'

export default {
  data() {
    return {
      indexList: [],
      color: ['blue', 'light-blue', 'pink', 'green', 'tiffany', 'yellow']
    }
  },
  created() {
    getIndexUrl().then(res => {
      this.indexList = res.data
      for (const i in this.indexList) {
        this.indexList[i].color = this.color[i]
      }
    }).catch(err => {
      console.log(err)
    })
  },
  methods: {
    openNewWindow(l) {
      l = l.indexOf('http') ? 'http://' + l : l
      window.open(l)
    }
  }
}
</script>

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