<template>
  <div class="performance_list_box">
    <van-nav-bar title="团队绩效" left-text="返回"
     @click-left="$route_back" left-arrow>
     <div class="department" slot="right">
       <DeptSelectorBtn title="选择部门" v-model="depts" :multi="false"></DeptSelectorBtn>
     </div>
     </van-nav-bar>

     <van-search v-model="filter.keyword" placeholder="请输入员工姓名搜索"/>

    <YearMonthPicker v-model="filter.date"></YearMonthPicker>

    <div class="body_com has_header">
      <scroller ref="my_scroller" :on-refresh="refresh" :on-infinite="infinite">
        <van-cell-group v-for="(item, index) in list" :key="index"  @click="getDetail(item)" >
           <van-cell class="efficiency_list" size="large">
            <template slot="icon">
              <userImage
                :id="item.id"
                :img_url ="item.img_url"
                :user_name="item.name"
                width="0.72rem"
                height="0.72rem"
                :fontSize="sizemall"
                style="margin-right: 0.1rem"
              ></userImage>
            </template>
             <template slot="title">
              <span><Wxopendata type="userName" :openid="item.name"></Wxopendata></span>
            </template>
          </van-cell>
          <van-row type="flex" justify="center" gutter="50">
            <van-col class="tasknum" span="8">
              <div style="color:#303133;font-size:0.44rem;padding-bottom:0.1rem;">{{item.work_count}}</div>
              <div style="color:#909399;font-size:0.28rem">任务数</div>
            </van-col>
            <van-col class="tasknum" span="8">
              <div style="color:#303133;font-size:0.44rem;padding-bottom:0.1rem;">{{item.base_point}}</div>
              <div style="color:#909399;font-size:0.28rem">平衡分</div>
            </van-col>
            <van-col class="tasknum" span="8">
              <div style="color:#303133;font-size:0.44rem;padding-bottom:0.1rem;">{{item.review_point}}</div>
              <div style="color:#909399;font-size:0.28rem">最终得分</div>
            </van-col>
          </van-row>
        </van-cell-group>
        <noData style="margin-top: 2rem;" src="static/images/nomerits.png" detail_text="还没有人有绩效包" :list="list"   />
        <center v-if="list !== null && list.length == 0">
          <van-button type="info" @click="addPage">+ 添加绩效包</van-button>
        </center>
      </scroller>
      <div class="add_btn" @click="addPage" v-if="list !== null && list.length > 0&&getRole_two">
        <van-icon name="plus" size="0.44rem" color="#fff" />
      </div>
    </div>

  </div>
</template>

