<template>
  <div class="page">
    <div class="credit-points">
      <div class="fixed-top">
        <div class="header-tab">
          <div class="tab-item" v-for="(item, index) in tabList" :key="index" @click="tabClick(index)">{{ item }}
            <span class="active-line" v-if="tabIndex == index"/></div>
        </div>
      </div>
      <family-rank v-if="tabIndex == 0" :showDetail="showDetail"></family-rank>
      <user-rank v-if="tabIndex == 1" :showDetail="showDetail"></user-rank>
    </div>
  </div>
</template>
<script>
import {mapState} from 'vuex'
import userRank from './components/userRank.vue'
import familyRank from './components/familyRank.vue'

export default {
  name: "AppCreditPoints",
  appName: "我的积分",
  computed: {
    ...mapState(['user', 'token'])
  },
  components: {userRank, familyRank},
  data() {
    return {
      tabList: ['家庭积分', '个人积分'],
      tabIndex: 0,
      showDetail: true
    }
  },
  onLoad(options) {
    if (options.type == 'detail') {
      this.showDetail = true
    }
    uni.setNavigationBarTitle({
      title: options.title
    })
    uni.$on('toBindWorkUser', () => {
      this.toBind()
    })
  },
  methods: {
    tabClick(index) {
      this.tabIndex = index
    },
    toBind() {
      this.$linkTo('./bindWorkUser')
    }
  },
}
</script>
<style scoped lang="scss">
@import "~dvcp-wui/common";

.page {
  width: 100vw;
  overflow-x: hidden;
  background-color: #f3f6f9;

  .fixed-top {
    z-index: 999;
  }
}
</style>
