<template>
  <div class="main">
    <card title="我的组织">
      <my-group-list @finished="onFinished"></my-group-list>
      <template v-if="finished">
        <!-- <div
          class="create-button"
          v-if="list.length < 6"
          @click="$router.push({ name: 'createGroup' })"
        >
          <i class="icon"></i>
          <span>创建新组织</span>
        </div>-->
        <p class="tips">
          没有更多啦，
          <router-link :to="{ name: 'group' }">去逛逛排行榜吧～</router-link>
        </p>
      </template>
    </card>
  </div>
</template>

<script>
import Card from '@/components/Card'
import MyGroupList from '@/components/MyGroupList'
export default {
  components: { Card, MyGroupList },
  data() {
    return {
      list: [],
      finished: false
    }
  },
  methods: {
    // 数据加载完成
    onFinished(list) {
      this.finished = true
      this.list = list
    }
  }
}
</script>

<style lang="scss" scoped>
.create-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90px;
  font-size: 14px;
  font-weight: 600;
  color: #222;
  background-color: #eee;
  border-radius: 6px;

  .icon {
    width: 25px;
    height: 25px;
    margin-right: 20px;
    background: url('~@/assets/img/icon_plus2.png') no-repeat;
    background-size: contain;
  }
}
.tips {
  padding: 20px 0;
  font-size: 12px;
  text-align: center;
  color: #999;
  a {
    color: #1989fa;
    white-space: nowrap;
  }
}
</style>
