<template>
  <div class="create">
    <div class="create-hd">
      <h1 class="create-hd__title">请选择您想进行的操作</h1>
      <p class="create-hd__tip">我们将为您展现下一步指引</p>
    </div>
    <div class="create-bd">
      <div class="create-item">
        <div
          class="create-item-box create-item__group"
          :class="{ 'is-disabled': groupDisabled }"
          @click="onCreateGroup"
        >
          <div class="pic"></div>
          <div class="title">创建新组织</div>
        </div>
        <p class="create-item__tip" v-if="groupCount === 0">
          您还未加入组织，请先加入/创建一个组织吧～<router-link
            :to="{ name: 'group' }"
            >去逛逛</router-link
          >
        </p>
        <p class="create-item__tip" v-else-if="groupCount < maxGroup">
          您已加入{{ groupCount }}个组织，可直接发布活动或<router-link
            :to="{ name: 'group' }"
            >看看其他组织</router-link
          >
        </p>
        <p class="create-item__tip" v-if="groupCount >= maxGroup">
          您已加入满{{ groupCount }}个组织咯，请直接创建活动或者管理<router-link
            :to="{ name: 'my' }"
            >我的组织～</router-link
          >
        </p>
      </div>
      <div class="create-item">
        <div
          class="create-item-box create-item__activity"
          :class="{ 'is-disabled': activityDisabled }"
          @click="onCreateActivity"
        >
          <div class="pic"></div>
          <div class="title">创建活动</div>
        </div>
        <p class="create-item__tip" v-if="groupCount === 0">
          您还未加入组织，请先加入/创建一个组织吧～<router-link
            :to="{ name: 'group' }"
            >去逛逛</router-link
          >
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from '@/api'

export default {
  name: 'CreateIndex',
  data() {
    return {
      groupList: [],
      maxGroup: 6
    }
  },
  computed: {
    groupCount() {
      return this.groupList.length || 0
    },
    groupDisabled() {
      return this.groupCount >= this.maxGroup
    },
    activityDisabled() {
      return !this.groupCount
    }
  },
  methods: {
    // 创建组织
    onCreateGroup() {
      !this.groupDisabled && this.$router.replace({ name: 'createGroup' })
    },
    // 创建活动
    onCreateActivity() {
      !this.activityDisabled && this.$router.replace({ name: 'createActivity' })
    },
    // 获取我加入的组织
    getJoinedGroupes() {
      api.getJoinedGroupes().then(response => {
        this.groupList = Array.isArray(response) ? response : []
      })
    }
  },
  beforeMount() {
    this.getJoinedGroupes()
  }
}
</script>

<style lang="scss">
.create {
  padding: 40px;
}
.create-hd__title {
  font-size: 18px;
  color: #222;
}
.create-hd__tip {
  margin-top: 10px;
  font-size: 12px;
  color: #999;
}
.create-item {
  margin-top: 20px;
}
.create-item__tip {
  margin-top: 10px;
  font-size: 12px;
  text-align: center;
  color: #999;
  a {
    color: #1989fa;
    white-space: nowrap;
  }
}
.create-item-box {
  display: flex;
  align-items: center;
  height: 130px;
  font-size: 20px;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  &.is-disabled {
    background: #eee;
    cursor: not-allowed;
  }
  .pic {
    width: 90px;
    height: 90px;
    margin: 0 35px 0 30px;
  }
}
.create-item__group {
  background: linear-gradient(
    180deg,
    rgba(255, 201, 44, 1) 0%,
    rgba(255, 116, 42, 1) 100%
  );
  .pic {
    background: url('~@/assets/img/create_group.png') no-repeat;
    background-size: contain;
  }
  &.is-disabled {
    .pic {
      background: url('~@/assets/img/create_group_disabled.png') no-repeat;
      background-size: contain;
    }
  }
}
.create-item__activity {
  background: linear-gradient(
    180deg,
    rgba(2, 236, 228, 1) 0%,
    rgba(18, 186, 244, 1) 100%
  );
  .pic {
    background: url('~@/assets/img/create_activity.png') no-repeat;
    background-size: contain;
  }
  &.is-disabled {
    .pic {
      background: url('~@/assets/img/create_activity_disabled.png') no-repeat;
      background-size: contain;
    }
  }
}
</style>
