<template>
  <div class="main">
    <search-bar
      placeholder=""
      :focus="true"
      v-model="searchValue"
      @search="onSearch"
      ref="searchBar"
    ></search-bar>
    <van-tabs v-model="tabActive" :line-height="2" @click="onTabClick">
      <van-tab title="组织" name="0">
        <group-list
          :params="{ keywords: searchValue }"
          ref="list"
          v-if="tabActive === '0'"
        >
          <template #empty>
            <div class="search-empty">暂时没有内容哦，换个搜索词试试吧～</div>
            <!-- <div class="search-empty">暂时没有内容哦，来做第一人吧～</div>
            <div class="group-create">
              <input
                type="button"
                class="button button-primary"
                value="创建组织"
                :disabled="groupDisabled"
                @click="onCreateGroup"
              />
              <p class="tips" v-if="groupDisabled">
                您已加入满{{ groupCount }}个组织咯，管理<router-link
                  :to="{ name: 'my' }"
                  >我的组织～</router-link
                >
              </p>
            </div> -->
          </template>
        </group-list>
      </van-tab>
      <van-tab title="个人" name="1">
        <member-list
          :params="{ keywords: searchValue }"
          ref="list"
          v-if="tabActive === '1'"
        >
          <template #empty>
            <div class="search-empty">暂时没有内容哦，换个搜索词试试吧～</div>
          </template>
        </member-list>
      </van-tab>
      <van-tab title="活动" name="2">
        <activity-list
          :params="{ keywords: searchValue }"
          ref="list"
          v-if="tabActive === '2'"
        >
          <template #empty>
            <div class="search-empty">暂时没有内容哦，换个搜索词试试吧～</div>
          </template>
        </activity-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// components
import SearchBar from '@/components/SearchBar'
import GroupList from '@/components/GroupList'
import MemberList from '@/components/MemberList'
import ActivityList from '@/components/ActivityList'
import * as api from '@/api'
export default {
  name: 'Search',
  components: { SearchBar, GroupList, MemberList, ActivityList },
  data() {
    return {
      tabActive: '0',
      searchValue: '',
      groupList: [],
      maxGroup: 6
    }
  },
  watch: {
    $route: {
      immediate: true,
      depp: true,
      handler(route) {
        this.tabActive = route.query.tab || '0'
        this.searchValue = route.query.keywords
      }
    }
  },
  computed: {
    groupCount() {
      return this.groupList.length || 0
    },
    groupDisabled() {
      return this.groupCount >= this.maxGroup
    }
  },
  methods: {
    onTabClick(name) {
      this.$router.replace({ query: { tab: name, keywords: this.searchValue } })
    },
    onSearch() {
      this.$router.replace({
        query: { tab: this.tabActive, keywords: this.searchValue }
      })
    },
    // 创建组织
    onCreateGroup() {
      !this.groupDisabled && this.$router.push({ name: 'createGroup' })
    },
    // 获取我加入的组织
    getJoinedGroupes() {
      api.getJoinedGroupes().then(response => {
        this.groupList = Array.isArray(response) ? response : []
      })
    }
  },
  beforeMount() {
    this.getJoinedGroupes()
  }
}
</script>

<style lang="scss" scoped>
::v-deep .list {
  margin-top: 20px;
}
.search-empty {
  margin-top: 50px;
  padding-top: 200px;
  font-size: 14px;
  color: #999;
  background: url('~@/assets/img/search_empty.png') no-repeat center top;
  background-size: 160px auto;
  text-align: center;
}
.group-create {
  padding: 60px 0;
  text-align: center;
  .tips {
    margin-top: 10px;
    font-size: 12px;
    text-align: center;
    color: #999;
    a {
      color: #1989fa;
      white-space: nowrap;
    }
  }
  .button {
    display: inline-block;
    height: 30px;
    padding: 0 20px;
    line-height: 30px;
    color: #fff;
    text-align: center;
    background: linear-gradient(
      180deg,
      rgba(255, 201, 44, 1) 0%,
      rgba(255, 116, 42, 1) 100%
    );
    border-radius: 20px;
  }
  .button:disabled {
    background: #ccc !important;
  }
}
</style>
