<template>
  <div class="main my">
    <div class="my-header">
      <div class="tools">
        <ul class="tools-list">
          <li class="tools-item" @click="$router.push({ name: 'settings' })">
            <img src="~@/assets/img/my_settings.png" width="20" />
          </li>
          <li class="tools-item" @click="$router.push({ name: 'message' })">
            <img src="~@/assets/img/my_message.png" width="20" />
          </li>
        </ul>
      </div>
      <div class="user">
        <div class="user-avatar">
          <img :src="user.avatar | avatar" />
        </div>
        <div class="user-content">
          <div class="user-content__name">{{ user.personal_name }}</div>
          <div class="user-content__info">{{ user.class_name }}</div>
        </div>
        <!-- <div class="user-aside">
        <dl @click="$router.push({ name: 'myGroup' })">
          <dt>{{ detail.org_stu_total }}</dt>
          <dd>组织</dd>
        </dl>
        <dl @click="$router.push({ name: 'myActivity' })">
          <dt>{{ detail.act_stu_total }}</dt>
          <dd>活动</dd>
        </dl>
        <dl @click="$router.push({ name: 'myApprove' })">
          <dt>
            {{ detail.act_check_total }}
            <span class="badge" v-if="hasBadge"></span>
          </dt>
          <dd>审批</dd>
        </dl>
        </div>-->
      </div>
    </div>
    <van-tabs v-model="tabActive" class="my-tab" :ellipsis="false">
      <van-tab name="0">
        <template #title>
          <div class="name">我的组织</div>
          <div class="num">{{ detail.org_stu_total }}</div>
        </template>
        <my-group-list></my-group-list>
      </van-tab>
      <van-tab name="1">
        <template #title>
          <div class="name">我的活动</div>
          <div class="num">{{ detail.act_stu_total }}</div>
        </template>
        <my-activity-list></my-activity-list>
      </van-tab>
      <!-- <van-tab title="我的审批" name="2">
        <template #title
          >我的审批
          <span class="badge" style="top:-10px;" v-if="hasBadge"></span>
        </template>
        <my-approve-list></my-approve-list>
      </van-tab>-->
    </van-tabs>
    <tab-bar></tab-bar>
  </div>
</template>

<script>
// components
import TabBar from '@/components/TabBar'
import MyGroupList from '@/components/MyGroupList'
import MyActivityList from '@/components/MyActivityList'
import * as api from '@/api'

export default {
  name: 'MyIndex',
  components: { TabBar, MyGroupList, MyActivityList },
  data() {
    return {
      tabActive: '0',
      detail: {}
    }
  },
  watch: {
    $route: {
      immediate: true,
      depp: true,
      handler(route) {
        this.tabActive = route.query.tab || '0'
      }
    }
  },
  computed: {
    user() {
      return this.detail.user || {}
    },
    hasBadge() {
      return !!parseInt(this.detail.act_uncheck_total)
    }
  },
  methods: {
    onTabClick(name) {
      this.$router.push({ query: { tab: name } })
    },
    // 获取我的详情
    getDetail() {
      api.getMy().then(response => {
        this.detail = response
      })
    }
  },
  beforeMount() {
    this.getDetail()
  }
}
</script>

<style lang="scss">
.my-header {
  margin-left: -15px;
  margin-right: -15px;
  padding: 0 20px;
  height: 190px;
  background: url('~@/assets/img/my_bg.png') no-repeat center top;
  background-size: cover;
}
.tools-list {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px 0;
}
.tools-item {
  margin-left: 20px;
}
.user {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}
.user-avatar {
  width: 60px;
  height: 60px;
  background-color: #ccc;
  border-radius: 50%;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.user-content {
  display: flex;
  height: 60px;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px;
  color: #fff;
  line-height: 1;
}
.user-content__name {
  font-size: 15px;
}
.user-content__info {
  margin-top: 6px;
  font-size: 12px;
}
.user-aside {
  display: flex;
  dl {
    text-align: center;
    margin-left: 10px;
  }
  dt {
    font-size: 17px;
    color: #222;
  }
  dd {
    color: #999;
  }
  .badge {
    top: -15px;
  }
}
.my-tab {
  margin-top: -50px;
  .van-tabs__nav {
    background-color: transparent;
  }
  &.van-tabs--line .van-tabs__wrap {
    height: 50px;
  }
  .van-tabs__wrap--scrollable .van-tabs__nav--complete {
    padding: 0;
  }
  .van-tabs__line {
    display: none;
  }
  .van-tab {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background-color: #eaeef0;
  }
  .van-tab--active {
    background-color: #fff;
  }
  .name {
    font-size: 12px;
    color: #707070;
    text-align: center;
  }
  .num {
    font-size: 24px;
    color: #313131;
    text-align: center;
  }
}
.my .list {
  padding: 40px 0;
}
.badge {
  position: relative;
  display: inline-block;
  width: 4px;
  height: 4px;
  background: rgba(255, 103, 103, 1);
  border-radius: 50%;
}
</style>
