<template>
  <div>
    <van-nav-bar :title="title" left-text="返回" @click-left="$route_back" left-arrow></van-nav-bar>
    <div class="body_com has_header">
      <scroller ref="scroller" :on-refresh="onRefresh" :on-infinite="onInfinite">

        <div style="margin: 0.4rem;">

          <div ref="noticeRef" style="clear: both;">
            <van-notice-bar v-if="novice" wrapable mode="closeable" @close="closeNotice">可自定义设置团队、项目、管理者、执行人员等分组，进行自定义排名。</van-notice-bar>
          </div>

          <van-cell-group v-show="list !== null && list.length > 0">
            <van-cell title="+ 新增分组" @click="jump(0)" :title-class="['text-blue']" is-link />
          </van-cell-group>

          <van-cell-group v-for="(item,index) in list" :key="index" >
            <van-cell center :label="'共'+item.employees.length+'人参与排名'">
              <template #title>
                <span class="custom-title">{{item.name}}</span>
              </template>
              <template #right-icon>
                <van-icon name="edit" @click="jump(item.id)" />
              </template>
            </van-cell>
            <van-cell @click="openDetail(item)" title="查看排名" is-link/>
          </van-cell-group>

          <div class="noData" v-show="list !== null && list.length == 0">
            <p>暂无分组</p>
            <div>通过分组您可针对性地查看对应人员的B分排名</div>
          </div>

          <div v-show="list !== null && list.length == 0">
            <van-row>
              <van-col span="24">
                <van-button type="info" block @click="jump(0)">新增分组</van-button>
              </van-col>
            </van-row>
          </div>

        </div>

      </scroller>
    </div>
  </div>
</template>
<script>
import request from '@/utils/request'
import Vue from 'vue'
import { Empty, Picker, DropdownMenu, DropdownItem, DatetimePicker, NoticeBar } from 'vant'
Vue.use(Empty).use(Picker).use(DropdownMenu).use(DropdownItem).use(DatetimePicker).use(NoticeBar)

export default {
  // 数据
  data () {
    return {
      title: '自定义分组B分排名',
      list: [],
      filter: {
        page: 1
      },
      loading: true,
      novice: false
    }
  },
  // 组件
  components: {},
  // 方法
  methods: {
    closeNotice () {
      window.plus ? plus.storage.setItem('bRankNovice') : localStorage.setItem('bRankNovice', true)
      this.getLocalStorage()
    },
    getLocalStorage () {
      if (!localStorage.getItem('bRankNovice') || (window.plus && !plus.storage.getItem('bRankNovice'))) {
        this.novice = true
      } else {
        this.novice = false
      }
    },

    openDetail (item) {
      this.$router.push({name: 'customBRankDetail', query: {id: item.id, name: item.name}})
    },
    jump (id) {
      id ? this.$router.push({name: 'customBRankItem', query: {type: 'edit', id: id}}) : this.$router.push({name: 'customBRankItem'})
    },
    // 加载
    showLoading () {
      this.$toast.loading({
        loadingType: 'spinner',
        message: '正在处理'
      })
    },
    onRefresh (done) {
      this.filter.page = 1
      this.getData(done)
    },
    onInfinite () {
      if (!this.isFirstLoad) {
        this.isFirstLoad = true
        this.$toast.loading({message: '正在加载'})
        this.getData(() => this.$toast.clear())
      } else {
        this.filter.page++
        this.getData()
      }
    },
    getData (callBack) {
      this.showLoading()
      const params = {...this.filter}
      request('get','/api/integral/statistics/groups',params).then(res => {
        if (res.data.code === 1) {
          const list = res.data.data.list
          if (this.filter.page === 1) {
            this.list = list
          } else {
            this.list = this.data.concat(list)
          }
          this.$refs.scroller.finishInfinite(true)
        } else {
          this.$refs.scroller.finishInfinite(true)
        }
      }).catch(e => console.error(e)).finally(() => {
        this.dataLoading = false
        this.loading = false
        this.$toast.clear()
        callBack && callBack()
      })
    }
  },
  // 组件挂载完成
  mounted () {
    this.getLocalStorage()
  },
  keep_alive_update: {
    updateCustomBRankItem (vm, data) {
      for (let i in vm.list) {
        if (vm.list[i].id == data.id) {
          vm.list[i].name = data.name
          vm.list[i].employees = data.employees
        }
      }
    },
    addCustomBRankItem (vm, data) {
      vm.list.push({name: data.name, employees: data.employees, id: data.id})
    },
    delCustomBRankItem (vm, data) {
      for (let i in vm.list) {
        if (vm.list[i].id == data.group_id) {
          vm.list.splice(i, 1)
        }
      }
    }
  }
}
</script>
<style scoped lang="less">
  .body_com{height: calc(100% - 1rem); position: relative;}
  .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);
      }
    }
  }
  .tableHeader{
    font-size: 0.28rem;
    color: #969799;
    padding: 0.1rem 0.32rem;
  }
  .rank-item{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-right: 0.32rem;
    width: 0.64rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    & .rank-item__icon{
      width: 0.64rem;
    }
  }
  .text-red{
    color: rgb(245, 108, 108);
  }
  .text-blue{
    color: #26A2FF;
  }
  .noData{
    padding: 2rem 0 1rem;
    text-align: center;
    & div{
      font-size: 0.2rem;
      color: #969799;
    }
  }
</style>
