<template>
  <div class="team-data__container">
    <van-nav-bar title="团队数据" left-text="返回" @click-left="$route_back" left-arrow/>
    <van-search v-model="keyword" placeholder="搜索姓名"/>
    <YearMonthPicker v-model="month"/>
    <div class="team-search__bar">
      <van-dropdown-menu>
        <van-dropdown-item :title="deptTitle" ref="deptDropdownItem">
          <template slot="title">
            <div class="deptTit font-flex-word">
              <Wxopendata type="departmentName" :openid="deptTitle"></Wxopendata>
            </div>
          </template>
          <DeptSelectorDropdown @onConfirm="onConfirmDept" content-height="3.5rem"/>
        </van-dropdown-item>
        <div class="dropdown-menu__item" @click.stop="pointSort(1,2)">
          <span :class="{asc: sortType === 1,desc: sortType === 2}">A分</span>
        </div>
        <div class="dropdown-menu__item" @click.stop="pointSort(3,4)">
          <span :class="{asc: sortType === 3,desc: sortType === 4}">B分</span>
        </div>
        <!-- <div class="dropdown-menu__item" @click.stop="pointSort(5,6)">
          <span :class="{asc: sortType === 5,desc: sortType === 6}">绩效分</span>
        </div> -->
      </van-dropdown-menu>
    </div>
    <div class="team-list__content">
      <scroller ref="scroller" :on-refresh="onRefresh" :on-infinite="onInfinite">
        <div class="team-list__item" v-for="(item, i) in sortData" :key="i" @click="viewDetail(item)">
          <div class="team-item__name">
            <span><Wxopendata type="userName" :openid="item.employee_name"></Wxopendata></span>
            <van-icon name="arrow"/>
          </div>
          <div class="team-item__text"><span>{{ item.a }}</span></div>
          <div class="team-item__text"><span>{{ item.b }}</span></div>
          <!-- <div class="team-item__text"><span>{{ item.performance }}</span></div> -->
        </div>

        <van-empty v-if="data == null || (data != null && data.length == 0)" description="暂无数据..."/>

      </scroller>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import moment from 'moment'
import request from '@/utils/request'
import {DropdownMenu, DropdownItem, Search, Icon} from 'vant'
import YearMonthPicker from '@/components/common/YearMonthPicker'
import DeptSelectorDropdown from '@/components/common/DeptSelectorDropdown'
import {_debounce} from '@/utils/auth'
Vue.use(DropdownMenu).use(DropdownItem).use(Search).use(Icon)

export default {
  name: 'team_data',
  data () {
    return {
      data: null,
      nativeData: null,
      sortType: -1,
      keyword: '',
      deptTitle: '全公司',
      month: moment().format('YYYY-MM')
    }
  },
  components: {DeptSelectorDropdown, YearMonthPicker},
  watch: {
    month () {
      this.onMonthPickerChange()
    },
    keyword: {
      deep: true,
      handler: _debounce(function () {
        this.onMonthPickerChange()
      })
    }
  },
  computed: {
    sortData () {
      if (!Array.isArray(this.data) || this.sortType === -1) {
        return this.nativeData
      }
      return this.data.sort(this.mappintSort[this.sortType])
    }
  },
  created () {
    this.mappintSort = {
      1: (o, p) => o.a - p.a,
      2: (o, p) => p.a - o.a,
      3: (o, p) => o.b - p.b,
      4: (o, p) => p.b - o.b,
      5: (o, p) => o.performance - p.performance,
      6: (o, p) => p.performance - o.performance
    }
    this.searchParams = {dept_id: null, page: 1, page_size: 10}
  },
  methods: {
    pointSort (ascVal, descVal) {
      if (this.sortType !== ascVal && this.sortType !== descVal) {
        this.sortType = descVal
      } else if (this.sortType === descVal) {
        this.sortType = ascVal
      } else {
        this.sortType = -1
      }
    },
    onMonthPickerChange () {
      this.isFirstLoad = false
      this.searchParams.page = 1
      this.onInfinite()
    },
    viewDetail (item) {
      this.$router.push({name: 'statistics_personal', query: {id: item.employee_id, type: 2, month: this.month}})
    },
    onConfirmDept (item) {
      this.searchParams.page = 1
      if (item) {
        this.deptTitle = item.name
        this.searchParams.dept_id = item.id
      } else {
        this.deptTitle = '全公司'
        this.searchParams.dept_id = null
      }
      this.isFirstLoad = false
      this.$refs.deptDropdownItem.toggle()
      this.onInfinite()
    },
    onRefresh (done) {
      this.searchParams.page = 1
      this.getData(done)
    },
    onInfinite () {
      if (!this.isFirstLoad) {
        this.isFirstLoad = true
        this.$toast.loading({message: '正在加载'})
        this.getData(() => this.$toast.clear())
      } else {
        this.getData()
      }
    },
    getData (callback = function () {}) {
      const params = {...this.searchParams, month: this.month, keyword: this.keyword}
      request('get', '/api/integral/statistics/list', params).then(res => {
		 callback()
        if (res.data.code === 1) {
          const list = res.data.data.list
          if (this.searchParams.page === 1) {
            this.data = list
            this.nativeData = [].concat(list)
          } else {
            this.data = this.data.concat(list)
            this.nativeData = this.nativeData.concat(list)
          }
          this.searchParams.page++
          this.$refs.scroller.finishInfinite(list.length < this.searchParams.page_size)
        } else {
          this.$refs.scroller.finishInfinite(true)
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
  .team-data__container {
    & /deep/ .van-nav-bar {
      background-color: #26a2ff;
    }

    & .team-search__bar {
      position: relative;
      margin-top: 0.24rem;

      & /deep/ .van-dropdown-menu__item {
        padding-left: 0.32rem;
        justify-content: flex-start;
      }

      & /deep/ .van-ellipsis {
        overflow: visible;
      }

      & /deep/ .van-dropdown-menu__title {
        padding-left: 0;
        padding-right: 0.16rem;
        font-weight: 600;
      }

      & .dropdown-menu__item {
        display: flex;
        flex: 0.75;
        min-width: 0;
        font-size: 0.3rem;
        color: #323233;
        align-items: center;
        cursor: pointer;

        & > span {
          position: relative;
          padding-right: 0.16rem;
          font-weight: 600;

          &.asc, &.asc:before {
            color: #26a2ff;
          }

          &.desc, &.desc:after {
            color: #26a2ff;
          }

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

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

    & .team-list__content {
      position: relative;
      height: calc(100% - 4.32rem);

      .team-list__item {
        position: relative;
        padding: 0.32rem 0.1rem 0.32rem 0.32rem;
        display: flex;
        font-size: 0.32rem;
        background: #fff;
        flex-direction: row;

        &:not(:last-child)::after {
          position: absolute;
          box-sizing: border-box;
          content: ' ';
          pointer-events: none;
          right: 0;
          bottom: 0;
          left: 0rem;
          border-bottom: 1px solid #ebedf0;
          -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
        }
      }

      .team-item__name {
        display: flex;
        flex: 1;
        align-items: center;

        & > span {
          max-width: 1.5rem;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        & /deep/ .van-icon {
          position: relative;
          display: flex;
          top: 0.02rem;
        }
      }

      & .team-item__text {
        display: flex;
        padding-right: 0.1rem;
        flex: 0.65;
        color: #606266;
      }
    }
  }
  .deptTit{
    max-width: 2rem;
  }
</style>
