<template>
  <div>
    <el-button type="primary" class="div_width" @click="scan">扫码回收</el-button>
    <div>
    <el-table
      v-loading="dataListLoading"
      :data="findEqInfo.list"
      :show-header="showHeader"
      style="width: 100%"
    >
      <el-table-column prop="brandName" style="width: 100%"></el-table-column>
      <el-table-column prop="code" style="width: 100%"></el-table-column>
      <el-table-column prop="type" style="width: 100%"></el-table-column>
      <el-table-column prop="specType" style="width: 100%"></el-table-column>
      <slot></slot>
      <template slot="append">
        <!--
      @infinite: 滚动事件回调函数,当滚动到距离滚动父元素底部特定距离的时候，会被调用
      distance: 这是滚动的临界值。default: 100; 如果到滚动父元素的底部距离小于这个值，那么 loadMore 回调函数就会被调用。
      spinner: 通过这个属性，你可以选择一个你最喜爱旋转器作为加载动画
            'default' | 'bubbles' | 'circles' | 'spiral' | 'waveDots'
      direction: 如果你设置这个属性为top,那么这个组件将在你滚到顶部的时候，调用on-infinite函数
            'top' | 'bottom'
      forceUseInfiniteWrapper: (boolean | string) 强制指定滚动容器，使用CSS 选择器
      identifier: 识别号，改变时刷新
      -->
        <infinite-loading
          @infinite="loadMore"
          ref="infiniteLoading"
          :distance="100"
          spinner="circles"
          :identifier="infiniteId"
          
        >
          <!--   orce-use-infinite-wrapper 属性在存在多个 el-table 需要更详细的css选择器   -->
          <div class="no-more" slot="no-more">我~是有底线的 (～￣▽￣)～</div>
          <div class="no-more" slot="no-results">暂无结果 Ծ‸Ծ</div>
          <div class="no-more" slot="error">出错了 (╯‵□′)╯︵┻━┻</div>
        </infinite-loading>
      </template>
    </el-table>
    </div>
  </div>
</template>>
<script>
import { apiFindStaffDevice } from "@/api/api_equipment";
import InfiniteLoading from "vue-infinite-loading";
import * as dd from "dingtalk-jsapi";
export default {
  // 自定义指令
  //  vue 官方文档：https://cn.vuejs.org/v2/guide/custom-directive.html
  components: {
    InfiniteLoading
  },
  data() {
    return {
      isShowSearch: true,
      data: [],
      name: "",
      categorys: "",
      input: "",
      dataListLoading: false,
      strFirs: "",
      strSec: "",
      strThir: "",
      idFirs: "",
      idSec: "",
      idThir: "",
      typeIndex: 0, //0现在是1级 1二级2三级
      showHeader: false,
      findEqInfo: {
        employee: false,
        userId: 0,
        currPage: 1,
        pageSize: 20,
        totalPage: 1,
        list: []
      },
      infiniteId: new Date()
    };
  },
  created() {
    // this.handleGetImgCaptcha()
  },
  mounted() {
    if (this.$route.query.type == 3) {
      //个人
      this.findEqInfo.employee = true;
    } else if (this.$route.query.type == 4) {
      //使用地
      this.findEqInfo.employee = false;
    }
    this.findEqInfo.userId = this.$route.query.id;
    this.getData();
  },
  methods: {
    getData() {
      console.log("获取数据");
      console.log(this.name);
      console.log(this.categorys);
      this.dataListLoading = true;
      apiFindStaffDevice(this.findEqInfo).then((data) => {
        console.log(data);
        if (data && data.code === 0) {
          this.findEqInfo.list = [...this.findEqInfo.list, ...data.data.list]
          this.findEqInfo.currPage = data.data.currPage
          this.findEqInfo.totalPage = data.data.totalPage
          console.log("currPage", this.findEqInfo.currPage)
          console.log("totalPage", this.findEqInfo.totalPage)
          if(this.findEqInfo.currPage == this.findEqInfo.totalPage){
              this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete')
            }else{
              this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded')
            }
        } else {
          this.findEqInfo.list = []
          this.findEqInfo.currPage = 1
          this.findEqInfo.totalPage = 1
          this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete')
        }
        this.dataListLoading = false;
        //this.$refs.InfiniteLoading.$emit("$infiniteLoading:loaded");
      });
    },
    loadMore($state) {
      console.log("loadMore")
      console.log("currPage", this.findEqInfo.currPage)
      console.log("totalPage", this.findEqInfo.totalPage)
      if(this.findEqInfo.currPage < this.findEqInfo.totalPage){
        this.findEqInfo.currPage++
        this.getData()
        /*apiFindStaffDevice(this.findEqInfo).then((data) => {
        console.log(data);
          if (data && data.code === 0) {
            this.findEqInfo.list = [...this.findEqInfo.list, ...data.data.list]
            this.findEqInfo.currPage = data.data.currPage
            this.findEqInfo.totalPage = data.data.totalPage
            console.log("currPage", this.findEqInfo.currPage)
            console.log("totalPage", this.findEqInfo.totalPage)
            if(this.findEqInfo.currPage == this.findEqInfo.totalPage){
              $state.complete()// 全部加载完成
            }else{
              $state.loaded()//本次加载完成
            }
            
          } else {
            this.findEqInfo.list = []
            this.findEqInfo.currPage = 1
            this.findEqInfo.totalPage = 1
            $state.complete()// 全部加载完成
          }
        })*/
      }
      
    },
    scan() {
      this.$cookie.set('idUser', this.findEqInfo.userId)
      this.$router.push({name: 'devicedetail', query: {type: 4}})
    },
    reset () {
      this.findEqInfo.list = []
      this.findEqInfo.currPage = 1
      this.findEqInfo.totalPage = 1
      this.infiniteId += 1
    }
  },
};
</script>

<style>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 10px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5f2f1;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.div_height {
  height: 38px;
}
.div_width {
  width: 100%;
}
.width_100 {
  width: 100px;
}
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  padding: 1em;
}
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 1px solid;
}
.flex_son {
  width: 100%;
  height: 100%;
  border: 0x solid;
}
</style>