<template>
  <div>
    <!-- B分排名 -->
    <van-nav-bar title="我的排名" left-text="返回" @click-left="$route_back" left-arrow></van-nav-bar>
    <div ref="pkNoticeRef" v-if="novice&&data.length!=0">
      <!-- <van-notice-bar wrapable mode="closeable" @close="closeNotice">最近更新: {{data[0].update_time}}</van-notice-bar> -->
    </div>
    <div class="body_com" :style="{'height': (novice ?noviceHeight:'calc(100%)')}">
      <scroller ref="scroller" :on-refresh="onRefresh" :on-infinite="onInfinite">
        <div style="margin:0.26rem;">
          <van-cell-group v-for="(item,index) in data" :key="index" style="margin-top: 0rem;margin-bottom: 0.2rem;">
            <van-cell center>
              <template #title>
                <span class="custom-title">{{item.group_name}}</span>
              </template>
              <template #right-icon>
                 <!-- <div class="ranking_num">第  <span>{{item.rank}}</span>  名</div> -->
              </template>
            </van-cell>
            <van-cell class="openDetail" @click="openRanking(item)" title="查看排名" is-link/>
          </van-cell-group>
           <noData :list="data" />
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import Vue from 'vue'
import {NoticeBar} from 'vant'
Vue.use(NoticeBar)
export default {
  name: 'my_ranking',
  data () {
    return {
      page: 1,
      page_size: '10',
      data: [],
      novice: true,
      noviceHeight: ''
    }
  },
  computed: {
    hasData () {
      return this.loading || (Array.isArray(this.data) && this.data.length > 0)
    }
  },
  methods: {

    closeNotice () {
      this.novice = false
    },
    openRanking (item) {
      if (item.type == 'normal') {
        this.$router.push({ name: 'integral_rank'})
      } else if (item.type == 'all') {
        this.$router.push({ name: 'rankB'})
      } else {
        this.$router.push({ name: 'ranking_detail', query: { group_id: item.target_id, title: item.group_name, date_interval: item.date_interval}})
      }
    },
    // 加载
    showLoading () {
      this.$toast.loading({
        loadingType: 'spinner',
        message: '正在加载'
      })
    },
    get_list (done) {
      let self = this
      self.showLoading()
      var params = {
        page: this.page,
        page_size: '10'
      }
      request('get', '/api/integral/statistics/ranking/list', params).then((res) => {
        done()
        if (res.data.code === 1) {
          self.$refs.scroller.finishInfinite(res.data.data.list.length != 10) // 停止上滚加载下一页，由于服务器端没有统一空数据和正常数据的格式，所以通过total字段来判定数据是否存在下一页
          const {list} = res.data.data
          if (list.length == 0) {
            this.novice = false
          };
          if (self.page === 1) {
            self.data = list
          } else {
            self.data = self.data.concat(list)
          }
        } else {
          self.$refs.scroller.finishInfinite(true)
        }
      }).finally(() => {
        this.setHeight()
        this.$toast.clear()
      })
    },
    setHeight () {
      this.$nextTick(() => {
        setTimeout(() => {
          if (this.novice) {
            this.noviceHeight = 'calc(100% - ' + this.$refs.pkNoticeRef.offsetHeight + 'px )'
          }
        }, 100)
      })
    },
    onRefresh (done) {
      let self = this
      this.page = 1
      this.get_list(function () {
        self.list = []
        done()
      })
    },
    onInfinite (done) {
      this.page++
      this.get_list(done)
    }
  }
}
</script>

<style scoped lang="less">
  .tableHeader{
    font-size: 0.28rem;
    color: #969799;
    padding: 0.1rem 0.32rem;
  }
  .openDetail{
    color: #909399;
  }
  .ranking_num span{
    font-size: 0.44rem;
    font-weight: 600;
    color: #26A2FF;
  }
  .body_com {
    height: calc(100%);
    position: relative;
  }

  /deep/ .body_com .van-hairline--top-bottom:after {
    border: none;
  }

  /deep/ .body_com .van-hairline-unset--top-bottom:after {
    border: none;
  }

  .date-type__wrap {
    display: flex;
    padding: 0.24rem 0.32rem;
    flex-direction: row;
    justify-content: center;

    & .date-type__label {
      display: flex;
      width: 1.4rem;
      height: 0.52rem;
      font-size: 0.3rem;
      color: #fff;
      background: #26a2ff;
      border-top: 0.02rem solid #26a2ff;
      border-bottom: 0.02rem solid #26a2ff;
      border-left: 0.02rem solid #fff;
      align-items: center;
      justify-content: center;
      transition: color, background-color 100ms;

      &.active {
        color: #26a2ff;
        background: #fff;

        &:first-child {
          border-left: 0.02rem solid #26a2ff;
        }
      }

      &:first-child {
        border-radius: 0.08rem 0 0 0.08rem;
      }

      &:last-child {
        border-right: 0.02rem solid #26a2ff;
        border-radius: 0 0.08rem 0.08rem 0;
      }
    }
  }

  .date-picker__toolbar {
    display: flex;
    flex-direction: row;

    & .reset-button {
      color: #26a2ff !important;
    }

    & .button-border-none {
      border: transparent !important;
    }
  }

  .dropdown-menu__item {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 0;
    font-size: 0.3rem;
    color: #323233;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    & > span {
      position: relative;
      box-sizing: border-box;
      max-width: 100%;
      padding: 0 0.16rem;
      color: #323233;
      font-size: 0.3rem;
      line-height: 0.36rem;

      &:after {
        position: absolute;
        top: 50%;
        right: -0.08rem;
        margin-top: -0.1rem;
        border: 0.06rem solid;
        border-color: transparent transparent currentColor currentColor;
        transform: rotate(-45deg);
        opacity: .8;
        content: '';
      }

      &.asc-order:after {
        margin-top: -0.02rem;
        transform: rotate(135deg);
      }
    }
  }

  .rank-item__icon-wrap {
    display: flex;
    padding-right: 0.32rem;
    width: 0.64rem;
    align-items: center;
    justify-content: center;

    & .rank-item__icon {
      width: 0.64rem;
    }

    & .rank-item__icon-label {
      position: relative;
    }
  }

  .rank-item__name-wrap {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;

    & .rank-item__name-icon {
      position: relative;
      display: flex;
      width: 0.96rem;
      height: 0.96rem;
      font-size: 0.3rem;
      color: #fff;
      background: #26a2ff;
      align-items: center;
      justify-content: center;
      border-radius: 100%;
    }

    & .rank-item__name {
      padding-left: 0.24rem;
    }
  }

  & /deep/ .rank-item__value {
    display: flex;
    color: #26a2ff;
    align-items: center;
    text-align: right;

    & .negative {
      color: #ff2d55;
    }
  }
  .filterItemsDiv{
    & .filterItemsTitle{
      padding: 0 0.13rem;
      color: #333;
      font-size: 0.3rem;
    }
    & .filterItemsContent{
      display: flex;
      padding-bottom: 0.24rem;
      & .sub__item{
        display: flex;
        margin: 0.24rem 0.13rem 0 0.13rem;
        width: 1.52rem;
        height: 0.72rem;
        background: #f5f7fa;
        border-radius: 0.04rem;
        align-items: center;
        justify-content: center;
        touch-action: none;
        &.selected {
          color: #26a2ff;
          background: #26a2ff33;
        }
        & span{
          font-size: 0.28rem;
        }
      }
    }
  }
</style>
