<template>
  <div>
    <van-nav-bar :title="title" left-text="返回" @click-left="$route_back" left-arrow></van-nav-bar>

    <van-dropdown-menu>
      <van-dropdown-item :title="deptDropdownItemTitle" ref="deptDropdownItem">
        <template slot="title">
          <Wxopendata type="departmentName" :openid="deptDropdownItemTitle"></Wxopendata>
        </template>
        <DeptSelectorDropdown @onConfirm="onConfirmDept" />
      </van-dropdown-item>
      <div @click="sortNumber" class="dropdown-menu__item">
        <span :class="{ 'asc-order': !sort }">{{ sort ? '降序' : '升序' }}</span>
      </div>
    </van-dropdown-menu>
    <div class="tableHeader">排名包含初始分和工龄分</div>
    <div class="body_com has_header">
      <scroller ref="scroller" :on-refresh="onRefresh" :on-infinite="onInfinite">
        <van-cell v-for="(item, index) in list" :key="index" @click="openDetail(item)" noDataText="我也是有底线的" :list="list">
          <template slot="icon">
            <div class="rank-item">
              <icon :name="mapRankIconName[index]" v-if="index < 3 && sort" class="rank-item__icon"></icon>
              <icon name="rank-first" v-if="item.rank == 1 && !sort" class="rank-item__icon"></icon>
              <icon name="rank-second" v-if="item.rank == 2 && !sort" class="rank-item__icon"></icon>
              <icon name="rank-third" v-if="item.rank == 3 && !sort" class="rank-item__icon"></icon>
              <span v-if="item.rank > 3" class="rank-item__icon-label">{{ item.rank }}</span>
            </div>
          </template>
          <template slot="title">
            <div style="display: flex;">
              <userImage :user_name="item.employee_name" :img_url="item.employee_img_url" style="margin-right: 0.1rem"></userImage>
              <span style="line-height: 0.8rem"><Wxopendata type="userName" :openid="item.employee_name"></Wxopendata></span>
            </div>
          </template>
          <template slot="right-icon">
            <span :class="item.point < 0 ? 'text-red' : 'text-blue'" style="line-height: 0.8rem;">{{ item.point }}</span>
          </template>
        </van-cell>
        <noData :list="list" />
      </scroller>
    </div>
  </div>
</template>
<script>
import request from '@/utils/request'
import userImage from '@/components/common/user_image'
import DeptSelectorDropdown from '@/components/common/DeptSelectorDropdown'

import Vue from 'vue'
import { Empty, Picker, DropdownMenu, DropdownItem, DatetimePicker } from 'vant'
Vue.use(Empty)
  .use(Picker)
  .use(DropdownMenu)
  .use(DropdownItem)
  .use(DatetimePicker)
export default {
  // 数据
  data () {
    return {
      title: '累计B分排名',
      list: [],
      filter: {
        page: 1,
        page_size: 20,
        dept_id: '0',
        pt_id: '3',
        sort: 'DESC',
        type: 'all'
      },
      deptDropdownItemTitle: '全公司',
      sort: true,
      mapRankIconName: { 0: 'rank-first', 1: 'rank-second', 2: 'rank-third' }
    }
  },
  // 组件
  components: {
    DeptSelectorDropdown,
    userImage
  },
  // 方法
  methods: {
    // 打开明细列表
    openDetail (item) {
      console.log(item)
      this.$router.push({ name: 'integralDetail', query: { item: JSON.stringify(item), isLj: true } })
    },
    sortNumber () {
      this.sort = !this.sort
      if (this.sort) {
        this.filter.sort = 'DESC'
      } else {
        this.filter.sort = 'ASC'
      }
      this.filter.page = 1
      this.get_list(() => {
        this.$toast.clear()
      })
    },
    onConfirmDept (deptItem) {
      if (deptItem) {
        this.filter.dept_id = deptItem.id
        this.deptDropdownItemTitle = deptItem.name
      } else {
        this.filter.dept_id = 0
        this.deptDropdownItemTitle = '全公司'
      }
      this.$refs.deptDropdownItem.toggle()
      this.$refs.scroller.triggerPullToRefresh()
    },

    get_list (done) {
      let self = this
      request('get', '/api/integral/statistics/ranking', this.filter, 'v2').then(res => {
        done()
        if (res.data.code == 1) {
          self.$refs.scroller.finishInfinite(res.data.data.list.length != 20) // 停止上滚加载下一页，由于服务器端没有统一空数据和正常数据的格式，所以通过total字段来判定数据是否存在下一页
          const { list } = res.data.data
          if (self.filter.page === 1) {
            self.list = list
          } else {
            self.list = self.list.concat(list)
          }
        } else {
          self.$toast(res.data.msg)
        }
      })
    },
    onRefresh (done) {
      this.filter.page = 1
      this.get_list(function () {
        done()
      })
    },
    onInfinite (done) {
      this.filter.page++
      this.get_list(done)
    }
  },
  // 生命周期 --- 创建完成
  created () {},
  // 组件挂载完成
  mounted () {
    this.$nextTick(() => {
      this.$refs.scroller.finishInfinite(false)
    })
  }
}
</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: 0.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;
}
</style>
