<template>
  <div class="mrd-container">
    <van-nav-bar title="管理者奖扣" left-text="返回" @click-left="$route_back" left-arrow>
      <!-- <div class="department" slot="right">
        <DeptSelectorBtn title="选择部门" v-model="dept" :multi="false"></DeptSelectorBtn>
      </div> -->
    </van-nav-bar>

   <van-dropdown-menu>
      <van-dropdown-item :title="dateDropdownItemTitle" ref="dateDropdownItem">
        <van-datetime-picker v-model="month" type="year-month" :show-toolbar="false" item-height="40" />
        <div class="date-picker__toolbar">
          <van-button class="reset-button button-border-none" block square color="rgba(38,162,255,0.2)" @click="onResetDate">重置</van-button>
          <van-button class="button-border-none" block square type="info" @click="onConfirmDate">确认</van-button>
        </div>
      </van-dropdown-item>
      <van-dropdown-item :title="deptDropdownItemTitle" ref="deptDropdownItem">
        <template slot="title">
          <Wxopendata type="departmentName" :openid="deptDropdownItemTitle"></Wxopendata>
        </template>
        <DeptSelectorDropdown @onConfirm="onConfirmDept" />
      </van-dropdown-item>
      <van-dropdown-item v-model="sort" :options="sortArr" />
    </van-dropdown-menu>

    <div class="tableHeader flex-box flex-v-ce" v-show="dataList !== null && dataList.length > 0">
      <span class="flex-5" style="width: 40%;">管理者</span>
      <span class="flex-4" style="text-align: right;">人均奖分（次）</span>
      <span class="flex-4" style="text-align: right;">人均扣分（次）</span>
    </div>
    <div class="mrd-content">
      <scroller ref="scroller" :on-refresh="onRefresh" :on-infinite="onInfinite">
        <div class="flex-box flex-v-ce data_list" v-for="(item, index) in dataList" :key="index" @click="viewDetail(item)">
          <div class="flex-box flex-v-ce flex-2">
            <userImage :img_url="item.img_url" :user_name="item.name" width="0.72rem" height="0.72rem" fontSize="0.2" style="margin-right: 0.1rem;"></userImage>
            <div class="list_name">
              <p>{{ item.name }}</p>
              <p class="scope">管理{{ item.scope_count || 0 }}人</p>
            </div>
          </div>
          <div class="two flex-1">{{ item.reward_count }}</div>
          <div class="two flex-1">{{ item.deduct_count }}</div>
        </div>
        <noData :list="dataList" />
      </scroller>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import moment from 'moment'
import request from '@/utils/request'
import userImage from '@/components/common/user_image'
import YearMonthPicker from '@/components/common/YearMonthPicker'
import DeptSelectorBtn from '@/components/common/DeptSelectorBtn'
import DeptSelectorDropdown from '@/components/common/DeptSelectorDropdown'
import { Empty, Picker, DropdownMenu, DropdownItem, DatetimePicker, List } from 'vant'

Vue.use(Empty)
  .use(Picker)
  .use(DropdownMenu)
  .use(DropdownItem)
  .use(DatetimePicker)
  .use(List)
export default {
  name: 'manager_reward_deduction_new',
  components: { YearMonthPicker, DeptSelectorBtn, DeptSelectorDropdown, userImage },
  data () {
    return {
      data: null,
      dept: [],
      keyword: null,
      loading: true,
      checkedAllStandard: false,
      month: new Date(),
      dateDropdownItemTitle: moment().format('YYYY年MM月'),
      deptDropdownItemTitle: '全公司',
      sort: 1,
      sortArr: [{ text: '奖分次数最多', value: 1 }, { text: '扣分次数最多', value: 0 }],
      formData: {
        page: 1,
        page_size: '10',
        month: moment().format('YYYY-MM')
      },
      dataList: [],
      islog: false
    }
  },
  watch: {
    sort (val) {
      if (val) {
        this.dataList.sort(this.compare('reward_count'))
      } else {
        this.dataList.sort(this.compare('deduct_count'))
      }
    }
  },
  methods: {
    compare (property) {
      return function (a, b) {
        var value1 = a[property]
        var value2 = b[property]
        return value2 - value1
      }
    },
    onConfirmDept (deptItem) {
      if (deptItem) {
        this.formData.dept_id = deptItem.id
        this.deptDropdownItemTitle = deptItem.name
      } else {
        this.formData.dept_id = '0'
        this.deptDropdownItemTitle = '全公司'
      }
      this.$refs.deptDropdownItem.toggle()
      this.$refs.scroller.triggerPullToRefresh()
    },
    onResetDate () {
      this.month = new Date()
      this.dateDropdownItemTitle = moment().format('YYYY年MM月')
    },
    onConfirmDate () {
      this.formData.month = moment(this.month).format('YYYY-MM')
      this.dateDropdownItemTitle = moment(this.month).format('YYYY年MM月')
      this.$refs.dateDropdownItem.toggle()
      this.$refs.scroller.triggerPullToRefresh()
    },

    onRefresh (done) {
      this.islog = false
      this.formData.page = 1
      this.getData(done)
    },
    onInfinite (done) {
      if (!this.islog) {
        this.formData.page++
        this.$toast.loading({message: '正在加载'})
        this.getData(() => this.$toast.clear())
      }
    },
    getData (callBack) {
      request('get','/api/integral/statistics/prize/list',this.formData,'v3').then(res => {
		callBack()
        if (res.data.code === 1) {
          const list = res.data.data.list || []
          if (this.formData.page == 1) {
            this.dataList = list
          } else {
            this.dataList = this.dataList.concat(list)
          }
          if (this.sort) {
            this.dataList.sort(this.compare('reward_count'))
          } else {
            this.dataList.sort(this.compare('deduct_count'))
          }
          if (list.length !== 10) {
            this.islog = true
          }
          this.$refs.scroller.finishInfinite(list.length != 10) // 停止上滚加载下一页，由于服务器端没有统一空数据和正常数据的格式，所以通过total字段来判定数据是否存在下一页
        } else {
          this.$refs.scroller.finishInfinite(true)
        }
      })
    },
    viewDetail (item) {
      this.$router.push({ name: 'reward_deduction_statistics', query: { employee_id: item.id, month: this.formData.month } })
    }
  }
}
</script>

<style scoped lang="less">
.data_list{
  background-color: #fff;
  padding: 0.24rem 0.32rem;
}
.mrd-container {
  & .mrd-content {
    position: relative;
    height: calc(100vh - 2.5rem);
  }
}
.date-picker__toolbar {
  display: flex;
  flex-direction: row;

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

  & .button-border-none {
    border: transparent !important;
  }
}
.tableHeader {
  font-size: 0.28rem;
  color: #969799;
  padding: 0.1rem 0.32rem;
  display: flex;

  & span {
    display: inline-block;
  }
}
.list_name {
   overflow: hidden;
    p {
      width: 2.5rem;
      margin: 0;
      font-size: 0.3rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    & .scope {
      font-size: 0.24rem;
    }
 }
.two {
    text-align: center;
    line-height: 0.72rem;
 }
</style>
