<template>
  <div class="performance_list_box">
    <van-nav-bar title="员工绩效" left-text="返回" @click-left="$route_back" left-arrow></van-nav-bar>

    <YearMonthPicker v-model="filter.month"></YearMonthPicker>
    <van-tabs v-model="filter.type" :border="false">
      <van-tab title="我审批的" name="review"></van-tab>
      <van-tab title="我参与的" name="join"></van-tab>
    </van-tabs>

    <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
                :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.progress}}%</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" />
      </scroller>
    </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 request from '@/utils/request'
import moment from 'moment'
Vue.use(Tab).use(Empty)
Vue.use(Tabs).use(Col).use(Row).use(Image)
export default {
  components: {YearMonthPicker, userImage},
  name: 'performance_list',
  data () {
    return {
      loading: true,
      sizemall: '0.2',
      list: null,
      month: '',
      filter: {
        type: 'review',
        month: moment().format('YYYY-MM')
      }
    }
  },
  created () {
    this.$nextTick(() => {
      this.$refs.my_scroller.finishInfinite(false)
    })
    this.get_list(function () {})
  },
  watch: {
    'filter.month': function (val) {
      this.get_list(function () {})
      let self = this
      this.$toast.loading({
        message: '正在加载'
      })
      this.refresh(function () {
        self.$toast.clear()
      })
    },
    'filter.type': function (val) {
      let self = this
      self.get_list(function () {})
      self.list = null
      self.$toast.loading({
        message: '正在加载'
      })
      self.refresh(function () {
        self.$toast.clear()
      })
    }
  },
  computed: {
    hasData () {
      return this.loading || (Array.isArray(this.list) && this.list.length > 0)
    }
  },
  methods: {
    getDetail (item) {
      this.$router.push({
        name: 'efficiency_detail',
        query: {
          date: this.filter.month,
          employee_id: item.id
        }
      })
    },
    get_list (done) {
      let self = this
      this.loading = true
      request('get', '/api/integral/performance/list', self.filter).then(res => {
        self.$toast.clear()
        if (res.data.code == 1) {
          self.$refs.my_scroller.finishInfinite(true)
          self.list = res.data.data.list
        }
        done()
      }).finally(() => this.loading = false)
    },

    refresh (done) {
      let self = this
      this.$toast.loading({
        loadingType: 'spinner',
        message: '正在处理'
      })
      self.get_list(done)
    },
    infinite (done) {
      this.get_list(done)
    }
  },
  keep_alive_update: {
    // 运用缓存更新方法来完成返回后的更新
    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
        }
      }
    }
  }
}
</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;
  }
  /deep/ .body_com .van-hairline--top-bottom:after{border:none;}
  /deep/ .body_com .van-hairline-unset--top-bottom:after{border:none;}
  /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;}
</style>