<script>
import Vue from 'vue'
import { Empty, Tab, Tabs, Col, Row, Image } from 'vant'
import YearMonthPicker from '@/components/common/YearMonthPicker'
import userImage from '@/components/common/user_image'
import DeptSelectorBtn from '@/components/common/DeptSelectorBtn'
import request from '@/utils/request'
import {getRole_two, _debounce} from '@/utils/auth'
import moment from 'moment'
Vue.use(Tab).use(Empty)
Vue.use(Tabs).use(Col).use(Row).use(Image)
export default {
  components: {YearMonthPicker, DeptSelectorBtn, userImage},

  name: 'performance_list',
  data () {
    let date = moment().format('YYYY-MM')
    return {
      loading: true,
      sizemall: '0.2',
      dept_id: 0,
      depts: [],
      depart: '选择部门',
      list: null,
      month: '',
      filter: {
        page: 1,
        pt_id: 0,
        page_size: 30,
        date: moment().format('YYYY-MM'),
        keyword: ''
      },
      types_list: {},
      types_list_array: [],
      getRole_two: false
    }
  },
  mounted () {
    this.getRole_two = getRole_two()
  },
  watch: {
    'depts': function (val) {
      this.filter.page = 1
      if (val.length == 0) {
        this.dept_id = 0
      } else {
        this.dept_id = val[0].dept_id
      }
      this.refresh(function () {})
    },
    'filter.date': function (val) {
      this.filter.page = 1
      this.get_point_types(function () {})
      let self = this
      this.$toast.loading({
        message: '正在加载'
      })
      this.refresh(function () {
        self.$toast.clear()
      })
    },
    'filter.keyword': {
      deep: true,
      handler: _debounce(function () {
        this.filter.page = 1
        this.get_point_types(function () {})
      })
    }
  },
  computed: {
    hasData () {
      return this.loading || (Array.isArray(this.list) && this.list.length > 0)
    }
  },
  methods: {
    addPage () {
      this.$router.push({path: 'efficiency_create', query: {package_date: this.filter.date, type: 'add'}})
    },
    getDetail (item) {
      this.$router.push({
        name: 'efficiency_detail',
        query: {
          date: this.filter.date,
          employee_id: item.id
        }
      })
    },
    get_point_types (done) {
      let self = this
      let params = {}
      params.month = self.filter.date
      params.dept_id = self.dept_id
      params.keyword = self.filter.keyword
      params.page = self.filter.page
      this.loading = true
      request('get', '/api/integral/performance/employee', params, 'v3').then(res => {
        done()
        self.$toast.clear()
        if (res.data.code == 1) {
          self.$refs.my_scroller.finishInfinite(res.data.data.list.length != 10) // 停止上滚加载下一页，由于服务器端没有统一空数据和正常数据的格式，所以通过total字段来判定数据是否存在下一页
          var list = res.data.data.list
          if (self.filter.page === 1) {
            self.list = list
          } else {
            self.list = self.list.concat(list)
          }
        } else {
          self.$refs.my_scroller.finishInfinite(true)
        }
      }).finally(() => this.loading = false)
    },

    refresh (done) {
      let self = this
      this.$toast.loading({
        loadingType: 'spinner',
        message: '正在处理'
      })
      setTimeout(() => {
        this.filter.page = 1
        this.get_point_types(function () {
          self.list = []
          done()
        })
      }, 100)
    },
    infinite (done) {
      this.filter.page++
      this.get_point_types(done)
    }
  },
  keep_alive_update: {
    update_list: function (vm, data) {
      vm.filter.page = 1
      vm.get_point_types(function () {})
    },
    // 运用缓存更新方法来完成返回后的更新
    update_demo_list: function (vm, data) {
      for (let i in vm.list) {
        if (vm.list[i].id == data.id) {
          vm.list[i].name = data.name
        }
      }
    },
    // 撤销任务
    update_efficiency_detail_word_list (vm, data) {
      for (let i in vm.list) {
        if (vm.list[i].id == data.id) {
          parseInt(vm.list[i].work_count) - 1
        }
      }
    }
  }
}
</script>

<style scoped>
  .body_com {
    height: calc(100% - 1.8rem);
    position: relative;
  }
  .tasknum {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.26rem 0 0.24rem 0;
  }
  .department {
    color: #fff;
  }
  /deep/ .body_com .van-hairline--top-bottom:after{border:none;}
  /deep/ .body_com .van-hairline-unset--top-bottom:after{border:none;}
  /deep/ .department .van-button{background-color: transparent; border:none; color:#fff;}
  /deep/ .van-nav-bar__right{right:0;}
  .performance_list_box .bg-fff{
    border-bottom:0.02rem solid #f8f8f8;
  }
  .performance_list_box /deep/ .van-search{
      display:block;
      text-align:center;
      padding: 0.2rem 0.32rem 0;
  }
  .performance_list_box /deep/ .van-search .van-field__left-icon{
      display:inline-block;
  }
  .performance_list_box /deep/ .van-search .van-cell__value{
     display:inline-block;
     width:1rem;
  }
  .performance_list_box /deep/ .no-data-text{
    font-size:0.28rem;
  }
  .performance_list_box /deep/ .van-cell-group .van-row{
    margin-left:0.15rem !important;
    margin-right:0.15rem !important;
  }
  /deep/ .efficiency_list .van-cell__title{line-height: 0.72rem;}
  .add_btn{
    background-color: #26A2FF;
    border-radius: 50%;
    width: 1.12rem;
    height: 1.12rem;
    position: fixed;
    right: .48rem;
    bottom: 1.34rem;
    text-align: center;
  }
  .add_btn .van-icon{
    line-height: 1.12rem;
  }
</style>
