<template>
  <div>
    <van-nav-bar title="全部管理者" left-text="返回" @click-left="$route_back" left-arrow right-text="添加" @click-right="add"></van-nav-bar>
    <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" @click="detail" :key="index">
          <van-cell :title="item.remark.customize" :value="item.status_mark" :label="item.sign_id">
           <template slot="icon">
              <van-image  src="static/images/e66f.jpg" round width="1rem" height="1rem" style="margin-right: 0.12rem;" type="contain"  />
            </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;">33</div>
              <div style="color:#909399;font-size:0.28rem">A分</div>
            </van-col>
            <van-col class="tasknum" span="8">
              <div style="color:#303133;font-size:0.44rem;padding-bottom:0.1rem;">44</div>
              <div style="color:#909399;font-size:0.28rem">B分</div>
            </van-col>
            <van-col class="tasknum" span="8">
              <div style="color:#303133;font-size:0.44rem;padding-bottom:0.1rem;">22</div>
              <div style="color:#909399;font-size:0.28rem">绩效分</div>
            </van-col>
          </van-row>


        </van-cell-group>
      </scroller>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { Tab, Tabs ,Image} from 'vant';
  Vue.use(Tab);
  Vue.use(Tabs).use(Image);
  import request from '@/utils/request'
  export default {
    name: 'manager_list',
    data () {
      return {
        list: [],
        filter: {
          page: 1,
          pt_id: 0,
          page_size: 30,
          type: 'waiting',
        },
        types_list: {},
        types_list_array: []
      }
    },
    created () {
      this.$nextTick(() => {
        this.$refs.my_scroller.finishInfinite(false)
      })
    },
    methods: {
      add(){
        this.$router.push({name: 'edit_user_power'})
      },
      get_list (done) {
        let self = this
        request('get','/api/integral/review/apply/list',self.filter).then((res) => {
          done()
          if(res.data.code == 1){
            self.$refs.my_scroller.finishInfinite(res.data.data.list.length != 30) //停止上滚加载下一页，由于服务器端没有统一空数据和正常数据的格式，所以通过total字段来判定数据是否存在下一页
            if(res.data.data.total){
              for (let i in res.data.data.list) {
                self.list.push(res.data.data.list[i])
              }
            }
            self.filter.page++
          }else{
            self.$refs.my_scroller.finishInfinite(true)
          }
        })
      },
      refresh (done) {
        let self = this
        setTimeout(() => {
          this.filter.page = 1
          this.get_list(function () {
            self.list = []
            done()
          })
        }, 100)
      },
      infinite (done) {
        this.get_list(done)
      },
      // 积分申请详情
      detail(data){
        this.$router.push({name: 'manager_detail', query: {employee_id: data.id}})
      }

    }
  }
</script>

<style scoped>
  .body_com {
    height: calc(100% - 0.92rem);
    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;}
</style>

