<template>
  <div>
    <van-nav-bar title="数据列表" left-text="返回" @click-left="$route_back" left-arrow></van-nav-bar>
    <van-dropdown-menu>
      <van-dropdown-item title="选择一个部门" ref="item">
        <div class="">
          <DeptSelectorDropdown :multi="false"></DeptSelectorDropdown>
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>
    <div class="body_com has_header">

      <scroller ref="my_scroller" :on-refresh="refresh" :on-infinite="infinite">
        <van-cell-group>
          <van-cell v-for="(item, index) in list" :key="index" :title="item.name" value="内容" label="描述信息" />
        </van-cell-group>
      </scroller>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { DropdownMenu, DropdownItem } from 'vant';
  import DeptSelectorDropdown from '@/components/common/DeptSelectorDropdown'
  Vue.use(DropdownMenu);
  Vue.use(DropdownItem);
  import request from '@/utils/request'
  export default {
    name: 'list',
    components: {DeptSelectorDropdown},
    data () {
      return {
        list: [],
        filter: {
          page: 1,
          type: 'all',
          status: 'waiting',
          page_size:30
        }
      }
    },
    created () {
      this.$nextTick(() => {
        this.$refs.my_scroller.finishInfinite(false)
      })
    },
    methods: {
      get_list (done) {
        let self = this
        request('get','/api/integral/pk/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.list.total){
              for (let i in res.data.data.list.list) {
                self.list.push(res.data.data.list.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)
      }
    },
    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% - 0.92rem);
    position: relative;
  }
  /deep/ .body_com .van-hairline--top-bottom:after{border:none;}
  /deep/ .body_com .van-hairline-unset--top-bottom:after{border:none;}
</style>

