<!--MiniLoader库存列表-->
<template>
  <div>
    <div class="background" style="height: 100%">
      <div class="title">库存表</div>
      <el-row style="margin-left: 20px; margin-top: 10px">
        <el-table :data="tableData" border style="width: calc(50vw - 30px);" height="19vh"
                  :cell-style="{'text-align':'center'}" :header-cell-style="{'text-align':'center'}" ref="tableRef">
          <el-table-column prop="location" label="库位" />
          <el-table-column prop="goodsId" label="物料编号"/>
          <el-table-column prop="batch" label="批次" />
          <el-table-column prop="goodsNum" label="数量" />
          <el-table-column prop="status" label="状态" />
          <el-table-column prop="inData" label="入库日期" />
        </el-table>
      </el-row>

    </div>
  </div>
</template>

<script>
// import  《组件名称》  from '《组件路径》 ';

export default {
  // import 引入的组件需要注入到对象中才能使用
  components: {},
  props: [],
  emits: [],
  data() {
    // 这里存放数据
    return {
      tableData:[
        {location: "T111", goodsId: "24234", batch: "111", goodsNum: "111", status: "111", inData: "111"},
        {location: "S124434", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
        {location: "T111", goodsId: "111", batch: "111", goodsNum: "500.30", status: "111", inData: "9999999"},
        {location: "T111", goodsId: "423423", batch: "111", goodsNum: "111", status: "111", inData: "111"},
        {location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
        {location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
        {location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
        {location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
        {location: "T111", goodsId: "1423423411", batch: "111", goodsNum: "111", status: "111", inData: "111"},
        {location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
        {location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
        {location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
        {location: "T111", goodsId: "24234", batch: "111", goodsNum: "111", status: "111", inData: "111"},
        {location: "S124434", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
        {location: "T111", goodsId: "111", batch: "111", goodsNum: "500.30", status: "111", inData: "9999999"},
        {location: "T111", goodsId: "423423", batch: "111", goodsNum: "111", status: "111", inData: "111"},
        {location: "T111", goodsId: "111", batch: "111", goodsNum: "111", status: "111", inData: "111"},
      ]
    }
  },
  // 计算属性 类似于 data 概念
  computed: {},
  // 监控 data 中的数据变化
  watch: {},
  // 方法集合
  methods: {
    autoRoll() {
      const tableBody = this.$refs.tableRef.$el.querySelector('.el-scrollbar__wrap');
      if (tableBody) {
        setInterval(() => {
          if(this.tableData === undefined || this.tableData.length === 0) {
            return
          }
          tableBody.scrollTop += 1
          if (tableBody.clientHeight + tableBody.scrollTop === tableBody.scrollHeight) {
            tableBody.scrollTop = 0
          }
        }, 50)
      } else {
        console.log('没有找到滚动位置')
      }
    }
  },
  // 组合式 API
  setup() {
  },
  // 创建之前
  beforeCreate() {
  },
  // 创建完成(可以访问 this 实例)
  created() {
  },
  // 生命周期 - 挂载之前
  beforeMount() {
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {
    this.autoRoll()
  },
  // 更新之前
  beforeUpdate() {
  },
  // 更新之后
  updated() {
  },
  // 销毁之前
  beforeUnmount() {
  },
  // 销毁完成
  unmounted() {
  }
}
</script>

<style scoped>
.title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #e2e2e2;
  padding-left: 25px;
  padding-top: 18px;
}
.background {
  position: relative;
  height: 100%;
  width: 100%;
}
.title:before {
  position: absolute;
  height: 1.2rem;
  width: 4px;
  background: #49bcf7;
  border-radius: 5px;
  content: "";
  left: 15px;
  top: 22px;
}
</style>